jQueryの使い方は？ jQueryセレクターとは何ですか?

この記事の内容はjQueryの使い方を紹介するものです。 jQueryセレクターとは何ですか? jQuery ファイル ライブラリの使用法、基本的な構文の使用法、および jQuery セレクターを全員に理解させます。困っている友人は参考にしていただければ幸いです。

1. 使用方法

jQuery ライブラリは、すべての jQuery 関数を含む JavaScript ファイル内にあります。

Web ページで jQuery を使用する必要がある場合は、最初に jQuery の js ファイルを Web ページに導入する必要があります。

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>

2. jQuery 構文

jQuery 構文は、HTML 要素を選択し、選択した要素に対して特定の操作を実行します。 [おすすめの関連ビデオチュートリアル: jQuery チュートリアル ]

基本的な文法形式:

 $(selector).action()

例:

$("p").hide()    // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素

書き方:

すべての jQuery 関数は document.ready 関数内にあります。以下に示すように。

これは、ドキュメントが完全にロードされる (準備が整う) 前に jQuery コードを実行できないようにするためです。つまり、DOM がロードされるまで DOM を操作できません。

ドキュメントが完全にロードされる前に関数を実行すると、操作が失敗する可能性があります。

    $(document).ready(function(){     
       // 代码部分写在这里     
    });

は次のように省略することもできます:

   $(function(){         
      // 这里写代码         
   });

例:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    </script>


    <button>点击</button>
    <div>Hello</div>

3 基本セレクター

#(1)

要素セレクター: jQuery 要素セレクターは、名前に基づいて要素を選択します。

例: 要素セレクターを使用して、すべての

要素を選択し、非表示にします。

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>


    <button>点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div>Hello</div>

(2)

#id ​​selector: jQuery #id selector は、HTML 要素の id 属性を通じて指定された要素を選択します。

ページ内の要素の ID は一意である必要があるため、ページ内の唯一の要素を選択する場合は、#id セレクターを使用する必要があります。

例: # を使用します。 id セレクターを使用して、 id="myDiv1 " 要素を選択して非表示にします。

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>


    <button>点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div>Hello</div>

(3)

.class selector: jQuery クラス セレクターは、指定されたクラスを通じて要素を検索できます。

例: クラス セレクターを使用して、Class="myClass1" の要素を選択し、それを非表示にします。

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>


    <button>点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div>Hello</div>
    <div>你好</div>

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がjQueryの使い方は？ jQueryセレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。