1. jQuery简介
* jQuery的产生背景及优点：
为了简化JavaScript的开发, 一些JavsScript库诞生了。JavaScript库封装了很多预定义的对象和实用函数。
能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器
jQuery是一个兼容多浏览器的，轻量级的javaScript库。
jQuery是继prototype之后又一个优秀的JavaScript库，如今，jQuery已经成为最流行的JavaScript库
jQuery，顾名思义，也就是JavaScript和查询（Query），是继prototype之后又一个优秀的Javascript框架。
其宗旨是——WRITE LESS,DO MORE。优势如下:
轻量级(压缩后只有几十k)
强大的选择器
出色的 DOM 操作的封装
可靠的事件处理机制
完善的 Ajax
出色的浏览器兼容性
隐式迭代：对集合对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历
文档说明很全
可扩展插件
* jQuery的使用：
jQuery库实际上就是一个js文件，只需要在网页中直接引入这个文件就可以了。
将jQuery的库文件加入
在开发测试时, 用的是未压缩的版本:
jquery-1.7.2.js
在上线项目中, 会使用压缩后的版本:
jquery-1.7.2.min.js
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//使用$()代替window.onload
$(function(){
//获取按钮对象并绑定单机响应函数
$("#btnId").click(function(){
//弹出Hello
alert(‘Hello‘);
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
2. jQuery的核心
1.jQuery的核心函数: $()
* jQuery库中为window对象定义了一个$函数(方法) jQuery()；
* $函数会根据参数数据类型的不同做不同的工作, 返回一个jQuery封装的伪数组的对象；
* $是jQuery的核心函数，jQuery的核心功能都是通过这个函数实现。
* $ == jQuery, $()==jQuery()
* $的四个作用:
1. $(function(){})：核心函数中加入函数：function()时，在DOM文档载入完成后, 函数自动执行；相当于window.onload = function(){}。
2. $(“选择器”)：根据这个字符串查找元素节点对象。
核心函数中加入选择器字符串，根据此字符串在document中去匹配一组元素, 并封装成jQuery对象返回。
3. $(“html字符串”)：核心函数中加入HTML字符串，作用为根据这个字符串创建对应的标签对象, 并包装成jQuery对象。
4. $(DOM对象)：核心函数中加入DOM对象，作用为：将DOM对象包装为jQuery对象返回。
2.jQuery对象访问
2.1).each(callback)
? callback函数: function (index, domEle)
? 遍历jQuery对象中包含的所有DOM对象, 每拿到一个dom对象都会调用指定的回调函数, 并将下标和dom对象传入
2.2).text()
? text()得到元素节点对象的文本内容。
? text(str)设置元素的文本内容
2.3).attr()
? attr(属性名)返回“属性名”对应的属性值
? attr(属性名,属性值) 将“属性名”对应的属性设置为“属性值”
2.4).val()
? val()读取value属性
? val(value值)设置value属性
? val([选项值1,选项值2,…,选项值n]) 设置单选框、多选框或下拉列表被选中的值。
3. DOM对象与jQuery对象的转换问题
3.1.DOM对象转jQuery对象：
使用jQuery核心函数包装DOM对象,例如：var $btnEle = $(btnEle)
声明一个变量指向jQuery对象，那么这个变量习惯上要以$开头
3.2.jQuery对象转DOM对象：
使用数组下标：$btnEle[0]
使用get(index)方法：$btnEle.get(0)
Dom对象和jQuery对象的区别
两种对象，各自有自己的属性和方法
jQuery对象只能调用jQuery封装的方法
DOM对象只能调用DOM中所定义的方法
jQuery对象本质是多个Dom对象的集合(0~n个)
分别使用DOM对象和jQuery对象获取div中的文本
* jQuery操作文本
text() innerText
html() innerHTML
val() value
* DOM->jQuery:$(dom对象)
* jQuery->DOM:将jQuery看作为数组|集合
* $div[0] | $div.get(0)
4. jQuery的选择器:基本选择器、层次选择器、过滤选择器
使用jQuery选择器可以快捷的找出特定的DOM元素。使用选择器也是jQuery的基础。
语法：$(selector)
例如：
$(“#id”) 根据id获取指定元素
$(“.class”) 根据类名获取指定元素
$(“tagname”) 根据标签名获取指定元素
* 基本选择器：jquery中最简单，也是最常用的选择器，它通过标签名,id属性,class属性来查找匹配的DOM元素
标签选择器：$("p")根据标签名匹配的一个或多个标签, 封装成jQuery对象。
类选择器:$(".class名")根据class属性值匹配一个或多个标签, 封装成jQuery对象。
ID选择器$("#id名")根据id属性匹配一个标签, 封装成jQuery对象。
全局选择器：$("*")匹配所有标签, 封装成jQuery对象，多用于结合上下文来搜索。
并集选择器：$("#id名,.class名，p")可以指定任意多个选择器，并将每一个选择器匹配到的元素合并到一个结果内返回。
* 层次选择器
后代选择器（ancestor descendant）：$("E F")在给定的祖先元素下匹配所有后代元素。
子代选择器（parent > child）：$("E>F")在指定父元素下匹配所有子元素.注意:要区分好后代元素与子元素。
相邻选择器（prev + next）:$("E+F")匹配所有紧接在prev元素后的next元素。
同辈选择器（prev ~ siblings）$("E~F")：匹配prev元素之后的所有 siblings元素, 不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配。
* 过滤选择器：
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头
? 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤, 表单过滤和表单属性过滤选择器。
* 基本过滤选择器
$(":first")：匹配找到的第一个元素。
$(":last")：匹配找到的最后一个元素，与 :first 相对应。
$(":eq(index)")：匹配一个给定索引值的元素，index从0开始计数。
$(":gt(index)")：匹配所有大于给定索引值的元素，index从0开始计数。
$(":lt(index)")：匹配所有小于给定索引值的元素，index从0开始计数。
$(":not(selector)")：去除所有与给定选择器匹配的元素。
$(":odd")：匹配所有索引值为奇数的元素,和:even对应，从 0 开始计数。
$(":even")：匹配所有索引值为偶数的元素，从0开始计数，js的数组都是从0开始计数的。
$(":header")：匹配如 h1, h2, h3之类的标题元素。
$(":animated")：匹配所有正在执行动画效果的元素。
$(":focus")：触发每一个匹配元素的focus事件。
* 内容过滤选择器：内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。
$(":contains(text)"):匹配包含给定文本的元素。
$(":parent")：匹配含有子元素或者文本的元素。
$(":empty")：匹配所有不包含子元素或者文本的空元素。
$(":has(selector)"):匹配含有选择器所匹配的元素的元素。
* 可见性过滤选择器：根据元素的可见和不可见状态来选择相应的元素
$(":hidden")：匹配所有不可见元素，或者type为hidden的元素。
$(":visible")：匹配所有的可见元素。
* 属性过滤选择器：属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
$("[属性名]")：匹配包含给定属性的元素。
$("[属性名=属性值])：匹配给定的属性是某个特定值的元素。
$("[属性名!=属性值])：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
$("[属性名^=属性值])：匹配给定的属性是以某些值开始的元素。
$("[属性名$=属性值])：匹配给定的属性是以某些值结尾的元素。
$("[属性名*=属性值])：匹配给定的属性是以包含某些值的元素。
$("[属性1][属性2][属性n]")：复合属性选择器，需要同时满足多个条件时使用。
* 子元素过滤选择器
$(":nth-child(index)"):匹配其父元素下的第N个子或奇偶元素，index:要匹配元素的序号，从1开始。
$(":first-child"):匹配第一个子元素,‘:first‘ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。
$(":last-child"):匹配最后一个子元素,‘:last‘ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。
$(":only-child"):如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配。
* 表单过滤选择器
$(":input")：匹配所有 input, textarea, select 和 button 元素。
$(":text|password|radio|checkbox|reset|submit|img|button|file|hidden")：
匹配所有单行文本、密码框、单选按钮、复选框、重置按钮、提交按钮、图像域、按钮、文件域、不可见元素。
* 表单对象属性过滤选择器：此选择器主要对所选择的表单元素进行过滤
$(":enabled")：匹配所有可用元素。
$(":disabled")：匹配所有不可用元素。
$(":checked")：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。
$(":selected")：匹配所有选中的option元素。