分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

js选择器

发布时间:2023-09-06 01:59责任编辑:林大明关键词:js选择器
??????????????????????????????????????????标题无关紧要,请看内容

学习的过程中,发现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 ?????匹配含有子元素或者文本的元素
    选择器可以单独使用,也可以配合其他选择器使用!![]

js选择器

原文地址:http://blog.51cto.com/13661881/2129241

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved