jQuery對象+選擇器+DOM操作

comeonwyj 2019-05-07

展開全文

一、jQuery對象和DOM對象

(一)DOM對象

DOM(Document Object Model)，即文檔對象模型，DOM可以表示成一棵樹。
DOM對象就是原生JavaScript中通過getElementById或者getElementByTagName來獲取DOM樹
節(jié)點  得到的對象。DOM對象可以使用JavaScript中的方法，如innerHTML。

（二）jQuery對象

jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery中獨有的，他可以 
使用  jQuery中的方法，如html()。

（三）jQuery對象和DOM對象相互轉換
1..jquery對象轉為DOM對象

jquery對象不能使用DOM中的方法，如果不得不使用DOM中的方法時，就需要將jquery對象轉換成DOM對象。jquery提供了兩種方法，即：[index]和get(index)

jquery對象是一個類似數(shù)組的對象，可以通過[index]的方法得到對應的DOM對象

var $obj = $("#chk");//jquery對象
var obj = $obj[0];//DOM對象
alert(obj.checked);//檢測是否選中

另一種方法是jquery本身提供的，通過get(index)方法得到對應的DOM對象

var $obj = $("#chk");//jquery對象
var obj = $obj.get(0);//DOM對象
alert(obj.checked);//檢測是否選中

2.DOM對象轉成jquery對象

只需要用 $() 把 D O M 对象包装起来，就可以获得一个 j q u e r y 对象了，方式为$ (DOM對象)

var obj = document.getElementById("chk");//DOM對象
var $obj = $(obj);//jquery對象

注意：DOM對象才能使用DOM中的方法，jquery對象不可以使用DOM中的方法。

二、jQuery選擇器

（一）基本選擇器
這里寫圖片描述

（二）層次選擇器

后代元素和子元素的區(qū)分 
后代元素指之后的所有元素  
子元素是之后的元素

eg:張三和父親、爺爺?shù)年P系
爺爺?shù)暮蟠厥菑埲透赣H
爺爺?shù)淖釉厥歉赣H
這里寫圖片描述

（三）過濾選擇器

基本過濾選擇器

這里寫圖片描述

內容過濾

這里寫圖片描述

    可見性過濾

這里寫圖片描述

    屬性過濾

這里寫圖片描述

    子元素過濾

這里寫圖片描述

表單對象屬性過濾選擇器

這里寫圖片描述

三、jQuery的DOM操作

DOM操作的分類：一般來說DOM操作分為3個方面：DOM Core，DOM-THML和DOM-CSS.

DOM Core
DOM Core并不專屬于JavaScript，任何一種支持DOM的程序設計語言都可以使用它。
JavaScript中的：getElementById(), getElementByName(),getAttribute和setAttribute()等方法都是DOM Core的組成部分。
HTML_DOM：
使用JavaScript為HTML編寫腳本的時候，有許多專屬于HTML-DOM的屬性。
CSS_DOM：
CSS-DOM是針對CSS的操作。在JavaScript中，CSS-DOM技術的主要作用是獲取和設置style對象的各種屬性。通過改變style對象的各種屬性，可以使網(wǎng)頁呈現(xiàn)出不同的效果。

jQuery的DOM操作

節(jié)點操作

（一）查找節(jié)點

查找元素節(jié)點

var $li = $("ul li:eq(1)");    //獲取ul里的第二個li節(jié)點

查找屬性節(jié)點

使用attr()方法 ，參數(shù)可以是一個，也可以是兩個

var $para = $("p");
var p_txt = $para.attr("title");   //獲取p元素節(jié)點屬性title

(二)創(chuàng)建節(jié)點

$()的作用是創(chuàng)建一個DOM對象，并將這個DOM對象包裝成一個jQuery對象后返回

創(chuàng)建元素節(jié)點
創(chuàng)建文本節(jié)點
創(chuàng)建屬性節(jié)點

使用$(html)來創(chuàng)建元素節(jié)點，并使用append()來插入，在元素中可以加入文本，例如：
var $li_1=$("<li>在這里還能加文本</li>");  //創(chuàng)建第一個元素
var $li_2=$("<li>在這里還能加文本</li>"); //創(chuàng)建第二個元素
$("ul").append($li_1);  //添加到<ul>節(jié)點中
$("ul").append($li_2);  //這兩個連續(xù)添加，還可以采用鏈式寫法如下：
$("ul").append($li_1).appen($li_2); 
可以用同樣的方法創(chuàng)建屬性節(jié)點：
var $li_3=$("<li title="香蕉">香蕉</li>");//元素節(jié)點，文本節(jié)點，屬性節(jié)點都創(chuàng)建了。

（三）插入節(jié)點

這里寫圖片描述

（四）刪除節(jié)點

1. remove方法

從DOM中刪除所有匹配的元素，出入的參數(shù)根據(jù)jQuery選擇器來篩選。當某個節(jié)點用remove()方法刪除后，該節(jié)點所包含的的所有后代節(jié)點將同時被刪除。這個方法的返回值是一個指向已被刪除的節(jié)點的引用，因此可以在以后使用這些元素，這樣可以先刪除再插入，實現(xiàn)元素移動。
另外，remove方法也可以通過傳遞參數(shù)來選擇性的刪除。

2.detach()方法

從DOM中去掉所有匹配的元素，這個方法不會把元素從jQuery對象中刪除，所有綁定的事件、附加的數(shù)據(jù)都會保留下來

3.empty()方法

嚴格來講，empty方法并不是刪除節(jié)點而是清空節(jié)點。他能清空選定元素中所有的內容，把該元素變成一個空元素。

（五）復制節(jié)點

使用clone()方法來復制元素，需要注意的是，默認復制出來的元素不具有任何行為?？梢酝ㄟ^傳入?yún)?shù)clone(true)，使得復制出來的新元素也有事件行為。

（六）替換節(jié)點

replaceWith():
將所有匹配的元素都替換成指定的HTML或者DOM元素。
replaceAll():
其用法跟replaceWith一樣，只是顛倒了。例如：

$("p").replaceWith("要插入的東西</br>");     //把p中的東西替換成   要插入的東西</br>。
$("要插入的東西</br>").replaceAll("p");   //把  要插入的東西</br>   換到P里邊去。

（七）包裹節(jié)點

若要將某個節(jié)點用其他標記包裹起來，jQuery提供了相應的方法，即wrap()和warpAll()還有warpInner(）。該方法對于需要在文檔中插入額外的結構化標記非常有用，而且它不會破壞原始文檔的語義。例如：

$("strong").warp("<b></b>");   //每個<strong>元素都用<b>標簽包裹起來
$("strong").warpAll("<b></b>");   //用一個<b>標簽把所有<strong>元素包裹起來
$("strong").warpInner("<b></b>");   //用<b>標簽把<strong>元素里邊的所有內容包裹起來

屬性操作

在jQuery中，用attr()方法來獲取和設置元素屬性，removeAttr()方法來刪除元素屬性。

var p_txt = $("p").attr("屬性名")
$("p").attr("屬性名","屬性值");   //設置p元素屬性值
$("p").attr({"屬性1名":"屬性1值","屬性2名":"屬性2值","屬性3名":"屬性3值"}); //當有多個需要設置時
$("p").removeAttr("屬性名");  //刪除p元素的屬性

樣式操作

（一）獲取樣式和設置樣式

var p_class = $("p").attr("class");    //獲取p元素的class 
$("p").attr("class","high");           //設置p元素的class為"high"

(二)追加樣式

addClass()來給對象追加一個class，而不替換原有的。

$("p").addClass("another") ;   //給p元素追加"another"類

若p元素同時擁有兩個class值
（1）給一個元素添加了多個class值，那么相當于合并了他們的樣式
（2）若前后兩個class設置同一屬性，則后者覆蓋前者。

這里寫圖片描述

（三）移除樣式

$("p").removeClass("high");    //移除值為"high"的class

(四)切換樣式

jQuery提供了toggleClass()方法控制樣式的重復切換。如果類名存在就刪除它，如果不存在就添加它。在兩個類名之間切換

$("p").toggleClass("another");    //重復切換類名"another"

當不斷單擊按鈕時，p元素的class值就會在"myClass"和"myClass another"之間重復切換

（五）判斷是否含有某個樣式

hasClass()方法用來判斷是否含有某個樣式，若有返回true，否則放回false。

設置和獲取HTML，文本和值

1.html()方法：此方法類似于innerHTML屬性，可以用來讀取或者設置某個元素中的HTML內容。當無參數(shù)時獲取內容，有參數(shù)時修改內容。
注意：html()方法可以用于XHTML文檔，但不能用于XML文檔。

2.text()方法：此方法類似于innerText屬性，可以用來讀取或者設置某個元素中的文本內容。無參數(shù)時獲取，有參數(shù)時修改。text()方法對XHTML文檔和XML文檔都有效。

3.val()方法：用來獲取或者修改input元素中的value屬性。
該方法配合焦點事件，可以實現(xiàn)輸入框中獲得焦點之后提示消失，失去焦點之后提示出現(xiàn)的效果。

$(this).val();   //得到value值   
$(this).val("請輸入");    //設置value值

遍歷節(jié)點（重點掌握）

（一）childern()方法

該方法用于取得匹配的子元素的集合。注意這里只是兒子輩的，不包括再往下的元素。

（二）next()方法

取該元素的后一個同級元素。

(三)prev()方法

取該元素的前一個同級元素。

（四）sibling()方法

取該元素前后所有的同級元素，相當于反選。

（五）closest()方法

向上取得最近的匹配元素。首先檢查當前元素是否匹配，匹配則返回它本身。若不匹配則向上查找 
其父元素，逐級向上直到找到匹配的元素。若什么都沒找到則返回一個空的jQuery對象。

CSS-DOM

CSS-DOM技術簡單來說就是讀取和設置style對象的各種屬性。style屬性很有用，但最大的不足是無法通過它來提取到通過外部CSS設置的樣式信息，而在jQuery中這些都非常簡單，可以直接用css()方法來獲取元素的樣式屬性。

$("p").css("color");     //獲取元素的樣式顏色
$("p").css("color"，"red");     //將元素的樣式顏色設置為紅色
$("p").css({"backgroundColor":"red","font-size":"30px"});     //設置元素的多個樣式

下面說幾個CSS-DOM中常用的方法：

1.offset()方法：用于獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。
2.position()方法：用于獲取元素相對于最近一個position樣式屬性設置為relative或者absolute的祖父節(jié)點的相對偏移，返回對象包含兩個屬性，即top和left。
3.scrollTop()方法和scrollLeft()方法：這兩個方法分別用于取得元素的滾動條距頂端的距離和左側的距離。