jQuery基础——使用选择器—1基本选择器与结构选择器

面相进程，面相对象

已于 2022-11-04 13:40:54 修改

阅读量262

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-11-01 13:35:45 首次发布

本文链接：https://blog.csdn.net/weixin_57575133/article/details/127631492

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择器是jQuery的根基。在jQuery中，遍历DOM、事件处理、CSS控制、动画设计和Ajax操作都依赖于选择器。如果熟练使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

1、jQuery选择器基础

jQuery选择器采用CSS和Xpath选择器语法规范，能够满足用户在DOM中快速匹配元素或元素集合。jQuery选择器解决两个难题：

支持CSS1、CSS2、CSS3不同的版本的所有选择器，而很多早期浏览器并没有完全支持CSS3版本的选择器。
支持不同类型的主浏览器，因此使用jQuery选择文档对象时，就不用考虑浏览器的兼容性问题。

简单地说，jQuery选择器具有一下的优势：

简化代码书写。
完善的支持。支持CSS不同版本选择器，同时也支持不同类型浏览器。
完善的处理机制。jQuery选择器的核心依然依靠JavaScript的原生方法，如getElementById（）和getElementByTagName（）等方法，但是它封装原生方法的使用，简化了代码书写又避免了易错问题。

jQuery选择器返回值均是一个伪数组对象，如果没有匹配元素，则返回一个空的伪数组对象。

				// 判断一个jQuery对象是否存在
				if($("tr").length > 0){
					// 处理代码
				}

jQuery选择器分为基本选择器、结构选择器、过滤选择器、属性选择器以及表单选择器等。

2、基本选择器

基本选择器主要包括5中类型：ID选择器、类型选择器、类选择器、通配选择器、分组选择器，这与CSS基本选择器类型相一致，详情说明如表所示：

jQuery基本选择器类型
选择器	返回值
#id（ID选择器）	包含单个元素的jQuery对象
element（类型选择器）	包含同类型元素的jQuery对象
.class（类选择器）	包含同类元素的jQuery对象
*（通配选择器）	包含所有元素的jQuery对象
selector1，selector2，selectorN（分组选择器）	包含多组匹配元素的jQuery对象

2.1、#id 选择器

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

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="./jquery/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
//JavaScript提供原生的方法getElementById(),
// document.getElementById("test");
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

2.2、元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>)</title> 
<script src="./jquery/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
//JavaScript提供原生的方法getElementByTagName(),
// document.getElementByTagName("p");
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

2.3、.class 选择器

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

语法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="./jquery/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
//JavaScript提供原生的方法getElementByClassName(),
// document.getElementByClassName("test");
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

2.4、通配选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>)</title> 
<script src="./jquery/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
//JavaScript提供原生的方法getElementByTagName(),
// document.getElementByTagName("*");
    $("body *").css("color","red");
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

2.5、分组选择器

选择多组元素可以通过逗号分隔符来分隔多个不同选择器，这些选择器可以是任意类型的，也可以是复合选择器。用法如下：

$("selector1,selector2,selectorN");

3、结构选择器

结构选择器就是根据HTML文档结构中的节点之间的包含或者并列关系决定匹配元素的一种方法。jQuery模仿CSS的关系过滤模式定义了4个关系选择器，同时还根据包含关系，自定义了4个子元素选择器。

3.1 、层级选择器

层级选择器能根据元素之间的结构关系进行匹配操作，主要包括包含选择器、子选择器、相邻选择器和兄弟选择器。

层级选择器
选择器	例子
ancestor descendant （包含选择器）	$("from input") 可以匹配表单下所有的input元素
parent>child （子选择器）	$("from>input") 可以匹配表单下所有的子级input元素
prev+next （相邻选择器）	$("label+input") 可以匹配所有跟在label后面的input元素
prev~siblings （兄弟选择器）	$("from~input") 可以匹配匹配到所有与表单同辈的input元素

3.2、子元素选择器

子元素选择器就是通过当前匹配元素选择该元素包含的特定子元素。子元素选择器主要包括4中类型。

子元素选择器
选择器	说明
:nth-child	匹配其父元素下的第N个或奇偶元素
:first-child	匹配第一个子元素 :first选择器只匹配第一个元素，而:first-child选择符将为每个父元素匹配一个子元素
:last-child	匹配最后一个子元素 :last只匹配一个元素，而:last-child选择符将为每个父元素匹配一个子元素
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配

面相进程，面相对象

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery基础——使用选择器—1基本选择器与结构选择器

选择器是jQuery的根基。在jQuery中，遍历DOM、事件处理、CSS控制、动画设计和Ajax操作都依赖于选择器。如果熟练使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。
复制链接

扫一扫