开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >jQuery选择器总结

jQuery选择器总结

IMWeb前端团队

发布于 2018-01-08 08:57:43

发布于 2018-01-08 08:57:43

1.2K0

举报

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

本文作者：IMWeb 一大碗油茶原文出处：IMWeb社区 未经同意，禁止转载

不得不说，jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都知道，一般学前端，都要用js写tab切换，大图滚动之类的效果，同样的效果，js大概20-40行不等。jq只需要10行左右。你还在犹豫吗？赶紧学起来！先说选择器，要知道js里，也有，就是你给标签起了id，class名，在js里需要获取是一个意思。在jq中很方便，不用写很长的xxx=document.getElementById(‘xxx’)

1.基本选择器

2.层次选择器

3.过滤选择器

4.内容过滤器

5.可见选择器

6.属性选择器

7.子元素选择器

其中nth-child（xn+y）表示：从第y各元素起，选取每第x个元素例3n+2表示从第二个子元素开始，选取每个第三个的元素 even：偶数 odd：奇数

8.表单元素过滤选择器

表单中选择确切的某个属性的元素，不需要全部都写input

熟练使用选择器是熟练使用jq的前提图片全部来自个人word文档中的截图，如有错误欢迎指出，互相学习。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

jQuery选择器（20171026）

一.jq与js再比较看优势看案例（好友列表）结构： <div id="con" class="center"> <ul id="friendslist"> <li> <p class="border_bottom">我的好友</p> <ul> <li>张三</li> <li>李四</li> <li>王五</li>

天天_哥

2018/09/29

9290

JQuery的简述、使用方法和选择器

jquery 编程算法

JQ简述1 1、 jQuery出现的背景(Javascript遇到的问题) 选择器功能弱 DOM操作繁琐之极浏览器兼容性不好动画效果弱 2、什么是 jQuery(概念) jQuery （javaScriptQuery）JavaScript 代码库官方网站：http://jquery.com/ 3、目前 jQuery 有三个大版本： 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016

时间静止不是简史

2020/07/24

1.2K0

JQuery的简述、使用方法和选择器

jQuery选择器大全(48个代码片段+21幅图演示)2

4. 属性过滤选择器 ——4.1 [attribute]（取拥有attribute属性的元素）下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线 <script type="text

逸鹏

2018/04/10

1.6K0

jQuery选择器大全(48个代码片段+21幅图演示)2

jQuery选择器大全(48个代码片段+21幅图演示)

jquery javascript

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。一、基本选择器 1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () {

牛嗷嗷

2018/03/30

5K0

jQuery常用的选择器

当我们想要操所页面中的元素时，首先要做的就是选取元素。选取页面中元素可以使用jQuery给我们提供的$()方法，该方法需要提供选择器作为参数，方法执行完成后会返回给我们一个jQuery对象，被选取的元素就包含在该对象中。

小周sir

2019/09/23

7410

jquery选择器用法_jQuery属性选择器

一、基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。使用公式:(“#id”) 示例：(“#box”) //获取id属性值为box的元素 2. 元素选择器元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。使用公式：(“element”) 示例：(“div”) //获取所有div元素 3.类名选择器类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。使用公式：(“.class”) 示例：(“.box”) //获取class属性值为box的所有元素 4.复合选择器复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。使用公式：(“selector1,selector2,……,selectorN”) selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等示例：(“div,#btn”) //要查询文档中的全部的<div>元素和id属性为btn的元素 5.通配符选择器

全栈程序员站长

2022/11/16

12.2K0

Jquery选择器

1、基本选择器选择器描述结果示例 #id 根据id获取元素单个 $(“#myid”)选取id的值为myid的元素 .class 根据class获取元素集合 $(“.myclass”)选取class的值为myclass的元素 a,p,img等html标签根据指定的html标签获取元素集合 $(“img”)选取所有的img标签 * 获取所有的元素集合 $(“*”)获取所有标签元素 a,.myclass,#id等获取对应标签元素集合 $(“a,.myclass,

苦咖啡

2018/05/07

2K0

JQuery选择器（中）

HTML5学堂：在学习JQuery开发的时候，选择器有多种，而我们将接着介绍选择器的其他类型，希望对大家有帮助！ 5.临近选择器: $("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点. <div></div><p id="test"></p>在$("div + #test")中能取到p段落节点 <div></div><p></p><p id="test"></p>则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面

HTML5学堂

2018/03/12

2K0

java学习（jQuery选择器）

来自雷丰阳老师课程 1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".class") //类选择器 $(".class,#id1") //组合选择器：用逗号隔开 2.层次选择器 $("parent > child") //子元素选择器：> $("parent child ") //后代元素选择器：空格隔开 $("element + next") //相邻元素选择器：+ $("elemen

euclid

2020/01/31

5390

jQuery选择器和选取方法

我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法，以及一些提取和扩充选中元素集的方法了。

Yiiven

2022/12/15

5.2K0

JQ 选择器大全

$(".one+div") <==> $(".one").next("div");

莫问今朝

2018/08/31

1.3K0

jQuery中的9个选择器

jquery javascript

选择器是 jQuery 最基础的东西，本文中列举的选择器基本上囊括了所有的 jQuery 选择器，也许各位通过这篇文章能够加深对 jQuery 选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写 jQuery 代码的效率。本文配合截图、代码和简单的概括对所有 jQuery 选择器进行了介绍，也列举出了一些需要注意和区分的地方。 1、基本选择器（重点） #id：根据元素的 id 属性来获取元素 element：根据元素的名称来获取元素 selector1,selector2：同时获取多个

沈唁

2018/05/24

1.6K0

jQuery选择器（满足你的所有业务）

css html jquery

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

鱼找水需要时间

2023/02/16

9100

jQuery 选择器

jquery html xml

基本选择器基本选择器是最简单的选择器，可以通过元素id、class和标签名等来直接查找DOM元素。元素选择器根据给定元素名匹配元素。如下选择的是所有div元素。 $("div").css("

静默虚空

2018/01/05

7.4K0

像一串英文字母aaa会看做一行，浏览器认为中文可以随意换行，英文单词或者连字符可以换行，如果是连续的字母没有意义，不会换行，可以用下面的进行换行

Y编程者

2024/08/10

1320

WEB入门之十三 jQuery选择器

jquery web 表单入门索引

上一章我初步接触了jQuery，并能够编写一些简单的jQuery代码，其中重点是jQuery基本选择器。jQuery的选择器非常强大，它是jQuery的根基，基本上任何操作都要依赖于选择器。本章重点学习jQuery选择器，包括层次选择器、属性选择器、表单选择器、内容选择器和过滤选择器等。

用户9184480

2024/12/17

940

WEB入门之十三 jQuery选择器

jQuery（选择器）

display hidden input reset submit

注意：但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)；

全栈开发日记

2022/05/12

1.5K0

jquary学习（二）jquary的使用，jQuery中的选择器

目录首先在官网下载jquary的js文件 html页面文件里面引入 jQuery中的选择器基本选择器id 选择器标签选择器 (“a”)类选择器 (“.class”) 首先在官网下载jquary的

一写代码就开心

2021/06/17

5.4K0

jquary学习（二）jquary的使用，jQuery中的选择器

从零开始学 Web 之 CSS3（一）CSS3概述，选择器

CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

Daotin

2018/08/31

9440

jquery常用选择器

jquery javascript

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类：基本选择器、层次选择器、过滤选择器、表单选择器。其中过滤选择器可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择

java达人

2018/01/31

6730

相关推荐

jQuery选择器（20171026）

更多 >