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

包含额外的属性合并到第一个参数