第一章：Jquery的基础
JQuery - 是一个javascript的框架(函数库)
一、Jquery的使用
1.下载Jquery框架:http://jquery.com
2.在页面引用jquery-x.x.x.js文件
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
3.使用
二、第一个Jquery程序$()
$(document).ready(function() {
alert("hello,world") ;
});
//简写
$(function(){
alert("hello,china") ;
}) ;
或
function hello() {
alert("hello,china!") ;
}
$(hello) ;
三、window.onload与$(document).ready()的区别
1.执行时机不同
前者必须等待网页中所有的内容加载完毕后（包括图片）才能执行
后者是在网页所有DOM元素载入就绪时就执行（可能DOM元素关闭的东西并没有加载完，如图片）
2.编写个数不同
前者不能同时编写多个，否则后面的会替换前面的
后者可以编写多个,会执行多个
3.简化写法
前者没有简写
后者可简写
4.window.onload 等同于 $(window).load(function(){}) ;
四、DOM对象和Jquery对象
1.DOM对象：通过JavaScript中的DOM API操作获得的元素对象，如document.getElementById...
2.JQquery对象：通过Jquery包装Dom对象后产生的对象,$(dom对象),$(选择器)
3.DOM对象和JQuery对象只能各自访问自己的方法,如：
var div = document.getElementById("div") ;
div.innerhtml = "hello,world" ;
$("#div").html("hello,china") ;
五、DOM对象与JQuery对象的相互转换
1.Jquery对象-->DOM对象
方法一：JQuery对象[下标],eg:
var $ck = $("#ck") ;
var ck = $ck[0] ;
alert(ck.checked) ;
方法二：Jquery对象.get(索引),eg:
var $ck = $("#ck") ;
var ck = $ck.get(0) ;
alert(ck.checked) ;
2.DOM对象-->JQuery对象
var $JQuery对象 = $(DOM对象)
六、JQuery基本选择器 -> $()
1.选择器：选择要操作的DOM元素(对象、节点)
2 .包装器（包装集）->数组：
通过JQuery定义的方法（选择器）操作的含有匹配元素的集合。
3.基本选择器
七、包装集管理
1.size()
2.length
4.add() 添加元素包装
5.not() 删除包装集的元素
6.filter() 过滤包装集合中的元素
7.slice(begin,end) 获取包装集合的子集
第二章 ：jQuery的选择器
一、JQuery选择器
1.作用：选择要操作的DOM元素
2.种类
(1)基本选择器
ID
类
标记
组合(s,s,...)
通配符(*)
(2)层次选择器
ancestor descendant : ancestor元素里的"所有"descendant(后代)元素
parent > child : parent元素里的"子元素"child -> 区别上面
prev + next : 紧接着pre元素后的next元素
prev ~ siblings : 选择pre元素之后的所有siblings元素 -> 弟弟元素
(3)过滤选择器
1)基本过滤
first: 选取第一个元素
last: 选取最后一个元素
not(selector)：去除所有与给定选择器匹配的元素
even：选取索引是偶数的所有元素，索引从0开始
odd ：选取索引是奇数的所有元素，索引从0开始
:eq(index) 选取索引等于index的元素(index从0开始)
:gt(index) 选取索引大于index的元素(index从0开始)
:lt(index) 选取索引小于index的元素(index从0开始)
:header 选取所有标题元素，例如：h1,h2,h3等等
:animated 选择当前执行 jQuery 动画的元素
2)内容过滤
:contains(text) 选取含有文本内容为text的元素
:empty 选取不包含子元素或者文本的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素
3)可见性过滤
:hidden 选取所有不可见的元素
:visible 选取所有可见的元素
4)属性过滤
[attribute] : 选择拥有属性attribute的元素
[attribute=value] : 选择属性attribute等于valued元素
[attribute!=value] : 选择属性attribute的值不等于value的元素
[attribute^=value] : 选择属性attribute的值以value开始的元素
[attribute$=value] : 选择属性attribute的值以value结尾的元素
[attribute*=value] : 选择属性attribute的值含有value的元素
[selector1][selector2][selectorN] : 多个属性选择器的合并，$("div[id][id=text]")
5)子元素过滤
:nth-child(index/even/odd/equation) 区别:eq(index)-> 只选择一个元素,下标索引从0开始;而:nth-child
(index)->可 选择多个元素，下标索引从1开始
:first-child
:last-child
:only-child ： 只有一个子元素的
6)表单对象属性过滤
:enabled 选择可用元素
:disabled 选择不可用元素
:checked 选择选中元素（单选框，多选框)
:selected 选择选中元素（下拉列表框)
(4)表单选择器
:input 选取所有的<input>、<textarea>、<select>和<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传控件
:hidden 选取所有不可见元素
第三章 ：Jquery的DOM操作
一、概念
1.DOM:即文档对象模型(Document Object Model)。 简单来说，DOM给予了Web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。
2.在实现DOM操作之前，必须要选择操作的元素（使用JQuery强大的选择器）
二、DOM操作
1.节点操作
1)创建节点
语法：$(html)
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将此DOM对象包装成JQuery对象后返回。
- 创建元素节点
$(“<li></li>”)，$(“<p/>”) 注：要符合标准的XHTML格式，$(“<p>”) Ｘ
- 创建文本节点
$(“<li>你好</li>”)
$(“<li><em>好好</em><b>学习</b></li>”)
- 创建属性节点
$(“<li title=’hello’>你好</li>”)
注：创建文本节点和属性节点一样，直接在创建元素节点时一起创建。
2)插入节点
A.父子关系
append() ： 向每个匹配的元素追加内容
appendTo() ：把所有匹配的元素追加到指定的元素中
prepend() ： 向每个匹配的元素内部前置内容
prependTo() ： 把所有的元素前置到指定的元素中
B.兄弟关系
after() ： 在每个匹配的元素之后插入内容
insertAfter() ： 把所有匹配的元素插入指定的后面
before() ： 在每个匹配的元素之前插入内容
insertBefore() ： 把所有匹配的元素插入指定的后面
3)删除节点（三个）
remove():从DOM中删除某节点的元素，包括此节点的所有后代节点，返回删除节点的引用。
remove()还支持选择性删除，如$(“ul li”).remove(“li[title!=one]”) ;
detach():与remove() 相同，但删除节点的事件，附加数据等会保留下来。
empty():清空节点，包括此节点的所有后代节点
4)复制节点
clone():复制节点，可传boolen值，若为真，则该节点的事件也被复制。
5)替换节点
replaceWith() ：使用replaceWith（）方法替换指定的元素
replaceAll() ：也使用replaceWith（）方法替换指定的元素
注： 以上两方法功能一样，只是调用次序不一样（类似append和appendTo）。
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
6)包裹节点:将某个节点用其他标记包裹起来。
wrap()：将各个匹配的元素使用某个元素来包裹
wrapAll()：将所有匹配的元素用一个元素来包裹
wrapInner():子元素被包裹
2.属性操作
attr()/removeAttr()
prop()/removeProp() ： 从DOM中删除对应的属性
3.样式操作
设置样式：attr(“class”,”…”)/prop(“class”,”…”)
追加/移除样式：addClass()/removeClass()
切换样式：toggleClass()：切换样式
判断是否含有某个样式：hasClass():判断是否含有某个class -> 等同于 is()
设置样式：css(“属性”,”属性值”)，
同时设置多个样式：css({“属1”:”值1”,……,”属n”:”值n”})，类似的还有：
attr({“属1”:”值1”,……,”属n”:”值n”})
prop({“属1”:”值1”,……,”属n”:”值n”})
4.设置元素内容
html()
text()
注：获取内容，不需要参数，如果设置内容，则把内容设置到参数中。类似的方法还有：attr(),prop(),height(),width(),css(),val()
5.表单处理元素值
val()
6.遍历节点(API筛选)
1)children():获取匹配元素的子元素集合
2)next([selector]):获取匹配元素后面紧邻的同辈元素
对比：prev + next
3)nextAll([selector]): 获取匹配元素之后所有的同辈元素
对比: prev ~ siblings
4)prev([selector])：获取匹配元素前面紧邻的同辈元素
5)prevAll([selector]): 获取匹配元素之前所有的同辈元素
6)siblings([selector])：获取匹配元素前后氖的同辈元素
7)parent([selector])：获取匹配元素的上一级父元素
8)parents([selector])：获取匹配元素的父元素,包括所有的祖先元素
9)closest():从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
10)slice(start,[end])：获取匹配元素，下标索引从start到end的子集。
slice(n):获取匹配元素下标索引从0到n的子集
slice(start,end)：获取匹配元素下标索引从start到end的子集
slice(-n): 获取匹配元素下标索引从末尾开始选择到n的子集
11)is
12)map
13)has
14)end