• jQuery选择器


    一、jQuery选择器的概述

    优势

      01、jQuery选择器,良好的继承了CSS选择器,获取页面元素便捷高效。

      02、与CSS不同,jQuery获取元素后,为元素添加行为,交互性更强。

      03、jQuery选择器有良好的浏览器兼容性

      04、jQuery拥有自己特有的自定义选择器

      05、简介的写法:

      06、完善的处理机制:可以避免某些错误

    类型

      01、通过CSS选择器选取元素(基本选择器、层次选择器、属性选择器)

      02、通过过滤性选择器选择元素(基本过滤选择器、可见性过滤选择器)

    二、通过CSS选择器选取元素

      01、基本选择器

          标签选择器:element

          类选择器:  .class

          id选择器:   #id

          并集选择器:,分割  

          全局选择器: *  匹配所有元素

      02、层次选择器

          后代选择器:  root offspring  root元素之中的所有offspring元素

          子代选择器:  parent>chid   parent元素下的child(子)元素

          紧邻元素选择器:prev+next    紧邻prev元素之后的next元素(一个)

          同辈元素选择器:prev~siblings  prev之后的所有sibling(同辈)元素

      03、属性选择器

          [attribute]      选取包含指定属性的元素

          [attribute=value]   选取含有指定属性,且属性值为指定值的元素  

              例:选择每个 id="choose" 的元素:$("[id=choose]")$("[id=‘choose’]")

          [attribute!=value]   选取含有指定属性,但属性值不等于指定值的元素

          [attribute^=value]   选择含有指定属性,且属性值以指定值开头的元素

          [attribute$=value]  选择含有指定属性,且属性值以指定值结尾的元素

          [attribute*=value]  选择含有指定属性,且属性值包含有指定值的元素

     三、通过条件过滤选取元素

      01、基本过滤选择器

        :first    选取第一个元素

        :last    选取最后一个元素

        :not(selector)  选取所有与selector选择器不匹配的元素

        :even    选取索引是偶数的所有元素,index从0开始

        :odd    选取索引是奇数的所有元素

        :eq(index)  选取索引等于index的元素

        :gt(index)  选取所有索引大于index的元素,不包含index

        :lt(index)  选取所有索引小于index的元素,不包含index

        :header  选取所有标题元素,如h1~h6

        :focus    选取当前获得焦点的元素

        :animated  选取所有动画元素

      02、可见性过滤选择器

        :visible  选取所有可见的元素

        :hidden  选取所有隐藏的元素

      03、表单选择器

        :input    匹配所有inout、textarea、select、button元素

        :text    匹配所有单行文本框

        :password  匹配所有密码框

        :radio    匹配所有单项按钮

        :checkbox  匹配所有复选框

        :submit    匹配所有提交按钮

        :image    匹配所有图像域

        :reset    匹配所有重置按钮

        :button   匹配所有按钮

        :file    匹配所有文件域

        :hidden   匹配所有不可见元素,或者type为hidden的元素    (style="display:none"和type="hidden"的都可以)

        :enabled  匹配所有可用元素    $("form :enabled")匹配form内部除编号输入框外的所有元素

        :disabled  匹配所有不可用元素   $("form :disabled")匹配 编号输入框

        :checked  匹配所有被选中元素   (复选框、单项按钮、select中的option) 

        :selected  匹配所有选中的option元素  

    四、jQuery选择器的注意事项

      01、含有特殊符号“#”、“.”、“[”、“]”等等

        使用转义符“\”转义

          <div id="id#a">aa</div>    $("#id\#a");

          <div id="id[2]">bb</div>    $("#id\[2\]");

      02、选择器中含有空格的注意事项

        有空格:后代选择器

        无空格:交集选择器

  • 相关阅读:
    ajax
    异步加载js的方法
    node的特点,优缺点及应用场景
    ajax面试题
    jQuery实现手风琴效果
    jQuery简介
    原型
    string 对象属性和方法
    函数声明和函数表达式
    JavaScript 基本语法
  • 原文地址:https://www.cnblogs.com/vic_/p/7846705.html
Copyright © 2020-2023  润新知