jQuery笔记

jQuery是一个简洁快速灵活的JavaScript框架，能让你在网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

1 jq大多是基于 document 一个或多个元素进行操作的，选择元素就是基础。

1.1 通过tagName匹配。

$("p")就是选出所有的document中P标签的元素。

1.2 通过ID匹配。

$("#list1")就是选出所有的document中 id="list1"的元素。

1.3 通过.className匹配。

$(".a")就是选出所有的document中class="a"的元素

1.4 通过tag.className匹配。

$("p.b")就是选出所有的P标签的属性class="b"的元素

1.5 通过tag#id.className匹配。

$("ul#list1.b")就是选出所有的ul标签id="list1"的属性class="b"的元素

1.6 多类一起选择。

$('ul, ol, dl') 选出所有的ul、ol、dl标签的元素

2 匹配元素是集合时，需要通过过滤来匹配元素。

2.1基本过滤。

2.1.1

:first (:last)

$(“p:first”)P标签元素集的第1个

2.1.2

:even (:odd)

$(“p:odd”)P标签元素集的第奇数个（开始）

2.1.3

:eq(n) :gt(n) :lt(n)

$(“p:gt(1)”) P标签元素集第大于1的（开始）

2.1.4

:not  $("p:not(p:eq(2))")

P标签元素集中不是第2 个那些（开始）

2.1.5

:header

2.1.6

:animated

2.2 属性过滤

2.2.1

[attribute]

$(“p[name]”) P标签元素集中含name属性的元素

2.2.2

[attribute=value]

$(“p[id=para1]”) P标签元素集中id=” para1”的元素

2.2.3

[attribute!=value]

$(“p[id!=para1]”) P标签元素集中id非 para1的那些元素

2.2.4

[attribute^=value]

$(“p[id^=para]”) P标签元素集中id以 para开头的元素

2.2.5

[attribute$=value]

