jQuery 中 $( ) 函數的用法總結

摘要

jQuery對象: 具有jquery框架設置的所有功能的調用者, 就是該框架的對象
$又是什么?: $就是jQuery對象, jQuery對象為window的全局屬性, 所以可以直接使用

如何自定義jQuery對象: 如用 JQ 替換 jQuery | $
var JQ = jQuery.noConflict();  //這是jquery源碼中提供的方法
JQ('.box').html("<b>哈哈</b>");

jQuery(selector,context)

簡要的說是：接收一個css選擇器表達式(selector)和可選的選擇器上下文(context),返回一個包含了匹配的DOM元素的jQuery對象　　

默認情況下，對匹配元素的查找都是從根元素ducument對象開始，也就是說查找范圍是整棵文檔樹。但是如果給定了上下文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都會變紅
$('span','.wrap').css('background-color','red');//只有.wrap中的span會變紅

jQuery(html,ownerDocument) ，jQuery(html,props)

用所提供的html代碼創建DOM元素對於jQuery(html,ownerDocument)，參數html可以是單標簽或者是多層標簽之間的嵌套。
第二個參數用於創建新DOM元素的文檔對象，如果不傳入則默認為當前的文檔對象

 

//單標簽  兩種方式都可以往body中插入div
/*
 *   1  $('<div>').appendTo('body');
 *   2  $('<div></div>').appendTo('body');
 */
// 多標簽嵌套
 $('<div><span>dfsg</span></div>').appendTo('body');

另外:對於單標簽，jQuery(html,props)，props是一個包含屬性和事件的普通的對象，用法如下

$('<div>我是div</div>',{
    title:'我是新的div',
    click:function(){
        $(this).css('color','red');
        console.log(this);
    }
}).appendTo('body');

jQuery(element or elementsArray)

如果傳入一個DOM元素或者是DOM元素的數組，則把DOM元素封裝到jQuery對象中並返回。

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數組
var aLi=document.getElementsByTagName('li');
    aLi=[].slice.call(aLi);//集合轉數組
    var $aLi=$(aLi);
    $aLi.html('我是jQuery對象');//所有的li的內容都變成'我是jQuery對象'

jQuery(object)

如果傳入的是一個object對象，則把該對象封裝到jQuery對象中並返回

var obj={name:'謙龍'};
var $obj=$(obj);//封裝成jQuery對象
//綁定自定義事件
$obj.on('say',function(){
    console.log(this.name)//輸出謙龍
});
$obj.trigger('say');

jQuery(callback)

當傳進去的參數是函數的時候，則在document對象上綁定一個ready事件監聽函數，當DOM結構加載完成的時候執行

$(function(){
})
//以上代碼和下面的效果是一樣的
$(document).ready(function(){
    ...//代碼
})

jQuery(jQuery object)

當傳進去的參數是一個jQuery對象的時候，則創建該jQuery對象的一個副本並返回。副本與傳入的jQuery對象引用完全相同的元素

var aLi=$('li');
var copyLi=$(aLi);//創建一個aLi的副本
console.log(aLi);
console.log(copyLi);
console.log(copyLi===aLi);

jQuery()

如果不傳入任何的參數，則返回一個空的jQuery對象，屬性length為0注意這個功能可以用來復用jQuery對象，
例如可以創建一個空的jQuery對象，然后在需要的時候先手動修改其中的元素，然后在調用jQuery方法。從而避免重復創建jQuery對象