jQuery에서 $() 함수를 사용하는 7가지 방법에 대한 간략한 설명

이 글에서는 jQuery에서 $() 함수의 7가지 용도를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

jQuery 객체는 연속적인 정수 속성과 일련의 jQuery 메서드를 포함하는 배열과 유사한 객체입니다. 모든 작업을 jQuery() 함수로 래핑하여 통합된(유일한) 작업 입구를 형성합니다.
우리가 자주 사용하는 함수 중 하나는 $() 또는 jQuery()입니다. 이를 호출하면 전달된 매개변수에 따라 다른 효과가 나타납니다.

1 jQuery(selector,context)

간단히 말하면: CSS 선택기 표현식(selector)과 선택적 선택기 컨텍스트(context)를 받고 jQuery를 반환합니다. 일치하는 DOM 요소를 포함하는 객체입니다.

기본적으로 일치하는 요소 검색은 루트 요소 ducument 개체에서 시작됩니다. 즉, 검색 범위는 전체 문서 트리입니다. 그러나 context context가 주어지면 지정된 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  $(&#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元素
         $('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)

전달된 매개변수가 함수인 경우 준비된 이벤트 수신 함수가 DOM에 바인딩됩니다. 구조체가 로드되면 실행

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

6 jQuery(jQuery object)

전달된 매개변수가 jQuery 객체인 경우 jQuery가 생성됩니다. 객체를 가져와서 반환합니다. 통과하지 못한 경우 복사본은

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

7 jQuery()

에 전달된 jQuery 객체와 정확히 동일한 요소를 참조합니다. in 임의의 매개변수에 대해 속성 길이가 0인 빈 jQuery 객체가 반환됩니다.

이 함수를 사용하여 jQuery 객체를 재사용할 수 있습니다. 예를 들어 빈 jQuery 객체를 만든 다음 사용할 수 있습니다. 필요할 때 먼저 요소를 수동으로 수정한 다음 jQuery 메서드를 호출하세요. 이렇게 하면 jQuery 객체가 반복적으로 생성되는 것을 방지할 수 있습니다.

추천 관련 동영상 튜토리얼: jQuery 튜토리얼(동영상)