("p[id=a1]”) P标签元素集中id以a1结尾的元素

2.2.6

[attribute*=value]

$(“p[id*=ar]”) P标签元素集中i d包含ar的那些元素

2.2.7

[attrFilter1][attrFilterN]

$("p[id^=para][lang*=en-]")

P标签元素集中id不以para开头且属性lang包含en-的元素

2.3 内容过滤

2.3.1 :contains(text) $(“p:contains(ara)”) P标签元素集中text包含ara的那些元素

2.3.2 :empty $(‘td:empty’) td标签元素集中无text的那些td元素

2.3.3 :has(selector) $(“ul:has(li[class=a])”) ul标签集中包含li[class=a] 元素的那些ul元素

2.3.4 :parent $(“p:parent”)P标签元素集中那些非空的元素

2.4 可见性过滤

2.4.1 :visible $(“p: visible “)P标签元素集中那些可见的元素

2.4.2 :hidden $(“p: hidden “)P标签元素集中那些不可见的元素

2.5 子元素过滤

2.5.1 :nth-child(index)、:nth-child(even)、:nth-child(odd) $(“ul li:nth-child(odd)”)ul标签子元素li集中那些奇数元素（1开始）

2.5.2 :nth-child(equation) $(“ul li:nth-child(2n)”) ul标签子元素li集中那些数元素（1开始）

2.5.3 :first-child、:last-child $(“ul li:first-child”) ul标签子元素li集中第1个元素

2.5.4 :only-child $(“ul li:only-child”) ul标签子元素li集中仅有1个元素

2.6 Form过滤

2.6.1 :input $(“form :input”)Form中所有的输入域，包括：select、text、textarea、button等

2.6.2 :text $(“form :text”)Form中所有的text域

2.6.3 :password $(“form : password “)Form中所有的password域

2.6.4 :redio、:checkbox、:checked、:submit、:reset、:button、:file、:image

2.7 遍历过滤

2.7.1 size()、length 。("p").size()、(“p”).length返回P标签元素集中成员数

2.7.2 get() $(“li”).get() li标签所有的元素

2.7.3 get(index) $(“li”).get(0) li标签第1个元素

2.7.4 find(expression) $(“ul”).find(“li.b”) ul标签集中那些li[class=b] 元素的li元素

2.7.5 each(fn)

$("p").each(function() {
$(this).css("border", border+"px solid red");
$(this).css("margin-left", leftmargin);
border += 2;
leftmargin +=10;
})

P标签集 每元素添加函数

2.8组合过滤

2.8.1 $(‘form#login’) 匹配id=”login”的Form元素

2.8.2 $(‘#external_links a’) 匹配id=”external_links”元素集中那些a元素

2.8.3 ("lia[href=.pdf]”) 匹配li标签集中那些a标签中href属性以.pdf结尾的li元素

2.8.4 $(“li”).not(“[ul]”) 匹配所有的li元素但去除了没有ul子元素的li元素

2.8.5 $(‘input:not(.required)’) 匹配所有不含 required 类的输入元素

2.8.6 $(“input:checkbox/..”) 匹配所有输入复选框的父元素

3 对页面内容的操作

3.1 html() 获得页面元素的内容（包括标签）$(“#list1”).html()

3.2 text() 获得页面元素的文字内容（不包含标签）$(“#list1”).text()

3.3 html(newcontent) 设置元素的内容$(“#para2”).html(“
This is a new paragraph
“);

3.4 text(newtext) 置元素的文字内容 $(“p:last”).text(“this is the last paragraph”);

3.5 attr(name) 获得第1个匹配元素的属性值，若该属性不存在返回undefined。$(“a”).attr(“href”)

3.6 removeAttr(name) 去掉所有匹配元素的属性。$(“a”).removeAttr(“href”);

3.7 attr(key, value) 对所有匹配元素的添加一个属性。$(“a”).attr(“target”, “_blank”);

3.8 attr(properties) 对所有匹配元素的添加一组属性。$(“img”).attr({ src: “images/Spring.jpg”, alt: “spring” });

3.9 attr(key, fn) 对所有匹配元素的key属性用一个函数取代它的值。

3.10 css(name) 获得第1个匹配元素的CSS的name属性值。

3.11 css (key, value) 对所有匹配元素的添加CSS的一个属性。

3.12 css (properties) 对所有匹配元素的添加CSS的一组属性。

3.13 addClass(class) 所有匹配元素添加class。

3.14 hasClass(class) 如果所有匹配元素中至少有1个有class，则返回true。

3.15 removeClass(class) 所有匹配元素去掉class。

3.16 toggleClass(class) 所有匹配元素如果存在（不存在）就删除（添加）class。

3.17 append(content) 对每匹配元素后添加内容。$(“p”).append(” with some content appended”);

3.18 prepend(content) 对每匹配元素原内容前添加内容。$(“p”).prepend(“Hello! “);

3.19 appendTo(selector) 将所有匹配元素移到selector选定元素后。$(“p:last”).appendTo(“p:first”);

3.20 prependTo(selector) 将所有匹配元素移到selector选定元素前。$(“p:last”).prependTo(“p:first”);

3.21 after(content) 对每匹配元素后添加content内容元素。$(“p”).after(” element appended”);

3.22 before(content) 对每匹配元素前添加content内容元素。$(“p”).before(“Hello “);

3.23 wrap(html) 使用html包裹每匹配元素。

$("p").wrap("<div style='border:3px solid red'/>");

3.24 wrapAll(html) 使用html包裹所有匹配元素。

$("p").wrapAll("<div style='border:3px solid red'/>");

3.25 empty() 去掉所有匹配元素的子节点。

$("ul").empty();

3.26 remove() 去掉所有匹配元素。

$("ul"). remove()

4 事件处理（无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件）

4.1 事件的绑定(selector).bind(event,data,handler)、解绑(selector).unbind(event, handler)。

Event可以取的值为：blur, focus, load, resize, scroll, unload, beforeunload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mourseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。

$(“#evtTarget”).bind(“mouseover mouseleave”, highlight); data可以没有。

4.2 $(selector).click(fn) 定义click事件处理函数。

click可以用blur, change, dbclick, error, focus, keydown, keypress, keyup, load, mousedown, mouseup, mousemove, mouseover, mouseout, mourseenter, mouseleave, resize, scroll, unload代替定义其它事件处理函数。

$("div").mousemove(function(evt) { $(this).html("pageX: " + evt.pageX + ", pageY: " + evt.pageY ); });

4.3 $(selector).toggle(fn1,fn2,fn3…) 当click第1次执行fn1，第2次执行fn2，第3次执行fn3等。

$("#evtTarget").toggle(fnClick1, fnClick2);

第1次执行fnClick1，第2次执行fnClick2，第3次执行fnClick1。

4.4 $(selector).hover(fnOver, fnOut) 当鼠标进入时fnOver处理，当鼠标离开时fnOut处理。

$("#theList tr").hover(function() {
$(this).toggleClass("highlight");
},function() {
$(this).toggleClass("highlight");
});

4.5 事件处理函数的参数：type 事件类型、target 发生事件的元素、data 函数绑定的数据、pageX,pageY 发生事件时鼠标坐标位置、result 最后事件处理的返回值、timestamp 事件发生时间。

$("div").click(function(evt) {
$(this).html("pageX: " + evt.pageX + ", pageY: " + evt.pageY + ", type: " + evt.type + ", target: " +evt.target);
});

4.6 preventDefault() 防止浏览器执行缺省动作

4.7 isDefaultprevented() 返回是否调用preventDefault()

4.8 stopPropagation() 防止事件传到父元素

4.9 isPropagationStopped()返回是否调用stopPropagation()。

4.10 $(selector).one(type, data, handler) 类似.bind，但只执行一次事件处理

4.11 $(selector).trigger(event, data) 匹配的每个元素定义触发浏览器的相应动作

4.12 $(selector).triggerHandler (event, data) 触发匹配的第1个元素绑定的所有event处理函数，不触发浏览器的相应动作。

5 视觉效果操作

5.1 hide()、show()、toggle()是隐藏、显示、转换显示函数。

hide(speed, callback)、show(speed, callback)、toggle(speed, callback)设定了变化速度和回调函数，回调函数可以不设，

$(“#theDiv”).toggle(“slow”);。toggle(switch)当switch为true时显示匹配元素，为false时隐藏匹配元素。toggle ()方法包括了hide()和show()方法。

5.2 fadeIn(speed, callback)、fadeOut(speed, callback)、fadeTo(speed, opacity, callback)是变透明度函数。

fadeIn变到完全不透明（显示）、fadeOut fadeIn变到完全透明（隐藏）、fadeTo变到opacity指定的透明度。$(“#theDiv”).fadeTo(3000, 0.3);

5.3 slideDown(speed, callback)、slideUp(speed, callback)、slideToggle(speed, callback)是滑动函数。

slideUp滑动到隐藏、slideDown滑动到显示。

$(“#theDiv”).slideDown(“normal”);。slideToggle()方法包括了slideDown()和slideUp()方法。

5.4 animate(params, options)、animate(params, duration, easing, callback) 、stop()是动画函数。

params：动画属性参数，options：动画选项集，duration：动画毫秒数，easing：动画类型swing(连续)和linear(线性)。

$("#theDiv").animate({ width: "500px" }, "slow");
$("#theDiv").animate({ fontSize: "24pt" }, 1000);
$("#theDiv").animate({ left: "500" }, 1000, "swing");

5.5 setInterval(fn, duration)按duration(毫秒数)周期调用fn函数。setInterval(“rotateImages()”, 2000);

6 用户界面库提供一组优化用户界面的函数（http://jqueryui.com/docs/Getting_Started）有例子有代码

6.1 互动功能：Draggable、Droppable、Resizable、Selectable、Sortable

6.2 部件功能：Acordion、Datepicker、Progressbar、Dialog、Slider、Tabs

6.3 效果功能：Add Class、Remove Class、Toggle Class、Hide、Show、Toggle、Color Animation

7 函数链$(selector).fn1().fn2().fn3(); 可以对一个jquery对象连续调用各种不同的方法。

$(‘

‘).html(‘Hey World!’).css(‘background’, ‘yellow’).appendTo(“body”);

8 Jquery的扩展函数。

$.extend({min: function(a, b){return a < b?a:b; },max: function(a, b){return a > b?a:b; } });

//为jquery扩展了min,max两个方法。使用扩展的方法（通过“.方法名”调用）如：.max(10,20)

9 注意

9.1 调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。

由于jquery对象本身是一个集合，所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

$("#theDiv")

、

$("#theDiv").eq(0)

是jquery对象，而

$("#theDiv")[0]

、

$("#theDiv")get(0)

是dom对象。

dom对象可以使用dom中的方法，但不能再使用Jquery的方法。

9.2 为了避免变量方法定义冲突，使用jquery中的jQuery.noConflict();方法即可把变量的控制权让渡给第一个实现它的那个库或之前自定义的方法。

之后应用Jquery的时候只要将所有的换成jQuery即可，如原来引用对象方法(“#msg”)改为jQuery(“#msg”)。