转自:http://lcr.javaeye.com/blog/897535
1.基础介绍
Js代码
$(document).ready(function(){
--- jQuery functions go here ----
});
jQuery(document).ready(function($){
--- jQuery functions go here ----
});
$(function(){
// 文档就绪
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:
* 试图隐藏一个不存在的元素。
* 获得未完全加载的图像的大小。
一般情况下一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。
页面加载完成有两种事件:
一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
二是onload,指示页面包含图片等文件在内的所有元素都加载完成
Java代码
var jQuery = function( selector, context ) {
.............
}
2.核心函数
Js代码
jQuery(expression, [context])
默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;
如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。
例如:
a. jQuery()
jQuery 1.4返回空的 jQuery 集合;之前版本会返回包含 document 节点的集合。
b. jQuery(element)
从整个HTML文档中查找指定的元素element
jQuery("td") 查找所有的td元素
c. jQuery(expression, [context])
//var tr = document.getElementById("tr_1");
//var tr = $("#tr_1");
jQuery("td",tr)
d. jQuery(jQuery object) 以参数的形式向 $() 函数传递 jQuery 对象后,会创建一个该对象的副本
Js代码
jQuery(html, [ownerDocument])
参数中的[ownerDocument]应该为HTMLDocument,方法才能成功创建一个jQuery对象,如果不填这个参数,则默认为当前的Document
$(html,window._content.document) 可以正常使用,其中window._content.document类型是 HTMLDocument,而在没有写第二个参数的时候默认使用的是XULDocument
如果以参数的形式将字符串传递给 $(),jQuery 会检查字符串是否是 HTML , 如果不是,则把字符串解释为选择器表达式,但如果字符串是 HTML 片段,则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。
然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象,在jquery内部调用doc.createDocumentFragment()。
xmlDocument.createDocumentFragment();
一个新的文件片断被建立,但没有加到文件树中。要加入片断到文件树中,必须使用插入方法,例如insertBefore、replaceChild 或appendChild。
例如:
$("<div><p>Hello</p></div>",window._content.document).appendTo("body");
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");
Js代码
jQuery(html,props)
对于 jQuery 1.4,我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。
例如:
Js代码
创建一个 <input> 元素,同时设定 type 属性、属性值,以及一些事件。
function yy () {
$("<input>",{
type : "button",
val : "text",
click : function(){
alert("hello--button");
}
}).appendTo("body");
}
Js代码
jQuery(elements) 用于将elements表示的DOM元素封装成jQuery对象
Js代码
jQuery(callback) $(document).ready()的简写。
例如:
$(function(){
// 文档就绪
});
jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});
3.对象访问
Js代码
each(callback)
例如:
迭代两个图像,并设置它们的 src 属性。
Js代码
<img/><img/>
代码为:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
如果你想得到 jQuery对象,可以使用 $(this) 函数。
$(this).attr("src", "this"+i+".jpg");
Js代码
size() jQuery 对象中元素的个数(同jQuery 对象的'length' 属性)。
Js代码
length jQuery 对象中元素的个数(同 size()方法)。
Js代码
selector jQuery 1.3新增。返回传给jQuery()的原始选择器。
换句话说,就是返回你用什么选择器来找到这个元素的。可以与context一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
Js代码
例如:
var tr = $("table");
alert(tr.selector); //table
var tr = $("#tr_1");
alert(tr.selector); //#tr_1
Js代码
context
jQuery 1.3新增。返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。
如果没有指定,那么context指向当前的文档(document)。
可以与selector一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
var tr = $("#tr_1");
var tds = $("td", tr);
alert(tds.context); //[object HTMLDocument]
//如果是IE浏览器,则返回[object]
var tds = $("td", document.body);
alert(tds.context.nodeName); //BODY
Js代码
get()
取得所有匹配的 DOM 元素集合。
这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。
如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。
Js代码
get(index)
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
Js代码
index(subject)
搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。
例如:
var tr = $("tr").index($("#tr_1")[0]);
alert(tr); //1
var tr = $("tr").index($("#tr_1"));
alert(tr); //1
4.数据缓存
Js代码
data(name)
返回元素上储存的相应名字的数据,可以用data(name, value)来设定。
如果jQuery集合指向多个元素,那将只返回第一个元素的对应数据。
这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。jQuery.data是1.2.3版的新功能。你可以在很多地方使用这个函数,另外jQuery UI里经常使用这个函数。
Js代码
data(name,value)
在元素上存放数据,同时也返回value。
如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。
这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。
$('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');
使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某个元素存储数据,使用data方法可以避免在DOM中存储数据。
Js代码
removeData(name)
在元素上移除存放的数据
与$(...).data(name, value)函数作用相反
Js代码
queue(name[,callback | queue])
dequeue(name) 从队列最前端移除一个队列函数,并执行他。
jQuery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用。特别animate动画,ajax,以及timeout等需要一定时间的函数。
queue和dequeue的过程主要是:
a.用queue把函数加入队列(通常是函数数组)
b.用dequeue将函数数组中的第一个函数取出,并执行(用shift()方法取出并执行)
也就意味着当再次执行dequeue的时候,得到的是另一个函数了
同时也意味着,如果不执行dequeue,那么队列中的下一个函数永远不会执行
对于一个元素上执行animate方法加动画,jQuery内部也会将其加入名为 fx 的函数队列
而对于多个元素要依次执行动画,则必须我们手动设置队列进行了。
queue(name)当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);
当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时,它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).
Html代码
<style type="text/css">
div{
border:2px solid green;
width:18px;
height:18px;
left:0px;
background-color:red;
position:absolute
}
</style>
<div ).hide();