Heim  >  Artikel  >  Web-Frontend  >  Was bedeutet es, wenn der JQuery-Selektor zwei Klassen gleichzeitig hat, und eine Einführung in die Methode zum Abrufen der Klasse?

Was bedeutet es, wenn der JQuery-Selektor zwei Klassen gleichzeitig hat, und eine Einführung in die Methode zum Abrufen der Klasse?

伊谢尔伦
伊谢尔伦Original
2017-06-17 15:20:565765Durchsuche

在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. Rufen Sie das aaa-Klassenelement unter dem div mit der ID b ab.
$("div.aaa") ruft alle aaa-Klassen unter dem b-Element ab Kooperieren Sie mit Verwenden Sie den Nachkommenselektor, der Code lautet: $("div#b div.aaa").
2 Holen Sie sich das aaa-Klassenelement unter dem div mit der ID a oder c
Wenn Sie müssen mehrere verschiedene Objekttypen erhalten, die durch Kommas (,) getrennt werden können. Der entsprechende Code lautet also: $("#a .aaa, #c .aaa") .

3. Klassenselektor in jQuery-Einschränkungen

document.getElementsByClassName(className);

getElementsByClassName wird hier verwendet, und niedrigere Versionen von IE erkennen ihn überhaupt nicht, daher wird er natürlich nicht funktionieren. Aber dann habe ich darüber nachgedacht und es war seltsam. Dieses Skript basiert offensichtlich auf jQuery. Warum nicht $(".className") anstelle dieser API verwenden? Also habe ich versucht, es zu ändern und habe mit $("." + className).get() das DOM-Element abgerufen und an das folgende Skript übergeben. Das Ergebnis war, dass es nicht funktionierte und mein Interesse plötzlich geweckt war.

Nach dem Debuggen habe ich festgestellt, dass der erhaltene Klassenname das Format data[XXX][yyy] hat. Tatsächlich sind die eckigen Klammern [] in der Klasse wahrscheinlich keine zulässigen Zeichen. Er kann mit dem nativen nicht gefunden werden querySelecotr, aber es kann mit getElementsByClassName gefunden werden. Ich kann nicht anders, als die Magie der Schöpfung zu bewundern ...

Nachdem ich es bewundert habe, ist es unwahrscheinlich, dass die andere Partei gelöst wird wird IE8 nicht verwenden, daher ist es besser, einen Umweg zu machen und es auszuprobieren,

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

Diese Methode ist verfügbar Obwohl die Effizienz um eine Stufe gesenkt werden sollte, kann sie dennoch verwendet werden.

Genau genommen stellt dies keine Einschränkung von jQuery dar. Die Leistung von jQuery ist durchaus zu erwarten. Es sollte gesagt werden, dass die Leistung von getElementsByClassName zusätzliche Überraschungen bereithält~

Das obige ist der detaillierte Inhalt vonWas bedeutet es, wenn der JQuery-Selektor zwei Klassen gleichzeitig hat, und eine Einführung in die Methode zum Abrufen der Klasse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn