Jquery学习笔记

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Jquery学习笔记
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({
min: function(a, b) { return a b ? a : b; }
});
alert($.min(3,6)); //显示3
alert($.max(3,6));//显示6
3. $.noConflict() 取消$代替jQuery.
例如:
jQuery.noConflict(); // Do something with jQuery
jQuery(”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)
This is just a test.So is this=》So is this
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”></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:This is just a test.So is this
$("p").lt(1) ==>[ This is just a test. ]
10. addClass 给一个element添加class可以添加多个
eg: Hello
$("p").addClass("selected")=>[ Hello ]
$("p").addClass("selected highlight")=>
[ Hello ]
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("new stuff") ==><div>new stuff</div>;
13 removeAttr(name) 删除属性
eg: <input disabled=”disabled”/>
$(”input”).removeAttr(”disabled”)=><input/>
14 removeClass(class) 删除样式，当class是空时删除所有的样式，如果class为指定样式则删
指定样式
eg: Hello
$(”p”).removeClass(”selected highlight”)=>[ Hello ]
$(”p”).removeClass() =>[ Hello ]
15. text() 取得element中的内容text(val) 设置element内容text与html差不多，只是text会把<,>用
html标识符替换
eg: Test Paragraph.Paraparagraph
$(”p”).text() =>T est Paragraph.Paraparagraph;
Test Paragraph.
$(”p”).text(”Some new text.”);==>
Some new text.
$(”p”).text(”Some new text.”, true) ==>
Some new text.
16.toggleClass(class) 这是一个比较有用的方法，就是当element存在参数中的样式的时候
取消，如果不存在就设置此样式
eg:HelloHello Again
$("p").toggleClass("selected")==>
[ Hello, Hello Again ]
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: I would like to say: 
$("p").after("Hello")==>I would like to say: Hello
HelloI would like to say: 
$("p").after( $("b") )==>I would like to say: Hello;
21 before(content)与after相反是插入到前面
eg: I would like to say: 
$("p").after("Hello")==>>HelloI would like to say: I would like to say: 
$("p").append("Hello")＝＞I would like to say: Hello;
eg: I would like to say: Hello
$("p").append( $("b") )==>;
I would like to say: Hello
20 appendto(content)与append刚好相反
I would like to say: <div id="foo"></div>
$("p").appendTo("#foo")==>
<div id="foo">I would like to say: </div>;
21 prepend(content) 添加到element里面的前部．与append 的方位不一样
I would like to say: 
$("p").prepend("Hello")==>HelloI would like to say: ;
22 prependTo(content) 与prepend的添加对像相反．
I would like to say: <div id="foo">Hello</div>
$("p").prependTo("#foo") ==>
<div id="foo">I would like to say: Hello</div>;
23 clone(deep) 克隆一个新的element．参数deep为flase里不包括子element
Hello, how are you?
$("b").clone().prependTo("p")==>HelloH ello, how are you?
24.empty() 删除所有的内部节点
Hello, Person <a href="#">and person</a>
$("p").empty()==>[ ]
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为空时．全部删除
Hello how are you?
$("p").remove(".hello")==>how are you?;
28. wrap(html) 把节点插入到html生成的节点里面．要注意的是
html节点中不能含有内容只能
是节点的结构．如果想加的话只能在嵌入后再插入内容
Test Paragraph.
$("p").wrap("<div class='wrap'></div>")==>
<div class='wrap'>Test Paragraph.</div>
注html也可以直接用一个element代替
29 add(params) 在$所取到的节点数组中添加新的节点．
参数可以是expr, html,element
eg: 1.HelloHello Again
$(”p”).add(”span”)==>[ Hello, Hello Again ]
2.Hello
$(”p”).add(”Again”)==>
[ Hello, Again ]
3. HelloHello Again
$(”p”).add( document.getElementById(”a”) )===>
[ Hello, Hello Again</spa n> ]
30 children(expr)取得子节点,当expr为空时，取得所有的子节点
eg<div>HelloHello AgainAnd Again</div>
$(”div”).children()==>[>HelloHello AgainAnd
Again ]
$(”div”).children(”.selected”)==>
[ Hello Again ]
31 contains(str)找出字节点中包含有str的节点．str起到过滤做用
eg: This is just a test.So is this
$("p").contains("test")==>[ This is just a test. ]
32. filter(expression)过滤找出符合expression的节点
eg:HelloHello AgainAnd Again
$("p").filter(".selected")==>>And Again
$("p").filter(".selected, :first")==>
[ Hello, And Again ]
filter(filter_func)通过函数来选择是否过滤，filter_func返回true 表示过滤
<ol><li>Hello</li></ol>How are you? $("p").filter(function(index) { return $("ol", this).length == 0; })==>
[ How are you? ]
33. find（expr）从子节点找出符合expr的．与filter的区别是filter过滤掉＄数组中的节点
find过滤到的是子节点
eg: Hello, how are you?
$("p").find("span")==>[ Hello ];
34. is(expr) 判断是否符合条件，如果$数组的所有节点都不符合条件返回false，
只要有一个符合条件就返回true
eg: <form><input type="checkbox" /></form>
$("input[@type='checkbox']").parent().is("form")==>false
$("input[@type='checkbox']").parent().is("p")==>true
35 next(expr) 取得最近节点最近那个节点.expr为空时取得所有节点
eg:1.HelloHello Again<div>And Again</div>
$("p").next()==>[ Hello Again, <div>And Again</div> ]
2.HelloHello Again<div>And Again</div>
$("p").next(".selected")==>[ Hello Again ]
36. not(el),not(expr),not(elems)与add相反，删除符合条件的节点．
eg:1. HelloHello Again
$("p").not( $("#selected")[0] )==>[ Hello ]
$("p").not("#selected")==>[ Hello ]
2.<div>HelloHello Again</div>
$("p").not( $("div p.selected") )==>[ Hello ]
37 parent(expr) 取得父节点
eg:1.<html><body><div>HelloHello
Again</div></body></html>
$("span").parents()==>[ <body>...</body>, <div>...</div>, Hello ]
2.<html><body><div>Hello<sp an>Hello Again</div></body></html>
$("span").parents("p")==>[ Hello ]
38 prev(expr) 与next相反,next取得是与节点相邻后面的．prev 取得相邻前面的
eg: 1.<div>Hello</div>Hello AgainAnd Again $("p").prev(".selected")==>[ <div>Hello</ div> ]
2.Hello<div>Hello
Again</div>And Again
$("p").prev()==>[ <div>Hello Again</div> ]
39 siblings(expr) 取得相邻两边的节点是．next,与prev的结合体
jquery与dom相关的操作先讲到这里，下回接着讲CSS相关操作
40 1/. CSS(name)读取样式属性值
eg:Test Paragraph.
$(”p”).css(”color”)==>”red”;
2/css(properties)设置style
eg:T est Paragraph.
$("p").css({ color: "red", background: "blue" })==>
Test Paragraph.;
3/css(key, value)设置单个样式属性,如果设置的值是数字的话,会被自动转化为像素单位
eg : Test Paragraph.
$("p").css("color","red")==>Test Paragraph.;
$("p").css("left",30)==>Test Paragraph.;
41 1/height()取得当前匹配节点数组中的第一个节点的高的值
eg: This is just a test.
$("p").height() ==>300;
2/ height(val) 设置所有匹配的节点的高,如果val的单位不是ex ,%,那么单位自动设为px
eg: This is just a test.
$("p").height(20)==>This is just a test.;
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: Hello
$(”p”).blur( function() { alert(”Hello”); } );==>
Hello
52. change(fn)设置onchange事件的方法
eg:Hello
$(”p”).change( function() { alert(”Hello”); } );==>Hello
53 click()触发onclick事件, click(fn)设置onclick方法
54. dblclick(fn)设置ondblclick方法
55.error(fn)设置error方法
56 focus()触发onfocus,focus(fn)设置focus方法
eg:Hello
$(”p”).focus( function() { alert(”Hello”); } );
==>Hello
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.
59
mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),m ouseup(fn)这些是mouse
相关的操作分别对应onmousedown,onmousemove,onmouseout,onmouseover,onmo useup.
60 load 当element load事件发生时触发
eg Hello
$("p").load( function() { alert("Hello"); } );==>
Hello
61.one(type, data, fn)与bind差不多,最大的区别是前者只运行一次后便不再响应.如果运行后
不想继续运行默认的方法只要fn中返回值return false就可以了.
eg: Hello
$("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: Hello
$("p").resize( function() { alert("Hello"); } );
Hello
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: Hello
$("p").trigger("click")==>alert('hello')
69 unbind(type, fn)与bind相反,
1.unbind()删除所有的绑定.
eg:Hello
$("p").unbind()==>[ Hello ]
2.unbind(type)删除指定的绑定
eg:Hello
$("p").unbind( "click" )==>[ Hello ]
3.unbind(type, fn)删除指定type的指定fn
eg:Hello
$("p").unbind( "click", function() { alert("Hello"); } )
==>[ Hello ]
70 unload(fn)当页面unload的时候触发方法
eg: Hello
$("p").unload( function() { alert("Hello"); } );==>
Hello
主要关于如何用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(){
alert("Animation Done.");
});
73. hide(),hide(speed, callback).前者是把element隐藏用的是display:none的样式。

