ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery で $() 関数を使用する 7 つの方法についての簡単な説明

jQuery で $() 関数を使用する 7 つの方法についての簡単な説明

PHPz
リリース: 2021-05-28 18:15:33
転載
2334 人が閲覧しました

この記事では、jQuery の $() 関数の 7 つの使用法を紹介します。困っている友人が参考になれば幸いです。

jQuery で $() 関数を使用する 7 つの方法についての簡単な説明

jQuery オブジェクトは、連続整数プロパティと一連の jQuery メソッドを含む配列のようなオブジェクトです。すべての操作を jQuery() 関数にラップし、統一された (唯一の) 操作の入り口を形成します。
非常に頻繁に使用する関数の 1 つは、$() または jQuery() です。これを呼び出すと、渡されたパラメーターに応じてさまざまな効果が得られます。

1 jQuery(selector,context)

つまり、CSS セレクター式 (selector) とオプションのセレクター コンテキスト (context) を受け取り、jQuery を返します。一致する DOM 要素を含むオブジェクト。

デフォルトでは、一致する要素の検索はルート要素の文書オブジェクトから開始されます。これは、検索範囲が文書ツリー全体であることを意味します。ただし、コンテキスト 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

    $(&#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 は単一のタグ、またはタグ間の複数レベルのネスト。 2 番目のパラメータは、新しい 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)

渡されたパラメータが関数の場合、DOM のときに Ready イベント リスニング関数がドキュメント オブジェクトにバインドされます。構造体が読み込まれ、実行します。

    $(function(){
    
    })    //以上代码和下面的效果是一样的
    $(document).ready(function(){
        ...//代码
    })
ログイン後にコピー

6 jQuery(jQuery object)

渡されたパラメータが jQuery オブジェクトの場合、jQuery が作成されます。オブジェクトを取得して返します。コピーは、

    var aLi=$(&#39;li&#39;);
    var copyLi=$(aLi);//创建一个aLi的副本
    console.log(aLi);
    console.log(copyLi);
    console.log(copyLi===aLi);
ログイン後にコピー

jQuery で $() 関数を使用する 7 つの方法についての簡単な説明

7 jQuery()

が渡されなかった場合、渡された jQuery オブジェクトとまったく同じ要素を参照します。どのパラメータについても、属性長 0

を持つ空の jQuery オブジェクトが返されます。たとえば、この関数を使用して jQuery オブジェクトを再利用できることに注意してください。必要に応じて、まず要素を手動で変更してから、jQuery メソッドを呼び出します。これにより、jQuery オブジェクトの繰り返し作成が回避されます。

推奨される関連ビデオ チュートリアル: jQuery チュートリアル (ビデオ)

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート