jQueryの使い方は？ jQueryセレクターとは何ですか?-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2018-11-13 10:39:38

転載

2213 人が閲覧しました

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

1. 使用方法

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
</head>
<body>
</body>
</html>

ログイン後にコピー

2. jQuery 構文

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

基本的な文法形式:

 $(selector).action()

ログイン後にコピー

例:

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

ログイン後にコピー

書き方:

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

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <div id="myDiv1">Hello</div>
</body>
</html>

ログイン後にコピー

3 基本セレクター

#(1)

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

ログイン後にコピー

(2)

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

ログイン後にコピー

(3)

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>

ログイン後にコピー