jquery css选择器 jquery使用css选择器来选取元素?

转载

jack 2023-06-13 15:34:58

文章标签 jquery css选择器选择器 jQuery CSS 文章分类 jQuery 前端开发

一:css选择器
   (1)css选择器介绍:
      1.CSS选择器是一项出色的技术，它使网页的结构和表现形式完全分离，利用CSS选择器能轻松的对某个元素添加样式而不改动HTML结构。只需通过添加不同CSS规则就可以得到各种不同样式的网页.
      2.使某个样式应用于特定的HTML元素.首先需找到该元素.在CSS中.执行这一任务的表现规则称为CSS选择器.

(2)css选择器的分类:
       选择器             语法               描述                            示例
       标签选择器      E{CSS规则}           以文档元素作为选择符           td{font-size:14px;width:120px} a{text-decoration:none;}
       ID选择器        #ID{CSS规则}         以文档元素的唯一标识           #note{font-size:14px;width:120px}
                                            符ID作为选择符
       类选择器     E.className{css规则}    以文档元素的class作为选择器    div.note{font-size:14px;} .dream{font-size:14px;}
       群组选择器   EI E2 E3{css规则}       多个选择符应用同样的样式规则   td,p,div.a{font-size:14px;}
       后代选择器   E F{css规则}            元素E的任意后代元素F           #link a{color:red}
       通配选择符   *{css规则}              以文档的所有元素标签选择器     *{font-size:14px;}
       注释: 几乎所有的主流浏览器都支持上面的这些常用的选择器.

(3)css其它选择器:
       .伪类选择器(E:Pesude-Elements{CssRules})
       .子选择器(E>F{CssRules})
       .临近选择器(E+F{CssRules})
       .属性选择器([attr]{CssRules})
       注释:当遗憾的是主流浏览器并非完全支持所有的Css选择器。把CSS应用到网页中有3种方式,即行内样式表、内部样式表和外部样式表。
            class作为连接样式和网页结构的纽带。

二:jQuery选择器:

    (1)jQuery选择器的介绍:
1.jQuery选择器完全继承了CSS的风格.
2.利用jQuery选择器可以非常便捷和快速的找出特定的DOM元素.为他们添加相应的行为.而无需担心浏览器是否支持.jQuery的行为规则都必须在获取元素后才能生效.
   (2)jQuery选择器的写法与Css选择器的写法十分相似，只不过两者作用的效果不同。
   (3)jQuery选择器与Css选择器的区别:
        1.CSS选择器找到元素后是添加样式.
2.而jQuery选择器找到元素后是添加行为.
        特别注意:jQuery中涉及操作Css样式的部分比单纯的CSS功能更为强大,并拥有跨浏览器的兼容性。
   (4)jQuery选择器的优点:
        1.简洁的写法:$()函数在很多javascript类库中都被作为一个选择器元素来使用，在JQuery中也不例外。其中,$("#ID")用来代替document.getElementById()函数，及同过ID来获取元素；$("tagName")用来代替
        2.支持CSS1到CSS3的选择器:jQuery jQuery选择器CSS1、CSS2的全部和CSS 3的部分选择器，同时它也有少量的独有的选择器,使用css选择器时,开发人员需考虑主流选择器是否支持某些选择器，而在JQuery中。开发人员则可以放心使用JQuery选择器而无需考虑浏览器是否支持这些浏览器。
注释:为了能有更快的选择器解析速度,从1.1.3.1版后,JQuery废弃了不常使用的XPath选择器。但在引用相关的插件后,依然可以使用XPath选择器.
        3.完善的处理机制:使用JQuery选择器不仅比使用传统的getElementById()和getElementByTagName()函数简洁。而且还避免了某些错误.
   (5)jQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器。

---基本选择器

　　　　　　1.基本选择器:基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素Id、class和标签名等来查找DOM元素。并且在网页中,id只能使用一次,class允许重复使用。

　　　　　　 2.基本选择器说明:

　　　　　　选择器描述返回示例

　　　　　　　　#id 根据给定的id匹配一个元素单个元素 $("#test")选取id为test的元素　　　　　　

　　　　　　　　.class         根据给定的类名匹配元素            集合元素                 $(".test")选取所有class为test的元素
　　　　　　   element        根据给定的元素匹配元素            集合元素                 $("p")选取所有的<p>元素
　　　　　　　   *                 匹配所有元素                       集合元素                 $("*")选取所有的元素

