jquery选择器 gt jquery选择器和css选择器的区别

转载

智能开发者 2023-12-20 23:06:07

文章标签 jquery选择器 gt web前端前端面试题选择器 jQuery 文章分类 jQuery 前端开发

jQuery常见知识要点

1.理解web标准的含义，为什么使用web标准？

答：将内容和表现样式分离

1）.结构化内容—HTML,XHTML

2）.表现化内容—CSS层叠样式表

3）.行为化内容—JavaScript

2.jQuery选择器和CSS选择器的区别？

答：1）.两者的作用效果不同。

CSS选择器是找到元素，然后添加样式；

jQuery选择器是找到元素，然后添加行为；

2）.jQuery中涉及到CSS样式操作的部分比CSS功能更强大；

并且拥有良好的浏览器的兼容性。

3.jQuery选择器的优势？

答：1）.简洁的写法

$()函数在很多JavaScript库中都被作为一个选择器函数使用，在jQuery中也是同样的。

1.$("#ID")代替document.getElementById()函数，通过ID取得元素。

2.$(".className")代替document.getElementByClassName()函数，通过类名取得元素。

3.$("tagName")代替document.getElementByTagName()函数，通过元素名称获取HTML元素。

2）. 支持CSS1.0、CSS2.0、CSS3.0选择器；

1.jQuery支持CSS1.0、CSS2.0的全部和CSS3.0的部分选择器，同时还有一部分独有的选择器。

2.对有一定基础的CSS开发人员来说，学习jQuery选择器是很简单的事；对没有CSS基础的人员

来说，也能很快的掌握CSS选择器的规则

3）.良好的兼容性

在使用CSS选择器开发时，要考虑不同的浏览器对CSS样式表的兼容性，而在jQuery中，开发人员可以放心的使用jQuery选择器，不必担心浏览器兼容性的问题。

4）.完善的处理机制；

使用jQuery选择器不仅比传统的getElementById()和getElementsByTagName()函数简介的多，

而且能避免一些错误。

例如：改变一个元素的字体颜色

原生的JavaScript：

if(document.getElementById("#tt")){

document.getElementById("#tt").style.color = "red";

}

jQuery的：

$("#tt").css("color","red");

原生的JavaScript操作的元素很多，可能要对每一盒元素进行判断，

工作量，重复类似的代码，会使开发人员疲倦，如果不加判断，就

会报错，而jQuery这方面的机制就不错，不要加判断语句，也不会

报错。

注意：$("#tt")获取的永远是对象，即使网页上没有此元素；因此，

jQuery检查某个元素俗是否存在时，不要使用下面的代码：

if($("#tt")){

//do something

}

可以使用一下代码:

if($("#tt").length>0){

//do something

}

或者可以转换为DOM：

if($("#tt").[0]){

//do something

}

4.jQuery的选择器有哪些？

1）.基本选择器：

基本选择器是jQuery常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在页面中，每个id名称只能使用一次，class允许重复使用。基本选择器可以完成绝大多数的工作,下面是基本选择器的介绍和说明。

选择器	描述	返回	实例
#id	根据给定的id匹配给定的元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取class为test的元素
element	根绝给定的元素名匹配元素	集合元素	$("p")选取所有的p元素
selector1,selector2	将每个选择器匹配到的元素集合到一起后返回	集合元素	$("div,span,p")匹配所有的 div，span,p元素
*	匹配所有的	集合元素	$("*")选取所有的元素
......	......	......	......

2）.层次选择器：

如果想通过DOM的层级关系，来获取特定的元素，例如后代选择器、子元素、相邻元素、同辈元素，那么层次选择器是一个很好的选择，下面是层次选择器。

选择器	描述	返回	实例
$("ancestor descendant")	选取ancestor元素中的descendant（后代元素）	集合元素	$("div span")选取div中的所有span元素
$("parent > child")	选取parent（父）下的child（子）；和 $("ancestor descendant")是有区别的，一个是子代，一个是后代（包括子代）。	集合元素	$("div>span")选取div元素的下一个元素名为span 的所有元素
$("prev + next")	选取prev元素后的next元素	集合元素	$(".one div")选取class为one的元素下的div元素
$("prev ~ sublings")	选取prev元素之后的所有sublings元素	集合元素	$(".one ~ div")选取class为one的元素下的所有div的同辈元素

上面的选择器中，第一个和第二个比较常用，后面的两个有更加简单的方法可以代替。

使用next()方法代替$("prev + next"),$("prev+next")等价于$(".one").next();

nextAll()方法代替$("prev~sublings"),$("#prev+next")等价于$("#prev").nextAll();

在此，要讲的是sublings()方法，sublings()方法和$("prev~sublings")方法比较，

$("prev~sublings")是指的prev元素后的同辈元素，而sublings()指的是所有的同

辈元素，不仅仅是之后的也包括之前的！

//选取class为one的元素下面的div元素
  
  
  
  
   
           $(".one+div").css("background","red");

//同上

$(".one").next("div").css("background","red");

//选取class为one的元素后面所有的div元素

$(".one~div").css("background","red");

//同上

".one").nextAll("div").css("background","red");

