jQuery详细小结
jQuery是继prototype原型之后又一个javascript库,他凭借简洁的代码和完善的浏览器兼容性,再加上强大的DOM操作,完善的事件处理机制,强大的ajax操作，极大的简化了javascript开发人员的工作
jquery对象和DOM对象
Jquery对象可以理解成封装好javascript对象之后的对象
DOM对象----javascript操作的对象
使用：
1，在jquery中$就是jquery, $(“#content”) 就是jquery(“#content”)
Jquery的$(document).ready（）和window.onload还是有区别：
（1）window.onload() 需要等到整个页面加载完毕（包括需要的图片等文件都加载完毕）才执行
（2）$(document).ready（）只需要解析器先将文件的DOM结构绘制完毕就执行，不等待其他文件是否加载完毕
（3）Window.onload()不可以绑定多个onload()
但是$(document).ready（）可以
通过声明变量的时候区分开是DOM对象还是jquery对象
var $p = jquery对象
Var p = DOM对象
转化：
(1)jQuery对象转化为DOM对象
既然他是封装的javascript的对象，他肯定是一个数组，保存的是对象的集合
通过数组下标的形式转化
[下标]
Get(索引)
（2）DOM对象转化为jquery对象
$() 转化
jQuery选择器
1、基本选择器：
（1）根据id匹配元素 $(“#span”)
（2）根据给定的类名匹配元素 $(“.span”)
（3）根据给定的元素名匹配元素 $(“div”)
（4）*匹配所有的元素
（5）集合元素,将每个选择器匹配到的元素合并后一起返回 $(“p,span,div”)
1、层次选择器
（1） 后代元素选择器 $(“div ul li”)
（2） 子元素选择器 $(“#div2>span”)
（3） 相邻元素选择器 $(“#div1 ul +div”)
（4） 兄弟元素选择器 $(“span~.div”)
2、过滤选择器
(1) 基本过滤选择器
1,所有div元素中，第一个div //$(“div:first”)
2,所有div元素中,最后一个div //$(“div:last”)
3,获取索引是偶数的所有元素,索引从0开始 //$(“div:even”)
4,获取索引是奇数的所有元素，索引从0开始 //$(“div:odd”)
5,获取索引等于index的所有元素 //$(“div:eq(0)”)
6,索引大于小于 gt() lt() //$(“div:gt(1)”) $(“div:lt(1)”)
7,获取网页中所有的h标签内容 //$(“:header”)
8,网页之行动画 //$(“:anmiated”)
(2) 内容过滤选择器
1,选取含有文本内容为text的元素 //$(“span:contains(‘标签’)”)
2,选取含有某元素的元素 //$(“div:has(b)”)
(3) 可见性过滤选择器
1,选取所有可见的元素 //$(“div:visible”)
2,选取所有不可见的元素 //$(“div:hidden”).show(1000)
(4) 属性过滤选择器
1,选取拥有此属性的选择器 //$(“div[class]”)
2,选取属性值为value的元素 //$(“div[class=hide]”)
(5) 子元素过滤选择器
1,选取父元素下，索引值是偶数的元素(索引值从1开始) //$(“span.child:nth-child(even)”)
2,选取父元素下,索引值是奇数的元素(索引值从1开始) //$(“span.child:nth-child(odd)”)
3,匹配每个父元素下,索引值为index的元素 //$(“span.child:nth-child(1)”)
4,匹配每个父元素的第一个子元素 //$(“span.child:firsh-child”)
5,匹配每个父元素的最后一个子元素 //$(“span.child:last-child”)
(6) 表单对象过滤选择器
1,选取所有被选中的元素(单选框,复选框) //$(“input:checked”)
2,选取所有被选中的下拉列表选项 //$(“select option:selected”)
1、表单选择器
(1)选取所有的input,textarea,select,button
(2)选取所有的单行文本框 text
(3)选取所有的密码框 password
(4)选取所有的单选框
(5)选择所有的复选框
(6)选择所有的提交按钮
(7)选择所有的文件上传域
Jquery DOM操作
本节主要知识点
1、jquery节点的增删改查
2、属性操作
3、样式的操作
一、增删改查：
查找节点：
（1）查找元素节点 //$(“p”).text();
（2）查找属性节点 //attr()第一个参数，是属性的值，第二个参数，给属性节点赋值
// $(“p”).attr(“title”)
//$(“p”).attr(“name”,”fruit”)
创建节点：
（1） 创建元素节点 //$li = $(“<li></li>”); $(“ul”).append($li);
（2） 创建属性节点 //创建元素节点的时候写上属性
//$li = $(“<li name=’apple’></li>”); $(“ul”).append($li);
（3）创建文本节点////$li = $(“<li name=’melon’>西瓜</li>”); $(“ul”).append($li);
插入节点：
(1)append() 向匹配的元素内部追加内容
(2)appendTo() 将匹配的元素追加到指定的元素中
删除节点：
(1)根据参数删除指定的元素
remove() //$("ul li").remove("li[name=melon]");
(2)清空节点
empty() //$("ul li[name=orange]").empty();
复制和替换节点
1,复制节点
clone() 参数
//$("p").click(function(){
});
2,替换节点
replaceWith() //$("p").replaceWith("<span>这是一个span元素</span>");
replaceAll()
//$("p").click(function(){
$("<span>这是一个span元素</span>").replaceAll("p");
});
包裹节点：
wrap() 将匹配的元素单独包裹
//$("p").click(function(){
$("ul li").wrap("<b></b>");
});
wrapAll() 将所有匹配的元素用一个元素来包裹
//$("p").click(function(){
$("ul li").wrapAll("<b></b>");
});
二、jquery属性操作
1,attr() 获取和设置属性
var $p = $("p").attr("title");
$("p").attr({"name":"fruit","id":"fruit1"});
2,removeAttr() 删除属性 //$("p").removeAttr("title");
三、jquery样式操作
1,attr()获取样式和设置样式
//$("p").click(function(){
$(this).attr("class","high");
});
2,addClass() 追加样式
//$("p").click(function(){
$(this).addClass("high");
});
3,removeClass() 移除样式
//$("p").removeClass("high");
4,toggleClass() 切换样式
//toggleClass() 如果你有这个class属性我就删除，如果没有就增加
$("p").toggleClass("hide");
设置和获取html，文本和值
1,html() 读取某个元素中html内容
//html() 获取元素的html内容相当于javascript的innerHTML(只适用于HTML,在XML中不起作用)
var $p = $("p").html();
//设置html()的内容
$("p").html("你最不喜欢的水果")
alert($p);
2,text() 某元素中的文本内容
//text() 获取元素的文本内容相当于javascript的innerText(在HTML和XML中都起作用)
var $p = $("p").text();
alert($p);
3,val() 获取某元素的值
//val() 获取表单元素的值 相当于javascript的 value
var $val = $("input").val();
$("input").val("xxx");
alert($val);
遍历节点：
1,children() 取得匹配元素的子元素的集合
//var $body = $("body").children();
alert($body.length);
2,next() 取得匹配元素后面紧邻的同辈元素
//var $p = $("p").next();
alert($p.html());
3,prev() 取得匹配元素前面紧邻的同辈元素
//var $pre = $("ul").prev();
alert($pre.html());
4,siblings() 取得匹配元素前后所有的同辈元素
//var $siblings = $("ul").siblings();
alert($siblings.length);
Jquery中的事件
jQuery中的事件和javascript事件类型一样，只是jQuery的事件缺少了on
1，绑定事件：
bind() 绑定事件：参数1，绑定的事件类型；参数2，触发该事件后执行的函数
2，简写绑定事件：
3，合成事件
jQuery有两个合成事件：hover()和toggle()方法
（1）hover(enter,leave)方法语法结构：当光标移动到元素上时，会触发第一个函数；光标移出时触发第二个函数
（2）Toggle()方法的语法结构
Toggle()方法用于模拟鼠标连续单击事件，第1次单击元素，触发第一个函数，再次单击同一个元素，触发第二个函数，如果有更多函数，依次触发
事件对象的属性
Event.type()
event.pageX() 光标相对于页面的X坐标和Y坐标
event.pageY()
Event.which()
在鼠标单击事件中获得鼠标的左中右键
在键盘事件中获得键盘的按键
事件模拟操作
Trigger() 触发器，不仅可以触发浏览器有的事件名称，还可以触发自定义的事件；传递数据
jQuery中的动画
1，show() 和 hide()方法
用jQuery做动画要求在标准模式下，否则可能引起动画抖动
标准模式就是在文档的头部有DTD定义部分
Show() 参数：
速度参数：slow（600毫秒内显示出来） normal（400毫秒内显示） fast（200毫秒内） 具体时间
2，fadeIn() 和 fadeOut()方法
只改变元素的不透明度
fadeIn()淡入 慢慢显示出来
fadeOut()淡出 慢慢消失
3,slideUp()方法和slideDown()方法
只会改变元素的高度：
假如display:none slideUp() 自下往上缩短隐藏 slideDown()自上往下延伸显示
4，自定义动画：animate
如果上面3种仍无法满足我们的需要，就需要自定义动画
语法结构：
Animate(params,speed,callback)
动画需要position：relative
停止动画和判断是否处于动画状态
Stop()有两个参数，1，true表示把当前元素尚未执行完的动画队列清空2，让让正在执行动画到达结束时的状态