jQueryのでは、jQueryの古いドライバがマスターにあなたのエントリを取ります

1. jQueryのは何ですか？

1.1、jQueryの紹介

　　プロトタイプjQueryのに続いて、別の優れたJavaScriptライブラリは、2006年1月、ジョンResig氏によってオープンソースプロジェクトで設立されています。チームは現在、jQueryのコアライブラリ、UIプラグイン、および開発者だけでなく、マーケティングとWebデザインの保守担当者が含まれています。

　　jQueryの構文の互換性とクロスブラウザの導入により、大幅にAJAXのアニメーション動作と開発を行い、DOMは、イベントを処理操作する、JavaScript開発者を横断するHTML文書を簡素化します。そのユニークでエレガントなコードは、デザインのアイデアのスタイルを変更し、道のJavaScriptプログラマーをプログラミングします。要するに、それはWebデザイナー、開発者の背景、またはプロジェクトマネージャーであるかどうか、そして初心者またはJavaScript JavaScriptの専門家かどうか、jQueryのを学ぶのに十分な理由よりも多くのがあります。

　　しかし、実際には、jQueryのは、JavaScriptの元に基づいてパッケージ、そして私たちに便利です。

1.2、jQueryの特長

jQueryのは、MITライセンスを使用して、無料、オープンソースです。jQueryの構文のデザインはイベントは、Ajaxや他の機能を取り扱い、そのようなドキュメントオブジェクトを操作するなど、開発をより簡単にDOM要素を選択し、アニメーション化することができます。また、jQueryのAPIは、開発者がプラグインを書くことができます提供します。そのモジュラー使用は、開発者が簡単に強力な静的または動的なページを開発することができます有効にしてください。jQueryの機能：

強力な、という考えを強調することはあまり書くことで、より多くのことを行う（書き込み少なく、より多くのことを行います）
DOMの一般的な包装作業の数
メカニズムを取り扱う柔軟なイベント
AJAXの機能が向上しました
スケーラビリティ、豊富なプラグイン
使いやすいです
マルチブラウザのサポート（サポートはインターネットExplorer6.0 +、Opera9.0 +、Firefox2 +、Safari2.0 +、Chrome1.0 +、2.0.0にインターネットExplorer6,7,8のためにドロップされた）、良好な相溶性

1.3、jQueryのバージョン

jQueryのバージョンについて

　　完璧なv1.xx.xx（初心者）をダウンロードすることをお勧めします

https://lib.baomitu.com/jquery/1.12.4/jquery.js

　　v2.xx.xx互換性を削除します

https://lib.baomitu.com/jquery/2.2.4/jquery.js

　　v3.xx.xx再建、小さなバグ

https://lib.baomitu.com/jquery/3.4.1/jquery.js

　自分または静的リポジトリBaiduの

たとえば、次のようにhttps://cdn.baomitu.com/

2. jQueryの使用

　2.1.1は、jQueryのオブジェクトを取得します：

　　どのようにjQueryオブジェクトを取得するには？大まかに言えば、コアによって$()方法、パッケージングにページjQueryオブジェクト上の要素（又はその断片のHTMLページには存在しません）。
　　$()方法どちらも構文のサポートが含まれています。

（クラス表現を含む。、同上の＃式、発現要素など）の発現しています
（等子孫シンボルスペース、次のシンボル+を含む）のシンボル
フィルタ（前記フィルタと[]フィルタ）
今よりは明らかにあり

上記組み合わせにより、セレクタを介して、 $() 「クエリ」はjQueryオブジェクト（またはオブジェクトのjQueryのコレクション）を得ることができます

　2.1.2共通API

$（...）：

  パラメータの4種類のコアのすべては、することができます。
$（）; 


 戻りjQueryオブジェクトまたはオブジェクトのjQueryのコレクション
 など$（ "＃IDは"）、$（ "クラス。"）として、
$（式）; 


 jQueryオブジェクトを返す、またはオブジェクトのjQueryのコレクション
 ハロー$など、（「<スパン>世界</ span>の「）
$（HTML）は、


  jQueryのオブジェクトのjQueryオブジェクトまたはコレクションを返す
  ように$（document.body）として
$（要素）
 の全ての要素
$（*）

　ネイティブjQueryの2.1.3と変換

