jQuery学习笔记.doc

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 :header2.1.6 :animated2.2 属性过滤2.2.1 attribute $(pname) P标签元素集中含name属性的元素2.2.2 attribute=value $(pid=para1) P标签元素集中id= para1的元素2.2.3 attribute!=value $(pid!=para1) P标签元素集中id非 para1的那些元素2.2.4 attribute=value $(pid=para) P标签元素集中id以 para开头的元素2.2.5 attribute$=value $(pid$=a1) P标签元素集中id以a1结尾的元素2.2.6 attribute*=value $(pid*=ar) P标签元素集中i d包含ar的那些元素2.2.7 attrFilter1attrFilterN $(pid=paralang*=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(liclass=a) ul标签集中包含liclass=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、:image2.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标签集中那些liclass=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 ahref$=.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();3.24 wrapAll(html) 使用html包裹所有匹配元素。$(p).wrapAll();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 用户界面库提供一组优化用户界面的函数（/docs/Getting_Started）有例子有代码6.1 互动功能：Draggable、Droppable、Resizable、Selectable、Sortabl