jquery笔记[转]

peigen

浏览: 78799 次
性别:
来自: 杭州

最近访客更多访客>>

jerry_shen

hongchaong

InJavaWeTrust

shige19

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Ajax CSS Safari HTML

1.$()的用法

1.1 $(html)　＝>根据ＨＴＭＬ参数动态建立一个jquery对像

例子：$(”
hello
”).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; },
max: 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”; });

结果：==》

5．eq(pos)取得对像element数组的第Ｎ＋１个element

例如：$(”p”).eq(1)

This is just a test.
So is this
=》
So is this

6. get() 取得所有的element数组

例如: $(”img”).get();

  ===>

[   ]

get(num)可以取得指定的element

例如:$("img").get(1)

  ===>[ ]

７．index(subject) : 查找相应节点的位置，从０开始计数.如果没找到返回-1

eg:

$("*").index( $('#foobar')[0] ) =>0

$("*").index( $('#foo')[0] ) =>  2

$("*").index( $('#bar')[0] )=> -1

8. length 返回节点的个数

eg: 

$("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").attr("src") =>test.jpg;

attr(key,value) 设置属性

attr(key,function) 调用相应的方法处理后的返回值用来设置属性

attr(properties) 批量的设置element的属性值

eg: 

$("img").attr({ src: "test.jpg", alt: "Test Image" });

==> 

$("img").attr("src","test.jpg")=>

以下两个方法等价:

$("img").attr("title", "${this.src}")

$("img").attr("title", function() { return this.src })

==>

12 html　取得element的html代码

eg: 

$("div").html() => ;

html(val) 设置element的html代码

eg: 

$("div").html("new stuff") ==>new stuff
;

13 removeAttr(name) 删除属性

eg:

$(”input”).removeAttr(”disabled”)=>

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() =>Test 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:Hello
Hello Again

$("p").toggleClass("selected")==>

[ Hello
, Hello Again ]

17 val() 取得第一个element的vlaue值 val(val) 设置属性的值

eg: 

$("input").val() == >"some text";

$("input").val("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: append(content)　与上面不同的是append是添加把content做为子element

eg: 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: 


$("p").appendTo("#foo")==>

I would like to say: 
;

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: 
Hello

$("p").prependTo("#foo") ==>

I would like to say: 
Hello;

23 clone(deep) 克隆一个新的element．参数deep为flase里不包括子element

Hello, how are you?

$("b").clone().prependTo("p")==>HelloHello, how are you?

24.empty() 删除所有的内部节点

Hello, Person and person

$("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("")==>

Test Paragraph.

注html也可以直接用一个element代替

29 add(params) 在$所取到的节点数组中添加新的节点．

参数可以是expr, html,element

eg: 1.
Hello
Hello Again

$(”p”).add(”span”)==>[
Hello
, Hello Again ]

2.
Hello

$(”p”).add(”Again”)==>

[ Hello
, Again ]

3.
Hello
Hello Again

$(”p”).add( document.getElementById(”a”) )===>

[
Hello
, Hello Again ]

30 children(expr)取得子节点,当expr为空时，取得所有的子节点

eg
Hello
Hello Again
And Again

$(”div”).children()==>[>Hello
Hello Again
And 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:Hello
Hello Again
And Again

$("p").filter(".selected")==>>And Again

$("p").filter(".selected, :first")==>

[ Hello
, And Again ]

filter(filter_func)通过函数来选择是否过滤，filter_func返回true表示过滤

Hello
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: 

$("input[@type='checkbox']").parent().is("form")==>false

$("input[@type='checkbox']").parent().is("p")==>true

35 next(expr) 取得最近节点最近那个节点.expr为空时取得所有节点

eg:1.Hello
Hello Again
And Again

$("p").next()==>[ Hello Again
, And Again ]

2.Hello
Hello Again
And Again

$("p").next(".selected")==>[ Hello Again ]

36. not(el),not(expr),not(elems)与add相反，删除符合条件的节点．

eg:1. Hello
Hello Again

$("p").not( $("#selected")[0] )==>[ Hello ]

$("p").not("#selected")==>[ Hello ]

2.Hello
Hello Again

$("p").not( $("div p.selected") )==>[ Hello ]

37 parent(expr) 取得父节点

eg:1.Hello
Hello Again

$("span").parents()==>[ ..., ...
, Hello ]

2.Hello
Hello Again

$("span").parents("p")==>[ Hello ]

38 prev(expr) 与next相反,next取得是与节点相邻后面的．prev取得相邻前面的

eg: 1.Hello
Hello Again
And Again

$("p").prev(".selected")==>[ Hello ]

2.Hello
Hello Again
And Again

$("p").prev()==>[ Hello Again ]

39 siblings(expr) 取得相邻两边的节点是．next,与prev的结合体

40 1/. CSS(name)读取样式属性值

eg:
Test Paragraph.

$(”p”).css(”color”)==>”red”;

2/css(properties)设置style

eg:Test 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  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?";

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),mouseup(fn)这些是mouse

相关的操作分别对应onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.

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; } );



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

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: Hello
Hello Again