　　DOM要素DOM要素JQ天然の、非インターワーキングの方法は、ネイティブコードは、コードが各オブジェクトがプロパティまたはメソッドのインターワーキングではないだけの間に存在することができJQ

JQ DOMオブジェクトとの変換ネイティブDOMオブジェクト：
　　JQ次転写：
　　　　解析アレイ
　　　　GETメソッドによって
　　ネイティブ伝達JQ：
　　　　機能パッケージJQネイティブDOMオブジェクトを使用して

1. 
　　 obox.style.background = "赤"。//原生方法
    $（obox）の.css（ "背景"、 "黄色"）// jQueryの方法

2。
    VAR obox = $（ "＃1 BOX2"）;

　　　 OB OX [0] .style.background = "青"。
　　　　obox.get（0）.style.background = "青"。
　　　　obox.css（ "バックグラウンド"、 "青"）。

2.2.1セレクタ

ネイティブ以下のセレクタとjQueryのセレクタ

    $（ "＃の続き"）、CSS（ "背景"、 "赤"）。//选中のid 

    $（ "ボックス"）、CSS（"背景"、 "赤"）。//选中クラス

    。$（ "スパン"）、CSS（ "背景"、 "赤"）; //选中标签

    $（ "MSG H2 "）。CSS（"背景"、 "赤"）//选中后代

　　 $（」。MSG "）。 （ "H2"）を見つける。CSS（ "背景"、 "赤"）// の子孫を選択

    $を（"。MSG> H2" ）。CSS（ "背景"、 "赤"）/ /息子の選択レベルのH2 
    $（。 "MSG"）。子供たち（ "H2"）。CSS（ "背景"、 "赤"）レベルH2息子を選択する//

    $（ "MSG +スパン" ）。CSS（ "背景"、 "赤"）// 隣接する次の兄弟spanタグの選択
    $（ "MSGを"）。次の（ "スパン"）。CSS（「背景「」赤「）// 隣接する次の兄弟を選択します

　　 $（ "MSG〜スパン" ）。CSS（ "背景"、 "赤"）// すべてのスパンですべてを選択する
　　 $（ "MSG"）。 nextAll（ "スパン"）。CSS（ "背景"、 ）「赤」のすべてのspanタグを選択する// 
 　　$（「入力[タイプ=テキスト ] [名]」）。CSS（「背景」、「赤」）// ここでa =属性セレクタの選択入力タイプテキストタグをタグ

　　上記の小さな例を通じ、我々はまた、jQueryのセレクタのように通常のセレクタのネイティブを見つける必要がありますが、jQueryの良いパッケージ以上の組み合わせセレクタを持って、あなたは発見するために行くことができます。

2.2.2 jQueryの組み込みのアニメーション

方法：

    .hide（）//非表示
    .SHOW（）//表示
    .toggle（）//表示/非表示
    .slideUp（）//プル
    .slideDown（）//プルダウン
    .slideToggleを（）//プルアップ/プルダウン
    .fadeOut （）フェード// 
    ）（.fadeInをフェード// 
    .fadeToggle（）//アウトオン/フェード
    時間の.fadeTo（1000,0.5）//半透明、以前の引数、透明性のいずれかを

2.2.3 jQueryの非組み込みアニメーション

        $（ "ボックス"）アニメーション（{ 
            幅：0、
            高さ：0は、
            左：100、
            トップ：0 
        }）//ボックス予め試験前にハイ幅

2.2.4 jQueryのアニメーションの設定

    セレクタ：$ FN 
    アニメーション:. $為替の

    ミリ秒、周波数
    $ .fx.interval = 100; 
    $ = .fx.off trueに、

    $（ "BTN位"）[0] .onclick =関数（）{ 
        $（ 。 "■は"）アニメーション（{ 
            左：600 
        }、2000）.animate（{ 
            トップ：500 
        }）

    }

2.3.1 jQueryのイベント

