前端JS jQuery选择器

最新推荐文章于 2022-09-19 15:15:05 发布
最新推荐文章于 2022-09-19 15:15:05 发布
阅读量367 收藏 2
点赞数
分类专栏： JS基础 jQuery 文章标签： jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56557880/article/details/120652575
版权

目录

1.jQuery选择器语法

2.jQuery选择器的种类

2.1通过CSS选择器选取元素

2.1.1基本选则器

 2.1.2层次选择器

 2.1.3属性选择器

2.2通过过滤选择器选择元素 

2.2.1基本过滤选择器

 2.2.2可见性过滤选则器

3.jQuery选择器常见问题

 3.1特殊符号的转义

3.2选择器中的空格很严格(有无空格的区别)

1.jQuery选择器语法

jQuery选择器类似于CSS选择器，用来选取网页中的元素

$("h3").css("background","#09F");

获取并设置网页中所有h3标签背景色

“h3”为选择器语法，必须放在$()中

$(“h3”)返回jQuery对象

.css()是为jQuery对象设置样式的方法

2.jQuery选择器的种类

2.1通过CSS选择器选取元素

2.1.1基本选则器

先设置一个文档:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="one">杨幂</div>
    <div id="one">迪丽热巴</div>
    <div class="one">古力娜扎</div>
    <span>李沁</span>
</body>
</html>

（1）标签选择器

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("div").css("background","yellow");
    });
</script>

选择结果： 

 （2）类选择器

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $(".one").css("background","yellow");
    });
</script>

选择结果：

 （3）ID选择器

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("#one").css("background","yellow");
    });
</script>

 （4）并集选择器

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("#one,.one").css("background","yellow");
    });
</script>
在选择器中同一个分号内用,隔开，多个选择器一起，称为并集选择器

（5）全局选择器

选择器为*，全局选择

 2.1.2层次选择器

（1）后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>杨幂</div>
        <div>迪丽热巴</div>
        <span><div>古力娜扎</div></span>
        <p><div>李沁</div></p>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("div div").css("background","yellow");
    });
</script>
</html>

 （2）子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>杨幂</div>
        <div>迪丽热巴</div>
        <span><div>古力娜扎</div></span>
        <p><div>李沁</div></p>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("div>div").css("background","yellow");
    });
</script>
</html>
李沁被染色，说明其中<p>标签中不能包含<div>，会出错

 （3）相邻元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>杨幂</div>
        <div>迪丽热巴</div>
        <span>
            23333333<div>古力娜扎</div>
        </span>
        <div>李沁</div>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("div+span").css("background","yellow");
    });
</script>
</html>
相邻元素的文本选择

 （4）同辈元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>杨幂</div>
        <div>迪丽热巴</div>
        <span>
            23333333<div>古力娜扎</div>
        </span>
        <div>李沁</div>
    </div>
    <span>佟丽娅</span>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("div~span").css("background","yellow");
    });
</script>
</html>

 2.1.3属性选择器

 （1）[ ]包含，即属性为框内内容的选择器 [name] 属性值包含name的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div id="one">杨幂</div>
        <div>迪丽热巴</div>
        <span id="two">
            23333333<div>古力娜扎</div>
        </span>
        <div>李沁</div>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("[id]").css("background","yellow");
    });
</script>
</html>

 （2）= 等值，属性值为xxx的 [id=33] 属性值为33的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div id="one">杨幂</div>
        <div>迪丽热巴</div>
        <span id="two">
            23333333<div>古力娜扎</div>
        </span>
        <div>李沁</div>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("[id=one]").css({"background":"yellow","color":"blue%","font-size":"200%"});
    });
</script>
</html>

 

 （3）^ 以。。。开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div name="abcdefg">杨幂</div>
        <div name="gfedcba">迪丽热巴</div>
        <div name="abc">李沁</div>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("[name^=abc]").css({"background":"yellow","color":"blue%","font-size":"200%"});
    });
</script>
</html>

 

 （2）$ 以。。。结尾

<!DOCTYPE html>
<html lang="en">	
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div name="abcdefg">杨幂</div>
        <div name="gfedcba">迪丽热巴</div>
        <div name="abc">李沁</div>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("[name$=g]").css({"background":"yellow","color":"blue%","font-size":"200%"});
    });
