全面解析jQuery的61种选择器及其实际应用示例"
. #id : 根据给定的ID匹配一个元素
```html
这是第一个p标签
这是第二个p标签
$(function(){
$("#myId").css("color", "red");
});
```
结果:
这是第一个p标签
这是第二个p标签
2. element : 根据给定的元素标签名匹配所有元素
```html
这是div标签1
这是div标签2
这是p标签
$(function(){
$("div").css("color", "red");
});
```
结果:
这是div标签1
这是div标签2
这是p标签
3. .class : 根据给定的css类名匹配元素
```html
这是第一个p标签
这是第二个p标签
$(function(){
$(".myClass").css("color", "red");
});
```
结果:
这是第一个p标签
这是第二个p标签
4. * : 匹配所有元素,多用于结合上下文来搜索
以下是重构后的代码:
```html
这是第一个p标签
这是第二个p标签
这是第一个div标签
这是第二个div标签
$(function(){
$('p.myP, div#myDiv').css('color','red');
});
```
结果:
```
这是第一个p标签
这是第二个p标签
这是第一个div标签
这是第二个div标签
```
. parent > child : 在给定的父元素下匹配所有的子元素
```html
$(function() {
$('div span').css('color', 'red');
});
```
结果:
这是第一个span标签
这是第二个span标签
8. prev + next : 匹配所有紧接在 prev 元素后的 next 元素
```html
这是第一个p标签
这是第二个p标签
$(function() {
$('div + p').css('color', 'red');
});
```
结果:
这是第一个p标签
这是第二个p标签
这是第一个p标签
这是第二个p标签
这是第三个p标签
12. :last-child : 获取最后一个子元素
<div> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> </div> <script type="text/javascript"> $(function(){ $("div p:last-child").css("color","red"); }); </script>
结果:
这是第三个p标签
13. :nth-child(n) : 获取第n个子元素
<div> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> </div> <script type="text/javascript"> $(function(){ $("div p:nth-child(2)").css("color","red"); }); </script>
结果:
这是第二个p标签
14. :odd : 获取所有奇数位置的兄弟元素
<div> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> </div> <script type="text/javascript"> $(function(){ $("div p:odd").css("color","red"); }); </script>
结果:
这是第一个p标签
这是第三个p标签
15. :parent : 获取最近的父元素
<div id="parent_div""> <ul id="ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_ul_li""> 这是一个无序列表,包含多个嵌套的无序列表。
<script type="\
这是第一个p标签
这是第二个p标签
这是第三个p标签
这是索引值为0的p标签
这是索引值为1的p标签
这是索引值为2的p标签
这是索引值为3的p标签
```html
$(function(){
$(":eq(0)").css("color", "red");
$(":eq(1)").css("color", "red");
$(":eq(2)").css("color", "red");
$(":eq(3)").css("color", "red");
});
```
结果:
这是索引值为0的p标签(红色)
这是索引值为1的p标签(红色)
这是索引值为2的p标签(红色)
这是索引值为3的p标签(红色)
这是索引值为0的p标签
这是索引值为1的p标签
这是索引值为2的p标签
15. :gt(index) : 匹配所有大于给定索引值的元素
```html
这是索引值为0的p标签
这是索引值为1的p标签
这是索引值为2的p标签
$(function(){
$( "p:gt(1)" ).css( "color", "red" );
});
```
结果:
```html
这是索引值为0的p标签
这是索引值为1的p标签
这是索引值为2的p标签
```
16. :lang(language) : 选择指定语言的所有元素
解析:根据需求,需要将提供的两个代码片段进行重构,并保持段落结构。
代码1:
```html
这是lang="not"的div标签
这是lang="en"的div标签
这是lang="en-us"的div标签
$(function(){
$('div:lang(en)').css('color','red');
});
```
代码2:
```html
这是第一个p标签
这是第二个p标签
这是第三个p标签
$(function(){
$('p:last').css('color','red');
});
```
重构后的代码1:
```html
这是lang="not"的div标签
这是默认显示的lang='en'的div标签
这是默认显示的lang='en-us'的div标签
```
重构后的代码2:
```html
这是第一个p标签
这是第二个p标签
这是第三个p标签
$(function(){
$('p:lt(1)').css('color','red'); // 只设置前两个元素的颜色为红色,使其变为默认显示样式
});
```
这是索引值为0的p标签
这是索引值为1的p标签
这是索引值为2的p标签
这是h3标签
这是h4标签
请根据提供的内容完成内容重构,并保持段落结构:
21. :focus : 匹配当前获取焦点的元素
```html
$(function() {
$('input').focus(); //让input自动获取焦点
$('input:focus').css('background', 'red');
});
```
结果:输入框背景变为红色。
22. :root : 选择该文档的根元素,在HTML中,文档的根元素,和$(":root")选择的元素一样,永远是元素
```html
$(':root').css('background-color', 'yellow');
```
结果:整个页面背景变为黄色。
23. :target : 选择由文档URI的格式化识别码表示的目标元素
例如,给定的URI http://example.com/#foo, $("p:target"),将选择
元素。
24. :contains(text) : 匹配包含给定文本的元素
```html
boys
girls
boys and girls
$(function() {
$('div:contains("boys")').css('color', 'red');
});
```
结果:第一个div元素的文字颜色变为红色。
25. :empty : 匹配所有不包含子元素或者文本的空元素
这是有内容的p标签这是有内容的p标签
这是包含p元素的div标签
这是div标签中的p标签
这是没有p元素的div标签
0. :visible : 匹配所有的可见元素
```html
这是隐藏的div标签
这是显示的div标签
$(function(){
$(":visible").css("color", "red");
console.log($(":visible")); // 结果:获取到显示的div
});
```
结果:
31. [attribute] : 匹配包含给定属性的元素
```html
这是隐藏的div标签
这是显示的div标签
$(function(){
$("#visibleDiv").css("color", "red");
console.log($("#visibleDiv")); // 结果:获取到id为visibleDiv的元素,即显示的div
});
```
1. [attribute=value] : 匹配给定的属性是某个特定值的元素
```html
这是第一个div标签
这是第二个div标签
$(function(){
$( "div[class='myDiv']" ).css( "color", "red" );
});
```
结果:
这是第一个div标签
这是第二个div标签
32. [attribute!=value] : 匹配所有不含有指定的属性,或者属性不等于特定值的元素
```html
这是第一个div标签
这是第二个div标签
$(function(){
$( "div[class!='myDiv']" ).css( "color", "red" );
});
```
结果:
这是第一个div标签
这是第二个div标签
5. [attribute*=value] : 匹配给定的属性是以包含某些值的元素
示例代码:
```html
这是第一个div标签
这是第二个div标签
这是第三个div标签
$(function(){
$('div[class*=my]').css('color','red');
});
```
结果:
```html
这是第一个div标签
这是第三个div标签
```
这是第一个div标签
这是第二个div标签
这是第三个div标签
$(function(){
$('div[id][class*=Div]').css('color', 'red');
});
结果:
这是第一个div标签
这是第二个div标签
这是第三个div标签
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
9. 使用:last-child选择器可以匹配最后一个子元素,例如:
```html
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
```
通过JavaScript代码,我们可以将第一个div中的第二个p标签的颜色设置为红色:
```javascript
$(function() {
$('div p:last-child').css('color', 'red');
});
```
结果如下:
```
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签颜色变为红色,因为它是最后一个子元素
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签颜色变为红色,因为它是最后一个子元素
```
40. 使用:last-of-type选择器可以匹配某个父元素下类型相同的最后一个子元素。例如,如果我们想要将所有p标签的字体颜色设置为红色,但只针对那些在特定父元素下的最后一个p标签,可以使用:last-of-type选择器:
```html
这是第一个父元素中的第一个子元素
这是第一个父元素中的第二个子元素
这是第一个父元素中的第三个子元素
这是第二个父元素中的第一个子元素
这是第二个父元素中的第二个子元素
这是第二个父元素中的第三个子元素
```
通过JavaScript代码,我们可以将第一个父元素中的所有p标签的字体颜色设置为红色:
```javascript
$(function() {
$('.parent p:last-of-type').css('color', 'red');
});
```
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第一个div中的div标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
这是第二个div中的第三个p标签
45. :nth-last-of-type : 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个,序号从最后一个元素开始到第一个,序号从1开始
<div> <p>这是div中的第一个p标签</p> <p>这是div中的第二个p标签</p> <p>这是div中的第三个p标签</p> <div>这是div中的div标签</div> </div> <script type="text/javascript"> $(function(){ $("p:nth-last-of-type(2)").css("color","red"); }); </script>
结果:
这是div中的第一个p标签
这是div中的第二个p标签
这是div中的第三个p标签
这是div中的div标签
这是div标签
这是第一个p标签
这是第二个p标签
这是第三个p标签
这是第四个p标签
45. :only-child : 如果某个元素是父元素中唯一的子元素,那将会被匹配,如果父元素中含有其他元素,那将不会被匹配
<div> <div>这是div标签</div> <p>这是第一个p标签</p> </div> <div> <p>这是第二个p标签</p> </div> <script type="text/javascript"> $(function(){ $("p:only-child").css("color","red"); }); </script>
结果:
这是div标签
这是第一个p标签
这是第二个p标签
46. :only-of-type : 选择所有没有兄弟元素,且具有相同的元素名称的元素,如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配
重构后的代码如下:
```html
$(function() {
$(":only-of-type p").css("color", "red");
});
```
结果:
这是div标签
这是第一个p标签
这是第二个p标签
这是第三个p标签
```html
$(function() {
$(":input").css("color", "red");
});
```
9. 使用css样式设置密码框为红色:
```html
$(function() {
$(":password").css("color", "red");
});
```
结果:密码框颜色变为红色。
50. 匹配所有单选按钮的示例代码:
```html
$(function() {
$(":radio").css("color", "red");
});
```
4. :text : 匹配所有文本域
```html
$(function() {
$(":text").css("color", "red");
});
```
结果:文本输入框和密码输入框的颜色变为红色。
4. :reset : 匹配所重置按钮
```html
$(function(){
$(":reset").css("color", "red");
});
```
结果:
BUTTON1 BUTTON2
55. :button : 匹配所有按钮
```html
$(function(){
$(":button").css("color", "red");
});
```
结果:
BUTTON1 BUTTON2
56. :file : 匹配所有文件域
$(function() {
$(":file").css("color", "red");
});
$(function() {
$(":enabled").css("color", "red");
});
$(function() {
$(":disabled").css("color", "red");
});
$(function() {
$(":checked").css("color", "red");
});
请根据提供的内容完成内容重构,并保持段落结构:
```html
```
```javascript
$(function() {
$(":checked").css("color", "red");
});
```
结果:basketball、football、swim
## $.escapeSelector(selector)
该方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候。这个方法基本上与CSS中CSS.escape()方法类似,唯一的区别是jquery中的这个方法支持所有浏览器。
该选择器在jQuery库3.0版本才开始有。
```html
$(function(){
$.escapeSelector("#target"); // "\#target"
});
```