jQuery 学习笔记_01

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

1 jQuery大多是基于 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 $("li a[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("<p>This is a new paragraph</p>");
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对象连续调用各种不同的方法。$('<p></p>').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")。