为什么要学习 jQuery

Question

1、使用 JavaScript 开发过程中，有许多的缺点

1、查找元素的方法太少，麻烦。
2、遍历伪数组很麻烦，通常要嵌套一大堆的 for 循环。
3、有兼容性问题。
4、要想实现简单的动画效果，也很麻烦。
5、代码冗余。
6、js注册事件会被覆盖。

2、jQuery 的优点

1、出色的浏览器兼容性。
2、强大的选择器。
3、出色的DOM操作的封装。
4、完善的Ajax支持。
5、链式操作方式。
6、隐式迭代。
7、丰富的插件支持。

3、jQuery 初体验

1、需要引入 jQuery 文件：<script src="jquery-1.12.4.js"></script>
2、入口函数的标准：

//window.onload=function(){}只能使用一次
$(document).ready(function(){//dom结构加载完成之后立即执行，可重复使用多次。
  $("div").show(3000);//加上时间会有动画效果
  //隐式迭代：偷偷的遍历，jquery会自动的遍历，不需要我们遍历。
})

4、jQuery 对象与 DOM 对象

1、jQuery对象是通过jQuery方法包装后的对象，可以使用jQuery中的属性和方法。
2、DOM对象式DOM节点对象，可以使用DOM下的属性和方法。
3、jQuery对象和DOM对象的属性和方法不可以混合使用。
4、jQuery对象和DOM对象可以相互转换。

jQuery对象转为DOM对象：
jQuery对象是一个类似数组，可以通过 [index] 的方法得到相应的DOM对象。
另一种方法事故jQuery本身提供的，通过get(index)方法得到相应的DOM对象。

DOM 对象转为 jQuery 对象：
对于一个 DOM 对象，只需要用 $() 把DOM对象包装起来就可以获得一个jQuery对象了。

5、jQuery 选择器

格式：$("选择器")

基本选择器

基本选择器是 jQuery 中最常用的选择器，也是最简单的选择器，它通过元素 id、class、和标签名等来查找 DOM 元素。
ID选择器：$("#id值")
类选择器：$(".类名")
标签选择器：$("标签名")
全选择器：$("*")
并集选择器：$("selector1,selector2,selector3,...")

层级选择器

通过DOM元素之间的层级关系来获取特定元素
后代选择器：$("selector1 selector2")
子选择器：$("selector1>selector2")
相邻（下一个）兄弟选择器：$("selector1+selector2")
所有（下面）兄弟选择器：$("selector~selector2")

基本匹配选择器

:first：获取匹配的第一个元素
:last：获取匹配的最后一个元素
:not(selector)：去除所有与给定选择器匹配的元素
:even：匹配所有索引值为偶数的元素，从0开始计数
:odd：匹配所有索引值为基数的元素，从0开始计数
:eq(index)：匹配一个给定索引值的元素
:gt(index)：匹配所有大于给定索引值的元素
:lt(index)：匹配所有小于给定索引值的元素
:header：匹配如h1,h2,h3之类的标题元素

属性匹配选择器

[attribute]：匹配包含给定属性的元素。
[attribute=value]：匹配给定的属性是某个特定值的元素。
[attribute!=value]：匹配所有不含邮指定的属性，或者属性不等于特定值的元素。
[attribute^=value]：匹配给定值的属性是以某些值开始的元素。
[attribute=$=value]：匹配给定值的属性是以某些值结束的元素。
[attribute*=value]：匹配给定的属性是以包含某些值的元素。
[attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用。

子元素匹配选择器

:nth-child：匹配其父元素下的第N个子或奇偶元素
:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
:only-child：如果某个元素是父元素中唯一的子元素，那将会被匹配

表单匹配选择器

:input：匹配所有 input，textarea，select 和 button 元素
:text：匹配所有的单行文本框
:password：匹配所有的密码框
:radio：匹配所有单选按钮
:checkbox：匹配所有复选框
:submit：匹配所有提交按钮
:reset：匹配所有重置按钮
:button：匹配所有按钮
:file：匹配所有文件域
:hidden：匹配所有不可见元素，或者 type 为 hidden 的元素
:visible：匹配所有可见元素
:enabled：匹配所有可用元素
:disabled：匹配所有不可用元素
:checked：匹配所有选中的被选中元素（复选框、单选框，不包括 select 的 option）
:selected：匹配所有选中的 option 元素

内容匹配选择器

:contains(text)
:has(selector)
:empty：匹配所有不包含子元素或者文本的空元素
:parent：匹配含有子元素或者文本的元素