JQuery的选择器【二】

最新推荐文章于 2021-04-29 14:50:44 发布

Joss_dzy

最新推荐文章于 2021-04-29 14:50:44 发布

阅读量371

点赞数

本文链接：https://blog.csdn.net/Joss_dzy/article/details/80564460

版权

一、选择器的作用：
类似于CSS中选择器，在进行元素操作之前，要使用选择器选中元素。
如：document.getElementById("id") id选择器

二、jQuery常用的选择器有如下：
1. 基本选择器
2. 层级选择器
3. 属性选择器
4. 基本过滤选择器
5. 表单属性选择器

三．基本选择器
1. 选择器的语法：
1). ID选择器： $("#ID")
2). 类选择器： $(".类名")
3). 标签选择器： $("标签名")

2. 示例：基本选择器的使用
<script type="text/javascript">
// 1) 改变 id 为one的元素的背景色为红色
$("#b1").click(function(){
$("#one").css("background", "red");
});

// 2) 改变元素名为 <div> 的所有元素的背景色为红色。
$("#b2").click(function(){
//jq中不少方法既可以操作一个对象，也可以操作一个集合，自动进行遍历
$("div").css("background", "red");
});

// 3) 改变 class 为 mini 的所有元素的背景色为红色
$("#b3").click(function(){
$(".mini").css("background", "red");
});

// 4) 改变所有的<span>元素和 id 为 two 的元素的背景色为红色，并集选择器
$("#b4").click(function(){
$("span,#two").css("background", "red");
});
</script>

四．层级选择器
1. 语法：
1) 获得A元素内部的所有的B元素： $("A B")
说明：B元素是A元素的子孙标签
2) 获得A元素下面的所有B子元素：$("A>B")
说明：B元素只是A元素的子元素，不含孙元素
3) 获得A元素同级，下一个B元素：$("A+B")
说明：B元素是A元素的兄弟元素，如果A元素是排行老二，B元素排序老三
4) 获得A元素同级，所有后面B元素(多个元素)：$("A~B")
说明：B元素是A元素后面的所有的兄弟元素，如果A元素是排行老二，B元素是老三，四...
5) 得到所有的兄弟： siblings() ，指定具体的标签：siblings("标签")

2. 示例：
//1) 改变 <body> 内所有 <div> 的背景色为红色
$("#b1").click(function(){
$("body div").css("background", "red");
});

//2) 改变 <body> 内子 <div> 的背景色为红色
$("#b2").click(function(){
$("body>div").css("background", "red");
});

//3) 改变 id 为 one 的下一个 <div> 的背景色为红色
$("#b3").click(function(){
$("#one+div").css("background", "red");
});

//4) 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为红色
$("#b4").click(function(){
$("#two~div").css("background", "red");
});

//5) 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红
$("#b5").click(function(){
//siblings() 表示所有的兄弟
//$("#two").siblings().css("background","red");
// 选择所有div的兄弟，无论前后
$("#two").siblings("div").css("background","red");
});

五．属性选择器
1. 语法：
1) 获得有属性名的元素： $("标签[属性名]")
2) 获得属性名等于值元素： $("标签[属性名='属性值']")
3) 获得属性名不等于值元素： $("标签[属性名!='属性值']")
4) 获得属性名以值开头元素： $("标签[属性名^='属性值']")
5) 获得属性名以值结尾元素： $("标签[属性名$='属性值']")
6) 获得属性名含有值元素： $("标签[属性名*='属性值']")
7) 复合属性选择器，多个属性同时过滤：$("标签[属性名='属性值'][属性名='属性值'][属性名='属性值']")

2. 示例：
//1) 含有属性title 的div元素背景色为红色
$("#b1").click(function() {
$("div[title]").css("background","red");
});

//2) 属性title值等于test的div元素背景色为红色
$("#b2").click(function() {
$("div[title='test']").css("background","red");
});

//3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
$("#b3").click(function() {
$("div[title!='test']").css("background","red");
});

//4) 属性title值以te开始的div元素背景色为红色
$("#b4").click(function() {
$("div[title^='te']").css("background","red");
});

//5) 属性title值以est结束的div元素背景色为红色
$("#b5").click(function() {
$("div[title$='est']").css("background","red");
});

//6) 属性title值含有es的div元素背景色为红色
$("#b6").click(function() {
$("div[title*='es']").css("background","red");
});

//7) 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色
$("#b7").click(function() {
$("div[id][title*='es']").css("background","red");
});

六．基本过滤选择器
1. 语法：
1) 获得选择的元素中的第一个元素
:first

2) 获得选择的元素中的最后一个元素
:last

3) 不包括指定内容的元素
:not(选择器)

4) 偶数，从 0 开始计数
:even

5) 奇数，从 0 开始计数
:odd

6) 指定第几个
:eq(n)

7) 大于第n个，不含第index个
:gt(n) --- greater than

8) 小于第n个，不含第index个
:lt(n) --- less than

9) 获得标题所有标题元素（<h1> /<h2> ....）
:header

10) 获得正在执行动画的元素
:animated

2. 示例：
//向上滑动
$("#mover").slideUp(5000);

//1) 改变第一个 div 元素的背景色为红色，从0开始
$("#b1").click(function(){
$("div:first").css("background","red");
});

//2) 改变最后一个 div 元素的背景色为红色
$("#b2").click(function(){
$("div:last").css("background","red");
});

//3) 改变class不为 one 的所有 div 元素的背景色为红色
$("#b3").click(function(){
$("div:not(.one)").css("background","red");
});

//4) 改变索引值为偶数的 div 元素的背景色为红色，不会层级
$("#b4").click(function(){
$("div:even").css("background","red");
});

//5) 改变索引值为奇数的 div 元素的背景色为红色
$("#b5").click(function(){
$("div:odd").css("background","red");
});

//6) 改变索引值为大于 3 的 div 元素的背景色为红色
$("#b6").click(function(){
$("div:gt(3)").css("background","red");
});

//7) 改变索引值为等于 3 的 div 元素的背景色为红色
$("#b7").click(function(){
$("div:eq(3)").css("background","red");
});

//8) 改变索引值为小于 3 的 div 元素的背景色为红色
$("#b8").click(function(){
$("div:lt(3)").css("background","red");
});

//9) 改变所有的标题元素的背景色为红色
$("#b9").click(function(){
$(":header").css("background","red");
});

//10) 改变当前正在执行动画的所有元素的背景色为红色
$("#b10").click(function(){
$(":animated").css("background","red");
});

七．表单属性选择器
1. 语法：
1) 可用：
:enabled
2) 不可用：
:disabled
3) 选中（单选radio ，多选checkbox）：
:checked
4) 选择（下列列表 <select>中的<option>）：
:selected

2. 示例：
//1) 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
$("#b1").click(function(){
$("input[type='text']:enabled").val("我们是米虫");
});

//2) 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
$("#b2").click(function(){
$("input[type='text']:disabled").val("我们是米虫");
});

//3) 利用 jQuery 对象的 length 属性获取多选框选中的个数，并且循环输出每个选中的元素值。
$("#b3").click(function(){
var ck = $("input[name='items']:checked");
alert(ck.length);
for(var i=0; i<ck.length; i++) {
//循环时数组中的每个元素都是JS对象
alert(ck[i].value);
}
});

//4) 利用 jQuery 对象的 text() 方法或JS对象的innerHTML获取下拉框选中的option中的内容，并且循环输出每个文本。
//text()相当于innerText
$("#b4").click(function(){
var op = $("option:selected");
for(var i=0; i<op.length; i++) {
alert(op[i].innerHTML);
}
});