jQuery学习笔记

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")。