JQuery无疑是现在比较流行的js开发库之一,在web开发,特别是服务器组件开发中起到了很大的作用。而且在一些公司的面试中,问及js
就问你,用过JQuery吗?没用过,那种眼神似乎你低人一等似的。废话少说,优秀的东西还是学习学习的,不管在做项目的时候,是否为了公司
整体的需要不用这个,还是值得我们好好研究下。
$(html)
功能:根据参数html创建DOM元素
返回:JQuery对象
参数:要创建的html
例子:将html添加到body中
$("<div><p>Hello</p></div>").appendTo("body")
功能:根据参数html创建DOM元素
返回:JQuery对象
参数:要创建的html
例子:将html添加到body中
$("<div><p>Hello</p></div>").appendTo("body")
$(elems)
功能:包装jQuery一个或多个DOM元素,这个函数也接受xml Document元素或Window Object作为有效的参数,甚至不是Dom元素
返回:jQuery对象
参数:dom元素或dom元素数组
例子:
设定页面的背景色
$(document.body).css( "background", "black" );
隐藏指定表单中的input元素
$( myForm.elements ).hide()
功能:包装jQuery一个或多个DOM元素,这个函数也接受xml Document元素或Window Object作为有效的参数,甚至不是Dom元素
返回:jQuery对象
参数:dom元素或dom元素数组
例子:
设定页面的背景色
$(document.body).css( "background", "black" );
隐藏指定表单中的input元素
$( myForm.elements ).hide()
$(fn)
功能:$(document).ready()的快捷方式,允许你绑定一个的函数到页面完成加载的时候执行
返回:jQuery对象
参数:Dom ready后要执行的函数
例子:
$(function(){
// Document is ready
});
功能:$(document).ready()的快捷方式,允许你绑定一个的函数到页面完成加载的时候执行
返回:jQuery对象
参数:Dom ready后要执行的函数
例子:
$(function(){
// Document is ready
});
$(expr, context)
功能:根据css或基本的xpath选择器查找元素
返回:jQuery对象
参数:
expr (String): 要搜索的表达式
context (Element|jQuery): (可选的)dom元素,Document或jQuery对象,作为当前选择的上下文
例子:
jQuery Code
$("div > p")
Before
<p>one</p> <div><p>two</p></div> <p>three</p>
Result:
[ <p>two</p> ]
Example
Searches for all inputs of type radio within the first form in the document
jQuery Code
$("input:radio", document.forms[0])
功能:根据css或基本的xpath选择器查找元素
返回:jQuery对象
参数:
expr (String): 要搜索的表达式
context (Element|jQuery): (可选的)dom元素,Document或jQuery对象,作为当前选择的上下文
例子:
jQuery Code
$("div > p")
Before
<p>one</p> <div><p>two</p></div> <p>three</p>
Result:
[ <p>two</p> ]
Example
Searches for all inputs of type radio within the first form in the document
jQuery Code
$("input:radio", document.forms[0])
$.extend(prop)
功能:扩展jQuery自身,添加函数到jQuery命名空间或插件方法
返回:Object
参数:
例子:
Adds two plugin methods.
jQuery Code
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();
Adds two functions into the jQuery namespace
jQuery Code
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
功能:扩展jQuery自身,添加函数到jQuery命名空间或插件方法
返回:Object
参数:
例子:
Adds two plugin methods.
jQuery Code
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();
Adds two functions into the jQuery namespace
jQuery Code
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
each(fn)
功能:遍历元素并添加响应函数
返回:jQuery对象
参数:fn (Function): A function to execute
例子:
Iterates over two images and sets their src property
jQuery Code
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
Before
<img/><img/>
Result:
<img src="test0.jpg"/><img src="test1.jpg"/>
功能:遍历元素并添加响应函数
返回:jQuery对象
参数:fn (Function): A function to execute
例子:
Iterates over two images and sets their src property
jQuery Code
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
Before
<img/><img/>
Result:
<img src="test0.jpg"/><img src="test1.jpg"/>
eq(pos)
功能:返回指定位置的一个元素,位置是指匹配的元素从0到length – 1的位置
返回:jQuery对象
参数:pos (Number): The index of the element that you wish to limit to.
例子:
jQuery Code
$("p").eq(1)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>So is this</p> ]
功能:返回指定位置的一个元素,位置是指匹配的元素从0到length – 1的位置
返回:jQuery对象
参数:pos (Number): The index of the element that you wish to limit to.
例子:
jQuery Code
$("p").eq(1)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>So is this</p> ]
get()
功能:返回所有匹配的dom元素
返回:元素数组
参数:
例子:
Selects all images in the document and returns the DOM Elements as an Array
jQuery Code
$("img").get();
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
功能:返回所有匹配的dom元素
返回:元素数组
参数:
例子:
Selects all images in the document and returns the DOM Elements as an Array
jQuery Code
$("img").get();
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
get(num)
功能:返回指定索引位置的dom元素
返回:DOM Element
参数:num (Number): Access the element in the Nth position.
例子:
Selects all images in the document and returns the first one
jQuery Code
$("img").get(0);
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
<img src="test1.jpg"/>
功能:返回指定索引位置的dom元素
返回:DOM Element
参数:num (Number): Access the element in the Nth position.
例子:
Selects all images in the document and returns the first one
jQuery Code
$("img").get(0);
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
<img src="test1.jpg"/>
gt(pos)
功能:返回某个位置之后的元素
返回:jQuery对象
参数:pos (Number): Reduce the set to all elements after this position.
例子:
jQuery Code
$("p").gt(0)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>So is this</p> ]
功能:返回某个位置之后的元素
返回:jQuery对象
参数:pos (Number): Reduce the set to all elements after this position.
例子:
jQuery Code
$("p").gt(0)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>So is this</p> ]
lt(pos)
功能:返回某个位置之前的元素
返回:jQuery对象
参数:pos (Number): Reduce the set to all elements below this position.
例子:
jQuery Code
$("p").lt(1)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>This is just a test.</p> ]
功能:返回某个位置之前的元素
返回:jQuery对象
参数:pos (Number): Reduce the set to all elements below this position.
例子:
jQuery Code
$("p").lt(1)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>This is just a test.</p> ]
size()
功能:匹配元素的个数
返回:
参数:
例子:
jQuery Code
$("img").size();
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2
功能:匹配元素的个数
返回:
参数:
例子:
jQuery Code
$("img").size();
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2
length
功能:匹配元素的个数,同size函数
返回:
参数:
例子:
jQuery Code
$("img").length;
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2
功能:匹配元素的个数,同size函数
返回:
参数:
例子:
jQuery Code
$("img").length;
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2
index(subject)
功能:搜索所有匹配的元素,返回索引值
返回:
参数:subject (Element): Object to search for
例子:
Returns the index for the element with ID foobar
jQuery Code
$("*").index( $('#foobar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
0Returns the index for the element with ID foo within another element
jQuery Code
$("*").index( $('#foo')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
2
Returns -1, as there is no element with ID bar
jQuery Code
$("*").index( $('#bar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
-1
功能:搜索所有匹配的元素,返回索引值
返回:
参数:subject (Element): Object to search for
例子:
Returns the index for the element with ID foobar
jQuery Code
$("*").index( $('#foobar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
0Returns the index for the element with ID foo within another element
jQuery Code
$("*").index( $('#foo')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
2
Returns -1, as there is no element with ID bar
jQuery Code
$("*").index( $('#bar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
-1
$.noConflict()
功能:避免和以前移入的jQuery库的冲突
返回:undefined
参数:
例子:
Maps the original object that was referenced by $ back to $
jQuery Code
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});