前端选择器的简单介绍

jQuery选择器与css选择器，用来选取网页中的元素 示例：$(“h3”).css(“background”,“red”);
获取网页中所有h 3元素的背景
$(“h3”)返回的是jQuery对象
.css是为了jQuery对象设置样式的方法

请列举出css中学习过的几种选择器？

基础选择器
1.标签选择器
2.类选择器
3.id选择器
高级选择器
1.层次选择器
后代选择器 空格
子代选择器 大于号
相邻兄弟选择器 加号
通用兄弟选择器 ~
2.结构伪类选择器
F E:first-child >E元素是F的第一个子元素
F E:last-child>E元素是F元素的最后一个子元素
F E:nth-child（n）>E元素是F元素的第N个子元素
F E::first - of - type>选择父元素F中的指定类型的第一个子元素F
F E:last - of - type==>选择父元素F中的指定类型的最后一个子元素F
F E:nth - of - type(n)==>选择指定类型的第n个

jQuery选择器的优势有哪些？

拿到相信的DOM元素之后，可以添加相应的操作；
不用担心其兼容性，它比单纯的css选择器功能更加强大，拥有跨浏览器的兼容性。

jQuery选择器包括几大类？

通过css选择器选取元素：
基本选择器
层次选择器
属性属选择器
通过过滤选择器选择元素：
基本过滤选择器
可见性过滤选择器

---

基本选择器又包括：
1.标签选择器：
element ，根据给定的标签名汽配元素==>$（"h2"）选择所有的H2元素2.类选择器：.class,根据给定的class匹配元素==>$（".title"）选取所有class为title的元素
3.ID选择器：
“#” id,根据给定的id来匹配元素==> $ ("#title") 选取id为tiltle的元素
4.并集选择器：selector1,selector2…，将每一个选择器匹配的元素合并后一起返回==>$("div,p,.title")选取所哟div,p还有类名为title的元素5.全局选择器：\ast ,匹配所有的元素==>$("*")选取所有的元素

---

层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素的
1.后代选择器：子代和父代用空格隔开==>KaTeX parse error: Expected 'EOF', got '#' at position 34: …(“属性”，“属性值”)，选取#̲menue下的所有span标签…("#menue>span").css(“属性”，“属性值”)，选取#menue的子元素
3.相邻元素选择器：prev+next,选取prev之后的next元素，就只选取一个==>$("p+dd").css(“属性”，“属性值”)，选择的是与p相邻的dd元素。4.同辈选择器，prevsibings,选择的是prev之后的sibings元素==>$(“p~dl”).css(“属性”，“属性值”)，选择的是p 后面 的所有dl

---

属性选择器器

【attribute^=value】==>选取给定属性是以某些特定的值开始的元素 ==>KaTeX parse error: Double superscript at position 10: ("[href^='̲en' ]")选取href属性…("[href${=}^{\prime }.jp{g}^{\prime }]")选择属性值是以.jpg结尾的元素【attribut{e}^{=}value】选取给定属性是以包含耨写属性值的元素==>$("[href* = ‘txt’]")选取href属性中含有txt的元素。
属性选择器可以根据是否包含有某属性来选取元素；
a标签带有class属性的
$(“news a[class]”).css(“background”,“blue”);
属性选择器可以根据属性的值来选取元素；
class属性值为hot
$(“news a[class = ‘hot’]”).css(“background”,"#ccbcb");
属性选择器可以指定选取不等于属性是某个特定值的元素；
class值不等于hot
$(“news a[class != hot]”).css(“backgroumd”,“c9cbcb”);
根据属性值包含特定的值获取元素
a标签href属性值是以www开头的
$(“news a[ href^ = ‘www’]”).css(“background”,“blue”);
根据属性值包含特定的值以指定值结尾的元素
a标签href属性值以HTML结尾
$("newsa[href$ = ‘href’]").css(“background”,“red”);

属性选择器可以指定属性值包含指定值的元素
a标签href属性值包含“k2"的元素
$(“news a[href* = ‘k2’]”).css(“banckground”,“red”);

---

过滤选择器

通过特定的过滤规则来筛选所需要的元素
主要分类
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器，子元素过滤选择器
基本过滤选择器

1. :first<>选取第一个元素 <>$(“li:first”)选取所有li元素中的第一个

2. :last<>选取最后一个元素<>$(“li:last”)选取全部li元素中的最后一个

3. :not(selector)<>除去所有与给定选择器匹配的元素<>$(“li:not(.three)”)选取class不是three的元素
   4.：even<>选择索引是偶数的所有元素（index从0开始）<> $(“li:even”)选取索引是偶数的所有li元素
   5.：odd <> 选取索引是奇数的所有元素（index 从0 开始） <> $(“li:odd”)选取索引是奇数的所有的li元素

---

通过位置选取元素的jQuery选择器有哪些？

基本选择器里面的层次选择器就是根据元素的位置来选择的，具体看上面。

---

使用jQuery如何实现隔行变色的效果？

1.：even<>选择索引是偶数的所有元素（index从0开始）<> $(“li:even”)选取索引是偶数的所有li元素
2.：odd <> 选取索引是奇数的所有元素（index 从0 开始） <> $(“li:odd”)选取索引是奇数的所有的li元素 根据需求选择是偶数行变色还是奇数行变色，选择上面的其中一种方法来实现

通过元素显示状态来选取元素

1. ：visible <> 选取可见的元素 <> $(":visible").show();选取所有可见的元素
2. ：hidden <> 选取所有隐藏的元素 <> $(":hidden").hide();选取所需要的隐藏元素

---

注意事项

1. 选择器中的空格： 选择器中的空格书写很规范很严格，多一个空格或者少一个空格，都会影响选择器的效果，所以千万注意啊，特别是平时喜欢打空格让代码看起来更清秀的小伙伴！

---

注：这些仅仅是个人在预习时所写的一些笔记，其中有错误的地方，请大胆指出，在下感激不尽！