$("p").toggle()==>

[ Hello
, Hello Again
 ]

71.$.ajax(params)这个方法是jQuery中调用ajax的最基本方法,功能十分强大.参数是一个对象.所有的参数用key:value的形式设置

下面主要介绍一下各种参数:

(string)url: 要请求的网址,可以把参数get参数设置到url上面

(string)type: 请求的类型,可以是Post与get,默认情况下是GET

(string)dataType: 你所期望返回的数据格式,可以是xml,html,script,json.最终返回类型还是服务器决定.

(Boolean)ifModified:只当返回值改变的时候才会成功返回正确值.主要判断依据是请求头的Last-Modified.默认情况下,这个值设置为false

(Number)timeout:设置请求时间,这个时间会替换全局的时间($.ajaxTimeout)

(Boolean)global:是否触发全局的ajax事件句柄.例如ajaxStart,ajaxStop.默认情况是true

(Function)error: 请求错误处理的函数.

(Function)success: 请求成功处理的函数.

(Function)complete:请求完成处理的函数.

(Object|string)data:发送到服务器端的数据.如果不是字符串,则被转化成字符串,被加到url上面,做为查询字符串.如果不想用默认的方式处理,可以设置processData状态.

(Boolean)processData.默认情况是true,把object转化成string,做查询字符串.可以设置为false,则以DOMDocments发送.

(String)contentType.默认是”application/x-www-form-urlencoded”,一般情况不用修改.

(Boolean)async .默认值为true.表示异步请求,如果想改成同步.只要把设为false就可以了.

(Function)beforeSend.用于对在发送请求之前,对请求头的设置.有XMLHttpRequest做为参数

例子:

取一个js文件.

$.ajax({

  type: "GET",

  url: "test.js",

  dataType: "script"

})

post数据到服务器端,并且成功时提示用户.

$.ajax({

  type: "POST",

  url: "some.php",

  data: "name=John&location=Boston",

  success: function(msg){

    alert( "Data Saved: " + msg );

  }

});

同步请求数据

var html = $.ajax({

 url: "some.php",

 async: false

}).responseText;

传送domdocument,data将不会被强行转化.

var xmlDocument = [create xml document];

$.ajax({

  url: "page.php",

  processData: false,

  data: xmlDocument,

  success: handleResponse

});

72.$.ajaxSetup(settings)设置一个全局的ajax变量.一般用来设置一些公用的请求头设置.

$.ajaxSetup( {

  url: "/xmlhttp/",

  global: false,

  type: "POST"

} );

$.ajax({ data: myData });

73.$.ajaxTimeout(time) 设置全局ajax请求时间,当time为0或者null时表示不限时间

$.ajaxTimeout( 5000 ); //表示最长5秒请求.

74.$.get(url, params, callback)下载一个页面.

url:页面地址,

params: 参数,是key/value的map

callback: 请求结束后调用的方法

eg:

$.get("test.cgi",

  { name: "John", time: "2pm" },

  function(data){

    alert("Data Loaded: " + data);

  }

);

75.$.getIfModified(url, params, callback)与get一样,不同之处在于如果请求的页面返回值

不变的话,就不处理请求.

76.$.getJSON(url, params,callback)与$.get一样,返回值是用json格式后好的.

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:$.post(”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("Starting request at " + settings.url + "");

});

81.ajaxComplete(callback)当一个ajax请求完成时调用callback.回调参数为XMLHttpRequest和settings请求设置

eg:

$("#msg").ajaxComplete(function(request, settings){

  $(this).append("Request Complete.");

});

82.ajaxSuccess(callback)当一个ajax请求成功时调用回调参数为XMLHttpRequest和settings请求设置

eg:$("#msg").ajaxSuccess(function(request, settings){

  $(this).append("Successful Request!");

});

83.ajaxError(callback)当一个ajax请求失败时调用回调参数为XMLHttpRequest和settings请求设置

eg:$("#msg").ajaxError(function(request, settings){

  $(this).append("Error requesting page " + settings.url + "");

});

84.ajaxStop(callback)当所有的ajax请求结束时,将触发callback

eg:$("#loading").ajaxStop(function(){

  $(this).hide();

});

85.load(url, params, callback)加载url的内容,并把得到的内容插入到DOM中去.

 注意:避免去获取script脚本.可以用$.getScript

url:请求的页面,params:发送的参数.

callback: 调用完成后的回调函数.

eg: 

$("#feeds").load("feeds.html")==>

45 feeds found.;

86.loadIfModified(url, params,callback)功能与85点的load方法一模一样.唯一的区别是,

当服务器端根据LastModify判断出没有什么改动的话.就不进行请求.也不进行dom插入.

87.serialize()这是一个十分有用的方法.一般用来序列化进行ajax请求的参数.十分方便

eg:





$("input[@type=text]").serialize();

==>name=John&location=Boston

关于jQuery的学习笔记先记到此.

分享到：