</script>
</html>

 （5）* 属性中包含

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div name="abcdefg">杨幂</div>
        <div name="gfedcba">迪丽热巴</div>
        <div name="abc">李沁</div>
    </div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("[name*=d]").css({"background":"yellow","color":"blue%","font-size":"200%"});
    });
</script>
</html>

2.2通过过滤选择器选择元素 

2.2.1基本过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <table>
            <tr><td>杨幂</td></tr>
            <tr><td>迪丽热巴</td></tr>
            <tr><td>李沁</td></tr>
        </table>
    </div>
</body>
</html>

eq(index) 等于，第几个下标
<script>
    $(function(){
        $("tr:eq(2)").css({"background":"yellow","color":"blue%","font-size":"200%"});
    });
</script>


gt(index) 大于 不包括本元素
<script>
    $(function(){
        $("tr:gt(0)").css({"background":"yellow","color":"blue%","font-size":"200%"});
    });
</script>


lt(index) 小于，不包括本元素
<script>
    $(function(){
        $("tr:lt(2)").css({"background":"yellow","color":"blue%","font-size":"200%"});
    });
</script>

三个不同基本过滤选择器结果：eq        gt        lt

 

 2.2.2可见性过滤选则器

visible

hidden

实现点击隐藏和显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr style="display: none"><td>明星一号：古力娜扎</td></tr>
        <tr><td>明星二号：迪丽热巴</td></tr>
        <input type="button" onclick="a()" value="显示">
        <input type="button" onclick="b()" value="隐藏">
    </table>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    function a(){
        $("tr:hidden").css("display","block");
    }
    function b(){
        $("tr:visible").css("display","none");
    }
</script>
</html>

3.jQuery选择器常见问题

 3.1特殊符号的转义

html场景：
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
错误写法：
$("#id#a");
$("#id[2]");
正确写法：
$("#id\\#a");
$("#id\\[2\\]");

3.2选择器中的空格很严格(有无空格的区别)

选择器中的空格严格，添加空格带来不同的选择结果

