js选择器

最新推荐文章于 2024-02-20 19:09:27 发布
最新推荐文章于 2024-02-20 19:09:27 发布
阅读量151 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://blog.51cto.com/13661881/2129241
版权 
                                           标题无关紧要，请看内容

学习的过程中，发现js选择器很多，自己就综合整理了一下，
1）核心选择器（应用最广泛的选择器）

  • 选择所有元素
    元素 选择特定类型的元素
    .类名 选择具有特定class的元素
    元素.类名 选择具有特定class的某类元素
    #id名 选择具有特定id属性值的元素

    2）属性选择器（根据元素的属性来选择元素）
   [attr]       选取定义了attr属性的元素，即使这个属性没有值
   [attr="val"]  选取attr属性值等于字符串val的元素
   [attr^="val"]    选取attr属性值以字符串val开头的元素
   [attr$="val"]    选取attr属性值以字符串val结尾的元素
   [attr*="val"]    选取attr属性值包含字符串val的元素
   [attr~="val"]    选取attr属性其中一个值是字符串val的元素
   [attr|="val"]    选取attr属性值等于字符串val，或属性值为连字符分隔的值列表且第一个值是字符串val的元素
   [selector1][selector2][selectorN]    复合属性选择器，需要同时满足多个条件时使用 
   属性选择器可以配合其他选择器使用！

    3）关系选择器
    <selector1> <selector2> 在给定的祖先元素下匹配所有的后代元素
    <selector1> > <selector2> 在给定的父元素下匹配所有的子元素
    <selector1> + <selector2> 匹配所有紧接在 <selector1> 元素后的 <selector2>
    <selector1> ~ <selector2> 匹配 所有在<selector1> 元素之后的所有同辈 <selector2> 元素
    4）伪元素和伪类选择器
    :checked 用于表单，匹配所有被选中元素(复选框、单选框等，不包括select中的option)
    :disabled 用于表单，匹配所有不可用元素
    :enabled 用于表单，匹配所有可用元素
    :focus 主要用于表单，选取得到焦点的元素
    :required 用于表单，选取具有required属性的元素
    :optional 用于表单，选取缺少required属性的元素
    :empty 匹配所有既不包含子元素也不包含文本的空元素
    :first-child 选取第一个子元素
    :last-child 选取最后一个子元素
    :nth-child(n) 选取元素的第n个子元素(从1开始计数)
    n可为even或odd
    :nth-last-child(n) 选取元素的倒数第n个子元素
    :nth-of-type(n) 选择同属于一个父元素之下，并且标签名相同的元素中的第n个(注：从1开始计数)
    :nth-last-of-type(n) 选择同属于一个父元素之下，并且标签名相同的元素中的倒数第n个
    :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
    :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素
    :root 选取文档的根元素，在html文档中即是<html>元素
    等等....
    5）联合选择器和反选择器
    通过对选择器的合理安排，我们几乎能达成任何目标。我们还可以利用选择器组合实现联合选择和反选择
    <selector>,<selector>,<selector>.. 选取匹配第一个选择器的元素和匹配第二个选择器的元素
    :not(selector) 选取不匹配指定选择器的元素
    6）jQuery扩充的选择器
    上面是css中本身就提供的选择器，为了满足更复杂的需求，jQuery还额外的支持一些选择器，这些选择器不但给我们带来方便，还能
    实现更细的控制。
    :animated 匹配所有正在执行动画效果的元素
    :contains(text) 如果元素内或者后代元素内包含指定的文本即被选中
    :eq(n) 选择第n个元素（从0开始计数）
    :first 选择第一个匹配的元素
    :last 选择最后一个匹配的元素
    :lt(n) 选择序号小于n的所有元素（从0开始计数）
    :gt(n) 选择序号大于n的所有元素（从0开始计数）
    :odd 选择所有奇数元素(从0开始计数)
    :even 选择所有的偶数元素（从0开始计数）
    :has(选择器) 匹配包含 选择器所匹配的元素的元素
    :text 用于表单，匹配所有的单行文本框
    :button 匹配所有按钮（input标签type为button以及<button>标签）
    :checkbox 用于表单，选择所有的复选框（匹配所有复选框）
    :file 用于表单，选择所有的文件上传输入框
    :input 用于表单，选择所有的input元素（匹配所有 input, textarea, select 和 button 元素）
    :password 用于表单，选择所有的密码输入框
    :radio 用于表单，选择所有的单选框
    :submit 用于表单，选择所有的表单提交按钮
    :image 用于表单，匹配所有图像域
    :reset 用于表单，选择所有的表单重置按钮
    :selected 用于表单，匹配所有选中的option元素
    :header 匹配如 h1, h2, h3之类的标题元素
    :hidden 选择所有的被隐藏文件
    :visible 选择所有的可见元素
    :parent 匹配含有子元素或者文本的元素
    选择器可以单独使用，也可以配合其他选择器使用！![]

转载于:https://blog.51cto.com/13661881/2129241

