P2365 任務安排 題解
阿新 • • 發佈：2020-11-29
目錄：
- Jquery簡介
- Jquery物件和DOM物件
- 常用選擇器
- Jquery常用指令碼
- Ajax
一、Jquery
1.1 簡介
jQuery簡潔的語法和跨瀏覽器的相容性，極大地簡化了JavaScript開發人員遍歷HTML文件、操作DOM、處理事件、執行動畫和開發AJAX的操作。
1.2 特點
- 免費、開源、便捷
- 擴充套件性強、外掛豐富
- 多瀏覽器支援
1.3 第一個程式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello jQuery</title>
</head>
<body>
<script src="
第一個Jquery
二、Jquery物件和DOM物件
2.1 DOM物件
使用DOM API操作獲得的元素物件叫DOM物件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM元素</title>
</head>
<body>
<h2>DOM元素</h2>
<p id="foo">Foo</p>
<p id="bar
DOM示例
2.2 Jquery物件
簡化操作。通過Jquery包裝DOM物件再產生的物件就是Jquery物件，也稱為包裝集。每個包裝集都可包含0到N個DOM元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery物件</title>
</head>
<body>
<h2>jQuery物件</h2>
<p id="foo">Foo</p>
<p id="bar">Bar</p>
<script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
<script type="text/javascript">
//從文件中獲得id為foo的jQuery物件
var $foo=$("#foo");
//修改$foo元素的HTML內容為Foo jQuery
$foo.html("Foo jQuery");
//獲得頁面中所有的p標籤元素
var $items=$("p");
//從控制檯輸出元素個數
console.log($items.size());
//遍歷並修改元素的HTML內容
$items.html($items.html()+" jQuery");
</script>
</body>
</html>
Jquery物件
2.3 DOM轉換為Jquery
一：工廠方法：document.GetElementById("foo");
二：簡化形式：$("#foo");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM轉換成jQuery物件</title>
</head>
<body>
<h2>DOM轉換成jQuery物件</h2>
<p id="foo">Foo</p>
<p id="bar">Bar</p>
<script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
<script type="text/javascript">
//方法一
//在文件中獲得id為foo的DOM物件
var foo=document.getElementById("foo");
//將DOM物件轉換成jQuery物件
var $foo1=jQuery(foo);
var $foo2=$(foo);
//呼叫jQuery物件中的方法
$foo1.html("Foo jQuery");
$foo2.css("color","red");
//方法二
//獲得文件中id為bar的DOM物件，將DOM包裝成一個jQuery物件，呼叫jQuery方法html修改元素HTML
jQuery("#bar").html("Bar jQuery");
//為id為bar的元素設定樣式，將前景色修改為藍色
$("#bar").css("color","blue");
</script>
</body>
</html>
轉換示例
2.4Jquery轉換DOM
DOM是Juqery的組成部分。
一：jQuery物件[下標]
二：jQuery物件.get(下標)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery物件轉換成DOM物件</title>
</head>
<body>
<h2>jQuery物件轉換成DOM物件</h2>
<p id="foo">Foo</p>
<p id="bar">Bar</p>
<script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
<script type="text/javascript">
//方法一
var $foo=$("#foo");
//從jQuery物件中獲得下標為0的DOM元素，並呼叫DOM屬性
$foo[0].innerHTML="foo DOM";
//方法二
var $p=$("p");
//從jQuery物件中獲得下標為1的DOM元素，並呼叫DOM屬性
$p.get(1).innerHTML="bar DOM";
</script>
</body>
</html>
轉換示例
2.5 DOM物件與Jquery物件的區別
- 只能呼叫自己的方法、屬性、事件
- 物件之間可以互相轉換
- $是Jquery的別名形式
- 每一個Jquery物件都是DOM物件的集合
三、常用選擇器
在jQuery中使用CSS匹配(CSS like)來進行元素指定，通過元素的特性或元素在文件中的位置去描述元素組。在很大程度上簡化了程式碼。
3.1 選擇器和包裝集
列如：選擇器：p a；包裝集：$("p a")
3.2基本選擇器
#id 根據給定的id匹配一個元素 單個元素 $("#test")選取id為test的元素 .class 根據給定的類名匹配元素 集合元素 $(".test")選取所有class為test的元素 element 根據給定的元素名稱匹配元素 集合元素 $("p")選取所有的<p>元素 selector1,selector2,selector3...將每一個選擇器匹配到的元素合併後一起返回 集合元素 $("div,span,p.cls")選取所有<div>，<span>和擁有class為cls的<p>標籤的一組元素 * 匹配所有元素 集合元素 $("*")選取所有的元素基本選擇器
//通過id獲取元素 一個名稱只能定義一個 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> <script> $("#myDiv").css("border","3px solid red"); </script> //通過類名獲取元素 一個名稱可以定義多個 <div class="myclass">div class="notMe"</div> <div class="myclass otherclass">div class="myClass"</div> <span class="myclass otherclass">span class="myClass"</span> <script> $(".myclass.otherclass").css("border","13px solid red"); </script> //通過標籤名獲取元素 <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> <script> $("div").css("border","9px solid red"); </script>程式碼
四、常用指令碼
- 常用選擇器
$('#div1') //id為div1的節點，如<div id='div1'></div> $('span') //所有的span結點，一個包裝集 $('p span') //p標籤下的所有span節點，後代節點 $('p>span') //p標籤下的所有span子節點，子代節點 $('.red') //使用樣式red的節點，如<span class="red"></span> $('*') //所有節點 $("div,span,p.cls") //選取所有<div>，<span>和擁有class為cls的<p>標籤的一組元素常用程式碼
- 基本篩選器
$('span:first') //第一個節點 $('span:last') //最後一個節點 $("td:even") //索引為偶數的節點，從 0 開始 $("td:odd") //索引為奇數的節點，從 0 開始 $("td:eq(1)") //給定索引值的節點 $("td:gt(0)") //大於給定索引值的節點 $("td:lt(2)") //小於給定索引值的節點 $(":focus") //當前獲取焦點的節點 $(":animated") //正在執行動畫效果的節點基本程式碼
- 內容選擇器
$("div:contains('hello')") //包含hello文字的節點 $("td:empty") //不包含子節點或者文字的空節點 $("div:has(p)") //含有選擇器所匹配的節點 $("td:parent") //含有子節點或者文字的節點內容程式碼
- 表單選擇器
$("input:checked") //所有選中的節點 $("select option:selected") //select中所有選中的option節點 $(":input") //匹配所有 input, textarea, select 和 button 節點 $(":text") //所有的單行文字框 $(":password") //所有密碼框 $(":radio") //所有單選按鈕 $(":checkbox") //所有複選框 $(":submit") //所有提交按鈕 $(":reset") //所有重置按鈕 $(":button") //所有button按鈕 $(":file") //所有檔案域表單程式碼
- 篩選與查詢
$("p").eq(0) //當前操作中第N個jQuery物件,類似索引 $('li').first() //第一個節點 $('li').last() //最後一個節點 $(this).hasClass("node") //節點是否含有某個特定的類,返回布林值 $('li').has('ul') //包含特定後代的節點 $("div").children() //div中的每個子節點,第一層 $("div").find("span") //查詢div下的所有span節點 $("p").next() //緊鄰p節點後的一個同輩節點 $("p").nextAll() //p節點之後所有的同輩節點 $("#node").nextUntil("#node2") //id為"#node"節點之後到id為'#node2'之間所有的同輩節點,掐頭去尾 $("p").prev() //緊鄰p節點前的一個同輩節點 $("p").prevAll() //p節點之前所有的同輩節點 $("#node").prevUntil("#node2") //id為"#node"節點之前到id為'#node2'之間所有的同輩節點,掐頭去尾 $("p").parent() //每個p節點的父節點 $("p").parents() //每個p節點的所有祖先節點,body,html $("#node").parentsUntil("#node2") //id為"#node"節點到id為'#node2'之間所有的父級節點,掐頭去尾 $("div").siblings() //所有的同輩節點,不包括自己篩查程式碼
- 屬性操作
$("img").attr("src"); //返回文件中所有影象的src屬性值 $("img").attr("src","node.jpg"); //設定所有影象的src屬性 $("img").removeAttr("src"); //將文件中影象的src屬性刪除 $("input[type='checkbox']").prop("checked", true); //選中複選框 $("input[type='checkbox']").prop("checked", false); //不選中複選框 $("img").removeProp("src"); //刪除img的src屬性屬性程式碼
- 樣式操作
$("p").addClass("selected"); //為p節點加上 'selected' 類 $("p").removeClass("selected"); //從p節點中刪除 'selected' 類 $("p").toggleClass("selected"); //如果存在就刪除,否則就新增HTML程式碼/文字/值樣式程式碼
- 內容操作
$('p').html(); //返回p節點的html內容 $("p").html("Hello <b>hello</b>!"); //設定p節點的html內容 $('p').text(); //返回p節點的文字內容 $("p").text("hello"); //設定p節點的文字內容 $("input").val(); //獲取文字框中的值 $("input").val("hello"); //設定文字框中的內容內容程式碼
- css操作
$("p").css("color"); //訪問檢視p節點的color屬性 $("p").css("color","red"); //設定p節點的color屬性為red $("p").css({ "color": "red", "background": "yellow" }); //設定p節點的color為red，background屬性為yellow（設定多個屬性要用{}字典形式）css程式碼
- 定位與偏移
$('p').offset() //節點在當前視口的相對偏移,物件 {top: 5, left: 9} $('p').offset().top $('p').offset().left $("p").position() //節點相對父節點的偏移,對可見節點有效，Object {top: 5, left: 8} $(window).scrollTop() //獲取滾輪滑的高度 $(window).scrollLeft() //獲取滾輪滑的寬度 $(window).scrollTop('25') //設定滾輪滑的高度為25定偏程式碼
- 尺寸
$("p").height(); //獲取p節點的高度 $("p").width(); //獲取p節點的寬度 $("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框) $("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框) $("p:first").outerHeight() //匹配節點外部高度(預設包括補白和邊框) $("p:first").outerWidth() //匹配節點外部寬度(預設包括補白和邊框) $("p:first").outerHeight(true) //為true時包括邊距尺寸程式碼
- DOM內部插入
$("p").append("<b>hello</b>"); //每個p節點內後面追加內容 $("p").appendTo("div"); //p節點追加到div內後 $("p").prepend("<b>Hello</b>"); //每個p節點內前面追加內容 $("p").prependTo("div"); //p節點追加到div內前內插程式碼
- DOM外部插入
$("p").after("<b>hello</b>"); //每個p節點同級之後插入內容 $("p").before("<b>hello</b>"); //在每個p節點同級之前插入內容 $("p").insertAfter("#node"); //所有p節點插入到id為node節點的後面 $("p").insertBefore("#node"); //所有p節點插入到id為node節點的前面外插程式碼
- DOM替換
$("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的節點替換成指定的HTML或DOM節點 $("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉所有 selector匹配到的節點替換程式碼
- DOM刪除
$("p").empty(); //刪除匹配的節點集合中所有的子節點，不包括本身 $("p").remove(); //刪除所有匹配的節點,包括本身 $("p").detach(); //刪除所有匹配的節點(和remove()不同的是:所有繫結的事件、附加的資料會保留下刪除程式碼
- DOM複製
$("p").clone() //克隆節點並選中克隆的副本 $("p").clone(true) //布林值指事件處理函式是否會被複制複製程式碼
- DOM載入完成事件
$(document).ready(function(){ 您的程式碼... }); //縮寫 $(function($) { 您的程式碼... });載入程式碼
- 繫結事件
//bind 為每個匹配節點繫結事件處理函式，繫結多個用{}。 $("p").bind("click", function(){ alert( $(this).text() ); }); $('#div1').bind({ "mouseover":function () { $('#div1').parent().removeClass("hide"); },"mouseout":function () { $('#div1').parent().addClass("hide"); } }); $("p").one( "click", function(){}) //事件繫結後只會執行一次 $("p").unbind( "click" ) //反綁一個事件 //與bind 不同的是當時間發生時才去臨時繫結。 $("p").delegate("click",function(){ 您的程式碼 }); $("p").undelegate(); //p節點刪除由 delegate() 方法新增的所有事件 $("p").undelegate("click") //從p節點刪除由 delegate() 方法新增的所有click事件 $("p").click(); //單擊事件 $("p").dblclick(); //雙擊事件 $("input[type=text]").focus() //節點獲得焦點時,觸發 focus 事件 $("input[type=text]").blur() //節點失去焦點時,觸發 blur事件 $("button").mousedown()//當按下滑鼠時觸發事件 $("button").mouseup() //節點上放鬆滑鼠按鈕時觸發事件 $("p").mousemove() //當滑鼠指標在指定的節點中移動時觸發事件 $("p").mouseover() //當滑鼠指標位於節點上方時觸發事件 $("p").mouseout() //當滑鼠指標從節點上移開時觸發事件 $(window).keydown() //當鍵盤或按鈕被按下時觸發事件 $(window).keypress() //當鍵盤或按鈕被按下時觸發事件,每輸入一個字元都觸發一次 $("input").keyup() //當按鈕被鬆開時觸發事件 $(window).scroll() //當用戶滾動時觸發事件 $(window).resize() //當調整瀏覽器視窗的大小時觸發事件 $("input[type='text']").change() //當節點的值發生改變時觸發事件 $("input").select() //當input 節點中的文字被選擇時觸發事件 $("form").submit() //當提交表單時觸發事件 $(window).unload() //使用者離開頁面時繫結程式碼
- 事件物件
$("p").click(function(event){ alert(event.type); //"click" }); (evnet object) 屬性方法： event.pageX //事件發生時，滑鼠距離網頁左上角的水平距離 event.pageY //事件發生時，滑鼠距離網頁左上角的垂直距離 event.type //事件的型別 event.which //按下了哪一個鍵 event.data //在事件物件上繫結資料，然後傳入事件處理函式 event.target //事件針對的網頁節點 event.preventDefault() //阻止事件的預設行為(比如點選連結，會自動開啟新頁面) event.stopPropagation() //停止事件向上層節點冒泡事對程式碼
- 動態事件繫結
//當p中增加span時仍然有效 $("p").on("click",'span',function(){ alert( $(this).text() ); });動事程式碼
- 動畫效果
$("p").show() //顯示隱藏的匹配節點 $("p").show("slow"); //引數表示速度,("slow","normal","fast"),也可為600毫秒 $("p").hide() //隱藏顯示的節點 $("p").toggle(); //切換 顯示/隱藏 $("p").slideDown("600"); //用600毫秒時間將段落滑下 $("p").slideUp("600"); //用600毫秒時間將段落滑上 $("p").slideToggle("600"); //用600毫秒時間將段落滑上，滑下淡入淡出 $("p").fadeIn("600"); //用600毫秒時間將段落淡入 $("p").fadeOut("600"); //用600毫秒時間將段落淡出 $("p").fadeToggle("600"); //用600毫秒時間將段落淡入,淡出 $("p").fadeTo("slow", 0.6); //用600毫秒時間將段落的透明度調整到0.6動畫程式碼
- 工具方法
$("#form1").serialize() //序列表表格內容為字串。 $("select, :radio").serializeArray(); //序列化表單元素為陣列返回 JSON 資料結構資料 $.trim() //去除字串兩端的空格 $.each() //遍歷一個數組或物件，for迴圈 $.inArray() //返回一個值在陣列中的索引位置，不存在返回-1 $.grep() //返回陣列中符合某種標準的節點 $.extend({a:1,b:2},{b:3,c:4},{c:5:d:6}) //將多個物件，合併到第一個物件{a:1,b:3,c:5,d:6} $.makeArray() //將物件轉化為陣列 $.type() //判斷物件的類別（函式物件、日期物件、陣列物件、正則物件等等 $.isArray() //判斷某個引數是否為陣列 $.isEmptyObject() //判斷某個物件是否為空(不含有任何屬性) $.isFunction() //判斷某個引數是否為函式 $.isPlainObject() //判斷某個引數是否為用"{}"或"new Object"建立的物件 $.support() //判斷瀏覽器是否支援某個特性工方程式碼
- AJAX
//儲存資料到伺服器，成功時顯示資訊 $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); //載入 feeds.html 檔案內容。 $("#feeds").load("feeds.html"); //請求 test.php 網頁，傳送2個引數，忽略返回值。 $.get("test.php", { name: "John", time: "2pm" } ); //從 Flickr JSONP API 載入 4 張最新的關於貓的圖片。 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format =json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); //載入並執行 test.js ，成功後顯示資訊 $.getScript("test.js", function(){ alert("Script loaded and executed."); }); //向頁面 test.php 傳送資料，並輸出結果（HTML 或 XML，取決於所返回的內容）： $.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); //AJAX 請求完成時執行函式。 $("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>請求完成.</li>"); }); //AJAX 請求失敗時顯示資訊。 $("#msg").ajaxError(function(event,request, settings){ $(this).append("<li>出錯頁面:" + settings.url + "</li>"); }); //AJAX 請求傳送前顯示資訊。 $("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>開始請求: " + settings.url + "</li>"); }); //AJAX 請求開始時顯示資訊。 $("#loading").ajaxStart(function(){ $(this).show(); }); //AJAX 請求結束後隱藏資訊。 $("#loading").ajaxStop(function(){ $(this).hide(); }); //當 AJAX 請求成功後顯示訊息。 $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>請求成功!</li>"); }); //請求前過濾 $.ajaxPrefilter( function( options, originalOptions, jqXHR ) { // Modify options, control originalOptions, store jqXHR, etc }); //設定全域性 AJAX 預設選項，設定 AJAX 請求預設地址為 "/xmlhttp/"，禁止觸發全域性 AJAX 事件，用 POST 代替預設 GET 方法。其後的 AJAX 請求不再設定任何選項引數。 $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });AJAX
五、AJAX
5.1簡介
全稱：非同步JavaScript和XML。是指一種建立互動式網頁應用的開發技術。伺服器和瀏覽器之間交換的資料大量減少，響應速度更快。
語法：Jquery.ajax(url,[settings])；通過HTTP請求載入遠端資料。
注意：所有的選項都可以通過$.ajaxSetup()函式來全域性設定。
5.2回撥函式