jQuery选择器

最新推荐文章于 2024-07-27 19:50:16 发布

爽走不解释

最新推荐文章于 2024-07-27 19:50:16 发布

阅读量162

点赞数

分类专栏： jQuery入门文章标签： jquery

本文链接：https://blog.csdn.net/weixin_52841956/article/details/113349757

版权

jQuery入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们学习有关如何选取 HTML 元素，关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

先来看一些jQuery选择器的介绍：

什么是jQuery选择器？

选择器，就是用一种方式把你想要的那一个元素选中。把这个元素选中了，你才能对它进行各种操作。
jQuery 选择器和 CSS 选择器几乎完全一样，我们在接下来的学习中应该多对比一下这两者，这样学习速度可以提高很多。

在 JavaScript 中，如果想要选取元素，只能使用 getElementById()、getElementsByTagName()、getElementsByClassName() 等方法来获取。
这些方法的功能有限，并且名字“又长又臭”

而 jQuery 选择器完全继承了 CSS 选择器的风格，极大地方便了我们的开发。因为它不仅语法简单，而且功能也非常强大。
jQuery 选择器有两类：一类是“基础选择器”，另一类是“伪类选择器”

jQuery选择器优势

简单来所介绍以下几个：

代码更简单
支持CSS1到CSS3选择器
完善的机制处理

jQuery选择器分类

分类基本如下：

通过CSS选择器选取元素

基本选择器
层次选择器
属性选择器

通过过滤选择器选择元素

基本过滤选择器
可见性过滤选择器

这些类别呢又可以分为具体的子类别

基本选择器

基本选择器包括

标签选择器、
类选择器、
ID选择器、
并集选择器、
全局选择器、

在这里插入图片描述

一、标签选择器

标签选择器根据给定的标签名匹配元素

代码示例：

<head>
<meta charset="utf-8"> 
<title>Test</title> 
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

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

二、类选择器

类选择器根据给定的class匹配元素

代码示例：

<head>
<meta charset="utf-8"> 
<title>Test</title> 
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
   $(".test").css({"background":"#efefef","padding":"5px"});
  });
});
</script>
</head>

<body>
<h2 class="test">这是一个标题</h2>
<button>点我改变样式</button>
</body>

三、ID选择器

ID选择器根据给定的id匹配元素

代码示例：

<head>
<meta charset="utf-8"> 
<title>Test</title> 
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
   $("#test").css("color","#083499");
  });
});
</script>
</head>

<body>
<h2 id="test">这是一个标题</h2>
<button>点我改变颜色</button>
</body>

四、全局选择器

全局选择器可以获取所有元素

代码示例：

<head>
<meta charset="utf-8"> 
<title>Test</title> 
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
   $("*").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是另一个段落。</p>
<button>点我隐藏所以</button>
</body>

五、并集选择器

并集选择器用来合并元素集合

<body>
<div id="d1">test</div>
<div id="d2" class="cls">前端开发</div><script>
console.log($('#d1 ' ));
console.log($( 'div'));
console.log($( '.cls'));
//通配符选择器–儿配所有
console.log($('*'));
//组合选择器–多个选择器之间使用逗号分隔(并集)
console.log($('#d1，.cls'));
//组合选择器–多个选择器之间没有任何分隔(交集)
console.log($('#d2.cls'));
</script>
</body>

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

层次选择器包括

后代选择器
子选择器
相邻元素选择器
同辈元素选择器

在这里插入图片描述
直接来看代码：

<body>
<div id="parent">
     <div id="child">
     <div id="d6"></div>
     <div id="d1"></div>
     <div id="d2"></div>
     <div id="d4"></div>
     <div id="d5"></div>
</div>
    <div id="child2">
<div id="d3"></div>
    </div>
</div><script>
console.log($('#parent div'));
//父子选择器
console.log($('#parent>div'));
//指定元素的下一个相邻兄弟元素
console.log($('#d1+div'));
//指定元素的后面所有的兄弟元素
console.log($('#d1~div'));
// siblings()方法–获取指定元素所有的兄弟元素(前面+后面)
console.log($('#d1').siblings('div'));
</script>
</body>

属性选择器

属性选择器通过HTML元素的属性来选择元素

在这里插入图片描述
代码示例：

<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
console.log($('div[name]'));
console.log($('div[class=mydiv]'));
//[attr!=value]选择器–包含没有attr属性的元素
console.log($('div[class!=mydiv]'));

console.log($('div[class^=my]'));
//属性过滤选择器组合用法->交集
console.log($('div[name=d1][class^=my]'));

</script>
</body>

可见性过滤选择器

通过元素显示状态来选取元素

在这里插入图片描述
代码格式：

$("p:hidden").show();
$("p:visible").hide();

也就是隐藏和显示操作，上面的一些例子中已经用到过了，就不多说了

基本过滤选择器

常用的一些如图，具体例子就不举了，用法和上面的都差不多：
在这里插入图片描述
更多详情就去参考官方文档哦

爽走不解释

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

我们学习有关如何选取 HTML 元素，关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。先来看一些jQuery选择器的介绍：什么是jQuery选择器？选择器，就是用一种方式把你想要的那一个元素选中。把这个元素选中了，你才能对它进行各种操作。jQuery 选择器和 CSS 选择器几乎完全一样，我们在接下来的学习中应该多对比一下这两者，这样学习速度可以提高很多。在 JavaScript 中，如果想要选取元素，只能使用 getElementById()、getElementsBy
复制链接

扫一扫

专栏目录