jQuery选择器

最新推荐文章于 2023-06-21 00:59:21 发布

jenice_forever

最新推荐文章于 2023-06-21 00:59:21 发布

阅读量265

点赞数

分类专栏：前端开发的必经之路文章标签： jquery web

本文链接：https://blog.csdn.net/liujing96/article/details/72763017

版权

前端开发的必经之路专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、id选择器：——“#”

一个用来查找的ID，即元素的id属性

$( "#id" )

id选择器也是基本的选择器，jQuery内部使用JavaScript函数 document.getElementById()来处理ID的获取。

原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器

 
  值得注意： 
 
  id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。

2、类选择器：—— “.”

通过class样式类名来获取节点

描述：

$( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是 优势就是可以多选。

同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生 getElementsByClassName()函数来实现的。

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 90px;

float: left;

padding: 5px;

margin: 5px;

background-color: #EEEEEE;

}

</style>

</head>

<body>

<p>class="aaron"</p>

</div>

<p>class="aaron"</p>

</div>

<p>class="imooc"</p>

<p>jQuery选中</p>

</div>

<p>class="imooc"</p>

<p>jQuery选中</p>

</div>

//通过原生方法处理

//样式是可以多选的，所以得到的是一个合集

//需要通过循环给合集中每一个元素修改样式

var divs = document.getElementsByClassName('aaron');

for (var i = 0; i < divs.length; i++) {

divs[i].style.border = "3px solid blue";

}

</script>

//通过jQuery直接传入class

//class选择器可以选择多个元素

$(".imooc").css("border", "3px solid red");//内部含有隐式的循环处理

</script>

</body>

</html>

我们不难发现：

jQuery除了选择上的简单，而且没有再次使用循环处理

不难想到$(".imooc").css()方法内部肯定是带了一个隐式的循环处理，所以使用jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作，后续我们还会慢慢的学到其他的优势。

3、元素选择器：

根据给定（html）标记名称选择所有的元素

描述：

$( "element" )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法 getElementsByTagName()函数支持。

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 90px;

float: left;

padding: 5px;

margin: 5px;

background-color: #EEEEEE;

}

</style>

</head>

<body>

<p>class="aaron"</p>

</div>

<p>class="aaron"</p>

</div>

<p>class="imooc"</p>

<p>jQuery选中</p>

</div>

<p>class="imooc"</p>

<p>jQuery选中</p>

</div>

//通过原生方法处理

//获取到所有的节点标记名为div的元素

//给每一个div加上蓝色的边框

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {

divs[i].style.border = "3px solid blue";

}

</script>

//通过jQuery直接传入标签名p

//标签是可以多个的，所以得到的同样也是一个合集

$("p").css("border", "3px solid red");

</script>

</body>

</html>

第一组：通过getElementsByTagName方法得到页面所有的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的boder样式

第二组：同样的效果，$("p")选取所有的<p>元素，通过css方法直接赋予样式

4、全选择器：—— “*”

在CSS中，经常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

通配符*意味着给 所有的元素设置默认的边距。

jQuery中我们也可以通过传递*选择器来选中文档页面中的元素

描述：

$( "*" )

抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到。

不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:

IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的。
getElementById的参数在IE8及较低的版本不区分大小写
IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
IE8及较低的版本，浏览器不支持getElementsByClassName

5、层级选择器：

文档中的所有的节点之间都是有这样或者那样的关系。
我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。
选择器中的层级选择器就是用来处理这种关系。

仔细观察层级选择器之间还是有很多相似与不同点：

层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>子选择器与后代选择器</h2>

<p>div下的第一个p元素</p>

</div>

<p>div下的第一个p元素</p>

</div>

<p>div下的article下的p元素</p>

</article>

</div>

<p>div下的article下的p元素</p>

</article>

</div>

//子选择器

//$('div > p') 选择所有div元素里面的子元素P

$('dic>p').css("border", "1px groove red");

</script>

//后代选择器

//$('div p') 选择所有div元素里面的p元素

$('div p').css("border", "1px groove red");

</script>

<h2>相邻兄弟选择器与一般兄弟选择器</h2>

<div>兄弟节点div, +~选择器不能向前选择</div>

<span class="prev">选择器span元素</span>

<div>span后第一个兄弟节点div</div>

<div>兄弟节点div

<div class="small">子元素div</div>

</div>

<span>兄弟节点span,不可选</span>

<div>兄弟节点div</div>

</div>

//相邻兄弟选择器

//选取prev后面的第一个的div兄弟节点

$(".prev+div").css("border", "3px groove blue");

