jQuery的DOM操作之选择元素

.get()

用jQuery选择器选择出来的元素被包装为jQuery对象，而面对不同的需求可能需要我们获取的有时候是jQuery对象，有时候是原生DOM元素，此时使用get方法进行进一步的选择可获得原生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方法可传以上几种不同的参数，打印结果如下

.eq()方法

.eq()的作用：按索引选择指定的DOM，返回的是jq对象，因此可直接用jq方法进行链式调用，如下

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>

结果

.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>

因为有容错机制，所以基本不会报错，打印结果如下

.find()

作用：找到指定的子元素，返回其jq对象，可传选择器，jQuery对象，Element（匹配当前元素集合的元素）

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>

结果如下

由结果可知，find方法既可以一层一层匹配，也可以直接定位到某层的子元素，区别如下

.fliter()方法

作用：对选择出来的对象做进一步筛选，是限制条件，可传选择器，jQuery对象，函数等参数

【例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'));

结果

由上图可知已将类名为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')    //传过滤选择器，选择索引为偶数的元素.css({backgroundColor: 'steelblue'});
console.log($('div').find('ul').find('li').filter('.demo'));

结果

【例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(function (index) {return index == 4 || $(this).attr("class") == "demo";}).css({backgroundColor: 'steelblue'});
console.log($('div').find('ul').find('li').filter('.demo'));

结果

.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'));

结果

.is()方法

作用：判断元素是否被jq选择器选中，如果选中返回true，未选中返回false。

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

在控制台打印flag和num分别为

应用如下

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());}
})

结果

.has()方法

作用：设选择器选择出来的元素为A，has所传参数选择出来的元素为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元素，并对其子元素里的li进行操作
$('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元素，并对子元素span进行操作
$('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元素，并对子元素p进行操作
$('li').has('p').find('p').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: 'teal', color: '#fff'})

结果：（1，2）合起来是含有ul的li元素，3是含有span的li元素，4是含有p的li元素

.add()和.end()方法

作用：当需要给某类元素添加共同的方法，可以使用add()进行一次性处理，之后使用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'});

结果

第一行代码表示给div，还有所有的ul捆绑到一起后添加css属性

第二行代码表示，给div中的ul和另一个ul共同添加样式——>找到他们的子元素li，添加样式——>两个回退，回退到div中的ul ——>找到该ul下的li元素并给样式

终于把这块写完了，果然开网课会影响前端学习进度，不开心

不过还是不能被落下，奥利给~