css与jquey选择器比较

CSS是用于分离网页的结构和表现的，也就是说对于一个网页，HTML定义网页的结构，CSS描述网页的样子，jQuery选择器和CSS选择器的写法十分类似，都具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，使用起来相对方便，通常，把css选择器用$("")包起来就成了一个jQuery选择器，两者的主要区别为CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加行为。

	CSS选择器	jQuery选择器
ID选择器	#myID	$("#myID")
类选择器	.myClass	$(".myClass")
标签选择器	p	$("p")

一、jquery选择器：（参考https://www.w3school.com.cn/jquery/jquery_selectors.asp）

jQuery选择器的效率

1. id选择器$('#id')和元素标签选择器$('form')
2. 类选择器$('.className')
3. 属性选择器$('[attribute=value]')和伪类选择器$(':hidden')

也可以分为元素选择器、属性选择器和css选择器：

案例：

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

选择器使用语法具体见：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

二、css选择器（https://www.w3school.com.cn/css/css_syntax.asp）

根据W3School描述，css选择器分为：派生选择器（后代/子元素/相邻兄弟 选择器），id选择器，类选择器，属性选择器。

CSS选择器的效率

1. id选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div,h1,p）
4. 相邻选择器（h1+p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel="external"]）
9. 伪类选择器（a:hover,li:nth-child）

派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

例如：

h1 em {color:red;}

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

三、jquery常见DOM操作