jQueryの学習-day01

最初JQコード

3 <HEAD>
 4      <タイトル> </タイトル>
 5      <メタのcharset = "UTF-8">
 6      <スクリプトSRC = "../ JS / jQueryの-1.12.4.js"> </ SCRIPT>
 7      <SCRIPT >
 8つの      $（ドキュメント）.ready（関数（）{
 9          // 所有的にjQuery代码写在这里面
10          アラート（ "ハローココ" ）;
 11      }）;
12 </スクリプト>
 13 </ HEAD>

2.エントリ関数JSとJQの主な違い

<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <TITLE> </ TITLE> 
    <スクリプトタイプ= "テキスト/ JavaScriptを" SRC = "../ JSを/ jQueryの-1.12.4.js"> </ SCRIPT> 
    <SCRIPT =タイプ"テキスト/ JavaScriptを"> 
        window.onload = 関数（）{
         // これはネイティブJSある
        // のJSと元のページのノードを取得1 
        のvar IMG = document.getElementsByTagName（ "IMG"を）; 
        はconsole.log（IMG） ; 

        // 2. Jsのネイティブ関数のエントリが幅とDOM要素の高さを取得することができる
        VARの幅= window.getComputedStyleが（IMG）.width; 
        はconsole.log（ "オンロード" 、幅）; 
        }
        
     </ SCRIPT>
    <！ -  
        ロードJSネイティブモードエントリー機能と異なるJQ
        DOM要素がロードされるまで、ネイティブJSは待機します、と絵が実行するためにロードされます
        実行されますJQは、DOMエレメントがロードされるまで待機しますが、絵もロードされるまで待つことはありません
      > - 
     <！ - 
        1 あなたはネイティブJSを記述する場合。後前上書きプログラム入口複数の機能
         2をバックの前面を覆っていない、.JQ関数複数の入口の調製に
       - > 
    <スクリプトタイプ=「テキスト/ JavaScriptを」> 
        
        $（ドキュメント）.ready（関数（ ）{
         // これはjQueryのです
        // jQueryの1.取得のページノード
            のvar $のIMG = $（ "IMG"）[0 ]; 
            はconsole.log（$ IMG）; 

        // 2.機能は、入口JQを介して取得することはできません幅とDOM要素の高さ
        // VAR幅= $ $ img.width（）; 
        // はconsole.log（ "READY" $幅）; 
        // }）; 

        // 3.フロントの背面をカバーしていません
        $（ドキュメント）.ready（関数（）{ 
            アラート（ "hello1" ）; 
        }）; 
        $（ドキュメント）.ready（関数（）{ 
            アラート（ "hello2" ）; 
        }）; 
    }）; 
    </スクリプト> 
</ HEAD> 
<BODY> 
<IMG SRC = "https://i0.hdslb.com/bfs/sycp/creative_img/201907/576c9c5cc88aeae2a153a45700cd3eb6.jpg"> 
</ BODY> 
</ HTML>

紛争のJQ

。1 <！DOCTYPE HTML>
 2 <HTML>
 3 <ヘッド>
 4      <タイトル> </タイトル>
 。5      ます。<script type = "text / JavaScriptを" SRCは= "../ JS / jQueryの-1.12.4.js"> < /スクリプト>
 6。      <スクリプトタイプは=「テキスト/ JavaScriptを」>
 7。         / * 
8。         $使用する権利の1リリース
 9          注意事項を：準備$を使用する他のJQコードの作成前にリリースした後に解放する操作は使用しないでくださいJQ
 10          jQuery.noConflict（）;
 11  
12は、         2アクセスカスタムシンボル
 13がある         * / 
14  
15          VARハッピー= jQuery.noConflict（）。
16          ハッピー（関数（）{
 17             警告（「ハローココ」）;
18          }）;
19      </スクリプト>
 20 </ HEAD>
 21 <body>
 22  
23 </ BODY>
 24 </ HTML>

エントリー機能

。1 <！DOCTYPE HTML>
 2 <HTML>
 3 <ヘッド>
 4      <タイトル> </タイトル>
 。5      ます。<script type = "text / JavaScriptを" SRCは= "../ JS / jQueryの-1.12.4.js"> < /スクリプト>
 6。      <スクリプトタイプ= "テキスト/ JavaScriptを">
 7。         // $（）; JQコア関数呼び出しを表す
。8  
。9          // 1.関数は、受信された
10          $（関数（）{
 11              アラート（ "COOC"を）;
 12である 
13れる         // 2文字列受け
14  
15          // 2。1ストリング選択受け
16          //はDOM要素で見つかったオブジェクトに格納されているJQオブジェクトを返す
。17          VARBOX1 = $ $（ "BOX1" ）;
 18である         VAR $ BOX2 = $（ "＃BOX2" ）
 。19          はconsole.log（$のBOX1）;
 20である         （$ BOX2）にconsole.log;
 21である 
22ことである         // 2.2受信コードフラグメント
23は         // オブジェクトに格納されているJQオブジェクトはDOM要素を作成し返す
24          VAR（ "<P> I段落</ P>" $ Pは$ = ）;
 25          はconsole.log（Pの$）;
 26です         $ box1.append（Pの$）;
 27  
28          // 3 DOM要素受信
29          //は私たちにJQオブジェクト戻りにパッケージされる
30          のvarスパン= document.getElementsByTagName（ "スパン"）[0 ];
 31は         コンソール。ログ（スパン）;
32          のvar $スパン= $（スパン）;
33          はconsole.log（$スパン）;
34  
35          }）;
36  
37  
38      </スクリプト>
 39 </ HEAD>
 40 <body>
 41 <DIV CLASS = "BOX1"> </ div>
 42 <DIV ID = "BOX2"> </ div>
 43 <スパンID = "テキスト" > </スパン>
 44 </ BODY>
 45 </ HTML>

おすすめ