JQuery
JQuery
1、JQuery特点
(1)轻量级 (2)链式语法 (3)简单 (4)写的更少，做的更多
2、本地调用：
3、远程调用(联网的情况下可以使用百度或者谷歌的JQuery CDN)：
4、window.onload和$(document).ready()区别
window.onload
$(document).ready()
执行时机
必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码
只需要等待网页中的DOM结构 加载完毕，就能执行包裹的代码
执行次数
只能执行一次，如果第二次，那么 第一次的执行会被覆盖
可以执行多次，第N次都不会被上 一次覆盖
5、入口函数
$(document).ready(function(){})或者$(function(){})
6、jQuery对象转化为DOM对象
<1>jquery对象[下标] eg：$(“div”)[0]
<2>jquery对象.get(下标) eg：$(“div”).get(0)
7、DOM对象转化为JQuery对象$(dom对象)
单条属性设置：
jquery对象.css('属性名','属性值');
多条属性设置：
jquery对象.css({"属性名1":"属性值1","属性名2":"属性值2",....})
获取：
jquery.css("属性名");
8、JQuery选择器
(1)基本选择器
#id$(“#hel”)选择id=hel的元素
.class$(“#hel”)选择id=hel的元素
Element$(“div”)选择所有的div元素
*$(“*”)选择所有元素
E1,E2,E3$(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素
(2)层次选择器
$(“E1 E2”)$(“div span”)选择div下所有span
$(“E1>E2”)$(“div > span”)选择div下的span元素，不包含span下的span元素
$(“E1+E2” )$(“.one + div”)选择class=one的下一个div元素
$(“E1 + E2”)可以用$(E1).next(E2)代替
$(“E1~ E2”)$(“#one ~ div”)选择id为one后的所有div元素
$(“E1 ~ E2”)可以用$(E1).nextAll(E2)代替
(3)过滤选择器
<1>基本过滤选择器
:first$(“div:first”)选择第1个div元素
:last$(“div:last”)选择最后1个div元素
:not(E1)$(“input:not(.my)”)选择class不是.my的所有input元素
:even$(“tr:even”)选择表格中所有偶数的行
:odd$(“tr:odd”)选择表格中所有奇数的行
:eq(index)$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)$(“tr:gt(1)”)选择表格行索引大于1的行
:lt(index)$(“tr:lt(1)”)选择表格行索引小于1的行
:header$(“:header”)选择网页中所有的h标题
:animated$(“div:animated”)选择正在执行动画的div元素
<2>内容过滤选择器
：contains(text)$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty$(“div:contains(‘我’)”)选择内容里包含我的所有div
:has(E1)$(“div:has(p)”)选择含有p元素的所有div元素
:parent$(“div:parent”)选择拥有子元素（包含文本）的所有div元素
<3>可见性过滤选择器
:hidden$(“:hidden”)选择所有不可见元素，包括：,和等，如果只选择input元素，则可以使用 $(“input:hidden”)
:visible$(“div:visible”)选取所有可见的div元素
<4>属性过滤选择器
$(“div[id]”)选择拥有id属性的div元素
$(“div[id=test]”)选择id属性值为test的div元素
$(“div[id!=test]”)选择id属性值不为test的div元素,没有id属性的div也会被选择
$(“div[id^=test]”)选择id属性值以test开始的所有div元素
$(“div[id$=test]”)选择id属性值以test结束的所有div元素
$(“div[id*=test]”)选择id属性值中含有test的所有div元素
$(“div[id][title$=test]”)选择拥有id属性,并且title属性以test结束的所有div元素
<5>子元素过滤选择器
:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始.
:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如:
$(“ul li:first-child”)选择每个ul下的第一个li
$(“ul li:last-child”)选择每个ul下的最后一个li
$(“ul li:only-child”)在
中选取是惟一子元素的li
表单对象属性过滤选择器
:enabled$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素
:disabled$(“#form1 :disabled”)选取id为form1的表单内所有不可用元素
:checked$(“input:checked”)选择所有被选中的
:selected$(“select :selected”)选取所有被选中的选项元素
(4)表单选择器
:input匹配所有input textarea selectbutton元素,$(“:input”)
:text匹配所有单行文本框,$(“:text”)
:password选择所有密码框,$(“:password”)
:radio选择所有单选框,$(“:radio”)
:checkbox选择所有复选框,$(“:checkbox”)
:submit 匹配所有提交按钮，$(“:submit”)
:image 匹配所有图像按钮，$(“:image”)
:reset 匹配所有重置按钮，$(“:reset”)
:button 匹配所有按钮，$(“:button”)
:file 匹配所有文件域，$(“:file”)
:hidden 匹配所有不可见元素，$(“:hidden”)
(5)jQuery中的方法
<1>
Show()显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒
Hide()隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒
css(name,value)给匹配的元素设置css样式
Text(string)获取或设置匹配元素的文本内容,不包含html标签
Filter(expr)筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合
addClass(类名)为匹配的元素增加一个 类样式
removeClass(class)为匹配的元素移除一个类样式
html()获取或设置匹配元素的内容，包含html标签
siblings()$(“.abc”).siblings()匹配得到class=abc的其它兄弟元素
<2>设置单条样式
.css(“属性名”，”属性值”)
<3>设置多条样式
.css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})
获取样式值
.css(“属性名”)
<4>增加类(可增加/删除多个类)
.addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开
.removeClass(“”)
.toggleClass(“”)
.toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的 布尔值
<5>操作元素中的内容
设置：
.html(“str”) 设置元素的里面的内容 可用带html标签相当于js中的innerHTML
.text(“str”) 设置元素的里面的内容 可用不带html标签相当于js中的innerText
.val(“str”)
设置表单的值相当于js中的value
获取
.html() .text() .val()
<6>动画操作
1.
Show(参数1，参数2)/hide(参数1，参数2)
参数1(可选)：速度，可为fast，slow，或毫秒值。
参数2(可选)：回调函数，动画执行完毕后执行
Toggle（参数1，参数2）：
是show和hide的互斥方法，能模拟两者的功能。
2.
slideUp(参数1，参数2)/slideDown(参数1，参数2)
互斥方法：slideToggle(参数1，参数2)
3.
fadeIn(参数1，参数2)/fadeOut(参数1，参数2)
fadeTo(速度，透明度，回调函数)
互斥方法：fadeToggle(参数1，参数2)
9、jquery文档处理
新创建一个元素：var $newD = $(“
”);
(1)内部插入
<1>append()
父jquery对象.append(内容) 把内容追加到父jquery对象里 (里面最后一个元素的位置)
$(内容).append
$(内容).appendTo(父jquery对象)
<2>prepend() prependTo() 用法同上
(2)外部插入
在参照物后面插入新对象：
jQuery参照对象.after(内容)
$(内容).insertAfter(jQuery对象参照物)
在参照物前面插入新对象：
jQuery参照对象.bofore(内容)
$(内容).insertBefore(jQuery对象参照物)
(3)删除元素
$(“div”).remove()和$(“div”).detach()：全删除，包括所有文本和子节点
$(“div”).empty() 清空jQuery里内容(div还在)
(4)替换元素
$(“div”).replaceWith(“内容”) 用内容替换前面的JQuery对象，全部替换
(5)复制元素
JQuery对象.clone(参数)
参数：可选，默认为false，克隆时不克隆行为，为true时，会克隆事件。
(6)包装元素
<1>.wrap(包裹格式)
eg:$(“span”).wrap(“
”)
每一个span都有div包着
<2>.wrapAll()
eg:$(“span”).wrapAll(“
”)
所有span用一个div包着
<3>.wrapInner()
eg:$(“span”).wrapInner(“”)
用span包着b
<4>.unwrap()
删除直接父元素
(7)DOM属性操作
.attr()方法
获取属性 $(“span”).attr(“id”)
设置属性 $(“span”).attr(“属性名”，“属性值”)
(能获取或设置自定义的属性)
.prop() 用法同attr() 但只能获取本身都有的，不能获取或设置自定义的属性
注意：写全选框时，用prop获取属性，attr获取不到checked隐藏属性
.removeAttr() 移除属性
(8)CSS操作
offset():返回或设置匹配元素相对于文档的偏移（位置）
设置偏移量时，会自动的把元素声明为定位元素
获取向上/向左卷去的距离
jquery对象.scrollTop()/jquery对象.scrollLeft()
设置
直接在括号内加数值，eg：jquery对象.scrollTop(40)
获取相对于父元素的偏移量：
jquery对象.position().top/jquery对象.position().left
jquery对象.width()/.height()不受margin，padding，border的影响。
innerHeight()和innerWidth()不受margin，border的影响，受padding的影响。
outerHeight()和outerWidth()不受margin影响，受padding，bottom影响。
10、绑定事件
bind(type,function)
type:事件类型(例如：blur,focus,load,click)
function是用来绑定的处理函数。
(1)绑定单个事件
bind(“事件名”,function(){})
on(“事件名”,function(){})
(2)绑定多个事件
on(“事件名1”:“function(){}”,“事件名2”:“function(){}”)
(3)一次性绑定事件
one(“事件名”,function(){})
(4)解除绑定(事件移除)
unbind(“事件名”) 可解除多个事件
off(“事件名”)
11、事件合成
hover(enter,leave)
enter和leave都是function(),当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数。
12、事件冒泡
阻止事件冒泡：event.stopProPagation()
阻止默认行为：event.preventDefault()
13、模拟操作
trigger(type,[,data])
type:要触发的事件类型
[,data]:传递给事件处理函数的附加数据，以数组的形式传递。
也可以用triggerHandler()
区别：triggerHandler()不会触发默认行为,而只执行事件代码。
14、动画
animate(left:“”，speed,function)
(1)相对动画(使用+=或者-=)
$(“#pos”).animate({left:”+=20px”},fast);
(2)同时执行多个动画
$(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast);
(3)停止动画
stop(stopAll,goToEnd))
停止当前正在运行的动画。
stopAll:可选。默认false，规定是否停止当前的动画，后面的动画继续执行。
goToEnd:可选。默认false，是否允许完成当前的动画。
stop(true,true)方法：
判断元素是否处于动画状态
(4)延迟动画
jquery对象.delay(duration)
可以将队列中等待执行的下一个动画（回调函数里的动画）延迟指定时间后执行。它常用在队列的两个jQuery效果函数之间，从而在上一个动画效果执行后延迟下一个效果的执行时间。
注意：如果下一项不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。
15、遍历
(1)向上遍历
parent():返回被选元素的直接父元素。
parents():返回被选元素的所有祖先元素。一直到文档根元素()。
parents()也可以直接指定父元素。
eg：$(“span”).parents(“ul”) 返回所有元素的所有祖先，并且是
元素。
parentsUntil():返回介于两个给定元素之间的所有祖先元素。
eg:$("#big2").parentsUntil(“#big0”).css("background-color","green");
(2)向下遍历
children():返回被选元素的所有直接子元素。
find():返回被选元素的后代元素，直到最后一个后代。
(3)水平遍历
siblings()：返回被选元素的所有兄弟元素。
next():返回被选元素的下一个兄弟元素。
nextAll():返回被选元素的所有跟随的兄弟元素。
nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素。
prev(),preAll(),prevUntil()
(4)过滤
1.first() 方法返回被选元素的首个元素。
2.last() 方法返回被选元素的最后一个元素。
3.eq() 方法返回被选元素中带有指定索引号的元素。
4.filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
例如：
$(".parent div").filter(":odd").css("color","red");
5.not() 方法返回不匹配标准的所有元素。
not() 方法与 filter() 相反。
16、jQuery get与eq方法区别
eq返回的是一个jQuery对象，get返回的是一个html对象数组，所以eq可以继续调用jquery其他方法，get就不能调用jquery的其他方法。
17、each()方法
$(selector).each(function(index){})
可以遍历指定的元素集合，通过回调函数返回遍历元素的序列号。
18、jQuery开发插件
1.对象级别jQuery.fn.extend();
2.类级别 jQuery.extend();
$.fn.插件名字=function{ }
$.fn = jQuery.prototype = $.prototype
jQuery.extend(object)
为jQuery类添加类方法，可以理解为添加静态方法。如：
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2
jQuery.max(4,5); // 5
ObjectjQuery.extend( target, object1, [objectN])：
用一个或多个其他对象来扩展一个对象，返回被扩展的对象
target
类型: Object
一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
object1
类型: Object
一个对象，它包含额外的属性合并到第一个参数
objectN
类型: Object
包含额外的属性合并到第一个参数
jQuery.extend( [deep ], target, object1 [, objectN ] )
deep
类型: Boolean
如果是true，合并成为递归（又叫做深拷贝）。
target
类型: Object
对象扩展。这将接收新的属性。
object1
类型: Object
一个对象，它包含额外的属性合并到第一个参数.
objectN
类型: Object
包含额外的属性合并到第一个参数
