1. 基本选择器
- id 选择器
<div id="box1"></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var ele = $('#box1'); // 选择id为box1的第一个元素
ele.css({
'background-color' : 'gray',
'width': '100px',
'height': '100px'
});
</script>
- 类选择器
<div class="box2"></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var ele = $('.box2'); // 选择所有class为box2的元素
ele.css({
'background-color' : 'green',
'width': '100px',
'height': '100px'
});
</script>
- 标签选择器
<div>第一个div</div>
<div>第二个div</div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var ele = $('div'); // 选择所有的div元素
ele.css({
'background-color' : 'green',
'width': '100px',
'height': '100px'
});
</script>
- 通配符选择器
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var ele = $('*'); // 选择所有元素
ele.css({
'background-color' : 'green',
'width': '100px',
'height': '100px'
});
</script>
- 并集选择器
<div id="box1">第一个div</div>
<div id="box2">第二个div</div>
<div class="box3">第二个div</div>
<p></p>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var ele = $('#box1,.box3,p'); // 选择所有的div元素
ele.css({
'background-color' : 'green',
'width': '100px',
'height': '100px'
});
</script>
2. 层级选择器
- 后代选择器 vs. 子代选择器
<body>
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</ol>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("ol li").css({ // 后代选择器（包含儿子、孙子、重孙、...）
'background-color': 'red'
});
$("ul>li").css({ // 子代选择器(仅仅包含儿子)
'background-color': 'green'
});
</script>
</body>
运行效果如下图
- 兄弟选择器 vs. 紧邻选择器
<body>
<div>桌子</div>
<p>椅子</p>
<p>柜子</p>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("div~p").css({ // 兄弟选择器（选择div后面所有的p元素）
'background-color': 'red'
});
$("div+p").css({ // ；紧邻选择器(选择div后面紧邻的第一个p元素)
'background-color': 'green'
});
</script>
</body>
运行效果如下图
3. 属性选择器
<body>
<ul>
<li id="beijing">北京</li>
<li id="shanghai">上海</li>
<li>广州</li>
<li id="shenzhen">深圳</li>
</ul>
<form action="" method="post">
<input name="username1" type='text' value="张三" />
<input name="username2" type='text' value="李四" />
<input name="username3" type='text' value="王五" />
<br>
<input name="1password" type='text' value="123" />
<input name="2password" type='text' value="123" />
<input name="3password" type='text' value="123" />
<br>
<button class="btn-log">普通按钮</button>
<button class="warn-btn">警告按钮</button>
<button class="btn-error">错误按钮</button>
<br>
</form>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("li[id]").css({ // 标签名[属性名], 选择所有含有id属性的标签名为li的元素
'background-color': 'red'
});
$("li[id=beijing]").css({ // 标签名[属性名=属性值], 选择所有含有id属性且值为beijing的标签名为li的元素
'background-color': 'green'
});
$("li[id!=shenzhen]").css({ // 标签名[属性名!=属性值], 选择所有含有id属性且值不为shenzhen的标签名为li的元素
'background-color': 'green'
});
//查找包含属性名为name且属性值以username开头的input元素
$('input[name^=username]').css('background','gray');
//查找包含属性名为name且属性值以password结尾的input元素
$('input[name$=password]').css('background','yellow');
//查找包含属性名为class且属性值包含btn的input元素
$('button[class*=btn]').css('background','pink')
</script>
</body>
4. 过滤选择器（通过冒号实现）
- :empty 【选择不包含子节点的元素】
- :parent【选择包含子节点的元素】
<body>
<div id="box1"></div>
<div id="box2"> 我有文本内容（文本节点）</div>
<div id="box3"> <span>我有子标签元素 (元素节点)</span></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("div:empty").css({
'background-color':'green',
'width':'300px',
'height':'50px',
'margin-top':'10px'});
$("div:parent").css({
'background-color':'gray',
'width':'300px',
'height':'50px',
'margin-top':'10px'});
</script>
</body>
- :contains(text) 【选取子节点包含为text字符串的元素】
<body>
<div id="box1"> 我喜欢阅读！</div>
<div id="box2"> 学习 jQuery！</div>
<div id="box3"> <span>我喜欢旅行！</span></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("div:contains(喜欢)").css({
'background-color':'green',
'width':'300px',
'height':'50px',
'margin-top':'10px'});
</script>
</body>
- :has(selector) 【选取包含子元素且子元素满足给定的selector条件的元素】
- 与:parent的区别：parent只要包含子元素就可以,:has(selector)不仅要包含子元素，而且子元素还必须满足给定的条件。
<body>
<div id="box1"></div>
<div id="box2"> 我有文本内容（文本节点）</div>
<div id="box3"> <span>我有子标签元素 (元素节点)</span></div>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("div:has(span)").css({
'background-color':'red',
'width':'300px',
'height':'50px',
'margin-top':'10px'});
</script>
</body>
- 针对表单元素的过滤选择器
5. 过滤选择器（通过方法实现）
- 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#id2")
- 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#id2")
- 父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到满足匹配的元素为止
- 儿子元素
$("#id").children();
- 兄弟元素
$("#id").siblings();
- 查找满足匹配条件的后代元素
$("div").find("span") // 等价于$("div span"), 后代选择器
- 过滤出满足匹配条件的元素
$("div").filter(".cls") // 等价于$("div.cls"), 交集选择器
- 其他方法
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
6. 更多
参看 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp