新知識：jQuery語法基礎與操作

　　 jQuery是一個快速、簡潔的JavaScript框架，它讓我們的代碼變得更簡捷，大大減少了我們的工作量，今天就來簡單學習一下有關jQuery的語法和基礎操作 ↓↓↓

NO.1　jQuery語法基礎

1、使用JQuery必須先導入jquery.x.x.x.js文件。

　 <script src="js/jquery-3.1.1.js"></script>  

2、JQuery中的選擇器：

　　$("選擇器名稱").函數名();

　！！！注意：$是jQuery的縮寫，也就是說，選擇器可以使用 jQuery(":input")

3、JQuery 文檔就緒函數：

　$(document).ready(function(){ 　　　// JQuery代碼
　　　console.log(jQuery(":input:disabled")); 　}); 　簡寫形式：$(function(){});

【JQuery文檔就緒函數與window.onload的區別】

　① window.onload必須等待網頁資源（包括圖片等）全部加載完成后，才能執行；
　　 文檔就緒函數只需等到網頁DOM結構加載完成后，即可執行。

　② window.onload在一個頁面中，只能寫一次；
　　　文檔就緒函數在一個頁面中，可以有N個。

4、JS對象和jQuery對象：

　① 使用$("")取到的節點為jQuery對象，只能調用JQuery方法，不能調用原生JS方法。

　$("#div").click(function(){}); 　　　　// √ 　$("#div").onclick = function(){};　　 // × JQuery對象不能調用原生JS方法

　② 同理，使用getElement系列函數取到的為JS對象，也不能調用JQuery函數。

　【jQuery對象與JS對象的相互轉換】

① jQuery轉JS：使用.get(index) 或 [index] 選中的就是JS對象； 　　　 $("div").get(0).onclick = function(){} 　 或 $("#div1")[0].onclick = function(){} ② JS轉jQuery：使用$()包裹JS對象。 　　var div = document.getElementsByTagName("div"); 　　$(div).click(function(){});

5、解決jQuery多庫沖突問題：

　頁面中如果同時引入多個JS框架，可能導致$沖突。 

　解決辦法：

　　① 使用jQuery.noConflict();使用JQuery放棄在全局中使用$；

　　② 使用jQuery關鍵字替代$，或者使用一個自執行函數：

　　!function($){ 　　　　// 在自執行函數中，可以使用$替代jQuery
　　　　// 除自執行函數外的其他區域，禁止jQuery使用$
　　}(jQuery);

 　　代碼示例：

jQuery.noConflict(); !function($){ 　　$(function(){
 　　　　// JS轉JQuery
       var div = document.getElementsByTagName("div"); $(div).click(function(){ 　　alert(1); }); // JQuery轉JS
       $("div").get(0).onclick = function(){ 　　 alert(1); } }); }(jQuery);

 

NO.2　jQuery文檔處理

一、JQuery中的DOM操作

　1、內部最后面添加

　　　append：在div1的內部，最后追加一個圖片（在A中添加b）

　　　 $("#div1").append("<img src='../01-HTML基本標簽/img/QQ圖片1.gif'/>"); 

　　　appendTo：把一個圖片追加到div1的內部最后（將b添加到A中）

　　　$("<img src='../01-HTML基本標簽/img/QQ圖片2.gif'/>").appendTo("#div1"); 

　2、內部最前方插入

　　　prepend：

　　　 $("#div1").prepend("<img src='../01-HTML基本標簽/img/QQ圖片1.gif'/>"); 

　　　prependTo：

　　　 $("<img src='../01-HTML基本標簽/img/QQ圖片2.gif'/>").prependTo("#div1"); 

　3、在div1的外部，后面插入節點

　　　after：

　　　 $("#div1").after("<p>這是一個p</p>"); 

　　　insertAfter：

　　　 $("<p>11111</p>").insertAfter("#div1");  

　4、在div1的外部，前面插入節點

　　　before：

　　　 $("#div1").before("<p>這是一個p</p>"); 

　　　insertBefore：

　　　 $("<p>11111</p>").insertBefore("#div1");  

　　　用JS添加：

　　var div1 = document.getElementById("div1"); 　　var first = div1.firstChild; 　　var p = document.createElement("p"); 　　p.innerText = "123"; 　　div1.appendChild(p); 　　div1.insertBefore(p,first); 　　document.body.insertBefore(p,div1);

　5、為每一個選中的節點，都套一層父節點。

　　　wrap：

　　　 $("div").wrap("<section></section>");  

　　　wrapAll：

　　　 $("div").wrapAll("<section></section>");  

　6、將選中的所有節點，包裹在同一個父節點中

　　　wrapAll：

　　　 $("p").wrapAll("<section></section>"); 　　// ×  

　　　 $("div~p").wrapAll("<section></section>");  　

　7、刪除選中節點的父節點

　　　unwrap：

　　　 $("#div1 p").unwrap();  

　8、將選中節點中的所有子元素，包裹在一個新的父節點中；

　　　新的父節點依然是當前元素的唯一子節點

　　　wrapInner：

　　　 $("#div1").wrapInner("<div></div>");  

　9、將所有選中的節點，重新替換為新的節點

　　　replaceWith：

　　　 $("div p").replaceWith("<span>1</span>");  

　　　replaceAll：

　　　 $("<span>1</span>").replaceAll("div p");  

　　　只替換標簽：　　　

