国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
jQuery對(duì)象+選擇器+DOM操作

一、jQuery對(duì)象和DOM對(duì)象


(一)DOM對(duì)象

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

(二)jQuery對(duì)象

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

(三)jQuery對(duì)象和DOM對(duì)象 相互轉(zhuǎn)換
1..jquery對(duì)象轉(zhuǎn)為DOM對(duì)象

jquery對(duì)象不能使用DOM中的方法,如果不得不使用DOM中的方法時(shí),就需要將jquery對(duì)象轉(zhuǎn)換成DOM對(duì)象。jquery提供了兩種方法,即:[index]和get(index)

  • jquery對(duì)象是一個(gè)類似數(shù)組的對(duì)象,可以通過[index]的方法得到對(duì)應(yīng)的DOM對(duì)象
var $obj = $("#chk");//jquery對(duì)象var obj = $obj[0];//DOM對(duì)象alert(obj.checked);//檢測(cè)是否選中
  • 另一種方法是jquery本身提供的,通過get(index)方法得到對(duì)應(yīng)的DOM對(duì)象
var $obj = $("#chk");//jquery對(duì)象var obj = $obj.get(0);//DOM對(duì)象alert(obj.checked);//檢測(cè)是否選中

2.DOM對(duì)象轉(zhuǎn)成jquery對(duì)象

只需要用()DOM對(duì),個(gè)jquery對(duì)(DOM對(duì)象)

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

注意:DOM對(duì)象才能使用DOM中的方法,jquery對(duì)象不可以使用DOM中的方法。

二、jQuery選擇器


(一)基本選擇器

(二)層次選擇器

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

eg:張三和父親、爺爺?shù)年P(guān)系
爺爺?shù)暮蟠厥菑埲透赣H
爺爺?shù)淖釉厥歉赣H

(三)過濾選擇器

基本過濾選擇器   


內(nèi)容過濾   

    可見性過濾   

    屬性過濾   

    子元素過濾

表單對(duì)象屬性過濾選擇器   

三、jQuery的DOM操作


DOM操作的分類:一般來說DOM操作分為3個(gè)方面:DOM Core,DOM-THML和DOM-CSS.

  • DOM Core
    DOM Core并不專屬于JavaScript,任何一種支持DOM的程序設(shè)計(jì)語言都可以使用它。
    JavaScript中的:getElementById(), getElementByName(),getAttribute和setAttribute()等方法都是DOM Core的組成部分。

  • HTML_DOM:
    使用JavaScript為HTML編寫腳本的時(shí)候,有許多專屬于HTML-DOM的屬性。

  • CSS_DOM:
    CSS-DOM是針對(duì)CSS的操作。在JavaScript中,CSS-DOM技術(shù)的主要作用是獲取和設(shè)置style對(duì)象的各種屬性。通過改變style對(duì)象的各種屬性,可以使網(wǎng)頁呈現(xiàn)出不同的效果。

jQuery的DOM操作

節(jié)點(diǎn)操作

(一)查找節(jié)點(diǎn)

  • 查找元素節(jié)點(diǎn)
var $li = $("ul li:eq(1)");    //獲取ul里的第二個(gè)li節(jié)點(diǎn)
  • 查找屬性節(jié)點(diǎn)

    使用attr()方法 ,參數(shù)可以是一個(gè),也可以是兩個(gè)  
var $para = $("p");var p_txt = $para.attr("title");   //獲取p元素節(jié)點(diǎn)屬性title

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

$()的作用是創(chuàng)建一個(gè)DOM對(duì)象,并將這個(gè)DOM對(duì)象包裝成一個(gè)jQuery對(duì)象后返回
  • 創(chuàng)建元素節(jié)點(diǎn)
  • 創(chuàng)建文本節(jié)點(diǎn)
  • 創(chuàng)建屬性節(jié)點(diǎn)