//选取class为one的同辈元素

".one").siblings("div").css("background","red");

3）.过滤选择器：

过滤选择器主要是通过特定的过滤规则，来筛选出所需要的DOM,过滤的规则和CSS样式表中的伪类选择器的语法相同，即选择器都以一个冒号（:）为开头，按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。

3.1基本过滤选择器

选择器	描述	返回	举例
:first	选取第一个元素	单个元素	$(".one:first")选取div中的第一个div元素
:last	选取最后一个元素	单个元素	$(".one:last")选取div中的最后一个元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$("input:not(.myClass)")选取class 不是myClass的input元素
:even	选取索引是偶数的所有元素	集合元素	$("input:even")选取索引是偶数的input元素
:odd	选取索引是奇数的所有元素	集合元素	$("input:odd")选取索引是偶数的input元素
:eq(index)	选取索引为index的元素	单个元素	$("input:eq(1)")选取索引为1的input元素
:gt(index)	选取索引大于index的元素	集合元素	$("input:gt(1)")选取索引大于1的input元素
:lt(index)	选取索引小雨index的元素	集合元素	$("input:lt(1)")选取索引小于1的input元素
:header	选取所有的标题元素,h1,h2,h3,h4...	集合元素	$("input:header")选取网页中的所有h1,h2...
:animated	选取当前正在执行动画的元素	集合元素	$("div:animated")选取正在执行动画的div元素
:focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前获取焦点的元素

3.2内容过滤选择器

内容过滤选择器的过滤规则主要体现在它包含的子元素或者文本内容上。内容过滤选择器介绍说明如下：

选择器	描述	返回	实例
:contains(text)	选取含有文本内容为text的元素	集合元素	$(":contains('我')")选取包含文本“我”的元素
:empty	选取不包含子元素或者文本内容为空的空元素	集合元素	$("div:empty")选取不包含子元素（包括文本元素）的div空元素
:has(selector)	选取包含选择器所匹配的元素的元素	集合元素	$("div:has(p)")选取包含p元素的div元素
:parent	选取包含子元素或者文本的元素	集合元素	$("div:parent")选取拥有子元素（包括文本元素）的div元素

3.3可见性过滤选择器

可见性过滤选择器是根据元素是可见还是不可见的状态来选择相应的元素，可见性选择器介绍如下：

选择器	描述	返回	示例
:hidden	选取不可见的元素	集合元素	$(":hidden")选取的是不可见的元素包括： <div style="display:none"></div> <input type="hidden" /> <div style="visibility:hidden"></>
:visible	选取可见元素	集合元素	$("div:visible")选取所有可见的元素

可见性选择器中，需要注意的是hidden，它不仅包括样式属性display为none的元素，包括文本隐藏域（<input

="hidden"/>）和visible为hidden的元素。

3.4属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性，来获取它对应的元素，属性过滤选择器的使用方式介绍如下：

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")选取有id属性的div元素
[attribute=value]	选取属性值为value的元素	集合元素	$("div[title=test]")选取拥有 title属性为test的元素
[attribute!=value]	选取属性值不等于value的元素	集合元素	$("div[title!=test]")选取title 属性不等于test的div元素
[attribute^=value]	选取属性以value为开始的元素	集合元素	$("div[title^=test]")选取title属性以test开始的div元素
[attribute$=value]	选取属性以value结束的元素	集合元素	$("div[title$=test]")选取title属性以test结束的div元素
[attribute*=value]	选取属性中含有value的元素	集合元素	$("div[title*test]")选取title属性包含test的元素
[attribute\|=value]	选取属性等于给定字符串或者以该字符串为前缀（该字符串后面跟连字符“-”）的元素	集合元素	$("div[title='en']")选取属性title 为en或者以en为开头的元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定的值	集合元素	$("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的元素
[attribute1][attribute2] [attribute3]	用属性选择器合并生成一个复合的属性选择器，满足多个条件，没选择一次都会缩小一次范围	集合元素	$("div[id][title$=test]")选取拥有属性id，并且属性title以test结束

$("div[title^=te]"),$("div[title*=te]"),$("div[title~=test]"),$("div[title|=value]")容易混淆，注意加强记忆！

3.5子元素过滤选择器

子元素的过滤选择器的过滤规则是相对于其他的选择器稍微有点复杂，注意它与普通过滤器的区别，子元素过滤器介绍：

选择器	描述	返回	实例
:nth-child(index/even/odd/equation)	选取父元素下的第index个子元素或奇偶（index从1算起）	集合元素	:eq(index)只匹配一个元素，而:nth-child(index)匹配的是每个父元素，并且index是从1开始的， eq(index)是从0开始的
:first-child	选取每个元素的第一个子元素	集合元素	:first只返回一个元素 :first-child返回的是每个父元素的第一个子元素
:last-child	选取的每个元素的最后一个子元素	集合元素	:last返回的是一个元素，而:last-child返回的是每个父元素的第一个子元素
:only-child	如果某个元素的父元素中只有它一个元素，那么将会匹配	集合元素	$("ul li:only-child") 在ul 中只有一个li的ul将会被匹配