JQuery笔记整理

Jquery学习笔记Jquery 学习笔记--方法大集合【转载】2009-02-25 10:40本笔记翻译自：可视JQuery1.$()的用法1.1 $(html) ＝>根据ＨＴＭＬ参数动态建立一个jquery对像例子：$(”<div>hello</div>”).appendTo(”#body”),动态的创建一个div element插入到ID为body的element中去1.2 $(element) =>把节点对像转化成一个jquery对像例子:$(document.body).background( “black” );1.3 $(function) =>是$(doucment).ready()的快捷键．当页面加载结束后才会执行function．$(function)可以调用多次，相当于绑定多个$(function)eg: $(function(){//document is ready})1.4 $(expr,context)=>在一定的范围（context）内根据搜索条件(expr)搜索出jQuery对像eg: 1. $(’span>p’) :找出所有span中的p结点．2.$(’input:radio’,document.forms[0])搜索出第一个表单中的radio2. $.extend(prop)向jquery命名空间中添加方法,用此方法可以方便的对jquery进行扩展$.extend({min: function(a, b) { return a < b ? a : b; },max: function(a, b) { return a > b ? a : b; }});alert($.min(3,6)); //显示3alert($.max(3,6));//显示63. $.noConflict() 取消$代替jQuery.例如:jQuery.noConflict(); // Do something with jQueryjQuery(”div p”).hide();// Do something with another library’s $()$(”content”).style.display = ‘none’;4. each(function) 对所以符合条件的结点做为参数调用function例如:$(”img”).each(function(i){ this.src=”test” + i + “.jpg”; });结果：<img/><img/>==》<img src=”test0.jpg”/><img src=”test1.jpg”/>5．eq(pos)取得对像element数组的第Ｎ＋１个element例如：$(”p”).eq(1)<p>This is just a test.</p><p>So is this</p>=》<p>So is this</p>6. get() 取得所有的element数组例如: $(”img”).get();<img src="test1.jpg"/> <img src="test2.jpg"/> ===>[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]get(num)可以取得指定的element例如:$("img").get(1)<img src="test1.jpg"/> <img src="test2.jpg"/> ===>[<img src="test2.jpg"/> ]7．index(subject) : 查找相应节点的位置，从０开始计数.如果没找到返回-1eg: <div id=”foobar”><b></b><span id=”foo”></span></div>$("*").index( $('#foobar')[0] ) =>0$("*").index( $('#foo')[0] ) => 2$("*").index( $('#bar')[0] )=> -18. length 返回节点的个数eg:<img src="test1.jpg"/> <img src="test2.jpg"/>$("img").length => 2同样的方法还有size()$("img").size() => 2;9. lt(pos) 删除一个节点eg:<p>This is just a test.</p><p>So is this</p>$("p").lt(1) ==>[ <p>This is just a test.</p> ]10. addClass 给一个element添加class可以添加多个eg: <p>Hello</p>$("p").addClass("selected")=>[ <p class="selected">Hello</p> ]$("p").addClass("selected highlight")=>[ <p class="selected highlight">Hello</p> ]11. attr(name) 取得element的指定属性值eg: <img src="test.jpg"/>$("img").attr("src") =>test.jpg;attr(key,value) 设置属性attr(key,function) 调用相应的方法处理后的返回值用来设置属性attr(properties) 批量的设置element的属性值eg: <img/>$("img").attr({ src: "test.jpg", alt: "Test Image" });==> <img src="test.jpg" alt="Test Image"/>$("img").attr("src","test.jpg")=><img src="test.jpg"/>以下两个方法等价:$("img").attr("title", "${this.src}")$("img").attr("title", function() { return this.src })==><img src="test.jpg" title="test.jpg" />12 html 取得element的html代码eg: <div><input/></div>$("div").html() => <input/>;html(val) 设置element的html代码eg: <div><input/></div>$("div").html("<b>new stuff</b>") ==><div><b>new stuff</b></div>;13 removeAttr(name) 删除属性eg: <input disabled=”disabled”/>$(”input”).removeAttr(”disabled”)=><input/>14 removeClass(class) 删除样式，当class是空时删除所有的样式，如果class为指定样式则删指定样式eg: <p class=”highlight selected first”>Hello</p>$(”p”).removeClass(”selected highlight”)=>[ <p class=”first”>Hello</p> ]$(”p”).removeClass() =>[ <p>Hello</p> ]15. text() 取得element中的内容text(val) 设置element内容text与html差不多，只是text会把<,>用html标识符替换eg: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>$(”p”).text() =>T est Paragraph.Paraparagraph;<p>Test Paragraph.</p>$(”p”).text(”<b>Some</b> new text.”);==><p><b>Some</b> new text.</p>$(”p”).text(”<b>Some</b> new text.”, true) ==><p>Some new text.</p>16.toggleClass(class) 这是一个比较有用的方法，就是当element存在参数中的样式的时候取消，如果不存在就设置此样式eg:<p>Hello</p><p class="selected">Hello Again</p>$("p").toggleClass("selected")==>[ <p class="selected">Hello</p>, <p>Hello Again</p> ]17 val() 取得第一个element的vlaue值 val(val) 设置属性的值eg: <input type="text" value="some text"/>$("input").val() == >"some text";$("input").val("test")==><input type="text" value="test"/>;18 after(content)给相关的element从后面插入节点eg: <p>I would like to say: </p>$("p").after("<b>Hello</b>")==><p>I would like to say: </p><b>Hello</b><b>Hello</b><p>I would like to say: </p>$("p").after( $("b") )==><p>I would like to say: </p><b>Hello</b>;21 before(content)与after相反是插入到前面eg: <p>I would like to say: </p>$("p").after("<b>Hello</b>")==>><b>Hello</b><p>I would like to say: </p19 append(content)与上面不同的是append是添加把content做为子elementeg: <p>I would like to say: </p>$("p").append("<b>Hello</b>")＝＞<p>I would like to say: <b>Hello</b></p>;eg: <p>I would like to say: </p><b>Hello</b>$("p").append( $("b") )==>;<p>I would like to say: <b>Hello</b></p>20 appendto(content)与append刚好相反<p>I would like to say: </p><div id="foo"></div>$("p").appendTo("#foo")==><div id="foo"><p>I would like to say: </p></div>;21 prepend(content) 添加到element里面的前部．与append 的方位不一样<p>I would like to say: </p>$("p").prepend("<b>Hello</b>")==><p><b>Hello</b>I would like to say: </p>;22 prependTo(content) 与prepend的添加对像相反．<p>I would like to say: </p><div id="foo"><b>Hello</b></div>$("p").prependTo("#foo") ==><div id="foo"><p>I would like to say: </p><b>Hello</b></div>;23 clone(deep) 克隆一个新的element．参数deep为flase里不包括子element<b>Hello</b><p>, how are you?</p>$("b").clone().prependTo("p")==><b>Hello</b><p><b>H ello</b>, how are you?</p>24.empty() 删除所有的内部节点<p>Hello, <span>Person</span> <a href="#">and person</a></p>$("p").empty()==>[ <p></p> ]25. insertAfter(content) 与after差不多．$(a).after(b) === $(b).insertAfter(a)26. insertBefore(content) 与 before差不多$(a).before(b) === $(b).insertBefore(a)27. remove(expt) 删除条件是expt的相应的element,当expt为空时．全部删除<p class="hello">Hello</p> how are <p>you?</p>$("p").remove(".hello")==>how are <p>you?</p>;28. wrap(html) 把节点插入到html生成的节点里面．要注意的是html节点中不能含有内容只能是节点的结构．如果想加的话只能在嵌入后再插入内容<p>Test Paragraph.</p>$("p").wrap("<div class='wrap'></div>")==><div class='wrap'><p>Test Paragraph.</p></div>注html也可以直接用一个element代替29 add(params) 在$所取到的节点数组中添加新的节点．参数可以是expr, html,elementeg: 1.<p>Hello</p><span>Hello Again</span>$(”p”).add(”span”)==>[ <p>Hello</p>, <span>Hello Again</span> ]2.<p>Hello</p>$(”p”).add(”<span>Again</span>”)==>[ <p>Hello</p>, <span>Again</span> ]3. <p>Hello</p><p><span id=”a”>Hello Again</span></p>$(”p”).add( document.getElementById(”a”) )===>[ <p>Hello</p>, <span id=”a”>Hello Again</spa n> ]30 children(expr)取得子节点,当expr为空时，取得所有的子节点eg<div><span>Hello</span><p class=”selected”>Hello Again</p><p>And Again</p></div>$(”div”).children()==>[><span>Hello</span><pclass=”selected”>Hello Again</p><p>AndAgain</p> ]$(”div”).children(”.selected”)==>[ <p class="selected">Hello Again</p> ]31 contains(str)找出字节点中包含有str的节点．str起到过滤做用eg: <p>This is just a test.</p><p>So is this</p>$("p").contains("test")==>[ <p>This is just a test.</p> ]32. filter(expression)过滤找出符合expression的节点eg:<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>$("p").filter(".selected")==>><p class="selected">And Again</p>$("p").filter(".selected, :first")==>[ <p>Hello</p>, <p class="selected">And Again</p> ]filter(filter_func)通过函数来选择是否过滤，filter_func返回true 表示过滤<p><ol><li>Hello</li></ol></p><p>How are you?</p> $("p").filter(function(index) { return $("ol", this).length == 0; })==>[ <p>How are you?</p> ]33. find（expr）从子节点找出符合expr的．与filter的区别是filter过滤掉＄数组中的节点find过滤到的是子节点eg: <p><span>Hello</span>, how are you?</p>$("p").find("span")==>[ <span>Hello</span> ];34. is(expr) 判断是否符合条件，如果$数组的所有节点都不符合条件返回false，只要有一个符合条件就返回trueeg: <form><p><input type="checkbox" /></p></form>$("input[@type='checkbox']").parent().is("form")==>false$("input[@type='checkbox']").parent().is("p")==>true35 next(expr) 取得最近节点最近那个节点.expr为空时取得所有节点eg:1.<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>$("p").next()==>[ <p>Hello Again</p>, <div><span>And Again</span></div> ]2.<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>$("p").next(".selected")==>[ <p class="selected">Hello Again</p> ]36. not(el),not(expr),not(elems)与add相反，删除符合条件的节点．eg:1. <p>Hello</p><p id="selected">Hello Again</p>$("p").not( $("#selected")[0] )==>[ <p>Hello</p> ]$("p").not("#selected")==>[ <p>Hello</p> ]2.<div><p>Hello</p><p class="selected">Hello Again</p></div>$("p").not( $("div p.selected") )==>[ <p>Hello</p> ]37 parent(expr) 取得父节点eg:1.<html><body><div><p><span>Hello</span></p>< span>HelloAgain</span></div></body></html>$("span").parents()==>[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]2.<html><body><div><p><span>Hello</span></p><sp an>Hello Again</span></div></body></html>$("span").parents("p")==>[ <p><span>Hello</span></p> ]38 prev(expr) 与next相反,next取得是与节点相邻后面的．prev 取得相邻前面的eg: 1.<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p> $("p").prev(".selected")==>[ <div><span>Hello</span></ div> ]2.<p>Hello</p><div><span>HelloAgain</span></div><p>And Again</p>$("p").prev()==>[ <div><span>Hello Again</span></div> ]39 siblings(expr) 取得相邻两边的节点是．next,与prev的结合体jquery与dom相关的操作先讲到这里，下回接着讲CSS相关操作40 1/. CSS(name)读取样式属性值eg:<p style=”color:red;”>Test Paragraph.</p>$(”p”).css(”color”)==>”red”;2/css(properties)设置styleeg:<p>T est Paragraph.</p>$("p").css({ color: "red", background: "blue" })==><p style="color:red; background:blue;">Test Paragraph.</p>;3/css(key, value)设置单个样式属性,如果设置的值是数字的话,会被自动转化为像素单位eg : <p>Test Paragraph.</p>$("p").css("color","red")==><p style="color:red;">Test Paragraph.</p>;$("p").css("left",30)==><p style="left:30px;">Test Paragraph.</p>;41 1/height()取得当前匹配节点数组中的第一个节点的高的值eg: <p>This is just a test.</p>$("p").height() ==>300;2/ height(val) 设置所有匹配的节点的高,如果val的单位不是ex ,%,那么单位自动设为pxeg: <p>This is just a test.</p>$("p").height(20)==><p style="height:20px;">This is just a test.</p>;42 width() 设置宽度,width(val)设置高度.用法与height一样以上是基本的CSS的js用法,下面主要记录jQuery的一些功能函数43 $.browser 用于判断浏览器的分别为safari,opera, msie, mozilla.这些方法要等DOM ready后才能使用eg: if($.browser.safari) {$( function() { alert("this is safari!"); } ); }44. $.each(obj, fn) 这个方法与$().each()不一样,前者可以迭代任务数组与对像,后者只能迭代jQuery对象$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });45 $.extend(target, prop1, propN)继承多个对象.target被扩展的对象.prop1,第一个父对象,propN其它被继承的对象eg: 1. var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };jQuery.extend(settings, options);====>settings == { validate: true, limit: 5, name: "bar" }2.var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend({}, defaults, options);===>settings == { validate: true, limit: 5, name: "bar" }46 $.grep(array, fn, inv)用fn过滤array,当fn返回true时array 元素保留在数组中eg : $.grep( [0,1,2], function(i){ return i > 0; });==>[1, 2]47 $.map(array, fn)通过fn修改array中的值当函数返回值为null里,array元素将被删除,当返回是数组时,返回的数组将与原数组合并eg: 1.$.map( [0,1,2], function(i){ return i + 4; });==>[4, 5, 6]2.$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });==>[2, 3]3.$.map( [0,1,2], function(i){ return [ i, i + 1 ]; });==>[0, 1, 1, 2, 2, 3]48. $.merge(first, second)两个数组进行合并,删除重复的值$.merge( [0,1,2], [2,3,4] )==>[0,1,2,3,4]$.merge( [3,2,1], [4,3,2] )==>[3,2,1,4]49 $.trim(str)去除字符串两端的空格,一个十分熟悉常用的方法$.trim(" hello, how are you? ")==>"hello, how are you?";主要记录jQuery事件响应的处理50. bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法.eg:1. $(”p”).bind(”click”, function(){ alert( $(this).text() ); });2. function handler(event) { alert(event.data.foo); }$(”p”).bind(”click”, {foo: “bar”}, handler)==>alert(”bar”)51. blur() 触发blur方法,blur(fn)设置blur函数eg: <p>Hello</p>$(”p”).blur( function() { alert(”Hello”); } );==><p onblur=”alert(’Hello’);”>Hello</p>52. change(fn)设置onchange事件的方法eg:<p>Hello</p>$(”p”).change( function() { alert(”Hello”); } );==><p onchange=”alert(’Hello’);”>Hello</p>53 click()触发onclick事件, click(fn)设置onclick方法54. dblclick(fn)设置ondblclick方法55.error(fn)设置error方法56 focus()触发onfocus,focus(fn)设置focus方法eg:<p>Hello</p>$(”p”).focus( function() { alert(”Hello”); } );==><p onfocus=”alert(’Hello’);”>Hello</p>57 hover(over, out) 设置mouse移入以及mouse移出时所触发的事件.eg: $("p").hover(function(){$(this).addClass("over");},function(){$(this).addClass("out");});58 keydown(fn),keypress(fn),keyup(fn),按键盘相关的操作分别对应onkeydown,onkeypress,onkeyup.59mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),m ouseup(fn)这些是mouse相关的操作分别对应onmousedown,onmousemove,onmouseout,onmouseover,onmo useup.60 load 当element load事件发生时触发eg <p>Hello</p>$("p").load( function() { alert("Hello"); } );==><p onload="alert('Hello');">Hello</p>61.one(type, data, fn)与bind差不多,最大的区别是前者只运行一次后便不再响应.如果运行后不想继续运行默认的方法只要fn中返回值return false就可以了.eg: <p>Hello</p>$("p").one("click",function(){ alert( $(this).text() ); });==>alert("Hello")62.ready(fn)当dom 结构载入完毕的时候.用此方法时,请不要在onload方法里面写代码.不然就不会触发ready事件eg .1.$(document).ready(function(){ Your code here... });2.jQuery(function($) {// Your code using failsafe $ alias here...});63.resize 设置onresize方法.当大小改变时触发eg: <p>Hello</p>$("p").resize( function() { alert("Hello"); } );<p onresize="alert('Hello');">Hello</p>64 scroll(fn) 设置onscroll方法65.select()触发onselect方法.select(fn)设置select方法66. submit()提交表单,submit(fn)设置submit方法.eg: $("#myform").submit( function() {return $("input", this).val().length > 0; } );<form id="myform"><input /></form>67 toggle(even, odd),even当偶数单击时运行,odd当奇数单击时运行.用unbind(’click’)删除eg: $("p").toggle(function(){$(this).addClass("selected");},function(){$(this).removeClass("selected");});68 trigger(type)触发相应的type方法eg: <p click="alert('hello')">Hello</p>$("p").trigger("click")==>alert('hello')69 unbind(type, fn)与bind相反,1.unbind()删除所有的绑定.eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind()==>[ <p>Hello</p> ]2.unbind(type)删除指定的绑定eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click" )==>[ <p>Hello</p> ]3.unbind(type, fn)删除指定type的指定fneg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click", function() { alert("Hello"); } )==>[ <p>Hello</p> ]70 unload(fn)当页面unload的时候触发方法eg: <p>Hello</p>$("p").unload( function() { alert("Hello"); } );==><p onunload="alert('Hello');">Hello</p>主要关于如何用jQuery处理特效（70-76）71. animate(params, speed, easing, callback)动画特效.params:是动画的设置,用来表示动画的展现以及结束,speed:动画的速率可以是(”slow”, “normal”, or “fast”)也可以是毫秒数.eg: 1000easing:默认是’linear’,如想用其它参数,就要添加jQuery的特效插件.callback: 当动画完成时的调用的函数.eg:1. $(”p”).animate({ height: ‘toggle’, opacity: ‘toggle’ }, “slow”);2. $(”p”).animate({ left: 50, opacity: ’show’ }, 500);3. $(”p”).animate({ opacity: ’show’}, “slow”, “easein”);72. fadeIn(speed, callback),fadeOut(speed, callback),fadeTo(speed, opacity, callback)淡入,淡出效果,speed表示速度,可以用”slow,normal,fast”代替,也可以直接写毫秒数. callback表示淡入,淡出后的调用的函数.fadeTo表示淡入到某个透明度。

一、jQuery 教程jQuery 是一个JavaScript 库。

jQuery 极大地简化了JavaScript 编程。

jQuery 很容易学习。

每一章中用到的实例<html><head><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>亲自试一试代码：<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>如果您点击我，我会消失。

</p><p>点击我，我会消失。

</p><p>也要点击我哦。

</p></body></html>通过点击"TIY" 按钮来看看它是如何运行的。

锋利的jQuery学习笔记一、认识JQuery页面加载事件（可以写多个ready()）$(document).ready(function(){alert(“hello world”);})链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″);//选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式JQuery中获得一个对象的所有子元素内容$(“#myDiv”).html()JQuery中的变量与 DOM中的变量var $myVar = “”;var myVar = “”;DOM对象转换成 JQuery对象var obj = documnet.getElementById(“myDiv”);var $obj = $(obj);JQuery对象转换成 DOM对象var $obj = $(“#myDiv”);var obj = $obj.get(0); //或者var obj = $obj[0];释放JQuery对$符号的控制权JQuery.noConflict();二、JQuery选择器JQuery完善的处理机制ocument.getElementById(“test”).style.color = “red”; //如果test不存在，则页面出现异常$(“#test”).css(“color”,”red”); //哪怕页面没有名称为test的元素，也不会报错。

它是一个JQuery对象判断页面是否选择的对象if( $(“.class”).length &gt; 0 ){// todo something}基本选择器$(“#myDiv”)//根据给定的ID选择匹配的元素，返回：单个元素$(“.myClass”) //根据给定的样式名称选择匹配的元素，返回：集合元素$(“div”) //根据给定的元素名称选择匹配的元素，返回：集合元素$(“#myDiv,div.myClass,span”) //根据给定的规则选择匹配的元素，返回：集合元素$(“*”) //选择页面所有元素，返回：集合元素层次选择器$(“div span”) //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素$(“div&gt;span”) //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素$(“.myClass+div”) //选择样式名称为myClass的下一个DIV元素，返回：集合元素$(“.myClass+div”) //等价于$(“.myClass”).next(“div”);$(“.myClass~div”) //选择样式名称为myClass之后的所有DIV元素，返回：集合元素$(“.myClass~div”) //等价于$(“.myClass”).nextAll();$(“.myClass”).siblings(“div”)//选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素过滤选择器（index从0开始）$(“div:first”) //选择所有DIV元素下的第一个DIV元素，返回：单个元素$(“div:last”)//选择所有DIV元素下的最后一个DIV元素，返回：单个元素$(“div:not(.myClass)”) //选择所有样式不包括myClass的DIV元素，返回：集合元素$(“div:even”) //选择所有索引是偶数的DIV元素，返回：集合元素$(“div:odd”) //选择所有索引是奇数的DIV元素，返回：集合元素$(“div:eq(index)”) //选择所有索引等于index的DIV元素，返回：集合元素$(“div:gt(index)”) //选择所有索引大于index的DIV元素，返回：集合元素$(“div:lt(index)”) //选择所有索引小于index的DIV元素，返回：集合元素$(“:header”) //选择所有标题元素（h1,h2,h3），返回：集合元素$(“div:animated”) //选择所有正在执行去画的DIV元素，返回：集合元素子元素过滤选择器（index从1开始）$(“:nth-child(index/even/odd)”) //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素$(“:first-child”) //选择每个父元素下的第一个子元素，返回：集合元素$(“:last-child”) //选择每个父元素下的最后一个子元素，返回：集合元素$(“ul li:only-child”) //在UL元素中选择只有一个LI元素的子元素，返回：集合元素内容过滤选择器$(“:contains(text)”) //选择所有内容包含text的元素，返回：集合元素$(“div:empty”) //选择所有内容为空的DIV元素，返回：集合元素$(“div:has(span)”)//选择所有含有SPAN子元素的DIV元素，返回：集合元素$(“div:parent”) //选择所有含有子元素的DIV元素，返回：集合元素可见性选择器$(“:hidden”) //选择所有不可见的元素（type=”hidden”style=”display:none” style=”visibility:none”），返回：集合元素$(“:visible”) //选择所有可见的元素，返回：集合元素属性过滤选择器$(“[id]“) //选择所有含有id属性的元素，返回：集合元素$(“[class=myClass]”) //选择所有class属性值是myClass的元素，返回：集合元素$(“[class!=myClass]”) //选择所有class属性值不是myClass的元素，返回：集合元素$(“[alt^=begin]”) //选择所有alt属性值以begin开始的元素，返回：集合元素$(“[alt^=end]”) //选择所有alt属性值以end结束的元素，返回：集合元素$(“[alt*=some]”)//选择所有alt属性值含有some的元素，返回：集合元素$(“div[id][class=myClass]”) //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素表单对象属性选择器$(“#myForm:enabled”) //选择ID属性为myForm的表单的所有可用元素，返回：集合元素$(“#myForm:disabled”) //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素$(“#myForm:checked”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素$(“#myForm:selected”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素表单选择器$(“:input”) //选择所有&lt;input&gt; &lt;select&gt; &lt;button&gt; &lt;textarea&gt;元素，返回：集合元素$(“:text”) //选择所有单行文本框元素，返回：集合元素$(“:password”) //选择所有密码框元素，返回：集合元素$(“:radio”) //选择所有单选框元素，返回：集合元素$(“:checkbox”) //选择所有复选框元素，返回：集合元素$(“:submit”) //选择所有提交按钮元素，返回：集合元素$(“:image”) //选择所有图片按钮元素，返回：集合元素$(“:reset”) //选择所有重置按钮元素，返回：集合元素$(“:button”) //选择所有按钮元素，返回：集合元素$(“:file”) //选择所有上传域元素，返回：集合元素$(“:hidden”) //选择所有不可见域元素，返回：集合元素$(“:text”) //选择所有单选文本框元素，返回：集合元素三、JQuery中的DOM操作查找元素节点var str = $(“#myDiv”).text(); //&lt;div id=”myDiv”title=”hello”&gt;123&lt;/div&gt;alert(str); //结果：123查找属性节点var str = $(“#myDiv”).attr(“title”); //&lt;div id=”myDiv”title=”hello”&gt;123&lt;/div&gt;alert(str); //结果：hello创建元素节点var $li1 = $(“&lt;span&gt;&lt;/span&gt;”); //传入元素标记，自动包装并创建第一个li元素对象va r $li2 = $(“&lt;span&gt;&lt;/span&gt;”); //第二个,创建时需要遵循XHTML规则（闭合、小写）$(“#myDiv”).append($li1); //往id为myDiv的元素中添加一个元素$(“#myDiv”).append($li2); //结果：&lt;divid=”myDiv”&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt ;/div&gt;$(“#myDIv”).append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^创建文本节点var $li1 = $(“&lt;span&gt;first&lt;/span&gt;”);var $li2 = $(“&lt;span&gt;second&lt;/span&gt;”);$(“#myDIv”).append($li1).append($li2);//结果：&lt;divid=”myDiv”&gt;&lt;span&gt;first&lt;/span&gt;&lt;span&gt;sec ond&lt;/ span&gt;&lt;/div&gt;创建属性节点var $li1 = $(“&lt;span title=”111″&gt;first&lt;/span&gt;”);var $li2 = $(“&lt;span title=”222″&gt;second&lt;/span&gt;”); $(“#myDIv”).append($li1).append($li2);//结果：&lt;div id=”myDiv”&gt;&lt;spantitle=”111″&gt;first&lt;/span&gt;&lt;spantitle=”222″&gt;second&lt;/span&gt;&lt;/div&gt;插入节点$(“#myDiv”).append(“&lt;span&gt;&lt;/span&gt;”); //往id为myDiv 的元素插入span元素$(“&lt;span&gt;&lt;/span&gt;”).appendTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素$(“#myDiv”).prepend(“&lt;span&gt;&lt;/span&gt;”); //往id为myDiv 的元素内最前面插入span元素$(“&lt;span&gt;&lt;/span&gt;”).prependTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素内的最前面$(“#myDiv”).after(“&lt;span&gt;&lt;/span&gt;”); //往id为myDiv的元素后面插入span元素（同级，不是子元素）$(“&lt;span&gt;&lt;/span&gt;”).insertAfter(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）$(“#myDiv”).before(“&lt;span&gt;&lt;/span&gt;”); //往id为myDiv 的元素前面插入span元素（同级，不是子元素）$(“&lt;span&gt;&lt;/span&gt;”).insertBefore(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）删除节点$(“#myDiv”).remove();//将id为myDiv的元素移除清空节点$(“#myDiv”).remove(“span”); //将id为myDiv的元素内的所有span元素移除复制节点$(“#myDiv span”).click( function(){//点击id为myDiv的元素内的span 元素，触发click事件$(this).clone().appendTo(“#myDiv”); //将span元素克隆，然后再添加到id为myDiv的元素内$(this).clone(true).appendTo(“#myDiv”); //如果clone传入true参数，表示同时复制事件})替换节点$(“p”).replaceWith(“&lt;strong&gt;您好&lt;/strong&gt;”); //将所有p元素替换成后者 &lt;p&gt;您好&lt;/p&gt; –&gt; &lt;strong&gt;您好&lt;/strong&gt;$(“&lt;strong&gt;您好&lt;/strong&gt;”).replaceAll(“p”); //倒过来写，同上包裹节点$(“strong”).wrap(“&lt;b&gt;&lt;/b&gt;”); //用b元素把所有strong 元素单独包裹起来 &lt;b&gt;&lt;strong&gt;您好&lt;/strong&gt;&lt;/b&gt;&lt;b&gt;&lt;strong&gt;您好&lt;/strong&gt;&lt;/b&gt;$(“strong”).wrapAll(“&lt;b&gt;&lt;/b&gt;”); //用b元素把所有strong元素全部包裹起来 &lt;b&gt;&lt;strong&gt;您好&lt;/strong&gt;&lt;strong&gt;您好&lt;/strong&gt;&lt;/b&gt; $(“strong”).wrapInner(“&lt;b&gt;&lt;/b&gt;”); //把b元素包裹在strong元素内 &lt;strong&gt;&lt;b&gt;您好&lt;/b&gt;&lt;/strong&gt;属性操作var txt = $(“#myDiv”).arrt(“title”); //获取id为myDiv的元素的title 属性$(“#myDiv”).attr(“title”,”我是标题内容”); //设置id为myDiv的元素的title属性的值$(“#myDiv”).attr({“title”:”我是标题内容”, “alt”:”我还是标题”); //一次性设置多个属性的值$(“#myDiv”).removeArrt(“alt”); //移除id为myDiv的元素的title属性样式操作var txt = $(“#myDiv”).arrt(“class”); //获取id为myDiv的元素的样式$(“#myDiv”).attr(“class”,”myClass”); //设置id为myDiv的元素的样式$(“#myDiv”).addClass(“other”); //在id为myDiv的元素中追加样式$(“#myDiv”).removeClass(“other”); //在id为myDiv的元素中移除other 样式$(“#myDiv”).removeClass(“myClass other”); //在id为myDiv的元素中移除myClass和other多个样式$(“#myDiv”).removeClass(); //在id为myDiv的元素中移除所有样式$(“#myDiv”).toggleClass(“other”); //切换样式，在有other样式和没other样式之间切换$(“#myDiv”).hasClass(“other”); //判断是否有other样式设置和获取HTML、文本和值alert( $(“#myDiv”).html() ); //获取id为myDiv的元素的HTML代码（相当于innerHTML）$(“#myDiv”).html(“&lt;span&gt;hello&lt;/span&gt;”); //设置id为myDiv的元素的HTML代码alert( $(“#myDiv”).text() ); //获取id为myDiv的元素的HTML代码（相当于innerText）$(“#myDiv”).text(“hello”); //设置id为myDiv的元素的HTML代码alert( $(“#myInput”).val() ); //获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）$(“#myInput”).val(“hello”); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）遍历节点var $cList = $(“#myDiv”).children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）var $sNext = $(“#myDiv”).next(); //获取id为myDiv的元素的下一个同辈元素var $sPrev = $(“#myDiv”).prev(); //获取id为myDiv的元素的上一个同辈元素var $sSibl = $(“#myDiv”).siblings(); //获取id为myDiv的元素的所有同辈元素var $pClos = $(“#myDiv”).closest(“span”); //获取id为myDiv的元素本身开始，最接近的span元素（向上查找）CSS-DOM操作$(“#myDiv”).css(“color”); //获取id为myDiv的元素的color样式的值$(“#myDiv”).css(“color”, “blue”); //设置id为myDiv的元素的color 样式的值$(“#myDiv”).css({“color”:”blue”, “fontSize”:”12px”}); //设置id为myDiv的元素的color样式的值（多个）$(“#myDiv”).css(“opacity”, “0.5″); //设置id为myDiv的元素的透明度（兼容浏览器）$(“#myDiv”).css(“height”); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）$(“#myDiv”).height(); //同上（实际高度）$(“#myDiv”).css(“width”); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）$(“#myDiv”).width(); //同上（实际宽度）var offset = $(“#myDiv”).offset(); //获取id为myDiv的元素在当前窗口的相对偏移量alert( offset.top + “|” + offset.left );var offset = $(“#myDiv”).position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量alert( offset.top + “|” + off set.left );$(“#txtArea”).scrollTop();//获取id为txtArea的元素滚动条距离顶端的距离$(“#txtArea”).scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离$(“#txtArea”).scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离$(“#txtArea”).scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离四、JQuery中的事件和动画加载DOM$(window).load() 等价于 window.onload 事件$(document).ready() 相当于window.onload事件，但有些区别：(1)执行时机：window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行$(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕(2)多次使用：可以在同一个页面注册多个$(document).ready()事件(3)简写方式：可以缩写成 $(function(){ }) 或 $().ready()事件绑定当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用bind( type, [data, ] fn );type：指事件的类型:blur（失去焦点）、focus（获得焦点）load（加载完成）、unload（销毁完成）resize（调整元素大小）、scroll（滚动元素）click（单击元素事件）、dbclick（双击元素事件）mousedown（按下鼠标）、mouseup（松开鼠标）mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）mouseenter（鼠标进入）、mouseleave（鼠标离开）change（值改变）、select（下拉框索引改变）、submit（提交按钮）keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）error（异常）data：指事件传递的属性值，event.data 额外传递给对象事件的值fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素合并事件hover(enter,leave)：鼠标移入执行enter、移出事件执行leave$(“#myDiv”).hover( function(){$(this).css(“border”, “1px solid black”);0}, function(){$(this).css(“border”, “none”);});toggle(fn1,fn2,…fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复$(“#myDiv”).toggle( function(){$(this).css(“border”, “1px solid black”);0}, function(){$(this).css(“border”, “none”);});事件冒泡下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。

一、jQuery基础1.1 jQuery的特点1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。

2）jQuery利用选择器（借鉴了CSS选择器的语法）查找要操作的节点（DOM对象），然后将这些节点封装成一个jQuery对象（封装的目的有两个：①是为了兼容不同的浏览器。

②也为了简化代码）。

通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。

3）jQuery特点简单概括就是：选择器+ 调方法。

1.2 jQuery编程的步骤step1：引入jQuery框架（下载），min为去掉所有格式的压缩版<script language="javascript" src="js/jquery-1.4.1.min.js"></script>step2：使用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回）var $obj=$('#di');//ID选择器，查找的节点ID为d1step3：调用jQuery对象的方法或者属性$obj.css('font-size','60px');//调用jQuery的css()方法◆注意事项：jQuery是一个大的匿名函数，且内部有很多函数（类似Java中的内部类），它的大部分函数返回对象都是jQuery对象（它自己），所以可以继续“．”，例如：function f1(){var $obj=$('#d1');//为了强调返回的是jQuery对象，命名习惯用$开头来声明变量$obj.css('font-size','60px').css('font-style','italic'); } 1.3 jQuery对象与DOM对象如何相互转换1）dom对象如何转化为jQuery对象使用函数：$(dom对象)即可，例如：function f2(){var obj=document.getElementById('d1');var $obj=$(obj);//将dom节点封装成jQuery对象$obj.html('hello java'); } 2）jQuery对象如何转化为dom对象方式一：$obj.get(0); 方式二：$obj.get()[0];function f3(){var $obj=$('#d1'); //方式一：var obj=$obj.get(0);var obj=$obj.get()[0];//方式二obj.innerHTML='hello perl'; } 1.4如何同时使用prototype和jQuerystep1：先导入prototype.js，再导入jQuery.jsstep2：将jQuery的$函数换一个名字：var $a=jQuery.noConflict();//注意大小写◆注意事项：函数名就是一个变量，指向函数对象，例如：<script language="javascript" src="js/prototype-1.6.0.3.js"></script><script language="javascript" src="js/jquery-1.4.3.js"></script>function f1(){//无效var obj=$('d1'); }//无效是因为jQuery是后引入的，所以prototype被jQuery替换function f1(){//为了避免冲突，可以将jQuery的$函数换一个名字$avar $a=jQuery.noConflict(); var obj=$('d1');obj.innerHTML='hello prototype'; $a('#d1').html('hello jQuery'); } 1.5 EL表达式和jQuery函数的区别1）${}：EL表达式，在服务器端运行（JSTL标签库也在服务器端运行，EL和JSTL标签库本质是Java代码）。

第一章一、$(document).ready(function(){//do something});和window.onload的区别1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成后执行3.前者可以简化为$(function(){//do something});后者没有简写形式。

二、jQuery比较常使用的是链式操作，比如一个书目导航条：$(function(){$(“ul”).click(function(){$(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass(“current”).children(“li”).slideUp();})})对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。

三、jQuery对象和DOM对象的转换1.jQuery转化为DOM对象Var $variable = $(“tr”); //jQuery objectVar variable = $variable[0]; //DOM objectThe transpartent method.DomObject = jQueryObject[index] or = jQueryObject.get(index).2.DOM Object To jQuery ObjectVar variable = getElementsByTagName(“tr”); //DOM objectVar $variable = $(variable) // jQuery object;The transpartent method.jQueryObject = $(DomObject)四、jQuery开发工具1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE;3.Visual Studio 2008。

JQuery等价于$$(document).ready(function(){});简写==$(function(){});返回值都为[object Object]容错，jQ发生错误不报错1，jq选择器1>基本选择器$（“#idName”）------通过id找元素$(“.className” )------通过class找元素$(“tagName”)-------通过标签找元素$(“*”)---------匹配所有的元素$(“li *”)----li下的全部一般用于局部环境内$(“selector1,selector2”)---群组匹配元素$(“box.div”)-----限定必须是box元素的div2，层级选择器$(“a b”)-----匹配a的后代中所有b元素$(“a>b”)----匹配a中子代b元素（只找儿子，不找孙子）$(“a+b”)----匹配紧邻的一个兄弟b元素（紧邻，一个）$(“a~b”)----匹配a之后的所有兄弟b元素（之后所有）3，过滤选择器1>基本选择器a>特定位置的过滤$(“li:first”)--- --匹配第一个li元素$(“li:last”) ---匹配找到的li中最后一个li元素$(“li:eq(index)”)---匹配找到的li中索引为index的li。

（index从零开始）b>指定范围的过滤$(“li:lt(index)”) --匹配index之前的所有li（不包含index位置的li）；$(“li:gt(index)”)---匹配index之后的所有li（不包含index位置的li）$(“li:not(selector)”)---匹配除了not的li内元素$(“li:odd”)----匹配偶数行（索引为奇数）的li$(“li:even”)----匹配奇数行（索引为偶数）的li2>属性过滤$(“[标签属性]”)-----匹配有该属性的俄元素$(“[标签属性=值]”)---匹配属性=指定的元素$(“[标签属性^=value]”)$(“[标签属性$=value]”)$(“[标签属性!=value]”)3>子元素选择器$(“li:first”)------将所有匹配到的元素中只选第一个（返回第一个元素）$(“li:first-child”)----匹配每个li的父元素的第一个孩子（可返回多个元素）$(“li:last”)和(“li:last-child”)用法与以上类似$(“li:only-child”)------匹配li的父级只有一个孩子的li元素val=$(“#id”).val（）---获取#id 的文本内容$("#btn").click(function(){var val=$("#txt").val();$("a:contains('"+val+"')").css("background","red");})4>内容过滤$(“li:contexts(text)”)--匹配内容中包含了text的文本的li$(“li:has(selector)”)---匹配内容中包含了selector元素的li$(“li:empty”)-----匹配内容为空的li元素$(“li:parent”)----匹配以li为父元素的DOM节点5>可见和隐藏选择器$(“div:hidden”)----匹配div中设置了display为none的元素，通过其他方式不可见的元素匹配不到；$(“div:visible”)---匹配div中没有设置display为none的元素，只认display设置不为none的元素备注：此选择器只以display设置的结果为准4，表单选择器$(“:input”) ------所有的表单中的控件：input button select$(“:text”)-------文本输入框---所有的input标签type属性值之前加冒号--表示相应的input元素$(“:disable”)---所有表单控件中设置了disable属性的元素$(“:enable”)----所有的表单控件中没有设置disable属性的元素$(“:checked”)---匹配被选中的单选按钮或者复选框$(“:selected”)---匹配被选中的option元素2，获取文本text( )------只获取到文本内容html( )-----获取包含标签在内的所有内容val( ) -----获取表单控件的文本设置内容text(“内容”)------设置内容，不解析标签html( “内容”)-----获取包含标签在内的所有内容val( “内容”) -----获取表单控件的文本.val([“check”,”radio”])----通过数组传递设置选定状态3，获取和设置元素的特性attr(“标签属性”)------获取该属性attr(“标签属性“，”属性值）-----设置该属性设置多个属性：attr({ 属性：属性值，属性：属性值}）；备注：多个属性设置之间用逗号分隔，最后一个无任何符号删除属性：removeAttr(“标签属性”)4，获取和设置DOM对象的属性property获取：prop( “属性”）设置：Prop(“属性””属性值”)备注：互补与attr( ),, 更适应结果为boolth的类型，5，attrbute和property区别1，区别：表示的意思不一样attrbute特性--所有设置的标签属性都存在attrbute类关联数组中获取：attrbute[ i ] 或者attrbute[“特性名”]property 属性标签有的特性，并已经设置了，可以通过property的方式获取获取：对象.属性名设置：如果对象没有该属性，可以通过对象.属性名=属性值jq：通过prop（）方式设置的属性，通过attr（）的方式获取不到对象没有的，通过attr（）方式设置的，通过prop（）的方式获取不到；联系：DOM元素有该特性，并且已经设置了，两种方式度可以获取到补充：通过attr( )获取不到的或设置不了的特殊属性，我们可以通过prop( )获取和设置例如：表单控件的checked属性；6，each( )----遍历每一个匹配到的元素使用语法：each（function(i,ele){ 执行内容}）;i-----表示每一个元素的索引Ele-----表示匹配到的每一个元素$(Ele)---将获取到的DOM元素转换成jq对象----用jq的API数组与遍历结合使用var arr=["#000","#0f0","#00f","#0ff","#f0f"];$(".warp").each(function(i){$(".warp").eq(i).css("backgroundColor",arr[i]);}); 这里不能使用this7，修改css属性的方法：attr(“class”,”类名”）addClass(“类名”)--------追加样式removeClass(“类名”)-----删除指定的类名removeclass( )------删除所有的类名toggleClass(“类名”）-------切换类名（在有和没有该类名之间切换）hasClasscss(“css属性”)--------获取一个css属性的值css(“css属性”,”属性值”）---设置一个csss属性css({属性：“属性值”，属性：“属性值”}）；8，获取索引：index( )-----在同辈中找索引index（“selector”）---在指定的同类(同辈)中找索引9，js对象和jq对象相互转换js-----jq 适用$( )工厂函数------$( js对象)jq----js $(“”)[index] 或者$(“”).get( index )转换之后的对象可以用彼此的API10，节点的遍历children( )/children( selector )----子代/子代中某个find( selector )-------在子孙后代中查找指定元素next( )/next( selector )------之后紧跟的一个兄弟元素/筛选某个紧邻的元素nextALL( )/nextAll( selector )----之后所有的兄弟元素prev( )/prev( selector )prevALL/prevALL( selector )siblings( )-----所有兄弟元素不包含自身parent( )------父元素输出---遍历到的内容console.log--只能输出一个，，用each( )11，创建元素$() 工厂函数创建var tr=$("<tr></tr>");$("#oDiv table").append(tr);添加元素父.append(子)----------子元素插入在父元素内容的后面父.preppend(子)--------子元素插入在父元素的内容的前面父.before(子)-----------子元素插入在父元素容器的前面父.after(子)--------------子元素插入在父元素容器的后面补充：反方向操作子.apppendTo(父)preppendTo(父)insertBefore(父)insertAfter(父)12, 替换被替换元素.replaceWith(替换的内容)；替换的内容.replaceAll(被替换元素);13,删除要删除的元素.remove();-----------------将匹配到的元素全部删除要删除的元素.remove(“selector”)-----匹配到的元素筛选后再删除14，复制jq对象.clone()------------------将匹配到的jq对象复制如果：jq对象使用嵌入的绑定事件，连同事件一起被复制如果：jq对象使用的分离式绑定事件，绑定的事件不会被复制如果想将分离式绑定的事件一起被复制：jq对象.clone(true);备注：clone（）紧紧是复制，并没有挂在DOM树上15，页面加载事件全写：jQuery(document).ready(function(){js语句})简写：$(function(){js语句})16，js的load事件和jq的ready事件的区别js中多个load事件只执行最后一个，jq的多个ready事件都会执行执行时机不同：js的load事件是在页面解析完毕之后执行jq的ready事件在DOM树生成的时候执行ready先于load执行17，$符号与其他框架发生冲突交出$的使用权：$.noConflict()交权的同时可以使用其他符号代替,例如：var Q=$.noConflict(); 收回$的使用权：jQuery（function($){此处可以使用$}）18,鼠标经过事件总结mouseovermouseout以上两个事件绑定给father：鼠标经过father 到son也会触发mouseenter可解决mouseleave以上两个事件绑定给father，经过son时不会触发hover将mousenter和mouseleave两个事件封装成一个事件执行jq对象.hover(function(){ 鼠标移入时执行},function(){ 鼠标移出时执行});$("#warp").hover(function(){$("#inner").stop().animate({bottom:0},1000)},function(){$("#inner").stop().animate({bottom:"-200px"},1000)});jq对象.hover(function(){鼠标移入移出都执行此函数---套路：此方法中实现的切换功能})19，事件的绑定方式：1, jq对象.事件名称(fn);eg：$(“#btn”).click(function(){})2, 用on绑定jq对象.on(“事件名称”，执行任务)写法有多种：$(“#btn”).on(“click mouseover”,fn);$(“#btn”).on({click:fn,moueover:fn});20,解除事件绑定：jq对象.off(“事件名称”，fn)------解绑事件名称执行的fn任务jq对象.off(“事件名称”)---------解绑事件名称执行的所有任务jq对象off()----------------解绑该对象的所有事件的所有任务星星评价二级出现增加21，on绑定事件实现的事件代理---------给未来的元素添加事件父.on(“type”,“子元素”，fn)以上父元素将事件类型代理给子元素（未来的），执行fn任务22，jq的事件对象：注意：jq事件对象中阻止事件冒泡和事件的默认行为只需使用事件对象的方法，兼容性已经处理（2.0）trigger 事件自动只执行（冒泡）triggerHander阻止冒泡23，事件的自动执行jq对象.事件名称（）------$(“#btn”).clickjq对象.trigger(“type”)------$(“btn”).trigger(“click”)备注：trgger会执行对象的默认行为，也会发生冒泡jq对象.triggerHandler(“type”)定时轮播备注：不会执行事件的默认行为，会阻止事件冒泡24，动画效果show( )hide( )toggle( )---切换执行show( ) hide( )可以传的速度参数：nomal slow fast 数字slideDown----向下滑开slideUp--------向上收齐animition-delay:数字----------延迟动画执行时间stop 当事件中断时，停止动画继续执行多事件合并执行---------节点1 . 方法1 . 节点2 . 方法2节点2 由节点1确定方法从前到后依次执行$(".banner .bg").fadeTo("fast",.6).attr("src",arr[idx]).fadeTo("fast",1);函数的调用方法：function fun(){}var mytime=setInterval(function(){$("#btn").click()},1000); var mytime=setInterval("$('#btn').click()",1000);var mytime=setInterval(fun,1000);var mytime=setInterval("fun()",1000);25，.offset ( ) 获取元素的当前坐标，坐标相对于文档25，获取窗口的相关尺寸js方法:clientHeight || document.documentElement.clientHeight-------获取页面内容所占的高度document.body.scrollHeight || document.documentElement.scrollHeight ------获取页面滚动的高度jq方法：var h=$(window).outHeight( )=$(window).innerHeight( )-----获取的是窗口的可见高度总结：js无法正常获取，只能通过jq获取窗口的可见高度jq无法获取，只能js获取页面的滚动高度outerHeight(）获取窗口可见的边框以内的尺寸offsetHeight$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin})事件放在引号内购物车--全选解除a标签的自身方法模态框视频1，视频标签<video></video>两种链接资源的方式：1，<video src=”视频资源”>2，<video><source src=”视频资源.mp4”><source src=””视频资源.avi></video>2，可通过标签属性来设置的属性control 控制视屏的控件muted 设置静音autoplay设置视频自动播放以上三个属性直接设置属性表示属性为true 不设置表示false poster 设置视屏暂停是的封面缺点：无法正常设置图片的尺寸解决：不使用该属性，而用定位的方式解决3，视屏中是通过js获取或者设置的属性currentTime视频当前播放时间，可以设置和获取paused获取当前是否处于暂停状态true--暂停false---播放ended 获取视屏是否播放到结尾true----播放完duration 获取视频的整个播放时长只能获取不能设置4，视频播放与暂停的方法play( )------播放pause( )-------暂停var w=$("v1").offsetWidth; 获取内容宽度var h=$("v1").offsetHeight; 获取内容高度补充：.get( index ) 根据索引获取html内容返回值：Element、Array.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。

JQuery开发工具——GVIM。

锋利的jQuery目录第1章认识jQuery (1)第2章jQuery选择器 (2)第3章jQuery的DOM操作 (5)第4章jQuery中的事件和动画 (8)第5章jQuery对表单、表格的操作及更多应用 (11)第6章jQuery与Ajax的应用 (13)第1章认识jQuery1．jQuery的优势：轻量级；强大的选择器；出色的DOM操作的封装；可靠的事件处理机制；完整的Ajax；不污染顶级变量；出色的浏览器兼容性；链式操作方式；隐式迭代；行为层与结构层的分离；丰富的插件支持；完善的文档；开源。

2．使用jQuery之前，要先导入jQuery库。

<script src=”../scripts/jquery-1.3.1.js” type=”text/javascript” />\在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)和document.getElementById(“foo”)是等价的。

Window.onload和$(document).ready()的区别：执行时机：前者必须等待网页中所有的内容加载完毕(包括图片)才能执行；后者在网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。

编写个数：前者只能编写一个function()块，后者能同时编写多个(多个会依次执行)。

简化写法：前者无；后者$(document).ready(function(){//…})可以简写成：$(function(){//…})3. jQuery代码风格。

链式操作风格：$(".has_children").click( function(){$(this).addClass("highlight") //为当前元素增加highlight类.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素.siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉它们的highlight类.children("a").hide(); //将兄弟元素下的<a>元素隐藏});代码规范：1)对于同一个对象不超过3个操作的，可以直接写成一行。

Jquery学习笔记1.$(":input[SurveyID='1'][Top][RequireA]").each(function () {$(this)..});筛选SurveyID为1的有Top和RequiredA属性的input元素2.$(this).parents("tr[TopTr]:first")（:last）筛选此元素的父亲tr节点中有topTr属性的第一个tr（最后一个）3.$(this).is("select")是否下拉框.is(":checked")是否选中.is("img")是否图标.is(":text")是否文本.is("input")是否input4.nextObj.css("display", "none")/nextObj.css("display","")/nextObj.css({ top: 0, left: 0, height: h, display: '' });设置隐藏/显示样式/设置几个样式5.parentObj.bind("click", function (){$(this)..})/nextObj.unbind("click")绑定click事件/解除绑定parentObj.bind("focus", function () {$(this)..})焦点事件parentObj.bind("change", function () {$(this)..})内容改变事件parentObj.bind("blur", function () {$(this)..})失去焦点事件parentObj.bind("mouseover", function () {$(this)..})鼠标移过事件parentObj.bind("keyup", function () {$(this)..})松开键盘按钮事件6.curentObj.next('img')/$("#aa").next().is(":visible")获取下一个img的元素对象/是否可见7.curentObj.attr(“id”)/curentObj.attr(“id”,1)/$(this).removeAttr( "id");获取/设置/去掉此对象的id属性8.parentObj.val()/parentObj.val(‘abc’)获取或设置对象的值9.$("div[id^='aa']").each(..)模糊搜索id为aa开头的div10.$(this).get(0).id在object数组里取第一个元素的id11.cObj.find(":selected").attr("OptID")找到选中的元素的OptID属性12.$(":input[name='aa'][type='radio'][checked]") 获取name为aa的一组单选项的选中的对象$(":input[name='aa'][type='checkbox'][checked]") 获取name为aa的一组多选项的选中的对象组13.var resultReq = new Array();resultReq.push('0');把东西装进数组names.pop(1)把1推出去14.var surveyIDs = IDs.split(',');for (var i = 0; i <surveyIDs.length; i++) {if (surveyIDs[i] != '')｛｝｝把IDs按照’分开成一个数组，再根据数组操作15.if(typeof (SetModify) != "undefined")如果此属性存在16.$("#" + id).hide();隐藏.show();显示.click();单击.focus();获得焦点.remove()移除$(this).after(html);在元素后面跟着html字符串.clone()复制当前object$("#aa").text("Downloading...")/.text();设置/获取文本内容17.new Date().getHours()/.getMinutes()/.getTime();获取当前日期时间的小时数/分钟数/时间18.$(newTr).appendTo("#eptb");把newTr放到("#eptb")的里面的最后面19.$(document).ready(function () {})；页面元素加载完成后执行的js代码20.$(".redAddress").toggle(true/false);选择用了样式redAddress的元素显示/隐藏21.var startObj = $("#startTime").val();var endObj = $("#endTime").val();var reg_hhmm = /^(?:(?:0?|1)\d|2[0-3]):[0-5]\d$/;if (startObj == '' || endObj == '' || !reg_hhmm.test(startObj) || !reg_hhmm.test(endObj)) {$("#diff").val('');} else {var s1 = new Date("2011-01-01 " + startObj + ":0");var s2 = new Date("2011-01-01 " + endObj + ":0");var s3 = s2.getTime() - s1.getTime();if (s3 > 0) {var h = parseInt(s3 / (60 * 60 * 1000));var m = parseInt(s3 / (60 * 1000)) - h * 60;var result = '';if (h > 0)result = '' + h + 'h';if (m > 0)result += ' ' + m + 'm';$("#diff").val(result);}else {$("#diff").val('0m');}}计算两时间的时间差22.$("#trParent1End").nextAll().not("tr:last").hide();隐藏该table对象不是最后一行tr的所有tr23.if ($.browser.msie) {$("#aa,#bb,#cc").width("151px"); }设置宽度24.$.trim($(this).val())去掉空格。

jquery 中总结十章笔记1. 选择器：- 使用`$()`或`jQuery()`函数来选取DOM元素。

- 可以使用元素名称、类名、ID、属性等进行选择。

- 还可以使用层级关系和过滤器来进一步缩小选择范围。

2. 事件处理：- 使用`on()`方法来绑定事件处理函数。

- 可以使用事件委托来处理动态添加的元素。

- 使用`off()`方法来解绑事件处理函数。

3. DOM操作：- 可以使用`append()`、`prepend()`、`after()`和`before()`方法来插入DOM元素。

- 使用`remove()`方法来删除DOM元素。

- 使用`html()`和`text()`方法来修改元素的HTML内容和文本内容。

4. 动画效果：- 使用`animate()`方法来创建自定义动画效果。

- 可以修改元素的位置、尺寸、透明度等属性。

- 可以设置动画的持续时间、缓动效果和完成时的回调函数。

5. 异步请求：- 使用`$.ajax()`方法发送异步HTTP请求。

- 可以设置请求类型、URL、数据、成功和失败的回调函数等参数。

- 可以使用`$.getJSON()`和`$.post()`等简化的方法来发送常见类型的请求。

6. 特效效果：- 使用jQuery UI库提供的特效效果可以为网页添加交互效果。

- 可以添加拖拽、排序、选项卡、日期选择等功能。

- 可以自定义特效的样式和行为。

7. 表单操作：- 可以使用`val()`方法获取或设置表单元素的值。

- 使用`prop()`方法修改复选框和单选框的选中状态。

- 使用`serialize()`方法将表单元素序列化为字符串。

8. 遍历和过滤：- 使用`each()`方法和回调函数遍历匹配的元素。

- 使用`filter()`和`not()`方法根据条件过滤元素。

- 使用`find()`方法在匹配元素的后代中查找元素。

9. AJAX事件：- 使用`$.ajaxSetup()`方法设置全局AJAX默认选项。

JQUERY1导入两个js和一个css样式<link rel="stylesheet" href="js/css.css" type="text/css"></link> <script type="text/javascript" src="js/jquery1.4.2.js"></script> <script type="text/javascript"src="js/Validform.js"></script>2jquery会和dwr发生冲突，他们默认都是用$给jquery重新声明<script language="javascript">var j = jQuery.noConflict();</script>3淡入淡出的效果实现<script type="text/javascript">j(function(){j("body").hide(1000);j("body").fadeIn(3000);})</script>显示也可以：j("body").show(3000);4让普通按钮变成submit按钮<input type="button" value="提交" id="su">btnSubmit:"#su"5表单触发事件.registerform表单的styleClass="registerform"Validform:为插件点击按钮为#su就会触发jquery函数（j(function(){})）里面的类容自己要定义datatype等要再这个里面（插件）写如果是定义多个要打逗号不打会出不来效果j(".registerform").Validform()加载时就会调用j(".registerform").Validform({btnSubmit:"#su",datatype:{"c":/^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|2010)(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9xX]$/}});自己定义datetype:{ "c"：符合哪种格式}身份证必须符合这种格式c为上面定义的格式j("#humanIdCard").attr("datatype","c");j("#humanIdCard").attr("errormsg","请输入正确的身份证号码");6验证humanName：是文本框的id属性验证文本框的内容只能是(s2-20)字符2-20个长度j("#humanName").attr("datatype","s2-20");弹出不能为空的信息j("#humanName").attr("nullmsg","姓名不能为空");弹出错误的信息j("#humanName").attr("errormsg","姓名只能在2到20个字符之间");下拉框必须选j("#firstKindId").attr("datatype","select");验证邮箱为：efunction checkEmail(){j("#humanEmail").attr("datatype","e");j("#humanEmail").attr("errormsg","邮箱格式:xx@");if(j("#humanEmail").val()==""){//如果是空的话移除验证j("#humanEmail").removeAttr("datatype");}}Onkeyup:光标放进去再出来时调用验证邮箱的方法Onkeydown: 光标放进去时调用验证邮箱的方法<html:text property="hf.humanEmail" styleId="humanEmail"onkeyup="checkEmail()"/>7拿到下拉框选中的文本，给文本框styleId=firstKindName 赋值拿到文本框的值：j("#firstKindName ").val()j("#firstKindName").val(j("#firstKindId option:selected").text());<html:hidden property="hf.firstKindName" styleId="firstKindName"/>8如果是普通的文本框可以直接这样调用jquery但必须导入那两个文件<input type="text" datetype="s2-20" nullmsg="姓名不能为空" errormsg="姓名只能在2到20个字符之间">9：身份证验证正则表达式"c":/^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|2010)(0[1-9]|1[0-2])(0[1-9]|[ 12][0-9]|3[01])[0-9]{3}[0-9xX]$/10：datatype类型验证email：e验证邮编：p验证字符：s2-10 …其他还可以在写插件时自己定义10动态创建一个div 元素（以及其中的所有内容），并将它追加到body 元素中$("<div><p>Hello</p></div>").appendTo("body");视频教学第一次课：1JQuery实战第一讲：概述、环境准备及入门实例$.get();（$.post()）可以完成和服务器端进行交互三个参数urldatacallbackencodeURI(encodeURI(userName)):处理传过去的参数的中文乱码问题$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){//3.接收服务器端返回的数据，填充到div中$("#result").html(response);});服务器端String userName = URLDecoder.decode(param, "UTF-8");。