　　　　　　　　Selector1, 将每一个选择器
　　　　 selector2, 匹配到的元素合并后一起返回集合元素 $("div,span,p,myClass")　

　　　　　　　 ……, 　　　　选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素
selectorN

　　　　----层次选择器
　　　　 1.什么是层次选择器:通过DOM元素之间的层次关系来获取特定的元素.例如后代元素、子元素、相邻元素和兄弟元素等。
　　　　　　 2.层次选择器的介绍说明:

　　　　　　选择器　　　　　　描述返回　　示例

　　　　　　 $("ancestor descendant") 选取ancestor元素里的所有集合元素 $("div span")选取div里所有的<span>元素
　　　　　　　　　　　　　　　　　　　　descendant(后代)元素

　　　　　　　　 $("parent>child")               选取parent元素下的child元素，    集合元素                 $("div>span")选择<div>
                                        　　　　　　　　与$("ancestor descendant")                                元素下元素名是<span>的子元素
                                         　　　　　　　　有区别，$("ancestor descendant")
                                         　　　　　　　　选择的是后代元素

　　　　　　　　 $("prev+next") 选取紧接在prev元素后的next元素集合元素 $(".one+div")选取class为one的下一个<div>元素

$("prev~siblings") 选取prev元素之后的sibling元素集合元素 $("#two~div")选取id为two的元素后面的所有<div>元素

　　　　　　 3.选择器与替代方法　　

