2019年7月31日のjQuery

何jQueryのこと?

jQueryのは、さらに別の優れたプロトタイプのJavaScriptコードライブラリ(またはJavaScriptフレームワーク)は、次の迅速かつ簡潔なJavaScriptフレームワークです。jQueryの設計目標は、それが提唱され、「あまりを書き、複数の操作を行います」することで、より少ないコードを書くより多くのことを行います。これは、HTMLドキュメントの操作、イベント処理、アニメーションやAjaxのインタラクションの設計を最適化するために、簡単なJavaScriptのデザインパターンを提供し、一般的に使用される機能のためのJavaScriptコードをカプセル化します。

 

jqueryのダウンロード

ダウンロードURL: http://www.jq22.com/jquery-info122 ダウンロードする際に、コードの安定したバージョンを選択し、ここでは、バージョン2.1.4を使用しています。
 
jqueryのを導入するには?
htmlページでの<script>を使用するには、<SCRIPT>タグが導入され、フォーマット<スクリプトSRC =「jqueryのファイルストレージ・パス」>の導入</スクリプト>導入する必要があります。私たちは、内部のコードを書くための<script> </ script>のタグを作成し、それ以外の場合は無効となり、jsのコード内に導入ノートを書いてはいけません。
 
jQueryのセレクタ
基本的な、レベル、単純な、コンテンツ、視認性、属性、サブエレメント、フォーム、フォームオブジェクトのプロパティ:jQueryのセレクタは、9つのそれぞれセレクタ、に分けることができます。
 
基本的なセレクタを使用
$①ID( "#番号")でオブジェクトを見つけます。
②$クラスを介してオブジェクトを検索する(「クラス。」);
③ラベルによるオブジェクトの$(「DIV」)を見つけます。
 
階層的なセレクタを使用しています
リットルの祖先の子孫:子孫セレクタは、要素を以下の子供や孫の祖先を取得します
L親>子:指定された子要素の選択は、次のサブ要素の親要素に一致
LのPREV +次:セレクタ要素が現在の要素の次の兄弟は、2つの隣接する要素は、隣接している必要があり必要と一致します
リットルの前〜兄弟:兄弟セレクタ指定された現在の兄の下にあるすべての要素にマッチします
 
例:
レベルセレクタ// 
        //子孫のセレクター
        VAR李は$( "#UL李ボックス")[2] .innerHTMLを=; 
        にconsole.log(Li)と;

 

シンプルなセレクタ
L:最初の最初の要素と一致します
L:最後の試合最後の要素
L:あっても屈折率整合値の偶数すべての要素であります
L:奇数のインデックスのすべての要素は、マッチの奇数であります
L:当量(指標)は添字の値を要素指定された一致します
L:GT(インデックス)のすべての要素よりも大きい指定されたインデックス値と一致します
L:LT(インデックス)要素の全てよりも少ないの指定されたインデックス値と一致
L:いない(セレクタ)指定した選択以外のすべての要素に一致することに加えて
 
//シンプルなセレクタ
        
        VAR李= $( "UL:最初の")HTML(); // 最初の。
        にconsole.log(李); 
        VARリー= $( "UL:ラスト")。HTML(); / /最後
        にconsole.log(LI)。

 

属性セレクタを使用
LL [属性]指定された要素のプロパティと一致
LL [属性=値]入力の指定された値に等しい一致要素の属性[NAME =ユーザ名]
LL [属性!=値]は指定された属性値が要素と等しくない一致しました
LL [属性^ =値]は先頭に要素の指定された属性値と一致しました
LL [属性$ =値]エンド要素の指定された値と一致する属性
指定された属性値の整合素子に含まLL [属性* =値]
属性セレクタのLL [selector1] [selector2] [selectorN]任意の数
VARの名前= $( '入力[名前= "名前"]' ).val(); 
        console.log(名);

 

フォームセレクタ

LL:テキストボックス(入力)ドロップダウン・リスト(選択)、テキストフィールド(のTextArea):入力は、以下を含む任意の形態の要素と一致します
LL:テキストマッチング行テキストボックス
LL:パスワードは一方向のパスワードボックスに一致します
LL:ラジオラジオボタンの一致
LL:チェックボックスの一致チェックボックスは:ボタンマッチング$を提出提出(「:提出します」) 
LL:マッチをリセットするためのリセットボタン
LL:画像マッチング画像ボタン
LL:ボタン一致するプッシュボタン
LL:ファイルに一致するファイルのアップロード
LL:隠された隠しフィールド隠しフォームフィールドに一致するように一致させたい場合など、入力ラベルと結合する必要があります:$(「入力:隠されました」)
 
// シートセレクタ
        
        VAR INPUT = $( ":テキスト" ).val(); 
        はconsole.log(INPUT); 
        
        VAR PWD = $( ":パスワード" ).val(); 
        はconsole.log(PWD)。
        

 

フォームの属性セレクタを使用
LL:利用できる有効なマッチフォームコントロール
LL:無効マッチングフォームコントロール使用できません
LL:選択したラジオボタンやチェックボックスを一致させるためにチェック
LL:選択したドロップダウンリストに一致するように選択しました
 

 

DOMオブジェクトとjQueryオブジェクト
ネイティブDOMオブジェクトであり、オブジェクトは、メソッドのjQuery jQueryオブジェクトによって発見され、jQueryのオブジェクトのDOMが含まによりオブジェクトを見つけ、DOMはjQueryオブジェクト内の配列エレメントを介して追加されたオブジェクト。
 
 
DOMはjqueryのオブジェクトと、各オブジェクトが変換され、
機能テスト(){
         // オブジェクトのDOMを含むjQueryオブジェクト
        VARを OBJ = document.getElementsByTagName( 'DIV'); // オブジェクトの対象を見つけるために、ネイティブのDOM方法によって 
        はconsole.log($(OBJ)の.htmlを( ))。 // DOM => $道のjqueryの(DOMオブジェクト); 

        VAR OBJ = $( "DIV"); // オブジェクトがメソッドのjqueryのjqueryのオブジェクトによって発見された 
        はconsole.log($(OBJ)に.get( 0) .innerHTML); // jQueryの=> $ DOM(jQueryのオブジェクト)に.get(添え字)の第一の方法 
        はconsole.log($(OBJ)[2] .innerHTML); // のjQuery =>第DOM $法(jQueryオブジェクト)。[インデックス]     
    }

 

 

インターレースの色の変化のフォームを達成するために2つの方法

< HTML > 
    < メタのcharset = "UTF-8" /> 
    < ヘッド> < タイトル>表格</ タイトル> </ ヘッド> 
    < ボディ> 
        < ボタンのonclick = "色()" >原生换色</ ボタン> 
        < ボタンのonclick = "jcolor()" > jQueryの换色</ ボタン> 
        < テーブルCELLSPACING = 0 境界= 1 > 
            <TR > 
                <TD > 111 </ TD > 
                < TD > 111 </ TD > 
                < TD > 111 </ TD > 
            </ TR > 
            < TR > 
                < TD > 222 </ TD > 
                < TD > 222 </ TD > 
                < TD > 222 </ TD > 
            </ TR > 
            < TR > 
                < TD >333 </TD > 
                < TD > 333 </ TD > 
                < TD > 333 </ TD > 
            </ TR > 
            < TR > 
                < TD > 444 </ TD > 
                < TD > 444 </ TD > 
                < TD > 444 </ TD > 
            < / TR > 
        </ テーブル> 
    </ ボディ> 
</ HTML > 
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "Jqery2.1.4.js" > </ スクリプト> 
< スクリプトタイプ= "テキスト/ javascriptの" > 
    関数の色(){
         // 警告(1)。
        VaRのTR = document.getElementsByTagName(' TR ' );
        // にconsole.log(TR); 
        // はconsole.log(TR [1] .innerHTML)。
        
        VARのI = 0 ; I < tr.length。){ 
                TR [I] .style.backgroundColor = " " 
            } 
            もし(I 2 == 0 ){ 
                TR [I] .style.backgroundColor = " " 
            } 
        } 
    } 

    関数jcolor(){
         // 警告(1)。
        // 简单选择器
        $(" テーブルTR:でも" )の.css(" backgroundColorの" " グリーン" ); //:あっても屈折率整合値が偶数である
        $(" 表TR:ODD " )の.css(" backgroundColorの" " ピンク" ); // :ODDは奇数一致添字
    } 
    
</ スクリプト>

効果:

原生换色

jqueryの色の変化

 

 

 

おすすめ

転載: www.cnblogs.com/zhangxu-fasu/p/11277936.html