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元素 |
| * | 匹配所有的 | 集合元素 | $("*")选取所有的元素 |
| ...... | ...... | ...... | ...... |
如果想通过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()指的是所有的同
辈元素，不仅仅是之后的也包括之前的！
//同上
$(".one").next("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")选取当前获取焦点的元素 |
内容过滤选择器的过滤规则主要体现在它包含的子元素或者文本内容上。内容过滤选择器介绍说明如下：
| 选择器 | 描 述 | 返 回 | 实 例 |
|---|---|---|---|
| :contains(text) | 选取含有文本内容为text的元素 | 集合元素 | $(":contains('我')")选取包含文本“我”的元素 |
| :empty | 选取不包含子元素或者文本内容为空的空元素 | 集合元素 |
$("div:empty")选取不包含子元素
（包括文本元素）的div空元素
|
| :has(selector) | 选取包含选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取包含p元素的div元素 |
| :parent | 选取包含子元素或者文本的元素 | 集合元素 |
$("div:parent")选取拥有子元素
（包括文本元素）的div元素
|
3.3可见性过滤选择器
可见性过滤选择器是根据元素是可见还是不可见的状态来选择相应的元素，可见性选择器介绍如下：
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :hidden | 选取不可见的元素 | 集合元素 | $(":hidden")选取的是不可见的元素包括： |
| :visible | 选取可见元素 | 集合元素 | $("div:visible")选取所有可见的元素 |
可见性选择器中，需要注意的是hidden，它不仅包括样式属性display为none的元素，包括文本隐藏域（
="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将会被匹配 |
nth-child()选择器是很常用的子元素过滤选择器，详细功能如下：
1.nth-child(even)只能选择每个父元素下的索引值为偶数的子元素；
2.nth-child(odd)只能选择每个父元素下的索引值为奇数的子元素；
3.nth-child(2)只能选择每个父元素下的索引值为2的子元素；
4.nth-child(3n)能选择每个父元素下的索引值为3的倍数的子元素（n从1开始）；
5.nth-child(3n+1)能选取每个元素下的索引值为为（3n+1）的子元素（n从1开始）；
内容比较多，后面待续......