JQuery（一）---- JQ的選擇器，屬性，節點，樣式，函數等操做詳解

JQuery的基本概念

JQuery是一個javascript庫，JQuery憑藉着簡潔的語法和跨平臺的兼容性，極大的簡化了js操做DOM、處理事件、執行動畫等操做。JQuery強調的理念是：'write less, do more'(寫的少，作的多)。

1.JQuery的版本

版本	兼容範圍
1.x版本	可以兼容IE678瀏覽器
2.x版本	不兼容IE678瀏覽器
3.x版本	不兼容IE678瀏覽器，更加的簡潔

名稱	大小	說明
jquery.js(開發版)	約229KB	完整無壓縮版本，主要用於測試、學習和開發
jquery.min.js(生產版)	約31KB	通過壓縮，主要用於產品和項目，基本無可閱讀性

2.JQuery的使用

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

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

 

　　2.JQuery中的選擇器
　　　　$("選擇器名稱").函數名();
　　　　例子：console.log($("#div1"));
　　　　注意：$是JQuery的縮寫，也就是說，選擇器可使用JQuery(":input")

　　　　選擇器：查幫助文檔，這裏就再也不贅述了。

　　3.JQuery中的文檔就緒函數： $(document).ready(function(){});

//JS中的文檔就緒函數
            window.onload= function(){ } //JQuery的文檔就緒函數
            $(document).ready(function(){ console.log($("#div1")); }); //簡寫模式
            $(function(){})

 

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

類別	window.onload	$(document).ready()
執行時機	必須等待網頁中全部的內容加載完畢後(包括圖片，視頻)才能執行	網頁中全部DOM結構繪製完畢後就執行，並不會等待圖片、文件的加載
編寫個數	只能寫一個，不能同時寫多個，若是同時寫了多個，下面的會把上面的覆蓋	能同時編寫多個，兩個入口函數互不影響
簡化寫法	無	$(function(){});

 

　　5.JS對象和JQuery對象：

　　　　①使用$取到的節點爲JQuery對象，只能調用JQuery方法，不能調用原生JS方法。

　　　　　　正確的：$("#div1").click(function(){})  

　　　　　　錯誤的：$("#div1").onclick = function(){}（使用JQuery對象調用原生JS）

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

【JQuery對象與JS對象的相互轉換】
　　(1)JQuery轉JS：

方法一(經常使用)：[index] var $box = $("#box");       // JQuery獲取到的對象
var box = $box[0];          // 轉成JS對象
box.innerHTML = "哈哈哈";   // 使用JS的方法
 方法二：get(index) var $box = $('#box');       // JQuery獲取到的對象
var box = $box.get(0);      // 轉成JS對象
box.innerHTML = "哈哈哈";   // 使用JS對象的方法

　　(2)JS轉JQuery：
　　　　　　JS對象轉成JQuery對象的十分簡單，只須要用$()把JS對象包裹起來就是一個JQuery對象。

var box = document.getElementById("#box");  // 獲取的JS對象
$(box).click(function(){});      // 轉成JQuery對象

　　6.解決JQuery多庫衝突問題：
　　　　頁面中若是同時引入多個JS框架，可能致使$衝突。
　　解決辦法：
　　　　(1)使用jQuery.noConflict()：使用JQuery放棄在全局使用$。
　　　　(2)使用jQuery關鍵字代替$,或者使用一個自執行函數：

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

 DOM操做

 1.添加節點

名稱	用法	描述
append()	$("#div1").append("<img src='../01-HTML基本標籤/img/Female.gif' />");	在div的內部最後追加一個圖片
appendTo()	$("<img src='../01-HTML基本標籤/img/Female.gif' />").appendTo("#div1")	把一個圖片追加到div1的內部最後
prepend()	$("#div1").prepend("<img src='../01-HTML基本標籤/img/Female.gif_temp.bmp' />");	在div的內部最前邊加入一張圖片
prependTo()	$("<img src='../01-HTML基本標籤/img/Female.gif_temp.bmp' />").prependTo("#div1");	把一個圖片追加到div1的內部最前邊
after()	$("#div1").after("<p>這是一個P標籤</p>")	在div1的外部最後，插入節點
insertAfter()	$("<p>這是一個P標籤</p>").insertAfter("#div1");	將一個節點插入div1的外部的最後
before()	$("#div1").before("<p>這是一個P標籤</p>");	在div1外部的前邊插入一個節點
insertBefore()	$("<p>這是一個P標籤</p>").insertBefore("#div1");	將一個節點插入到div1的外部的最前面

