首頁 > web前端 > js教程 > 主體

jquery選擇器同時有2個class是什麼意思和取得class方法介紹

伊谢尔伦
發布: 2017-06-17 15:20:56
原創
5794 人瀏覽過

在CSS3选择器标淮定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单的形式。”#te st”选取id属性为”test”的元素。”blockquote”选取文档中的所有

元素,而”div.note” 则选取所有class属性为”note”的
元素。简单选择器可以组合成“组合选择器”,比如 “div.note>p”和“blockquote i”,只要用组合字符做分隔符就行。简单选择器和组合选择器还可以分组成逗号分隔的列表。这种选择器组是传递给$()函数最常见的形式。

1、简单选择器

简单选择器的开头部分(显式或隐式地)是标签类型声明。例如,如果只对

元素感兴趣,简单选择器可以用“P”开头。如果选取的元素和标签名无关,则可以使用通配符“*”号来代替。如果选择器没有以标签名或通配符开头,则隐式含有一个通配符。

标签名或通配符指定了备选文档元素的一个初始集。在简单选择器中,标签类型声明之后的部分由零个或多个过滤器组成。过滤器从左到右应用,和书写顺序一致,其中每一个都会缩小选中元素集。

2、组合选择器

使用特殊操作符或“组合符”可以将简单选择器组合起来,表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。

3、选择器组

传递给$()函数(或在样式表中使用)的选择器就是选择器组,这是一个逗号分隔的列表,由一个或多个简单选择器或组合选择器构成。选择器组匹配的元 素只要匹配该选择器组中的任何一个选择器就行。对我们来说,一个简单选择器也可以认为是一个选择器组。

一. jquery选择器中两个class是什么意思?

$(".class1 .class2") 选择class1元素下class2的元素(中间有空格)
$(".class1.class2") 选择同时含有class1和class2的元素(中间没有空格)
$(".class1,.class2") 选择class1或者class2的元素(中间有逗号)

jQuery的选择器和css选择器基本一样,例如:
css选择多个class为:.class1.class2
jQuery选择多个class为:$(".class1.class2")

二. jquery 选择器 怎样获取class='aaa'的DIV元素

jQuery的元素选择器可以根据class选择元素。例如,获取class='aaa'的DIV元素的代码为:$("div.aaa") 。下面提供一个具体的示例,HTML结构如下:




1、取得id為b的div下的aaa類元素
$("div.aaa")取得的是所有的aaa類,如果限定為b元素下的aaa類,可以配合後代選擇器使用,代碼為:$("div#b div.aaa") .
2、取得id為a或c的div下的aaa類元素
如果需要取得多個不同類型的對象,可以使用逗號(,)分隔,所以對應程式碼為: $("#a .aaa, #c .aaa") .

三. jQuery中class選擇器的限制

document.getElementsByClassName(className);
登入後複製

這裡用了getElementsByClassName,低版IE根本不認識,自然不行。但轉念想想又很奇怪,這個腳本明明是基於jQuery的,為什麼不用$(“.className”)而用這個API呢?於是我嘗試改了一下,用$(“.” + className).get()來獲得DOM元素傳遞給下面的腳本,結果果然不行,一下子激起了興趣。

debug後發現,獲得的className是data[XXX][yyy]這樣的格式,確實class中方括號[]恐怕不是合法的字符,用原生的querySelecotr也無法找到,但是getElementsByClassName卻可以找到,不禁讚歎造物神奇……

讚歎過後,問題還是要解決的,不太可能讓對方不使用IE8,還好繞個彎一試,

$(“class* ='” + className + “'”)

這樣的方式是可以得到的,雖然效率應該是降了一個檔次,不過也算是可以使用了。

嚴格來說這不是jQuery的限制,jQuery的表現完全在意料之中,應該說getElementsByClassName的表現有額外驚喜吧~

以上是jquery選擇器同時有2個class是什麼意思和取得class方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!