jQuery 选择器

基础选择器

1、ID 选择器:获取指定 ID 的元素

$("#id")

2、类选择器:获取同一类 class 的元素

$(".class")

3、标签选择器:获取同一类标签的元素

$("div")

4、全选择器:匹配所有元素

$("*")

5、并集选择器:选取多个元素

$("div,p")

6、交集选择器:获取交集元素

$("li.current")

层级选择器

1、子代选择器:使用 >,获取亲儿子层级的元素,但并不会获取孙子层级的元素

$("div>ul")

2、后代选择器:使用空格,可以获取到儿子、孙子层级元素

$("div ul")

隐式迭代

遍历内部 DOM 元素(伪数组方式存储)的过程就叫做隐式迭代,就是将匹配到的所有元素进行循环遍历并执行相应的方法。

筛选选择器

1、获取第一个元素:

// 获取第一个 li 元素
$("li:first")

2、获取最后一个元素:

// 获取最后一个 li 元素
$("li:last")

3、根据索引号获取元素:

// 获取索引号为 2 的 li 元素
$("li:eq(2)")

4、获取索引号为奇数的元素:

$("li:odd")

5、获取索引号为偶数的元素:

$("li:even")

筛选方法

<ul class="nav">
	<li>1</li>
	<li>2</li>
	<li class="item">3</li>
	<li>4</li>
	<li>5</li>
</ul>

1、parent() 查找父级

// 用法:
$(".item").parent().css('background-color', 'red')

父级为 nav jq

2、children() 查找子节点

$(".nav").children('li').css('background-color', 'red')

相当于ul > li 类似于子代选择器,只查找最近的一级 jq

3、find() 查找子节点

$("ul").find("li")

相当于ul li 类似于后代选择器,包含子级和孙子级 jq

4、siblings() 查找兄弟节点(不包括自己本身)

$(".item").siblings().css('background-color', 'red')

jq

5、siblings() 查找兄弟节点(不包括自己本身)

$(".item").siblings().css('background-color', 'red')

jq

6、next()、nextAll() 查找当前元素之后单个/所有的同辈元素

$(".item").nextAll().css('background-color', 'red')
$(".item").next().css('background-color', 'red')

next() jq nextAll() jq

7、prev()、prevAll() 查找当前元素之前单个/所有的同辈元素

$(".item").prev().css('background-color', 'red')
$(".item").prevAll().css('background-color', 'red')

prev() jq prevAll() jq

8、eq(index) 根据索引查找元素

$("ul li").eq(2).css('background-color', 'red')

jq

9、hasClass(class) 检查当前元素是否含有特定的类名

console.log($("ul li").hasClass('item')); // true
console.log($("ul li").hasClass('aaa')); // false

本站部分文章、图片等数据来自互联网,一切版权均归源网站或源作者所有

如果侵犯了你的权益请来信告知删除。邮箱:1029167904@qq.com


发表评论

评论列表,共 0 条评论

cover cover cover

  • cover

    搁浅 周杰伦

  • cover

    呼啸的风 侯明昊

  • cover

    如果可以 韦礼安