2.包裹節點

名稱	用法	描述
wrap()	$("div").wrap('<i></i>')	爲每個選中的節點都套一個父節點
wrapAll()	$("div").wrapAll('<i></i>')	將選中的全部節點包裹在同一個父節點中
unwrap()	$("#div1 p").unwrap()	刪除選中節點的父節點
wrapInner()	$("#div1").wrapInner('<div></div>')	將選中的節點中的全部子元素包裹在一個新的父節點中（新的父節點依然是當前元素的子節點，並且是當前元素的惟一子節點）

 3.替換節點

名稱	用法	描述
replaceWith()	$("#div1 p").replaceWith("<span>1</span>")	將選中的節點從新替換成新的節點
replaceAll()	$("<span>1</span>").replaceAll("#div1 p");	用新的節點替換全部選中的節點

4.刪除節點

名稱	用法	描述
empty()	$("#div1").empty();	清空當前節點中的內容，但會保留當前節點標籤
remove()	$("#div1").remove();	刪除當前節點已經當前節點的子節點
detach()	$("#div1").detach()	刪除當前節點已經當前節點的子節點，與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來。

remove()和detach()的區別：
　　使用remove()刪除的節點，在恢復後，將再也不保留節點所綁定的事件。
　　使用detach()刪除的節點，在恢復後，能夠保留節點以前所綁定的事件。

5.複製節點

　　clone()：拷貝複製節點，它也有深拷貝和淺拷貝。深拷貝和淺拷貝的區別就是，深拷貝會複製綁定的事件，而淺拷貝不會複製綁定的事件。

　　寫法：clone(true)爲深拷貝，默認不傳或者傳false就是淺拷貝。

JS中的cloneNode()和JQuery中的clone()的區別：

　　(1)cloneNode()若是不傳入參數或者參數傳入false，表示只克隆當前節點，不克隆子節點。傳入true表示克隆當前節點以及子節點。

　　(2)clone()不管傳入的是true仍是false，都克隆當前節點以及子節點，傳入true表示克隆節點的同時將保留節點的事件，不然表示只克隆節

6.查找節點

使用JQuery選擇器，查找到須要的元素後，可使用attr()方法來獲取它的各類屬性的值，text()方法來獲取它的文本內容。

　　　　console.log($("#div1 p").attr("title"));//查詢div1下面的p標籤的title屬性值。

　　　　console.log($("#div1 p").text())；//查詢div1下面的p標籤的文本內容

7.建立節點

　　建立元素節點很簡單，直接使用 $(html)，html就是須要添加的元素。$(html)方法會根據傳入的HTML標記字符串，建立一個DOM對象，並將這個DOM對象包裝成一個jQuery對象後返回。

　　　　　　var li = $("<li title="城市">深圳</li>");

　　　　　　$("#div1").append(li);

屬性和CSS類的操做

1.attr操做

　　(1)attr()，能夠用來獲取屬性也能夠用來設置屬性。當attr()參數爲一個的時候，即屬性名稱，表示的是獲取屬性。當attr()裏面的參數是兩個的時候，即屬性名稱和對應的值，表示的是設置屬性。若是想要設置多個屬性，參數就是一個json對象（鍵值對的形式）。

//得到屬性
                $("#div1").attr("id"); //添加屬性
                $("#div1").attr("class","cls"); //添加多個屬性
                $("#div1").attr({ "class":"cls1", "name":"name1", "style":"color:blue" });

　　　　除了attr方法相似的還有：html()、text()、height()、width()、val()、css()等方法，不傳參則是獲取值，傳參則是設置值。

　　(2)removeAttr()：刪除節點屬性。（刪除多個屬性用空格隔開）

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

2.prop操做

　　(1)獲取、設置屬性時用prop()方法與attr()方法同樣，當prop()參數爲一個的時候，即屬性名稱，表示的是獲取屬性。當prop()裏面的參數是兩個的時候，即屬性名稱和對應的布爾值。

　　(2)在jQuery1.6以後，對於checked、selected、disabled這類boolean類型的屬性來講，不能用attr()方法，只能用prop()方法。

　　(3)removeProp()：刪除節點屬性

　　　　　　prop()和attr()的不一樣：在讀取 屬性名="屬性值"的屬性時，attr將返回屬性值和undefinded；而prop返回true或false。也就是說attr()要取到的屬性必須是在標籤上已經寫明的屬性，不然沒法取到。

3.CSS類的操做

　　addClass()：在原有class的基礎上新增class名。

　　removeClass()：刪除指定的class名稱，其他未刪除的class名依然保留。

　　toggleClass()：切換指定的class名稱。若是類名存在則刪除它，若是類名不存在則添加它。

　　hasClass()：用來判斷是否包含一個class的名稱。返回值爲true或false。

CSS樣式操做

1.經過css()設置屬性

(1)經過css()的方法設置或者獲取樣式，不管樣式屬性是從外部導入的，仍是直接寫在HTML標籤裏面的，屬於行級樣式表。添加多個樣式的時候，css()，裏面的參數是一個對象。傳入一個參數的時候是表示得到當前CSS樣式的屬性值。

(2)經過回調函數返回值修改CSS的樣式

 

2.取到或者設置節點的寬高

1 $("#div1").height();  // 獲取 p 元素的高度值
2 $(window).height();  // 獲取頁面可視區的高度
3 $("#div1").width();  // 獲取 p 元素的高度值
4 $(window).width();  // 獲取頁面可視區的高度
5 $("#div1").innerHeight();  //取到節點的高+padding，不包含border和margen
6 $("#div1").innerWidth();   //取到節點的寬+padding，不包含border和margen
7 $("#div1").outerHeight();       //取到節點的高+padding+border（不傳參），不包含margen
8 $("#div1").outerWidth(true);    //取到節點的寬+padding+border+margen（傳參數：true）

3.位置

1 $("#div1").offset()：返回一個節點相對於瀏覽器左上角的偏移量，返回的是一個對象{top:20,left:20}。 2 注意：此方法測量時會將margen算入偏移量的距離。 3 
4 $("#div1").position()：返回一個節點相對於父容器的偏移量。
 5 注意： (1)使用此方法，要求父元素必須是定位元素。若是父元素不是定位元素，則依然是相對於瀏覽器左上角進行測量。 6  　　　(2)此方法，測量偏移時，將不考慮margen，而會將margen視爲當前容器的一部分。 7 $(window).scrollTop(200)：設置或取到滾動節點的滾動條的位置。

JQuery函數

(1)each()：用於遍歷JQuery中的對象數組，在回調函數中,可使用return true至關於continue，return false至關於break；

 1                 //each相似於foreach
 2                 $("#ul1 li").each(function(index,item){  3                     //true 相似continue false 相似於break
 4                     if(index%2 != 0){  5                         return true;  6                         
 7  }  8  console.log(index)  9  console.log($(item).text()) 10                     //在回調函數中，this指向當前調用函數的節點對象
11                     //this是一個JS對象，若是要用JQ對象，須要使用$(this)
12                     $(this).text($(this).text()+"12314"); 13                 });

(2)$("#ul1 li").size()/$("#ul1 li").length：返回查詢元素的個數

(3)get()：將JQuery對象轉換爲JS對象。傳入index表示取出第幾個，返回一個JS對象。若是不傳入參數那麼返回全對象的數組。

(4)$.each(arr/obj,function(index,item){})：對傳入的數組或對象進行遍歷，能夠是JQuery對象數值，也能夠是JS中的數組和對象。

(5)$.map(arr,function(index,item){return item}):數組映射，返回一個新數組.

(6)$.inArray()：檢測一個值是否在數組中，返回下標。參數1：值，參數2：數組，參數3：查找的起始下標。（沒找到爲-1）

(7).toArray()：將選中的JQuery的DOM集合，恢復成數組，數組的每個是JS對象。

(8).marge()：合併倆個數組。

(9)parseJSON：將一個JSON字符串轉換成JSON對象。

(10)$.contains(父對象，字對象)：父對象和子對象必須是JS對象