臭皮匠

JQuery学习笔记（1）

4月 1, 2008 – 11:59 下午

前言:

朋友推荐用jQuery做js开发库.学习后发现果然不错不敢独享，现把学习笔记贡上

本笔记翻译自：可视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; },
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”; });

结果：<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"/> ]

先写到这里了,待续