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

Miss.Zhao發表於2018-05-06
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的基礎語法和操作就簡單介紹到這裡… …

 

相關文章