jQuery中$()函数的7种用法汇总

媒介

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

    $('span').css('background-color','red');//一切的span都邑变红
    $('span','.wrap').css('background-color','red');//只要.wrap中的span会变红

2 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');

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元素
         $('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对象'
            

         

4 jQuery(object)

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

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

5 jQuery(callback)

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

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

6 jQuery(jQuery object)

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

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

《jQuery中$()函数的7种用法汇总》

7 jQuery()

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

注重这个功用能够用来复用jQuery对象,比方能够建立一个空的jQuery对象,然后在须要的时刻先手动修正个中的元素,然后在挪用jQuery要领。从而防止反复建立jQuery对象。

    原文作者:谦龙
    原文地址: https://segmentfault.com/a/1190000004003037
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