总结
jQuery选择器种类
1 通过CSS选择器选取元素
第一种:基本选择器
(1)标签选择器 (2)类选择器
(3)ID选择器 (4)并集选择器 (5)全局选择器
第二种:层次选择器
(1)后代选择器( ) (2)子选择器(>)
(3)相邻元素选择器(+) (4)同辈元素选择器(~)
第三种:属性选择器
(1) [attribute] (2) [attribute=value]
(3) [attribute^=value] (4) [attribute$=value]
(5) [attribute*=value]
2 通过过滤选择器选择元素
第一种:基本过滤选择器
(1):eq(index) (2):gt(index) (3):lt(index)
第二种:可见性过滤选择器
(1):visible (2):hidden
详细
1.jQuery选择器语法
jQuery选择器类似于CSS选择器,用来选取网页中的元素
$("h3").css("background","#09F");
获取并设置网页中所有<h3>
元素的背景
“h3”为选择器语法,必须放在$()
中
$(“h3”)
返回jQuery对象
.css()
是为jQuery对象设置样式的方法
2.jQuery选择器种类
2.1通过CSS选择器选取元素(常见)
第一种:基本选择器
(1)标签选择器
$("div").css({"background":"green","color":"yellow"});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("div").css({"background":"green","color":"yellow"});
});
});
</script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span</span>
<button>点我</button>
</body>
</html>
button按钮
(2)类选择器
$("p.test").css("background","yellowgreen");
<script type="text/javascript">
$(function(){
$("p.test").css("background","yellowgreen");
})
</script>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
特殊的
采用方法,可以放在最上面,只有触发,方法才会执行。
并且不需要加jquery初始化函数$(function(){});
</script>
<script type="text/javascript">
function a(){
$("h2").css("background","red")
}
</script>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button onclick="a()">点</button>
</body>
(3)ID选择器
$("#test").hide();
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
(4)并集选择器
$("div,span,p.myClass").css("background","green");
<script type="text/javascript">
$(function(){
$("div,span,p.myClass").css("background","green");
});
</script>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
</body>
(5)全局选择器
$("*").css("background","pink");
<script type="text/javascript">
$(function(){
$("*").css("background","pink");//全局变量
$("p:not(#three)").css("background","red");//部分需求
});
</script>
<body>
<p>a</p>
<p>b</p>
<p id="three">c</p>
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
</body>
第二种:层次选择器
(1)后代选择器( )
<script>
$(function(){
$("form input").css("background","red");
});
</script>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
(2)子选择器(>)
<script type="text/javascript">
$(function () {
$("form>input").css("background", "red");
});
</script>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
(3)相邻元素选择器(+)
<script type="text/javascript">
$(function () {
$("form+input").css("background", "red");
});
</script>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<input name="none" />
</body>
(4)同辈元素选择器(~)
<script type="text/javascript">
$(function () {
$("form~input").css("background", "red");
});
</script>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<input name="none" />
</body>
第三种:属性选择器
(1) [attribute
]
匹配包含给定属性的元素。
<script type="text/javascript">
$(function(){
$("div[name]").css("background","red");
//查找所有含有 name 属性的 div 元素
});
</script>
<body>
<div>
<p>Hello!</p>
</div>
<div name="test2">123</div>
</body>
(2)[attribute=value
]
匹配给定的属性是某个特定值的元素
<script type="text/javascript">
$(function () {
$("[name=test1]").css("background", "red");
//查找所有 name 属性是 test1 的元素
});
</script>
<body>
<div>
<p>Hello!</p>
</div>
<div name="test1">123</div>
<span name = "test2">456</span>
</body>
(3)[attribute^=value
]
(开头)匹配给定的属性是以某些值开始的元素
<script>
$(function(){
$("input[name^='newsle']").css("background","red");
//查找所有 name 以 'newsle' 开始的 input 元素
});
</script>
</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
</body>
</html>
(5)[attribute$=value
]
(结尾)匹配给定的属性是以某些值结尾的元素
<script>
$(function(){
$("input[name$='boy']").css("background","red");
//查找所有 name 以 'boy' 结尾的 input 元素
});
</script>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
</body>
(3)[attribute*=value
]
(包含)匹配给定的属性是以包含某些值的元素
<script>
$(function(){
$("input[name*='e']").css("background","red");
//查找所有 name 包含 'e' 的 input 元素
});
</script>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
</body>
2.2通过过滤选择器选择元素
第一种:基本过滤选择器
index 从 0 开始计数
(1):eq(index)
匹配一个给定索引值的元素
注意点:
返回值:jQueryeq(index|-index)
一个整数,指示元素基于0的位置,这个元素的位置是从0算起。
一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)
(2):gt(index)
匹配所有大于给定索引值的元素
(3):lt(index)
匹配所有小于给定索引值的元素
以上案例:
<script>
$(function(){
$("tr:eq(1)").css("background","red");
//$("tr:gt(1)").css("background","red");
//$("tr:lt(1)").css("background","red");
});
</script>
<body>
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
</body>
第二种:可见性过滤选择器
(1):visible
(2):hidden
<script type="text/javascript">
function a(){//隐藏
$("tr:visible").css("display","none");
//把看得见的隐藏起来
}
function b(){//显示
$("tr:hidden").css("display","block");
//把看不见的显示起来
}
</script>
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
<input type="button" value="隐藏Value2" onclick="a()"/>
<input type="button" value="显示Value1,value2" onclick="b()"/>
</table>
</body>
点隐藏Value2按钮
点显示Value1,value2按钮
3.jQuery选择器常见问题
(1)特殊符号的转义
A.html场景:
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
B.错误写法:
$("#id#a");
$("#id[2]");
C.正确写法:
$("#id\\#a");
$("#id\\[2\\]");
\ 就是简析 不和#和 [ ]混淆
(2)选择器中的空格很严格(有无空格的区别)
A.选取class为“test”的元素内部的隐藏元素
var $t_a = $(".test :hidden");
//带空格的jQuery选择器
B.选取隐藏的class为“test”的元素
var $t_b = $(".test:hidden");
//不带空格的
AB的区别
A可以识别子类的隐藏,B只能识别父类的隐藏。
<script type="text/javascript">
$(function(){
alert("看:"+$(".test :hidden").text())
alert("看:"+$(".test:hidden").text())
});
</script>
<body>
<div class="test">
<div style="display: none">123</div>
<div>234</div>
</div>
</body>
题外话:
p标签里面不能嵌套div
----2021.10.07