</script>

//一般相邻选择器

//选取prev后面的所有的div兄弟节点

$(".prev~div").css("border", "3px groove blue");

</script>

</body>

</html>

6、筛选选择器：—— “：”

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：

注意事项：

:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>基本筛选器</h2>

<h3>:first/:last/:even/:odd</h3>

<p>div:first</p>

</div>

</div>

</div>

</div>

</div>

</div>

//找到第一个div

$(".div:first").css("color", "#CD00CD");

</script>

//找到最后一个div

$(".div:last").css("color", "#CD00CD");

</script>

//:even 选择所引值为偶数的元素，从 0 开始计数

$(".div:even").css("border", "3px groove red");

</script>

//:odd 选择所引值为奇数的元素，从 0 开始计数

$(".div:odd").css("border", "3px groove blue");

</script>

</div>

</div>

</div>

</div>

</div>

</div>

//:eq

//选择单个

$(".aaron:eq(2)").css("border", "3px groove blue");

</script>

//:gt 选择匹配集合中所有索引值大于给定index参数的元素

$(".aaron:gt(3)").css("border", "3px groove blue");

</script>

//:lt 选择匹配集合中所有索引值小于给定index参数的元素

//与:gt相反

$(".aaron:lt(2)").css("color", "#CD00CD");

</script>

<div>

<p>Aaron</p>

</div>

<div>

</div>

<div>

</div>

//:not 选择所有元素去除不匹配给定的选择器的元素

//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

$("input:not(:checked)+p").css("background-color", "#CD00CD");

</script>

</body>

</html>

7、内容筛选选择器：

基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上。

内容过滤器描述如下表：

注意事项：

1、:contains与:has都有查找的意思，但是 contains查找包含“指定文本”的元素， has查找包含“指定元素”的元素

2、如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3、:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>内容筛选器</h2>

<h3>:contains/:has</h3>

<p>:contains</p>

</div>

<p>:contains</p>

</div>

<p>

</p>

</div>

<p>:contains</p>

</div>

//查找所有class='div'中DOM元素中包含"contains"的元素节点

//并且设置颜色

$(".div:contains(':contains')").css("color", "#CD00CD");

</script>

//查找所有class='div'中DOM元素中包含"span"的元素节点

//并且设置颜色

$(".div:has(span)").css("color", "blue");

</script>

<h3>:parent/:empty</h3>

<a>:parent</a>

</div>

<a>:parent</a>

</div>

<a>:parent</a>

</div>

<a></a>

</div>

//选择所有包含子元素或者文本的a元素

//增加一个蓝色的边框

$("a:parent").css("border", "3px groove blue");

</script>

//找到a元素下面的所有空节点(没有子元素)

//增加一段文本与边框

$("a:empty").text(":empty").css("border", "3px groove red");

</script>

</body>

</html>

8、可见性筛选选择器：

元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden。

这2个选择器都是 jQuery 延伸出来的，看起来比较简单，但是元素可见性依赖于适用的样式

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素：

CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。

可见元素的宽度或高度，是大于零。

元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>可见性筛选选择器</h2>

<h3>:visible/:hidden</h3>

<a>display</a>

<p id="div1" style="display:none;">display</p>

</div>

<a>width</a>

<a>height</a>

<p id="div2" style="width:0;height:0">width/height</p>

</div>

<a>visibility</a>

<a>opacity</a>

<p id="div3" style="visibility:hidden;opacity:0">visibility</p>

</div>

