2023-09-15 02:49PM
参考：https://www.runoob.com/jquery/jquery-selectors.html
https://www.liaoxuefeng.com/wiki/1022910821149312/1023023555539648
jQuery 中的所有选择器都是以美元符号 $ 开头：$()
jQuery的选择器可以帮助我们快速定位到一个或多个DOM节点。
1. 按 id 进行查找：
jQuery #id 选择器可以通过 HTML 元素中的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>
注意，#test以#开头。返回的对象是jQuery对象。
jQuery对象：jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。
jQuery的选择器不会返回undefined或者null，这样的好处是你可以不用在下一行判断if (div === undefined)
运行完这段代码之后，会隐藏掉 id ="test" 属性的元素
2. 按class进行查找：
jQuery 类选择器可以通过指定的 class 查找元素。
注意，按 class 进行查找需要在 class 名称前面加上一个 .
语法如下：
eg:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>
运行完这段代码之后，会隐藏掉 class ="test" 属性的元素
3. 按元素进行查找：
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
eg：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
运行完这段代码之后，会隐藏掉所有 <p> 元素
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论