　　 　$("div p").wrapInner("<span></span>"); 　　 $("div p>span").unwrap();

　10、empty：清空當前節點內容，但會保留當前節點標簽

　　　 $("#div1").empty();  

　　　remove：刪除當前節點，以及當前節點的所有子節點

　　　 $("#div1").remove();  

　　　detach：刪除當前節點，以及當前節點的所有子節點

　　　 $("#div1").detach();   

　　【remove和detach的區別】

　　① 使用remove刪除的節點，如果恢復以后，將不再保留節點所綁定的事件； 　　② 使用detach刪除的節點，在節點恢復以后，可以恢復節點之前所綁定的事件。 　　案例：↓

　　$("#div1").click(function(){ 　　　　alert(123); 　　}); 　　var div1 = null; 　　$("button:eq(0)").click(function(){ 　　　　div1 = $("#div1").remove(); 　　}); 　　$("button:eq(1)").click(function(){ 　　　　div1 = $("#div1").detach(); 　　}); 　　$("button:eq(2)").click(function(){ 　　　　$("#div2").before(div1); 　　});

　11、clone：克隆

　　　 $("#div1").clone(true).empty().insertBefore("button:eq(0)");  

　　JS中cloneNode() 與 JQuery中clone() 區別：

cloneNode()	a. 如果不傳參數或者參數傳入false，表示只克隆當前節點，不克隆子節點； b. 如果參數傳入true，表示克隆當前節點以及所有子節點。
clone()	a. 無論傳入true還是false都會克隆當前節點以及所有子節點； b. 傳入true表示克隆節點的同時將包括節點所綁定的事件； c. 否則，只表示克隆節點，而不克隆綁定的事件。

 

二、CSS和屬性操作

　1、設置節點的屬性

　　 $("#div1").attr("class","cls");  

　2、傳入對象，以鍵值對的形式同時設置多對屬性

　$("#div1").attr({ 　　　"class":$("#div1").attr("class")+"cls1", 　　　"name":"name1", 　　　"style":"font-size:24px;color:blue" 　});

 

　3、取到節點的屬性

　　 console.log($("#div1").attr("id"));  

　4、刪除節點屬性

　　 $("#div1").removeAttr("class");  

　5、prop 和 attr一樣，都可以對節點屬性進行讀取和設置

　　【兩者的不同】

　　　在讀取 屬性名="屬性值" 的屬性時，attr將返回屬性值和undefined；而prop將返回true或false；

　　　也就是說，attr要取到的屬性，必須是在標簽上已經寫明的屬性，否則無法取到。

　6、在原有class的基礎上，新增class名字

　　 $("#div1").addClass("cls1");  

　7、 刪除指定的class名稱，其余未刪除的class名，依然保留

　　 $("#div1").removeClass("cls cls1");  

　8、 toggleClass 切換class：如果有指定class就刪除，如果沒有就新增。

　　$("button:eq(0)").click(function(){ 　　　　$("#div1").toggleClass("div1"); 　　});

 

　9、.html：取到或設置節點中的html代碼；

　　　.text：取到或設置節點中的文本；

　　　.val：取到或設置表單元素的value值；

　　console.log($("#div1").html("<p>11111</p>").html());

　　console.log($("#div1").text("<p>11111</p>").text());

　　console.log($("input:eq(1)").val("<p>11111</p>").val());

　10、.css()：給節點添加css樣式，屬於行級樣式表權限

　　 $("#div1").css("color","green");  

　　同時給一個節點添加多對css樣式

　　$("#div1").css({ 　　　　"color":"yellow", 　　　　"font-size":"24px" 　　});

 

　　通過回調函數返回值，修改css樣式： 修改div的寬

　　$("button:eq(0)").click(function(){ 　　　　var id = setInterval(function(){ 　　　　　　$("#div1").css({ 　　　　　　　　"width":function(index,value){ 　　　　　　　　　　var v = parseFloat(value) +1; 　　　　　　　　　　if(v>600){ 　　　　　　　　　　　　clearInterval(id); 　　　　　　　　　　} 　　　　　　　　　　return v + "px"; 　　　　　　　　} 　　　　　　}); 　　　　},10); 　　});

 

　11、取到或者設置節點的寬高

　　 console.log($("#div1").height(400));  

　　 console.log($("#div1").width("400px"));  

　12、取到節點的寬度+padding，不包含border和margin

　　 console.log($("#div1").innerHeight());  

　　 console.log($("#div1").innerWidth());  

　13、不傳參數，表示 寬高+padding+border

　　 console.log($("div1").outerHeight());  

　 　　傳入true，表示 寬高+padding+border+margin　 

　　 console.log($("div1").outerWidth(true));  

　14、返回一個節點，相對於瀏覽器左上角的偏移量

　　　返回一個對象{top: 31, left: 8}

　　　此方法，測量時，會將margin算作偏移量的距離

　　 console.log($("#div1").offset());  

　15、 返回一個節點，相對於父容器的偏移量

　　　注意：

　　　　① 使用此方法，要求父元素必須是定位元素，如果父元素不是定位元素，則依然是相對於瀏覽器左上角測量

　　　　② 此方法，測量偏移量時，將不考慮margin，而會將margin視為當前容器的一部分

　　 console.log($("#div1").position());  

　16、scrollTop：、設置或取到指定節點的滾動條位置

　　 console.log($("#div1").scrollTop(100));  

 

關於jQuery的基礎語法和操作就簡單介紹到這里... ...