.get()

用jQuery選擇器選擇出來的元素被包裝為jQuery對(duì)象，而面對(duì)不同的需求可能需要我們獲取的有時(shí)候是jQuery對(duì)象，有時(shí)候是原生DOM元素，此時(shí)使用get方法進(jìn)行進(jìn)一步的選擇可獲得原生DOM元素，如下例

<div class="demo1">1</div> <div class="demo2">2</div> <div class="demo3">3</div>

js代碼

<script src="./jquery.js"></script> //引入jq文件 <script>console.log( $('div'));console.log( $('div').get(), '不傳參');console.log( $('div').get(1),'傳1');console.log( $('div').get(-1),'傳-1');console.log( $('div').get(null),'傳null');console.log( $('div').get(undefined),'傳undefined'); </script>

【解釋】get方法可傳以上幾種不同的參數(shù)，打印結(jié)果如下

.eq()方法

.eq()的作用：按索引選擇指定的DOM，返回的是jq對(duì)象，因此可直接用jq方法進(jìn)行鏈?zhǔn)秸{(diào)用，如下

html代碼

<div class="demo">1</div> <div class="demo">2</div> <div class="demo">3</div>

js代碼

<script src="./jquery.js"></script> <script>$('div').eq(0).css({width: '50', height: '50', lineHeight: '50px',color: '#fff', textAlign: 'center', backgroundColor: '#424242'}); </script>

結(jié)果

.eq()的傳參：

<script src="./jquery.js"></script> <script>console.log( $('div').eq(), '不傳參');console.log( $('div').eq(1),'傳1');console.log( $('div').eq(-1),'傳-1');console.log( $('div').eq(null),'傳null');console.log( $('div').eq(undefined),'傳undefined'); </script>

因?yàn)橛腥蒎e(cuò)機(jī)制，所以基本不會(huì)報(bào)錯(cuò)，打印結(jié)果如下

?

.find()

作用：找到指定的子元素，返回其jq對(duì)象，可傳選擇器，jQuery對(duì)象，Element（匹配當(dāng)前元素集合的元素）

html代碼

<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> </div>

js代碼

<script src="./jquery.js"></script> <script>$('div').find('ul').css({listStyle: 'none'}).find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px'});console.log($('div').find('ul').find('li')); $('div').find('li').css({borderRadius: '10px', backgroundColor: '#424242', color: '#fff'});console.log($('div').find('li'));</script>

結(jié)果如下

由結(jié)果可知，find方法既可以一層一層匹配，也可以直接定位到某層的子元素，區(qū)別如下

.fliter()方法

作用：對(duì)選擇出來的對(duì)象做進(jìn)一步篩選，是限制條件，可傳選擇器，jQuery對(duì)象，函數(shù)等參數(shù)

【例1】傳類選擇器

html代碼?

<div><ul><li>1</li><li class="demo">2</li><li>3</li><li class="demo">4</li><li>5</li></ul> </div>

js代碼

$('div').find('ul').css({listStyle: 'none'}).find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'}).filter('.demo') //選擇類名為demo的li元素.css({backgroundColor: 'steelblue'}); console.log($('div').find('ul').find('li').filter('.demo'));

?結(jié)果

由上圖可知已將類名為demo的li元素篩選出來

【例2】傳過濾選擇器

$('div').find('ul').css({listStyle: 'none'}).find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'}).filter(':even') //傳過濾選擇器，選擇索引為偶數(shù)的元素.css({backgroundColor: 'steelblue'}); console.log($('div').find('ul').find('li').filter('.demo'));

結(jié)果

【例2】傳函數(shù)

$('div').find('ul').css({listStyle: 'none'}).find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'}).filter(function (index) {return index == 4 || $(this).attr("class") == "demo";}).css({backgroundColor: 'steelblue'}); console.log($('div').find('ul').find('li').filter('.demo'));

結(jié)果

?.not()方法

.not()是.filter()的反選

【例】

$('div').find('ul').css({listStyle: 'none'}).find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'}).not('.demo').css({backgroundColor: 'steelblue'}); console.log($('div').find('ul').find('li').filter('.demo'));

結(jié)果

.is()方法

作用：判斷元素是否被jq選擇器選中，如果選中返回true，未選中返回false。

var flag = $('div ul li').is('.demo'); var num = $('div ul li').is('p');

在控制臺(tái)打印flag和num分別為

應(yīng)用如下

html代碼

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul>

js代碼

$('ul') .css({listStyle: 'none', overflow: 'hidden'}).find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'}) $('ul').click(function (e) {if ($(e.target).is('li')) {console.log($(e.target).text());} else {console.log($(this).text());} })

結(jié)果

?

.has()方法

作用：設(shè)選擇器選擇出來的元素為A，has所傳參數(shù)選擇出來的元素為B，則has方法返回的是包括B的A，即選擇有B的A。

【例】

html代碼

<div><ul><li><ul><li>1</li><li>2</li></ul></li><li><span>3</span></li><li><p>4</p></li></ul> </div>

js代碼

$('ul').css({listStyle: 'none'}) //選擇包含ul的li元素，并對(duì)其子元素里的li進(jìn)行操作 $('li').has('ul').find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'}) //選擇包含span的li元素，并對(duì)子元素span進(jìn)行操作 $('li').has('span').find('span').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: 'steelblue', color: '#fff'}) //選擇包含p的li元素，并對(duì)子元素p進(jìn)行操作 $('li').has('p').find('p').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: 'teal', color: '#fff'})

結(jié)果：（1，2）合起來是含有ul的li元素，3是含有span的li元素，4是含有p的li元素

.add()和.end()方法

作用：當(dāng)需要給某類元素添加共同的方法，可以使用add()進(jìn)行一次性處理，之后使用end()，使返回值退回到add()之前。

html代碼

<div><ul><li>1-1</li><li>1-2</li><li>1-3</li></ul> </div> <ul><li>2-1</li><li>2-2</li><li>2-3</li> </ul>

js代碼

$('div').add('ul').css({overflow: 'hidden'}) $('div ul').add('ul').css({listStyle: 'none'}).find('li').css({float: 'left', margin: '5px'}).end().end().find('li').css({backgroundColor: 'steelblue'});

結(jié)果

第一行代碼表示給div，還有所有的ul捆綁到一起后添加css屬性

第二行代碼表示，給div中的ul和另一個(gè)ul共同添加樣式——>找到他們的子元素li，添加樣式——>兩個(gè)回退，回退到div中的ul ——>找到該ul下的li元素并給樣式

---

終于把這塊寫完了，果然開網(wǎng)課會(huì)影響前端學(xué)習(xí)進(jìn)度，不開心

不過還是不能被落下，奧利給~

?

超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的jQuery的DOM操作之选择元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。