What does it mean when jquery selector has two classes at the same time and an introduction to the method of obtaining class

在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. Get the aaa class element under the div with id b
$("div.aaa") gets all the aaa classes. If it is limited to the aaa class under the b element, you can cooperate Descendant selectorUse, the code is: $("div#b div.aaa").
2. Get the aaa class element under the div with ID a or c
If you need to get multiple Different types of objects can be separated by commas (,), so the corresponding code is: $("#a .aaa, #c .aaa") .

3. Class selector in jQuery Limitations

document.getElementsByClassName(className);

getElementsByClassName is used here, and lower versions of IE don’t recognize it at all, so naturally it won’t work. But then I thought about it and it was strange. This script is obviously based on jQuery. Why not use $(".className") instead of using this API? So I tried to change it and used $("." + className).get() to obtain the DOM element and pass it to the script below. The result was that it didn't work, and my interest was suddenly aroused.

After debugging, I found that the obtained className is in the format of data[XXX][yyy]. Indeed, the square brackets [] in class are probably not legal characters. It cannot be found using the native querySelecotr, but it can be found with getElementsByClassName. , I can’t help but admire the magic of creation...

After admiring, the problem still needs to be solved. It is unlikely that the other party will not use IE8, but it is better to take a detour and try it,

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

This method is available. Although the efficiency should be lowered by a level, it can still be used.

Strictly speaking, this is not a limitation of jQuery. The performance of jQuery is completely expected. It should be said that the performance of getElementsByClassName has additional surprises~

The above is the detailed content of What does it mean when jquery selector has two classes at the same time and an introduction to the method of obtaining class. For more information, please follow other related articles on the PHP Chinese website!