ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryセレクターが同時に2つのクラスを持つ意味とクラスの取得方法の紹介

jqueryセレクターが同時に2つのクラスを持つ意味とクラスの取得方法の紹介

伊谢尔伦
伊谢尔伦オリジナル
2017-06-17 15:20:565766ブラウズ

在CSS3选择器标淮定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单的形式。”#te st”选取id属性为”test”的元素。”blockquote”选取文档中的所有b8a712a75cab9a5aded02f74998372b4元素,而”div.note” 则选取所有class属性为”note”的b8a712a75cab9a5aded02f74998372b4元素。简单选择器可以组合成“组合选择器”,比如 “div.note>p”和“blockquote i”,只要用组合字符做分隔符就行。简单选择器和组合选择器还可以分组成逗号分隔的列表。这种选择器组是传递给$()函数最常见的形式。

1、简单选择器

简单选择器的开头部分(显式或隐式地)是标签类型声明。例如,如果只对64e5601d0a941f4972a2954192bdae18元素感兴趣,简单选择器可以用“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结构如下:
684f478fdf202c080848cc92dad827c6697c02c2b6072558fa0865f5b7c7517816b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
83b70942a5b0e2a38e14b5d382710748697c02c2b6072558fa0865f5b7c7517816b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
ec59258268c71b4f2ac658cc54d70b8b697c02c2b6072558fa0865f5b7c7517816b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
1. ID b の div 配下の aaa クラス要素を取得します。
$("div.aaa") は、b 要素配下の aaa クラスに限定されている場合は、 子孫セレクター、コードは次のとおりです: $("div#b div.aaa")
2. ID a または c を持つ div の下の aaa クラス要素を取得します
異なるタイプの複数のオブジェクトを取得する必要がある場合は、カンマ (,) を使用してそれらを区切ることができるため、対応するコードは次のようになります: $("#a .aaa, #c .aaa") .

3. jQuery のクラス セレクターの制限事項

document.getElementsByClassName(className);

getElementsByClassName が使用されます。もちろん、IE の以前のバージョンではまったく認識されません。しかし、よく考えてみると、このスクリプトは明らかに jQuery に基づいているため、この API を使用する代わりに $(".className") を使用しないのはなぜでしょうか。そこで、これを変更しようと $("." + className).get() を使用して DOM 要素を取得し、以下のスクリプトに渡してみましたが、結果は機能せず、俄然興味が湧きました。

デバッグ後、取得された className は data[XXX][yyy] の形式であることがわかりました。確かに、クラス内の角括弧 [] はおそらく有効な文字ではありませんが、ネイティブの querySelector を使用して見つけることはできません。素晴らしい作りだと感心せずにはいられません…

感嘆した後も、まだ問題は解決する必要があります。隅、

$("class*='" + className + "'")

この方法は利用可能ですが、効率はワンランク下がるはずですが、それでも使用できます。

厳密に言えば、これは jQuery の制限ではありません。getElementsByClassName のパフォーマンスにはさらに驚きがあると言うべきです。

以上がjqueryセレクターが同時に2つのクラスを持つ意味とクラスの取得方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。