首頁 > web前端 > js教程 > 主體

7種jQuery $()函數的使用方法(總結)

青灯夜游
發布: 2020-12-30 09:11:36
轉載
2623 人瀏覽過

7種jQuery $()函數的使用方法(總結)

推薦教學:jQuery教學

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

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

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可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新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)

如果传入的是一个object对象,则把该对象封装到jQuery对象中并返回。

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

5 jQuery(callback)

当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行

    $(function(){
    
    })
    //以上代码和下面的效果是一样的
    $(document).ready(function(){
        ...//代码
    })
登入後複製

6 jQuery(jQuery object)

当传进去的参数是一个jQuery对象的时候,则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素

    var aLi=$(&#39;li&#39;);
    var copyLi=$(aLi);//创建一个aLi的副本
    console.log(aLi);
    console.log(copyLi);
    console.log(copyLi===aLi);
登入後複製

7種jQuery $()函數的使用方法(總結)

7 jQuery()

如果不传入任何的参数,则返回一个空的jQuery对象,属性length为0

注意这个功能可以用来复用jQuery对象,例如可以创建一个空的jQuery对象,然后在需要的时候先手动修改其中的元素,然后在调用jQuery方法。从而避免重复创建jQuery对象。

更多编程相关知识,请访问:编程教学!!

以上是7種jQuery $()函數的使用方法(總結)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板