jQuery学习（二）--各种选择器说明

最新推荐文章于 2021-11-08 14:39:58 发布

moneyZhong

最新推荐文章于 2021-11-08 14:39:58 发布

阅读量641

点赞数

分类专栏： jQuery 文章标签： jquery jQuery JQUERY Jquery JQuery 过滤器选择器

本文链接：https://blog.csdn.net/moneyzhong/article/details/8395819

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的各种选择器，包括基本选择器、层次选择器、过滤选择器和表单选择器，并提供了相应的实例演示，帮助理解其用法。如基本选择器中的ID选择器和类选择器，层次选择器的后代选择器和直接子元素选择器，以及过滤选择器中的内容过滤和可见性过滤等。

摘要由CSDN通过智能技术生成

jQuery选择器的分类：

------基本选择器（basic）

------层次选择器（level）

------过滤选择器（filter）

------表单选择器（form）

基本选择器

实例1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
$(function(){
alert("id--->"+$("#test").length);
alert("class--->"+$(".test").length);
});
</script>
</head>

结果：id---->1 class---->2

层次选择器：

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
$(function(){
  alert($("body div").length);
  alert($("body > div").length);
  alert($("a + p").length);
  alert($("a ~ p").length);
});
</script>
</head>

<body>
<div>
<font>
<div>这个div无法通过body > div得到</div>
</font>
</div>

<a class="one"></a>
<p></p>
<p>a + p无法选择到这个</p>
<p>a + p无法选择到这个</p>
</body>
</html>

运行结果：

body div ---->4

body > div ---->3

a + p ---->1

a ~ p ----->3

过滤选择器

----基本过滤

----内容过滤

----可见性过滤

----属性过滤

----子元素过滤

-----表单对象属性过滤

基本过滤

内容过滤

可见性过滤器

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
$(function(){
  $("#click").click(function(){
   $(":hidden").show(1000).css("background","blue");
  });
});
</script>
</head>