【前端】jquery选择器

最新推荐文章于 2025-06-24 10:51:06 发布

原创最新推荐文章于 2025-06-24 10:51:06 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

jquery选择器

jquery选择器允许你对HTML元素组或单个元素进行操作。
jquery选择器基于元素的id、类、属性、属性值等“查找”（或选择）HTML元素，它基于已经存在的css选择器，除此之外，它还有一些自定义的选择器。
jquery中所有的选择器都是以美元符号开头：$()。

元素选择器

what：jquery元素选择器基于元素名选取元素。

use：在页面中选取所有<p>元素：$("p")

how：实例：用户点击按钮后，所有<p>元素都隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元素选择器(runoob.com)</title> 
<script src="../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>

#id选择器

what：jquery #id 选择器通过HTML元素的id属性选取指定的元素。

通过id选取元素语法如下：$("#test")

实例：当用户点击按钮后，有id=“test”属性的元素将被隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>id选择器</title> 
<script src="../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>

.class选择器

what：jquery类选择器可以通过指定的class查找元素。

语法：$(".test")

实例：用户点击按钮后所有带有class=“test”属性的元素都被隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>类选择器</title> 
<script src="../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>