function show (ele) {

if (ele instanceof jQuery) {

$("#show").html('元素的长度的 = ' + ele.length)

} else {

alert(ele+' 不是jQuery对象')

}

</script>

//查找id = div1的DOM元素,是否可见

show( $("#div1:visible") ); //元素的长度=0

</script>

//查找id = div2的DOM元素,是否可见

show( $("#div2:visible") ); //元素的长度=0

</script>

//查找id = div3的DOM元素,是否可见

show( $("#div3:visible") ); //元素的长度=1

</script>

//查找id = div1的DOM元素,是否隐藏

show( $("#div1:hidden") ); //元素的长度=1

</script>

//查找id = div2的DOM元素,是否隐藏

show( $("#div2:hidden") ); //元素的长度=1

</script>

//查找id = div3的DOM元素,是否隐藏

show( $("#div3:hidden") ); //元素的长度=0

</script>

</body>

</html>

9、属性选择器：

属性选择器让你可以基于属性来定位一个元素。

可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位 不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等

[attr*="value"]能在网站中帮助我们 匹配不同类型的文件

示例：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>属性筛选选择器</h2>

</div>

</div>

</div>

</div>

//查找所有div中，属性name=p1的div元素

$(".div[name=p1]").css("border", "3px groove red");

</script>

//查找所有div中，有属性p2的div元素

$(".div[p2]").css("border", "3px groove blue");

</script>

//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

$(".div[name|='-']").css("border", "3px groove #00FF00");

</script>

//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素

$(".div[name~='a']").css("border", "3px groove #668B8B");

</script>

</div>

</div>

</div>

</div>

//查找所有div中，属性name的值是用imooc开头的

$(".div[name^='imooc']").css("border", "3px groove red");

</script>

//查找所有div中，属性name的值是用imooc结尾的

$(".div[name$=imooc]").css("border", "3px groove blue");

</script>

//查找所有div中，有属性name中的值包含一个test字符串的div元素

$(".div[name*=test]").css("border", "3px groove #00FF00");

</script>

//查找所有div中，有属性testattr中的值没有包含"true"的div

$(".div[testattr!=true]").css("border", "3px groove #668B8B");

</script>

</body>

</html>

10、子元素筛选选择器：

子元素筛选选择器 不常使用，其筛选规则比起其它的选择器稍微要复杂点。

子元素筛选选择器描述表：

注意事项：

:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
如果子元素只有一个的话，:first-child与:last-child是同一个
:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>子元素筛选选择器</h2>

<h3>:first-child、:last-child、:only-child</h3>

<a>:first-child</a>

<a>第二个元素</a>

<a>:last-child</a>

</div>

<a>:first-child</a>

</div>

<a>:first-child</a>

<a>第二个元素</a>

<a>:last-child</a>

</div>

//查找class="first-div"下的第一个a元素

//针对所有父级下的第一个

$(".first-div a:first-child").css("color", "#CD00CD");

</script>

//查找class="first-div"下的最后一个a元素

//针对所有父级下的最后一个

//如果只有一个元素的话，last也是第一个元素

$(".first-div a:last-child").css("color", "red");

</script>

//查找class="first-div"下的只有一个子元素的a元素

$(".first-div a:only-child").css("color", "blue");

</script>

<h3>:nth-child、:nth-last-child</h3>

<a>:first-child</a>

<a>第二个元素</a>

<a>第三个元素</a>

<a>:last-child</a>

</div>

<a>:first-child</a>

<a>第二个元素</a>

</div>

<a>:first-child</a>

<a>第二个元素</a>

<a>第三个元素</a>

<a>:last-child</a>

</div>

//查找class="last-div"下的第二个a元素

$(".last-div a:nth-child(2)").css("color", "#CD00CD");

</script>

//查找class="last-div"下的倒数第二个a元素

$(".last-div a:nth-last-child(2)").css("color", "red");

</script>

</body>

</html>

11、 表单元素选择器：

无论是提交还是传递数据， 表单元素在动态交互页面的作用是非常重要的。

jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素

表单选择器的具体方法描述：

注意事项：

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

12、表单对象属性筛选选择器：

除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选。

表单筛选选择器的描述：

注意事项：

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

<!DOCTYPE html>

<html>

<head>

<style>

input {

display: block;

margin: 10px;

padding: 10px;

}

</style>

</head>

<body>

<h2>子元素筛选选择器</h2>

<h3>enabled、disabled</h3>

<form>

</form>

//查找所有input所有可用的（未被禁用的元素）input元素。

$("input:enabled").css("border", "2px groove red");

</script>

//查找所有input所有不可用的（被禁用的元素）input元素。

$("input:disabled").css("border", "2px groove blue");

</script>

<h3>checked、selected</h3>

<form>

<option>imooc</option>

<option>aaron</option>

</select>

</form>

//查找所有input所有勾选的元素(单选框,复选框)

//移除input的checked属性

$("input:checked").removeAttr('checked')

</script>

//查找所有option元素中,有selected属性被选中的选项

//移除option的selected属性

$("option:selected").removeAttr('selected')

</script>

</body>

</html>

13、特殊选择器：this

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var imooc = {

name:"慕课网",

getName:function(){

//this,就是imooc对象

return this.name;

}

imooc.getName(); //慕课网

当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)，具体的大家可以查阅相关资料。

同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用。

假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){

//this === p

//以下两者的修改都是等价的

this.style.color = "red";

p.style.color = "red";

},false);

通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可

this.style.color = "red"

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

换成jQuery的做法：

$('p').click(function(){

//把p元素转化成jQuery的对象

var $this= $(this)

$this.css('color','red')

})

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

总体：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。

$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。