使用$(html)來創(chuàng)建元素節(jié)點(diǎn),并使用append()來插入,在元素中可以加入文本,例如:var $li_1=$("<li>在這里還能加文本</li>");  //創(chuàng)建第一個(gè)元素var $li_2=$("<li>在這里還能加文本</li>"); //創(chuàng)建第二個(gè)元素$("ul").append($li_1);  //添加到<ul>節(jié)點(diǎn)中$("ul").append($li_2);  //這兩個(gè)連續(xù)添加,還可以采用鏈?zhǔn)綄懛ㄈ缦拢?("ul").append($li_1).appen($li_2); 可以用同樣的方法創(chuàng)建屬性節(jié)點(diǎn):var $li_3=$("<li title="香蕉">香蕉</li>");//元素節(jié)點(diǎn),文本節(jié)點(diǎn),屬性節(jié)點(diǎn)都創(chuàng)建了。

(三)插入節(jié)點(diǎn)


(四)刪除節(jié)點(diǎn)

1. remove方法

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

2.detach()方法   

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

3.empty()方法  

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

(五)復(fù)制節(jié)點(diǎn)

使用clone()方法來復(fù)制元素,需要注意的是,默認(rèn)復(fù)制出來的元素不具有任何行為。可以通過傳入?yún)?shù)clone(true),使得復(fù)制出來的新元素也有事件行為。

(六)替換節(jié)點(diǎn)

  • replaceWith():
    將所有匹配的元素都替換成指定的HTML或者DOM元素。
  • replaceAll():
    其用法跟replaceWith一樣,只是顛倒了。例如:
$("p").replaceWith("要插入的東西</br>");     //把p中的東西替換成   要插入的東西</br>。$("要插入的東西</br>").replaceAll("p");   //把  要插入的東西</br>   換到P里邊去。

(七)包裹節(jié)點(diǎn)

若要將某個(gè)節(jié)點(diǎn)用其他標(biāo)記包裹起來,jQuery提供了相應(yīng)的方法,即wrap()和warpAll()還有warpInner()。該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用,而且它不會(huì)破壞原始文檔的語義。例如:

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

屬性操作

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

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

樣式操作

(一)獲取樣式和設(shè)置樣式

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

(二)追加樣式

addClass()來給對(duì)象追加一個(gè)class,而不替換原有的。
$("p").addClass("another") ;   //給p元素追加"another"類

若p元素同時(shí)擁有兩個(gè)class值
(1)給一個(gè)元素添加了多個(gè)class值,那么相當(dāng)于合并了他們的樣式
(2)若前后兩個(gè)class設(shè)置同一屬性,則后者覆蓋前者。

(三)移除樣式

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

(四)切換樣式

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

$("p").toggleClass("another");    //重復(fù)切換類名"another"
當(dāng)不斷單擊按鈕時(shí),p元素的class值就會(huì)在"myClass"和"myClass another"之間重復(fù)切換   

(五)判斷是否含有某個(gè)樣式

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

設(shè)置和獲取HTML,文本和值

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

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

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

$(this).val();   //得到value值   $(this).val("請(qǐng)輸入");    //設(shè)置value值

遍歷節(jié)點(diǎn)(重點(diǎn)掌握)

(一)childern()方法

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

(二)next()方法

取該元素的后一個(gè)同級(jí)元素。 

(三)prev()方法

取該元素的前一個(gè)同級(jí)元素。 

(四)sibling()方法

取該元素前后所有的同級(jí)元素,相當(dāng)于反選。 

(五)closest()方法

向上取得最近的匹配元素。首先檢查當(dāng)前元素是否匹配,匹配則返回它本身。若不匹配則向上查找 其父元素,逐級(jí)向上直到找到匹配的元素。若什么都沒找到則返回一個(gè)空的jQuery對(duì)象。 

CSS-DOM

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

$("p").css("color");     //獲取元素的樣式顏色$("p").css("color","red");     //將元素的樣式顏色設(shè)置為紅色$("p").css({"backgroundColor":"red","font-size":"30px"});     //設(shè)置元素的多個(gè)樣式
下面說幾個(gè)CSS-DOM中常用的方法: 

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

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
JQuery簡(jiǎn)介
jQuery開發(fā)常用
JQuery 選擇器、過濾器介紹
jQuery 1.4十大新特性解讀及代碼示例
一篇文章教會(huì)你jQuery應(yīng)用
jQuery children()方法
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服