jQuery中$()函數(shù)的使用方法有哪些

這篇文章給大家分享的是有關(guān)jQuery中$()函數(shù)的使用方法有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

jQuery對象是一個類數(shù)組的對象，含有連續(xù)的整形屬性以及一系列的jQuery方法。它把所有的操作都包裝在一個jQuery()函數(shù)中，形成了統(tǒng)一(也是惟一)的操作入口。
其中我們用的非常頻繁的一個函數(shù)是$()或者說是jQuery()，當(dāng)我們調(diào)用他的時候會根據(jù)傳入的參數(shù)的不同而達(dá)到不同的效果。

接下來會一一說一下這7種用法，歡迎大家指正其中不正確的地方。

1 jQuery(selector,context)

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

默認(rèn)情況下，對匹配元素的查找都是從根元素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會變紅

2 jQuery(html,ownerDocument) 、jQuery(html,props)

用所提供的html代碼創(chuàng)建DOM元素

對于jQuery(html,ownerDocument)，參數(shù)html可以是單標(biāo)簽或者是多層標(biāo)簽之間的嵌套。第二個參數(shù)用于創(chuàng)建新DOM元素的文檔對象，如果不傳入則默認(rèn)為當(dāng)前的文檔對象。

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

另外:對于單標(biāo)簽，jQuery(html,props)，props是一個包含屬性和事件的普通的對象，用法如下。(該用法有待考證，請知道這一用法的童鞋告知一下，感激不盡)

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

3 jQuery(element or elementsArray)

如果傳入一個DOM元素或者是DOM元素的數(shù)組，則把DOM元素封裝到j(luò)Query對象中并返回。

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對象');//所有的li的內(nèi)容都變成'我是jQuery對象'

4 jQuery(object)

如果傳入的是一個object對象，則把該對象封裝到j(luò)Query對象中并返回。

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

5 jQuery(callback)

當(dāng)傳進(jìn)去的參數(shù)是函數(shù)的時候，則在document對象上綁定一個ready事件監(jiān)聽函數(shù)，當(dāng)DOM結(jié)構(gòu)加載完成的時候執(zhí)行

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

6 jQuery(jQuery object)

當(dāng)傳進(jìn)去的參數(shù)是一個jQuery對象的時候，則創(chuàng)建該jQuery對象的一個副本并返回。副本與傳入的jQuery對象引用完全相同的元素

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

7 jQuery()

如果不傳入任何的參數(shù)，則返回一個空的jQuery對象，屬性length為0

注意這個功能可以用來復(fù)用jQuery對象，例如可以創(chuàng)建一個空的jQuery對象，然后在需要的時候先手動修改其中的元素，然后在調(diào)用jQuery方法。從而避免重復(fù)創(chuàng)建jQuery對象。

感謝各位的閱讀！關(guān)于“jQuery中$()函數(shù)的使用方法有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！