weixin_33755557
关注
JavaScript选择器
rr20060119的博客
10-03 1754
JavaScript选择器是一种强大的工具，它使我们能够轻松地选择和操作HTML元素。通过选择器，可以根据不同的需求选择合适的元素，并对其进行各种操作，实现丰富的交互效果。熟练掌握选择器的使用将有助于提高开发效率和代码质量。
前端picker.js 选择器 轮选择器
05-04
<!... <title>Picker by ustbhuangyi , initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> ... <h1 class="project-name">Picker ... <h2 class="project-tagline">h5 picker inspired by ...
js的选择器
m0_62903673的博客
06-13 5268
JS选择器
JS 选择器
qq_51325652的博客
06-24 576
关于JavaScript的选择器内容
JS选择器
luffot的博客
10-29 944
选择器 相邻兄弟选择器：元素必须严格相邻，不允许出现其它元素间隔 通用兄弟选择器：所有的同级元素，不要求严格相邻 id属性选择器： 以X结尾的样式发生变化 p[ id $ = X ]{ } 以X开头的id样式发生变化 p[ id ^ = X]{ } 匹配id属性值所有含有X的元素 p[ id * = X]{ } 1:同级别的第几个
js选择器全面解析
11-22
JavaScript选择器是网页开发中用于查找和选取DOM（文档对象模型）元素的重要工具。在JavaScript中，有四个原生的选择器方法，它们分别是getElementById、getElementsByName、getElementsByTagName和...
nes:一个具有令人难以置信的可扩展性的小型 js 选择器库，但仍然非常快
06-25
nes is a javascript selector lib with incredible scalability, but still very fast 这是与Sizzle 1.8.x的速度对比图, 你也可以在本地进行测试(sizzle目录下的speed), 需要在根目录下开启一个静态服务器(使用) ...
js 选择器
轻风细雨_林木木
10-15 258
参考资料：https://www.w3school.com.cn/js/js_jquery_selectors.asp 通过 id 来查找 HTML 元素 返回 id="intro" 的元素： jQuery var myElement = $("#id01"); JavaScript var myElement = document.getElementById("id01");...
常见js选择器总结
热门推荐
DeanBlog的博客
03-04 1万+
jQuery中正确的使用选择器非常重要：     常见的选择器：           1.标签选择器，也就是没有任何标点，直接的标签名的匹配；       eg:$("input").css();           2.类选择器，也就是类属性名称前加点“.”；     eg:$(".tab").css();           3.id选择器，也就是在id属性名称前加警号“#”；
《js——选择器》
2303_78171667的博客
12-10 497
style>/*CSS选择器： 方便获取HTML的元素*//*1.标签选择器：直接通过标签名即可获取元素表示将所有的p标签都设置为红色*/p{color: red;/*2.类(class)选择器：语法：.xxx 表示获取class为xxx的元素*/.a{/*3.id选择器：语法：#xxx 表示获取id为xxx的元素 注意：确保id在本网页的唯一性*/#b{/*4.群组选择器：语法：xxx,xxx,xxx 通过,分割将所有选择器进行统一操作。
JavaScript元素选择器
西凉的悲伤博客
08-11 6222
querySelectorAll 选择器和 querySelector 选择器相似，只不过 querySelector 返回的是匹配的一个元素，querySelectorAll 返回的是匹配的多个元素，即数组类型。一般来说 id 在页面中应该是唯一的，因此该方法是快速访问特定元素的方法，如果页面中的两个或多个元素具有相同的 id，则此方法返回找到的第一个元素。获取 id=“two” 的 div 元素，然后获取其中 class=“highlighted” 的 div 元素下是所有 p 标签。
JS。某选择器。
hanyuxinting的专栏
05-09 3424
<br />今天又丢人了。我用的一串 childnodes 被揪了出来。然后改为选择器使用。<br /> <br />大概从此后，我会习惯用选择器这个东西。其实我觉得这个还是很好用滴。借此学习并总结下选择器。<br /> <br />其实最早有选择器的概念是因为 JQuery。偶尔码了两眼，有个简单的认识。记得去年入职面试还被问到关于选择器的问题，但后来用的很少，前段时间因为 id 的问题搞得头大了，便捡起选择器开始玩。这次又将选择器提了出来。正好想一下什么时候更好的使用什么样的选择器吧。<br /> <b
js结构选择器
yangwensheng1122的博客
07-28 600
结构选择器 Js 中的选择结构 用If（条件满足为true）{  执行 } else { 执行另一个 }   If语句的套路： （1）一个选择依据（条件） （2）两个选项 作业：判断水仙花数 Switch 语句 Switch 的有点：1.选择结构更加清晰，一目了然。               2.执行速度相对较快。 Switch 的执行逻辑：从switch后面的圆括号里的变
javascript选择器大全
最新发布
精通前端技术，了解后端接口
02-20 1122
是元素选择器，可用于 id 和 class 选择，也就是上面 getElementById 和 getElementsByClassName 能做到的 querySelector 也能做到，并且 querySelector 还能用于其他复杂的元素选择场景，最后返回查找的元素。querySelectorAll 选择器和 querySelector 选择器相似，只不过 querySelector 返回的是匹配的一个元素，querySelectorAll 返回的是匹配的多个元素，即数组类型。
CSS与JavaScript选择器详解及其应用
**JavaScript选择器** 在JavaScript中，选择器同样用于操作DOM（文档对象模型）。常见的DOM选择器方法包括： 1. **getElementById()**：通过元素的ID获取特定元素，如`var element = document.getElementById("my-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值