1 jQuery(selector,context)
簡(jiǎn)要的說(shuō)是:接收一個(gè)css選擇器表達(dá)式(selector)和可選的選擇器上下文(context),返回一個(gè)包含了匹配的DOM元素的jQuery對(duì)象弛姜。
默認(rèn)情況下勋陪,對(duì)匹配元素的查找都是從根元素ducument對(duì)象開(kāi)始堵泽,也就是說(shuō)查找范圍是整棵文檔樹(shù)厅贪。但是如果給定了上下文context孝情,則在指定上下文中查找
html
<span>body span</span>
<span>body span</span>
<span>body span</span>
<div class="wrap">
<span>wrap span</span>
<span>wrap span</span>
<span>wrap span</span>
</div>
js
$('span').css('background-color','red');//所有的span都會(huì)變紅
$('span','.wrap').css('background-color','red');//只有.wrap中的span會(huì)變紅
2 jQuery(html,ownerDocument) 竖螃、jQuery(html,props)
用所提供的html代碼創(chuàng)建DOM元素對(duì)于jQuery(html,ownerDocument)记舆,參數(shù)html可以是單標(biāo)簽或者是多層標(biāo)簽之間的嵌套。第二個(gè)參數(shù)用于創(chuàng)建新DOM元素的文檔對(duì)象凳鬓,如果不傳入則默認(rèn)為當(dāng)前的文檔對(duì)象茁肠。
//單標(biāo)簽 兩種方式都可以往body中插入div
/*
* 1 $('<div>').appendTo('body');
* 2 $('<div></div>').appendTo('body');
*/
// 多標(biāo)簽嵌套
$('<div><span>dfsg</span></div>').appendTo('body');
另外:對(duì)于單標(biāo)簽,jQuery(html,props)缩举,props是一個(gè)包含屬性和事件的普通的對(duì)象垦梆,用法如下。
$('<div>我是div</div>',{
title:'我是新的div',
click:function(){
$(this).css('color','red');
console.log(this);
}
}).appendTo('body');
3 jQuery(element or elementsArray)
如果傳入一個(gè)DOM元素或者是DOM元素的數(shù)組仅孩,則把DOM元素封裝到j(luò)Query對(duì)象中并返回托猩。
html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
js
// 傳入DOM元素
$('li').each(function(index,ele){
$(ele).on('click',function(){
$(this).css('background','red');//這里的DOM元素就是this
})
})
//傳入DOM數(shù)組
var aLi=document.getElementsByTagName('li');
aLi=[].slice.call(aLi);//集合轉(zhuǎn)數(shù)組
var $aLi=$(aLi);
$aLi.html('我是jQuery對(duì)象');//所有的li的內(nèi)容都變成'我是jQuery對(duì)象'
4 jQuery(object)
如果傳入的是一個(gè)object對(duì)象,則把該對(duì)象封裝到j(luò)Query對(duì)象中并返回辽慕。
var obj={name:'謙龍'};
var $obj=$(obj);//封裝成jQuery對(duì)象
//綁定自定義事件
$obj.on('say',function(){
console.log(this.name)//輸出謙龍
});
$obj.trigger('say');
5 jQuery(callback)
當(dāng)傳進(jìn)去的參數(shù)是函數(shù)的時(shí)候京腥,則在document對(duì)象上綁定一個(gè)ready事件監(jiān)聽(tīng)函數(shù),當(dāng)DOM結(jié)構(gòu)加載完成的時(shí)候執(zhí)行
$(function(){
})
//以上代碼和下面的效果是一樣的
$(document).ready(function(){
...//代碼
})
6 jQuery(jQuery object)
當(dāng)傳進(jìn)去的參數(shù)是一個(gè)jQuery對(duì)象的時(shí)候溅蛉,則創(chuàng)建該jQuery對(duì)象的一個(gè)副本并返回公浪。副本與傳入的jQuery對(duì)象引用完全相同的元素
var aLi=$('li');
var copyLi=$(aLi);//創(chuàng)建一個(gè)aLi的副本
console.log(aLi);
console.log(copyLi);
console.log(copyLi===aLi);
7 jQuery()
如果不傳入任何的參數(shù),則返回一個(gè)空的jQuery對(duì)象船侧,屬性length為0注意這個(gè)功能可以用來(lái)復(fù)用jQuery對(duì)象因悲,例如可以創(chuàng)建一個(gè)空的jQuery對(duì)象,然后在需要的時(shí)候先手動(dòng)修改其中的元素勺爱,然后在調(diào)用jQuery方法晃琳。從而避免重復(fù)創(chuàng)建jQuery對(duì)象。