　　　　　　　　选择器                     方法
                  $(".one+div")            $(".one").next("div")
   　　　　　 $("#prev~div")           ("#prev").nextAll("div")

      4.siblings()与$("prev~siblings")
   1.$("#prev~div")选择器只能选择"#prev"元素后面的同辈<div>元素,而siblings()方法与前后位置无关,只要是同辈节点就都能匹配.
    注释:$({"prev ~ siblings")在选取元素时,不包含prev元素,选取prev元素之后的sibling元素,并且不包含本身

-----过滤选择器

1.过滤选择器介绍:过滤选择器主要是通过特定的过滤规则来筛选出所选DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。

2.过滤选择器的分类(根据不同过滤规则)

基本过滤选择器

　　内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

表单对象属性过滤选择器

     3.过滤选择器的说明:
          ----基本过滤选择器
            选择器                   描述                   返回                    示例
      :first                 选取第一个元素          单个元素                 $("div:first")选取所有div元素中的第一个div元素
       :last                  选取最后一个元素       单个元素                $("div:last")选取所有div元素中的最后一个div元素

:not(selector) 去除所有与给定选集合元素 $("input:not(.myclass)")选取class不是myclass的input元素
　　　　　　　　择器匹配的元素

　　 :even                  选取所有索引值           集合元素                $("input:even")选取索引值偶数的input元素
        　　　　　　　　　为偶数的元素,
       　　　　　　　　　从0开始计数

     :odd                  选取所有索引值           集合元素                 $("input:odd")选取索引值奇数的input元素
                               为奇数的元素,
                                从0开始计数

:eq(index) 选取一个给定单个元素 $("input:eq(1)")选取索引值等于1的input元素
索引值=index的元素

:gt(index) 选取所有大于给定集合元素 $("input:gt(1)")选取索引值大于1的input元素
索引值(index)的元素

    ----内容过滤选择器
           选择器                     描述                    返回                    示例
      :contains(text)        选取文本内容               集合元素            $("div:contains("我")")选取含有文本"我"的div元素
                                  含有text的元素

      :empty                   选取不包含                    集合元素            $("div:empty")选取不包含子元素(文本)的div元素
                                    子元素或文本
                                     的空元素

:has(selector) 选取含有选择器集合元素 $("div:has(p)")选取含有<p>元素的div元素
所匹配的元素的元素

     ----可见性过滤选择器
           选择器                     描述                                  返回                    示例
      :hidden                      得到所有隐藏的元素               集合元素          Div:hidden得到所有隐藏的div
      :visible                        得到所有可见元素                 集合元素            Div:visible得到所有可见的div

----属性过滤选择器

选择器描述返回示例

[attribute] 选取拥有此属性的元素集合元素 $("div[id]")选取拥有属性id的元素

[attribute=value] 选取属性的值集合元素 $("div[title=test]")选取属性title等于"test"的div

为value的元素

[attribute!=value] 选取属性的值集合元素 $("div[title!=test]")选取属性title不等于"test"的div

不等于value的元素

[attribute^=value] 选取属性的值集合元素 $("div[title^=test]")选取属性title以"test"开头的div

以value^开始的元素

[attribute$=value] 选取属性的值集合元素 $("div[title$=test]")选取属性title以"test"结束的div元素

以value结尾

[attribute*=value] 选取属性的值集合元素 $("div[id][title$=test]")选取拥有属性id,

含有value 并且属性title含有"test"的div元素

----子元素过滤选择器

选择器描述返回示例

:nth-child 匹配其父元素下的集合元素在每个ul查找第2个li:

(index/even/odd/equation) 第N个子元素或奇偶元素

$("ul li:nth-child(2)")

奇数:nth-child(even)

偶数:nth-child(odd)

:first-child 匹配第一个子元素集合元素在每个ul中查找第1个li:

$("ul li:first-child")

:last-child 匹配最后一个子元素集合元素在每个ul中查找最后1个li:

$("ul li:last-child")

:only-child 如果某个元素是集合元素在ul中查找是唯一子元素的li:

父元素中唯一的

子元素,那将会被匹配

   4.子元素过滤选择器功能:
           1.:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
           2.:nth-chile(odd)能选取每个父元素下的索引值是基数的元素。
           3.:nth-chile(2)能选取每个父元素下的索引值等于2的元素。
         4.:nth-chile(3n)能选取每个父元素下的索引值是3的倍数的元素。(n从0开始)
          5.:nth-chile(3n+1)能选取每个父元素下的索引值足(3n+1)的元素。(n从0开始)

----表单对象属性过滤选择器

选择器描述返回示例

:enabled 选取所有可用元素集合元素 $("#form1:enabled")选取

id为form1的表单内的

所有可用元素

:disabled 选取所有不可用的元素集合元素 $("form1:disabled")选取

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 id为form1的表单内的所有

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　不可用的元素

:checked 　　　　　　选取所有被选中的元素　　集合元素　　　　　　$("input:checked")选取所有被

　　　　　　　　　　　　　　 (单选框,复选框) 　　　　　　　　　　　　　　　　选中的<input>元素

:selected 　　　　　　　　选中所有被选中的选项元素集合元素　　　　　　$('' "select:sekected",)选取

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　所有被选中的选项元素

   5. 表单选择器的作用:为了使用户更加灵活的操作表单(及可也通过表单选择器更加方便的获得表单的某个或某类型的元素)

    6.表单选择器注意事项
      1: $("#form1 :input")与$("#form1 input")的区别？
          $("#form1 :input"):获取ID为form1下所有的<input>、<textarea>、<select>和<button>元素
      .$("#form1 input"): 获取ID为from1下所有的input标签
      2:表单中取值
        单标签:以"/>"结尾的标签<button id='btb' value='aaa' />，统一以val()取值，得到的是该标签中value属性的值.
          双标签:成对出现的标签,例如<body></body>,统一以.html()取值,得到的值就是这对标签中的html值.
          表单元素不一定在表单中.

7.jQuery虽然提供了许多实用的选择器,但也可能无法满足各种多变的业务需求,为此jQuery提供了选择器的扩展.

1:MoreSelectors for jQuery(这是jQuery的一款插件,用于增加更多的选择器,例如.color可以匹配颜色,:colindex可以表格中的列等等).

插件地址http://plugins.jquery.com/project/moreselectors.

2:Basic XPath(这个插件可以让用户使用基本的XPath,但由于使用的人不多,且降低了选择器的效率,jQuery取消了默认对XPath的支持,改用插件来实现).

插件地址http://plugins.jquery.com/project/xpath

8.其他使用CSS选择器的方法

1:除了jQuery提供了强大的选择器支持外,也有一些其他JavaScript脚本也提供了纯粹的CSS选择器的支持。

(1)Document.getElementsBySelector() 可以通过选择器来获取文档元素

示例：Document.getElementsBySelector("div#main p a.external")

(2)CssQuery

这是Dean Edwards编写的一款易用CSS选择器查找元素的脚本,支持所有的CSS1,CSS2以及部分CSS3选择器,它支持一些jQuery尚不支持的选择器,

例如：E:link ,E:nth-last-child(n)…….