A brief discussion on 7 ways to use the $() function in jQuery

This article will introduce to you 7 uses of the $() function in jQuery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

The jQuery object is an array-like object that contains continuous integer properties and a series of jQuery methods. It wraps all operations in a jQuery() function, forming a unified (and only) operation entrance.
One of the functions we use very frequently is $() or jQuery(). When we call it, it will achieve different effects depending on the parameters passed in.

1 jQuery(selector,context)

In short: receive a css selector expression (selector) and optional selector context (context), returns a jQuery object containing the matching DOM element.

By default, the search for matching elements starts from the root element ducument object, which means the search scope is the entire document tree. But if context context is given, search for

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) in the specified context , jQuery(html,props)

Creates a DOM element with the provided html code

For jQuery(html,ownerDocument), the parameter html can be a single Tags or multiple levels of nesting between tags. The second parameter is used to create the document object of the new DOM element. If not passed in, it defaults to the current document object.

    //单标签  两种方式都可以往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;);

In addition: for single tags, jQuery (html, props), props is a common object containing properties and events, and the usage is as follows. (This usage needs to be verified. Please let me know if you know how to use it. I will be grateful)

        $(&#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)

If a DOM is passed in element or an array of DOM elements, encapsulate the DOM elements into a jQuery object and return it.

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)

If an object is passed in Object, encapsulate the object into a jQuery object and return it.

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

5 jQuery(callback)

When the parameter passed in is a function, a ready event listening function is bound to the document object. When the DOM structure is loaded, execute

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

6 jQuery(jQuery object)

When the parameter passed in is a jQuery object, the jQuery is created Make a copy of the object and return it. The copy references the exact same element as the jQuery object passed in

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

7 jQuery()

if not passed in For any parameter, an empty jQuery object is returned with the attribute length 0

Note that this function can be used to reuse jQuery objects. For example, you can create an empty jQuery object and then use it when needed. First manually modify the elements, and then call the jQuery method. This avoids repeated creation of jQuery objects.

Recommended related video tutorials: jQuery Tutorial (Video)