~码中赤兔~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件中引入jQuery
m0_63174618的博客
04-12 1735
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
JQuery min.js .js 区别
白及
03-20 1072
min.js是压缩js的压缩版，比js的要小，内容是一样的，js版是源码，可以很容易的更改 min是压缩版，去除了注释和空格，主要是生产环境中使用，不带min是带有注释和空格的，方便阅读源码 两个文件的作用是完全一样的. jQuery-1.4.2.js里的代码是没有进行处理的原代码,适合于人们阅读与研究. jquery-1.4.2.min.js里的代码进行过特殊的处理,如变
Vue3.0中如何引入jQuery并使用
热门推荐
qq_45904018的博客
09-19 1万+
vue3中使用jquery与配置
Web前端——jQuery 基础总结
Lemon
07-13 747
一、概述 jQuery 是一个简洁的 JavaScript 框架，只是封装了 JavaScript 的原生源码而已 jQuery 设计宗旨：Write less，Do more jQuery 封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作，事件处理，动画设计，Ajax 交互 1、下载jQuery（https://jquer...
vue中如何引入jquery详解
qq_40924516的博客
12-23 1071
用vue-cli脚手架工具构建项目成功后 当需要引入JQ，可用以下方法： 1.首先在package.json里的dependencies加入”jquery” : “^3.2.1”， 2.在终端里输入npm install jquery –save-dev当然用 淘宝镜像cnpm也是可以的 注意：jquery 一定要小写 不然会提示Please use...
JQuery安装与下载教程（efficiency）
小森努力努力再努力i
03-23 3509
一. 认识 （1） jQuery 文件有两个常用版本：一个是 1.x 版本，另一个是 3.x 版本。3.x 版本是目前的最新版本，与 1.x 版本有着相同的 API。1.x 版本兼容 IE6、IE7 和 IE8，而 3.x 版本不兼容 IE6、IE7 和 IE8。 在实际开发中，我们建议使用 1.x 版本，而不是 3.x 版本，原因有两个： 1.现在很多网站还是要考虑兼容 IE6~IE8； 2.大多数 jQuery 插件不支持 3.x 版本，只支持 1.x 版本。 不管是 1.x 版本，还是 3.x 版本
jQuery颜色选择器ColorPicker
04-26
`jquery.colorpicker.js`是`jQuery ColorPicker`的主脚本文件，它扩展了`jQuery`对象，添加了颜色选择器的功能。通过调用这个插件，开发者可以在网页上轻松添加一个颜色选择控件，无需额外编写复杂的JavaScript代码...
jQuery国籍选择器
06-01
【jQuery国籍选择器】是一个基于JavaScript库jQuery的插件，主要功能是为用户提供一个完整的、已排序的国家选择界面。这个插件适用于那些需要用户输入国籍的网页表单，能够提供方便、友好的用户体验。 首先，jQuery...
JQuery 选择器、过滤器介绍
10-28
在深入探讨jQuery选择器和过滤器之前，先让我们回顾一下jQuery的基本概念。jQuery是一个流行的JavaScript库，它的核心理念是“write less, do more.”，即用更少的代码实现更多的功能。它简化了DOM（Document Object...
jQuery多级联动选择器
06-01
jQuery多级联动选择器是一种常见的前端交互功能，用于在网页上实现级联下拉菜单的效果。这种技术在网站设计中非常实用，特别是在处理地区选择、类别分类或者层级结构数据时。用户选择一个选项后，会根据所选内容动态...
jQuery选择器 1.pptx
05-20
JavaScript+jQuery 网页特效设计;;1、jQuery选择器介绍;2、元素选择器;2、元素选择器;3、#id选择器;3、#id选择器;4、.class选择器;4、.class选择器;5、其他选择器
jquery-3.1.1.js和jquery-3.1.1.min.js
09-14
jquery中jquery-3.1.1.js和jquery-3.1.1.min.js两个工具类。bootstrap的treeview插件用到了，找到就传上来备忘。
最新jquery.min.js
11-20
该版本主要修复之前两个版本中的一些bug和性能衰退问题，包括： •Deferred：当typeof( target)=='object'时，Deferred.promise( target)才能正常工作 •Event：使用委托事件和伪类时的性能衰退问题 •Misc：修复了一些兼容问题，并进行了优化 •Offset：在BlackBerry5和iOS3上使用会抛出一个错误 •修复了选择器的多个bug
jQuery/jquery-1.7.2.min.js jquery-1.7.2.js 文件
04-06
NULL 博文链接：https://sinly.iteye.com/blog/1542680
最新版JQuery-jquery-3.2.1.min.js
01-09
最新JQuery版本,3.2版本删减jQuery.holdReady(hold),jQuery.isArray(obj)等方法
JQuery中关于jquery.js与jquery.min.js的比较探讨
yzl495的专栏
12-19 360
刚刚开始接触JQuery的时候，下载来的文件包括jquery.vsdoc.js, jquery.min.js和jquery.js 对于各个文件的作用以及该引入哪个包不是很清楚。有时候引入jquery.min.js能够执行，有时候引入jquery.js也能执行。现在做一下简单的说明。 两个文件的作用是完全一样的,但从文件或上来看我们知道jquery.min.js应该是迷你版的意思，也就是文件...
jQuery
qq_22242915的博客
02-03 757
jQuery和js页面加载区别 jquery-1.8.3.min是jquery-1.8.3的压缩版，代码都在一行上，开发时候用这个。 <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../js/jquery-1.8.3.j
jquery.js和jquery.min.js的区别介绍
看不过的黑工坊
02-16 5960
转自：http://www.php100.com/html/program/jquery/2013/0905/5888.html 两个文件的作用是完全一样的,但从文件或上来看我们知道jquery.min.js应该是迷你版的意思，也就是文件会很小，但绝对不是很好看，下面总结了 jquery-1.4.2.js里的代码是没有进行处理的原代码,适合于人们阅读与研究. jquery-1.4
前端js面试题WORD.docx
最新发布
11-04
1. **jQuery选择器**：面试时可能会询问常见的jQuery选择器。包括但不限于： - `#`号选择器：用于选取具有特定ID的元素，如`$("#myId")`。 - 分组选择器：`(selector1, selector2)`，选取同时满足两个条件的元素。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值