|
Jquery 学习笔记--方法大集合【转载】
2009-02-25 10:40
本笔记翻译自：可视JQuery 1.$()的用法 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])搜索出第一个表单中的radio 2. $.extend(prop)向jquery命名空间中添加方法,用此方法可以方便的对jquery进行扩展 $.extend({ 3. $.noConflict() 取消$代替jQuery. 例如: jQuery.noConflict(); // Do something with jQuery jQuery(”div p”).hide(); // Do something with another library’s $() $(”content”).style.display = ‘none’;
例如: $(”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) : 查找相应节点的位置，从０开始计数.如果没找到返回-1 eg: <div id=”foobar”><b></b><span id=”foo”></span></div> $("*").index( $('#foobar')[0] ) =>0 $("*").index( $('#foo')[0] ) => 2 $("*").index( $('#bar')[0] )=> -1 8. 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() =>Test 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: </p 19 append(content) 与上面不同的是append是添加把content做为子element eg: <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>Hello</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,element eg: 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</span> ] 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><p class=”selected”>Hello Again</p><p>And Again</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， 只要有一个符合条件就返回true eg: <form><p><input type="checkbox" /></p></form> $("input[@type='checkbox']").parent().is("form")==>false $("input[@type='checkbox']").parent().is("p")==>true 35 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>Hello Again</span></div></body></html> $("span").parents()==>[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ] 2.<html><body><div><p><span>Hello</span></p><span>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>Hello Again</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)设置style eg:<p>Test 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 ,%,那么单位自动设为px eg: <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(){ 58 keydown(fn),keypress(fn),keyup(fn),按键盘相关的操作分别对应onkeydown, onkeypress,onkeyup. 59 mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),mouseup(fn)这些是mouse 相关的操作分别对应onmousedown,onmousemove,onmouseout,onmouseover,onmouseup. 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($) { 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(){ 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的指定fn eg:<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: 1000 easing:默认是’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表示淡入到某个透明度。opacity (Number):取值范围就0-1 eg: $("p").fadeTo("slow", 0.5, function(){ 73. hide(),hide(speed, callback).前者是把element隐藏用的是display:none的样式。后 者是把element的长，宽，以及透明度都改变。callback表示动画完成后调用的函数。speed表示速度 eg: 1. <p>Hello</p> $("p").hide()==>[ <p style="display: none">Hello</p> ] 2.$("p").hide("slow",function(){alert("Animation Done.");}); //动画隐藏 74. show(),show(speed, callback)这两个方法与前两个方法的行为相反。 eg: 1. <p style="display: none">Hello</p> $("p").show()==>[ <p style="display: block">Hello</p> ] 2. $("p").show("slow",function(){ alert("Animation Done.");}); //动画展现 75.slideDown(speed, callback),slideUp(speed, callback)，slideToggle(speed, callback) slideDown是高度从0慢慢增加，slideUp是高度慢慢减小到0。 slideToggle表示一个相反的状态。如果当前状态是slideDown后的状态，那么执行 slideToggle与运行slideUp一样。如果当前状态是slideUp后的状态，那么执行 slideToggle与运行slideDown一样 76. toggle(),如果element是hide状态则show之。如果当前状态是show状态，则hide之. eg: <p>Hello</p><p style="display: none">Hello Again</p> $("p").toggle()==> [ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ] 77.$.getScript(url, callback)下载脚本文件,并运行. eg: $.getScript("test.js", function(){ 78.$.post(url, params, callback) 用post的方式下载一个页面返回XMLHttpRequest url: 请求的页面 params:表示请求的要发送的参数. callback: 请求结束后,调用的方法 eg:$.post(”test.cgi”, 79. ajaxStart(callback) 当ajax请求发送前,将触发callback. eg; $("#loading").ajaxStart(function(){ 80. ajaxSend(callback)当ajax请求发送时触发callback,参数是XMLHttpRequest和settings请求设置 eg: $("#msg").ajaxSend(function(request, settings){ 81.ajaxComplete(callback)当一个ajax请求完成时调用callback.回调参数为XMLHttpRequest和settings 请求设置 eg: $("#msg").ajaxComplete(function(request, settings){ 82.ajaxSuccess(callback)当一个ajax请求成功时调用回调参数为XMLHttpRequest和settings请求设置 eg:$("#msg").ajaxSuccess(function(request, settings){ 83.ajaxError(callback)当一个ajax请求失败时调用回调参数为XMLHttpRequest和settings请求设置 eg:$("#msg").ajaxError(function(request, settings){ 84.ajaxStop(callback)当所有的ajax请求结束时,将触发callback eg:$("#loading").ajaxStop(function(){ 85.load(url, params, callback)加载url的内容,并把得到的内容插入到DOM中去. 注意:避免去获取script脚本.可以用$.getScript url:请求的页面,params:发送的参数. callback: 调用完成后的回调函数. eg: <div id="feeds"></div> $("#feeds").load("feeds.html")==> <div id="feeds"><b>45</b> feeds found.</div>; 86.loadIfModified(url, params,callback)功能与85点的load方法一模一样.唯一的区别是, 当服务器端根据LastModify判断出没有什么改动的话.就不进行请求.也不进行dom插入. 87.serialize()这是一个十分有用的方法.一般用来序列化进行ajax请求的参数.十分方便 eg: <input type='text' name='name' value='John'/> $("input[@type=text]").serialize(); ==>name=John&location=Boston |
|
|
来自： BlazerOfIT > 《extjs》
