Rumah > hujung hadapan web > tutorial js > jquery常用的过滤方法

jquery常用的过滤方法

无忌哥哥
Lepaskan: 2018-06-29 11:42:06
asal
1593 orang telah melayarinya

过滤方法,也就是函数,大多与前面介绍过的过滤器功能是一致的

1:get()将jquery对象转为DOM对象:将第二个文本的前景色设置为红色

$('li').get(1).style.color = 'red'
Salin selepas log masuk

2.eq():获取指定序号的元素,注意,返回的是jQuery对象

$('li').eq(4).css('color','red')
Salin selepas log masuk

3.first():返回第一个元素,不需要参数

$('li').first().css('color','red')
Salin selepas log masuk

4.first():返回最后一个元素,不需要参数

$('li').last().css('color','red')
Salin selepas log masuk

5.toArray(),返回DOM数组,注意不是jquery对象

var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = &#39;green&#39;
}
Salin selepas log masuk

6.find():返回所有的后代元素,包括子,孙...

$(&#39;ul&#39;).find(&#39;li&#39;).css(&#39;color&#39;,&#39;coral&#39;)
$(&#39;ul&#39;).find(&#39;a&#39;).css(&#39;color&#39;,&#39;cyan&#39;)
Salin selepas log masuk

7.children()返回所有的直接子元素

$(&#39;ul&#39;).children().css(&#39;color&#39;,&#39;deeppink&#39;)
$(&#39;ul&#39;).children(&#39;p&#39;).css(&#39;color&#39;,&#39;deeppink&#39;)
Salin selepas log masuk

8.对每个元素执行回调函数

$(&#39;li&#39;).each(function(){
$(this).css(&#39;background-color&#39;,&#39;wheat&#39;)
$(this).css(&#39;color&#39;,&#39;black&#39;)
$(this).css(&#39;font-size&#39;,&#39;1.3em&#39;)
})
Salin selepas log masuk

9.元素遍历方法

//next()下一个同级元素

$(&#39;li&#39;).eq(2).next().css(&#39;color&#39;,&#39;blue&#39;)
Salin selepas log masuk

//nextAll()后面全部的同级元素

$(&#39;li&#39;).eq(2).nextAll().css(&#39;color&#39;,&#39;blue&#39;)
Salin selepas log masuk

//siblings():返回所选元素的所有同级元素,除它自己

$(&#39;li&#39;).eq(2).siblings().css(&#39;color&#39;,&#39;blue&#39;)
Salin selepas log masuk

向前遍历

//prev():前一个同级元素

$(&#39;li&#39;).removeAttr(&#39;style&#39;)
$(&#39;li&#39;).eq(6).prev().css(&#39;color&#39;,&#39;coral&#39;)
Salin selepas log masuk

//prevAll():您一定猜到了,对,是前面的所有同级元素

$(&#39;li&#39;).eq(6).prevAll().css(&#39;color&#39;,&#39;coral&#39;)
Salin selepas log masuk


10. add(selector),将元素添加到所选的集合中

//先去掉所有元素上面的自定义样式,将元素打回原型,素颜模样

$(&#39;*&#39;).removeAttr(&#39;style&#39;)
Salin selepas log masuk
Salin selepas log masuk

//将所有li文本设置为红色,你会发现有一个p没有选上,这也正常

$(&#39;li&#39;).css(&#39;color&#39;,&#39;red&#39;)
Salin selepas log masuk

//那么如何才能选上p元素呢,只有加大选区,把p元素放进这个选区中就可以了

//使用add()方法就可以做到

$(&#39;li&#39;).add(&#39;p&#39;).css(&#39;color&#39;,&#39;red&#39;)
Salin selepas log masuk

11. filter()从结果中返回符合条件的元素

//仅仅返回第6个元素

$(&#39;li&#39;).filter(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Salin selepas log masuk

12. not()与filter()功能正好相反,去掉满足条件的元素

$(&#39;li&#39;).not(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Salin selepas log masuk

13. slice(start, end),返回指定范围的元素

$(&#39;*&#39;).removeAttr(&#39;style&#39;)
Salin selepas log masuk
Salin selepas log masuk

//包括起始位置,不包括结束位置,返回的结果数量是5-2=3

$(&#39;li&#39;).slice(2,5).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Salin selepas log masuk

//获取前4个元素

$(&#39;li&#39;).slice(0,4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Salin selepas log masuk

//省略第二个参数,默认从当前开始直到结尾

$(&#39;li&#39;).slice(4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Salin selepas log masuk

Atas ialah kandungan terperinci jquery常用的过滤方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan