登录 主页

jQuery 选择器的使用

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 选取元素语法如下:

$("#test")
 
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>这是一个标题</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 名称前面加上一个  .

语法如下:

$(".test")

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> 元素:

$("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> 元素

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论