CSS选择器和jQuery选择器学习总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器和jQuery选择器学习总结相关的知识，希望对你有一定的参考价值。
一、CSS3选择器
1、CSS3基本选择器
|
类型 |
语法 |
功能描述 |
|
标签选择器 |
P{font-size:16px} |
使用html中的标签作为相应的选择器的名称，直接设置页面中的标签样式 |
|
类选择器 |
.class{font-size:16px} |
最常用的选择器,样式一样的情况可以公用一个类名 |
|
ID选择器 |
#id{font-size:16px} |
只能在页面中使用一次，同一个id属性在同一个页面中只能使用一次 |
基本选择器的优先级: ID选择器>class类选择器>标签选择器 ;
CSS选择器的命名规范:a、使用英文字母小写 b、不要和Id选择器同名 c、使用具有语义化的单词命名 d、长名称或者词组可以使用驼峰命名方式命名选择器；
2、CSS3高级选择器
(1)层次选择器
层次选择器是通过HTML的文档对象模型（Document Object Model,DOM）元素间的层次来选择元素的，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟等几种关系。
|
选择器 |
类 型 |
功能描述 |
|
E F |
后代选择器 |
选择匹配的F元素，且匹配的F被包含在匹配的E元素内 |
|
E>F |
子选择器 |
选择匹配的F元素，且3匹配的F元素是匹配的E元素的子元素 |
|
E+F |
相邻兄弟选择器 |
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面 |
|
E~F |
通用兄弟选择器 |
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
注意：a、后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入。
b、通用兄弟选择器选中的是E元素相邻的后面兄弟元素F,是一个或多个元素；相邻兄弟选择器选中的仅是与E元素相邻并且紧挨的兄弟元素F,其中选中的仅是一个元素。
(2)属性选择器
在HTML中，可以给元素设置各种各样的属性，如 id、class、title、href等。通过各种各样的属性可以选择到元素并为其设置样式；
|
属性选择器 |
功能描述 |
|
E[attr] |
选择匹配具有属性attr的E元素 例：a[id] { background:yellow; }
|
|
E[attr=val] |
选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写） 例：a[id=”first”] { background: red; } <a href=”http://abcd.doc” id=”first” class=”links item”>10</a> |
|
E[attr^=val] |
选择匹配元素E，且E元素定义了属性attr,其属性值是以val开头的任意字符串 例如：a[href^=”http”] { background: red; } <a href=”http://abcd.doc” id=”first” class=”links item”>10</a> |
|
E[attr$=val] |
选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 例如：a[href$=”doc”] {background: red; } <a href=”http://abcd.doc” id=”first” class=”links item”>10</a> |
|
E[attr*=val] |
选择匹配元素E，且E元素定义了属性attr,其属性值包含了“val”,也就是字符串val与属性值中的任意位置相匹配 例如：a[class*="links"] { background: red; } <a href=”http://abcd.doc” id=”first” class=”links item”>10</a> |
注意：E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中。
例如：<a href="#" class="links item"></a>。
其中，a[class="links"]{…}是找不到匹配元素的，只有a{class="links item"}{…}才能够匹配。
(3)结构伪类别选择器
伪类可以将一段并不存在的HTML当作独立元素来定位，或者是找到无法使用的其他简单选择器就能定位到实际存在的元素上。
|
选择器 |
功能描述 |
|
E:first-child |
作为父元素的第一个子元素的元素E |
|
E:last-child |
作为父元素的最后一个子元素的元素E |
|
E F:nth-child(n) |
选择父级元素E的第n个子元素F（n可以是1、2、3……） |
|
E:first-of-type |
父元素内具有指定类型的第一个元素E元素 |
|
E:last-of-type |
父元素内具有指定类型的最后一个元素E元素 |
|
E F:nth-of-type(n) |
选择父元素内具有指定类型的第n个F元素。 |
注意：E F：nth-child(n)和E F:nth-of- type（n）的区别：前者是在父级里从第一个元素开始查找,不分类型。后者是在父级里先看类型，再看位置。
div p:nth-child(1){ background: yellow:} div中第一个且是p元素。
div p:nth-of-type(2){ background: blue:} div中第2个类型为p的元素。
二、jQuery选择器
在CSS中，选择器的作用是获取元素，而后为其添加CSS样式，美化其外观；jQuery选择器，不仅良好地继承了CSS选择器的语法，还集成了其获取页面元素便捷高效的特点，jQuery选择器与CSS选择器的不同之处就在于，jQuery选择器获取元素后，为该元素添加的是行为，使页面交互变得更加丰富。jQuery选择器浏览器兼容性更好。优势：①代码简洁；②处理机制完善；
1.基本选择器
|
名称 |
语法构成 |
描述 |
返回值 |
示例 |
|
标签选择器 |
element |
匹配指定的标签名元素 |
元素集合 |
$(“h2”)选取所有h2元素 |
|
类选择器 |
.class |
匹配指定的class元素 |
元素集合 |
$(“.tiltle”)选取所有以class为title的元素 |
|
Id选择器 |
#id |
匹配指定的id元素 |
单个元素 |
$(“#title”)选取以id为title的元素 |
|
并集选择器 |
selector1,selector2,…,selecorN |
将每个选择器匹配的元素合并后一起返回 |
元素集合 |
&(“div,p,.title”)选取所有div、p和class为title的元素 |
|
全局选择器 |
* |
匹配所有元素 |
集合元素 |
$(“*”)选取所有元素 |
2.层次选择器
|
名称 |
语法构成 |
描述 |
返回值 |
示例 |
|
后代选择器 |
root offspring |
选取root元素里的所有offspring(后代)元素 |
元素集合 |
$(“#menu span”)选取#menu下所有的<span>元素 |
|
子选择器 |
parent>child |
选取parent元素下的child(子)元素 |
元素集合 |
$(“#menu>span”)选取#menu下的子元素<span> |
|
相邻元素选择器 |
prev+next |
选取紧邻prev元素之后的next元素 |
元素集合 |
$(“h2+dl”)选取紧邻<h2>元素之后的同辈元素<dl> 类似next()方法 |
|
同辈元素选择器 |
prev~siblings |
选取prev元素之后的所有siblings（同辈）元素 |
元素集合 |
$(“h2~dl”)选取<h2>元素之后所有的同辈元素<dl> 类似nextAll()方法 |
注意： 后代选择器选择范围：子、孙子、曾孙子……
子选择器选择范围：子
3.属性选择器
从语法构成来看，它属于遵循CSS选择器；从类型来看，它属于jQuery中按条件过滤获取元素的选择器之一。
|
语法 |
描述 |
返回值 |
示例 |
|
[attribute] |
选取包含指定属性的元素 |
元素集合 |
$(“[href]”)选取含有href属性的元素 |
|
[attribute=value] |
选取等于指定属性是某个特定值的元素 |
元素集合 |
$(“[href=’#’]”)选取href属性值为’#’的元素 |
|
[attribute!=value] |
选取不等于指定属性是某个值的元素 |
元素集合 |
$(“[href!=’#’]”)选取href属性值不为”#”的元素 |
|
[attribute^=value] |
选取指定属性是以某些特定值开始的元素 |
元素集合 |
$(“[href^=’en’]”)选取href属性值以”en”开头的元素 |
|
[attribute$=value] |
选取指定属性是以某些特定值结尾的元素 |
元素集合 |
$(“[href$=’.jpg’]”)选取href属性值以”.jpg”结尾的元素 |
|
[attribute*=value] |
选取指定属性值包含某些值的元素 |
元素集合 |
$(“[href*=’txt’]”)选取href属性值中含有”txt”的元素 |
4.过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中懂得伪类语法相同，即选择器都是以一个冒号（：）开头，冒号前是需要过滤的元素。例如，a:hover表示当鼠标指针移过<a>元素时，tr:visited表示当鼠标指针访问过<tr>元素后等。
按照不同的过滤条件，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。这里仅介绍分别介绍基本过滤选择器、可见性过滤选择器、表单属性过滤选择器，后续接触到其它再补充。
(1)基本过滤选择器
|
语法 |
描述 |
返回值 |
示例 |
|
:first |
选取第一个元素 |
单个元素 |
$(“li:first”)选取所有<li>元素中的第一个<li>元素 |
|
:last |
选取最后一个元素 |
单个元素 |
$(“li:last”)选取所有<li>元素中的最后一个<li>元素 |
|
:not(selector) |
选取去除所有与给定选择器匹配的元素 |
集合元素 |
$(“li:not(.three)”)选取class不是three的元素 |
|
:even |
选取索引是偶数的所有元素（index从0开始） |
集合元素 |
$(“li:even”)选取索引是偶数的所有<li>元素 |
|
:odd |
选取索引是奇数的所有元素（index从0开始） |
集合元素 |
$(“li:odd”)选取索引是奇数的所有<li>元素 |
|
:eq(index) |
选取索引等于index的元素（index从0开始） |
单个元素 |
$(“li:eq(1)”)选取索引等于1的<li>元素 |
|
:gt(index) |
选取索引大于index的元素（index从0开始） |
集合元素 |
$(“li:gt(1)”)选取索引大于1的<li>元素（注意：大于1，不包括1） |
|
:lt(index) |
选取索引小于index的元素（index从0开始） |
集合元素 |
$(“li:lt(1)”)选取索引小于1的<li>元素（注意：小于1，不包括1） |
|
:header |
选取所有标题元素，如h1~h6 |
集合元素 |
$(“:header”)选取网页中的所有标题元素 |
|
:focus |
选取当前获取焦点的元素 |
集合元素 |
$(“:focus”)选取当前获取焦点的元素 |
|
:animated |
选择所有动画元素 |
集合元素 |
$(“:animated”)选取当前所有动画元素 |
(2)可见性过滤选择器
|
选择器 |
描述 |
返回值 |
示例 |
|
:visible |
选取所有可见的元素 |
集合元素 |
$(“:visible”)选取所有可见的元素 |
|
:hidden |
选取所有隐藏的元素 |
集合元素 |
$(“:hidden”)选取所有隐藏的元素 |
注意：选择器 :hidden获取的元素不仅包括样式属性display为 "none" 的元素，还包括文本隐藏域（<input type="hidden"/>和visibility :hidden之类的元素。）
visibility:hidden----将元素隐藏但是在网页中该占的位置还是占着；
display:none----将元素的显示设为无，即在网页中不占任何位置；
(3)表单属性过滤选择器
在介绍表单属性过滤选择器之前，先介绍jQuery表单选择器，为了方便表单验证，jQuery提供了专门针对表单的一类选择器，即表单选择器；
a、表单选择器
表单选择器就是用来选择文本输入框、按钮等表单元素的。
结合代码来介绍
示例1：
1 <--省略部分代码--> 2 <div class="main"> 3 <form method="post" name="myform" id="myform"> 4 <h1 class="bold" colspan="2">注册休闲网</h1> 5 6 <dl> 7 <dt class="left">您的Email：</dt> 8 <dd> 9 <input type="hidden" name="userId" /> 10 <input id="email" type="text" class="inputs" /></dd> 11 </dl> 12 <dl> 13 <dt class="left">输入密码：</dt> 14 <dd> 15 <input id="pwd" type="password" class="inputs" /></dd> 16 </dl> 17 <dl> 18 <dt class="left">再输入一遍密码：</dt> 19 <dd> 20 <input id="repwd" type="password" class="inputs" /></dd> 21 </dl> 22 <dl> 23 <dt class="left">您的姓名：</dt> 24 <dd> 25 <input id="user" type="text" class="inputs" /></dd> 26 </dl> 27 <dl> 28 <dt class="left">性别：</dt> 29 <dd> 30 <input name="sex" type="radio" value="1" checked="checked" /> 31 男 32 <input name="sex" type="radio" value="0" /> 33 女</dd> 34 </dl> 35 <dl> 36 <dt class="left">出生日期：</dt> 37 <dd> 38 <select name="year"> 39 <option value="1998">1998</option> 40 </select>年 41 <select name="month"> 42 <option value="1">1</option> 43 </select>月 44 <select name="day"> 45 <option value="12">12</option> 46 </select>日</dd> 47 </dl> 48 <dl> 49 <dt class="left">爱好：</dt> 50 <dd> 51 <input type="checkbox" checked="checked" />编程 52 <input type="checkbox" />读书 53 <input type="checkbox" />运动 54 </dd> 55 </dl> 56 <dl> 57 <dt class="left">您的头像：</dt> 58 <dd> 59 <input id="fileImgHeader" type="file" /> 60 <img id="imgHeader" src="images/header1.jpg" /> 61 <input type="image" src="images/header2.jpg" /></dd> 62 </dl> 63 64 <dl> 65 <dt> </dt> 66 <dd> 67 <input name="btn" type="submit" value="注册" class="rb1" /> 68 <input name="btn" type="reset" value="重置" class="rb1" /> 69 <input type="button" style="display: none" /> 70 <button type="button" style="display: none"></button> 71 </dd> 72 </dl> 73 </form> 74 </div> 75 <--省略部分代码-->
使用示例一的代码介绍表单选择器的语法如下表：
|
语法 |
描述 |
示例 |
|
:input |
匹配所有input、textarea、select和button元素 |
$(“#myform :input”)选取表单中所有的input、select和button元素 |
|
:text |
匹配所有单行文本框，即type=”text” |
$(“#myform :text”)选取Email和姓名两个input元素 |
|
:password |
匹配所有密码框，即type=”password” |
$(“#myform :password”)选取两个<input type=”password”/>元素 |
|
:radio |
匹配所有单项按钮 |
$(“#myform :radio”)选取性别对应的两个<input type=”radio”/>元素 |
|
:checkbox |
匹配所有复选框 |
$(“#myform :checkbox”)选取三个<input type=”checkbox”/>元素 |
|
:submit |
匹配所有提交按钮 |
$(“#myform : submit”) 选取一个<input type=”submit”/>元素 |
|
:image |
匹配所有图像域 |
$(“#myform : image”) 选取一个<input type=”image”/>元素 |
|
:reset |
匹配所有重置按钮 |
$(“#myform : reset”) 选取一个<input type=” reset”/>元素 |
|
:button |
匹配所有普通按钮 |
$(“#myform :button”)选取最后两个button元素 |
|
:file |
匹配所有文件域 |
$(“#myform :file”) 选取一个<input type=” file”/>元素 |
|
:hidden |
匹配所有不可见元素， |
$(“#myform :hidden”)选取的元素包括三个option元素、一个<input type=”hiidden”/>元素、style=”display: none”的两个button元素 |
b、表单过滤选择器
示例2：
<--省略部分代码--> <div class="register"> <form id="userform" name="userform"> <p> 编号：<input name="code" disabled="disabled" value="10010"/> </p> <p> 姓名：<input name="name" type="text" value="张三"/> </p> <p> 性别：<input name="sex" type="radio" value="1" checked="checked" /> 男 <input name="sex" type="radio" value="0" />女 </p> <p> 爱好： <input type="checkbox" checked="checked" />编程 <input type="checkbox" />读书 <input type="checkbox" />运动 </p> <p> 家乡：<select name="hometown"> <option value="1" selected="selected">北京</option> <option value="2">上海</option> <option value="3">天津</option> </select> </p> </form> </div>
<--省略部分代码-->
使用示例2的代码介绍表单过滤选择器的语法如下表：
|
语法 |
描述 |
示例 |
|
:enabled |
匹配所有可用元素 |
$(“#userform :enable”)匹配form内部除编号输入框外的所有元素 |
|
:disabled |
匹配所有不可用元素 |
$(“#userform :disabled”)匹配编号输入框 |
|
:checked |
匹配所有被选中元素（复选框、单项按钮、select中的option） |
$(“#userform :checked”)匹配”性别”中的”男”选项和”爱好”中的”编程”选项 |
|
:selected |
匹配所有选中的option元素 |
$(“#userform :selected”)匹配”家乡”中的”北京”选项 |
5.jQuery选择器的注意事项
(1).选择器中含有特殊如号的注意事项
在W3C规范中，规定属性值中不能含有某些特殊字符，但难免会碰到表达式中有"#"和"."等特殊字的情况，若是按照一般情况来处理则会出错，这里就需要使用转义符转义。
例如：
1 <div id="id#a">aa</div> 2 <div id="id[2]">cc</div>
普通方式处理(错误)：
1 $("#id#a"); 2 $("#id[a]");
不能正确获取到元素，正确的写法需要在特殊符号前加"\\"如下：
$("#id\\#a");
$("#id\\[2\\]");
(2)选择器中含有空格的注意事项
选择器中空格也是不容忽视的，
例如：
var $t_a = $(".test :hidden"); //带空格的jQuery选择器
以上代码选取的是class为 "test"的元素内部的隐藏元素
var $t_b = $(".test:hidden"); //不带空格的jQuery 选择器
以上代码选取的是隐藏的class为 "test"的元素
以上是关于CSS选择器和jQuery选择器学习总结的主要内容，如果未能解决你的问题，请参考以下文章