[学习笔记] 动态网页开发基础之jQuery选择器

# 学习 # · 2020-08-14

jQuery选择器选取元素

1、概述:jQuery选择器基于元素的id、类、类型、属性、属性值等查找或选择HTML 元素。它基于已经存在的 CSS 选择器,此外,它还有一些自定义的选择器。

2、基本选择器:

$("h2");        //标签选择器,选取所有h2元素(集合)
$(".title");    //类选择器,选取所有以class为title的元素(集合)
$("#title");    //ID选择器,选取ID为title的元素
$("div,p,.title");    //并集选择器,选取所有以div、p和class为title的元素
$("*");    //全局选择器,选取所有元素

3、层次选择器:

$("#menu span");    //后代选择器,选取#menu下所有的<span>元素
$("#menu>span");    //子选择器,选取#menu下的子元素<span>
$("h2+dl");            //相邻元素选择器,选取紧邻<h2>元素之后的同辈元素<dl>
$("h2~dl");            //同辈元素选择器,选取<h2>元素之后所有的同辈元素<dl>

4、属性选择器:

$("[href]");    //选取所有含有href属性的元素
$("[href='#']");    //选取所有href属性为#的元素
$("[href!='#']");    //选取所有href属性不为#的元素
$("[href^='#']");    //选取所有href属性不以#开头的元素
$("[href$='#']");    //选取所有href属性不以#结尾的元素

通过条件过滤选取元素

1、基本过滤选择器:

$("li:first");    //选取所有<li>元素中的第一个<li>元素
$("li:last");    //选取所有<li>元素中的最后一个<li>元素
$("li:not(.three)");    //选取class不是three的元素
$("li:even");    //选取索引是偶数的所有<li>元素
$("li:odd");    //选取索引是奇数的所有<li>元素
$("li:eq(1)");    //选取索引等于1的<li>元素
$("li:gt(1)");    //选取索引大于1(不包含1)的<li>元素
$("li:lt(1)");    //选取索引小于1(不包含1)的<li>元素
$(":header");    //选取所有标题元素
$(":focus");    //选取所有焦点元素
$(":animated");    //选取所有动画元素

2、可见性过滤选择器:

$(":visible");    //选取所有可见元素
$("::hidden");    //选取所有隐藏元素
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/74/

评论