后
者是把element的长，宽，以及透明度都改变。

callback表示动画完成后调用的函数。

speed表示速度
eg: 1. Hello
$("p").hide()==>[ Hello ]
2.$("p").hide("slow",function(){alert("Animation Done.");}); //动画隐藏
74. show(),show(speed, callback)这两个方法与前两个方法的行为相反。

eg: 1. Hello
$("p").show()==>[ Hello ]
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: HelloHello Again
$("p").toggle()==>
[ Hello, Hello Again ]
77.$.getScript(url, callback)下载脚本文件,并运行.
eg:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
78.$.post(url, params, callback) 用post的方式下载一个页面返回XMLHttpRequest
url: 请求的页面
params:表示请求的要发送的参数.
callback: 请求结束后,调用的方法
eg:$.po st(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ” + data);
}
);
79. ajaxStart(callback) 当ajax请求发送前,将触发callback.
eg;
$("#loading").ajaxStart(function(){
$(this).show();
});
80. ajaxSend(callback)当ajax请求发送时触发callback,参数是XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
81.ajaxComplete(callback)当一个ajax请求完成时调用callback.回调参数为XMLHttpRequest和settings
请求设置
eg:
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
82.ajaxSuccess(callback)当一个ajax请求成功时调用回调参数为XMLHttpRequest和settings请求设置
eg:$("#msg").ajaxSuccess(function(request, settings){
$(this).append("<li>Successful Request!</li>");
});
83.ajaxError(callback)当一个ajax请求失败时调用回调参数为XMLHttpRequest和settings请求设置
eg:$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
84.ajaxStop(callback)当所有的ajax请求结束时,将触发callback
eg:$("#loading").ajaxStop(function(){
$(this).hide();
});
85.load(url, params, callback)加载url的内容,并把得到的内容插入到DOM中去.
注意:避免去获取script脚本.可以用$.getScript
url:请求的页面,params:发送的参数.
callback: 调用完成后的回调函数.
eg: <div id="feeds"></div>
$("#feeds").load("feeds.html")==>
<div id="feeds">45 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' name='location' value='Boston'/>
$("input[@type=text]").serialize();
==>name=John&location=Boston。