首頁  >  文章  >  web前端  >  淺談7種jQuery中$()函數的使用方法

淺談7種jQuery中$()函數的使用方法

PHPz
PHPz轉載
2016-05-16 15:42:502280瀏覽

這篇文章跟大家介紹一下jQuery中$()函數的7種用法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

淺談7種jQuery中$()函數的使用方法

jQuery對像是一個類別數組的對象,含有連續的整形屬性以及一系列的jQuery方法。它把所有的操作都包裝在一個jQuery()函數中,形成了統一(也是惟一)的操作入口。
其中我們用的非常頻繁的一個函數是$()或者說是jQuery(),當我們呼叫他的時候會根據傳入的參數的不同而達到不同的效果。

1 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

    $(&#39;span&#39;).css(&#39;background-color&#39;,&#39;red&#39;);//所有的span都会变红
    $(&#39;span&#39;,&#39;.wrap&#39;).css(&#39;background-color&#39;,&#39;red&#39;);//只有.wrap中的span会变红

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

用所提供的html程式碼建立DOM元素

對於jQuery(html,ownerDocument),參數html可以是單單>

對於jQuery(html,ownerDocument),參數html可以是單單標籤或是多層標籤之間的嵌套。第二個參數用於建立新DOM元素的文檔對象,如果不傳入則預設為目前的文檔對象。
    //单标签  两种方式都可以往body中插入div
    /*   
     *   1  $(&#39;<div>&#39;).appendTo(&#39;body&#39;);
     *   2  $(&#39;<div></div>&#39;).appendTo(&#39;body&#39;);  
     */
    // 多标签嵌套
     $(&#39;<div><span>dfsg</span></div>&#39;).appendTo(&#39;body&#39;);

另外:對於單標籤,jQuery(html,props),props是一個包含屬性和事件的普通的對象,用法如下。 (用法有待考證,請知道這一用法的童鞋告知一下,感激不盡)
        $(&#39;<div>我是div</div>&#39;,{
            title:&#39;我是新的div&#39;,
            click:function(){
                $(this).css(&#39;color&#39;,&#39;red&#39;);
                console.log(this);
            }
        }).appendTo(&#39;body&#39;);

3 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元素
         $(&#39;li&#39;).each(function(index,ele){
                $(ele).on(&#39;click&#39;,function(){
                    $(this).css(&#39;background&#39;,&#39;red&#39;);//这里的DOM元素就是this
                })
        })
        
        //传入DOM数组
        var aLi=document.getElementsByTagName(&#39;li&#39;);
            aLi=[].slice.call(aLi);//集合转数组
            var $aLi=$(aLi);
            $aLi.html(&#39;我是jQuery对象&#39;);//所有的li的内容都变成&#39;我是jQuery对象&#39;

4 jQuery(object)

4 jQuery(object)
    var obj={name:&#39;谦龙&#39;};
    var $obj=$(obj);//封装成jQuery对象
    //绑定自定义事件
    $obj.on(&#39;say&#39;,function(){
        console.log(this.name)//输出谦龙
    });
    $obj.trigger(&#39;say&#39;);

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

5 jQuery(callback)
    $(function(){
    
    })    //以上代码和下面的效果是一样的
    $(document).ready(function(){
        ...//代码
    })

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

6 jQuery(jQuery object)
    var aLi=$('li');
    var copyLi=$(aLi);//创建一个aLi的副本
    console.log(aLi);
    console.log(copyLi);
    console.log(copyLi===aLi);

當傳進去的參數是一個jQuery物件的時候,則建立該jQuery物件的一個副本並傳回。副本與傳入的jQuery物件引用完全相同的元素淺談7種jQuery中$()函數的使用方法

7 jQuery()

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

注意這個功能可以用來復用jQuery對象,例如可以創建一個空的jQuery對象,然後在需要的時候先手動修改其中的元素,然後在呼叫jQuery方法。從而避免重複創建jQuery物件。

相關影片教學推薦:jQuery教學(影片)
陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除