1.イベントの名前は、結合
    要素。イベント名（関数）
    $（ "＃1 BTN"）のMouseDown（関数（）{ 
        にconsole.log（1）
    }）

    結合2.on 
    $（ "＃のBTN"を参照）。オン（ "click.a"、関数（）{ 
        にconsole.log（1）
    }）
    $（ "＃1 BTN"）ON（ "click.b"、関数（）{ 
        にconsole.log（2）
    }）
    //がOFF削除しますメソッドのバインディング上の
    $（ "＃のBTNを"）。OFF（ "click.a"）
    //イベントのデリゲート
    $（ "UL"）。（ "クリック"、 "LI"、機能（）{で
        はconsole.log（本）
    }）


    3.bind結合
    $（ "BTN番号"）。バインド（ "click.a"、関数（）{ 
        にconsole.log（1）
    }）
    $（ "BTN位"）.bind（ "click.b"、関数（）{ 
        にconsole.log（2） 
    }）
    //バインド解除deleteメソッドバインドバインド
    $（ "＃のBTN"）。バインド解除（ "click.a"）

    バインディング4.One 
    $を（ "＃のBTN"）。ワン（ "クリック"、機能（）{ 
        コンソール。 （1）ログ
    }）
    
    5.hover結合を：バブリングないイベント
    マウスオーバーで写真
    マウスアウトない
    バブリングないイベント
    のMouseEnter 
    MouseLeave 
    （ "＃1 BTN"）ホバー（関数（）{$の
        はconsole.log（ "入力"）を
    }、関数（ ）{ 
        はconsole.log（ "離れ"）
    }）

    6.シミュレートされたイベント実行は
    したsetInterval（（）=> { 
        //イベントがバブル持っている
        $（ "BTN番号"）。トリガー（ "クリック"）を
        //なしイベントバブリングはありません
        $（ "＃のBTN"）。 triggerHandler（ "クリック"） 
    }、1000）。

　　DOMは、操作属性2.3.2jQuery

    $（ "スパン"）。親 （）// 直接の親
    $（ "スパン"）。親 （）// 親のすべての
    $（ "スパン"）。parentsUntil （ "ボックス"）// 親の指定された範囲

 ネイティブコンテンツ操作：
    // innerHTMLプロパティ
    //のinnerText 
    //値

 JQコンテンツ事業：
    $（ "ボックス"）HTML（）。
    $（ "ボックス。"）、テキスト（）。
    $（ "ボックス"）HTML（ "。 <マーク>世界</マーク> "）
    $（。"ボックス"）。テキスト（" <マーク>世界</マーク> "）
    $（" INPUT "）。ヴァル（）
    $（" INPUT「）。ヴァル（ "こんにちは"）

 属性操作
    。addClass 
    removeClass 
    
    。。$（ "ボックス"）CSS（[ "幅"、 "高さ"、 "ボーダー"]）;

     VAR OBJ = $（ "ボックス"）。CSS（["幅"、 "高さ"、 "境界"]）
     の$ .each（OBJ、関数（キー、ヴァル）{ 
        にconsole.log（キー、ヴァル）
    }）


ATTR（）
    $ ATTR（ "ABC"）（ "ボックス"。）。
    $（ "ボックス"）ATTR（ "ABC"、 "QWE"）。
    $（ "ボックス"）ATTR（{ 
        A：10、
        B：20は、である
        C：30 
     }）

     $（ "ボックス"）removeAttr（ "B"）。

 作成及び挿入
    $（ "DIV"）

    VAR = $ D（ "<div>"）; 
    // div要素は体内に挿入されます
    $（ "身体"）APPEND（D）;. 
    // divの体内に挿入
    d.appendTo（$（ "身体"））; 


     。$（ "体"）の前に（d）は// bodyタグの前に置きますD 
     。$（「体」）の後に（D）// Dにbodyタグの後に

  削除します
     $（「ボックス」を）削除 （）;. // すべての内容を含むラベルのボックスとしてクラスを削除します（含むラベル）
    $（ "。。空のボックス「）（）; //ボックスのラベル（ラベル）を除去するためのクラス、ラベルボックスのdiv要素を残します
。ボックス「）（空）; //ボックス用のdivを残すボックスのラベル（ラベル）を除去するためのクラス、そのラベルの
変更
    $（ "ボックス "）。replaceWith（"<Pクラス= ' "+ $（"。ボックス "）。ATTR（" クラス "）+"'> "+ $（"。ボックス"）。htmlの（）+ "</ P>"）; //字符串的拼接

　　jQueryの上記の説明では、我々はまた、jQueryの、すべてのjQueryのは、ネイティブが達成することができ、ネイティブ、jqueryの事実、他のパッケージの機能に基づいて、見つける必要があり、機能がたくさんあり、それが原則に関係なく、直接使用することができます。