第V章：知人のjQuery

jQueryのでは、JavaScriptのパッケージである、JSコードは、それが2006年に開始された主流のフレームワーク（VUE、EasyUI、ブートストラップ）の基礎となる簡素化、

jQueryの利点：
小さいサイズは、唯一の100キロバイト程度圧縮され
、強力なセレクタ
優れたDOMパッケージ
信頼性の高いイベント処理メカニズム
優れたブラウザの互換性
の暗黙的な反復がプログラミングを簡素化
をサポートする豊富なプラグインを
jQueryライブラリの導入：
<種類のスクリプトSRC =「JSを/ jQueryの-3.4.1.jsを」=「テキスト/ JavaScriptを」> </スクリプト>
jQueryのページがロードされるトリガー：
ます。<script type = "text / JavaScriptを">
/ * JSコード* /
window.onload =関数（）{
アラート（ 'JSを読み込む'）;
};
/ * jQueryのコード* /
$（ドキュメント）.ready（関数（）{
アラート（ '負荷jQueryのA'）;
}）;
jQueryの（ドキュメント）.ready（関数（）{
アラート（ '荷重二のjQuery'）;
}）;
* /の上のjQueryをロードする/ *速記二つの方法
$（関数（）{
警告（「jQueryの負荷3」）;
}）;
</ SCRIPT>
window.onloadと$（ドキュメント）.ready違い：
一つだけwindow.onload、ノー速記、すべてのリソースがロードされた後にトリガするためにページを待つ必要があります
$（ドキュメント）.readyはのプロフィール、複数のを持っているかもしれ$（関数（）{//コード}）、全ての文書構造（HTMLタグ）トリガを待ってからページに記載
jQueryのセットスタイル：
ます。<script type =「text / JavaScriptを">
。/ *運転パターンaddClass（）メソッド* /
（$関数は（）{
//実際には、クラス属性タグに動的に追加された
＃whtdiv WHT / * $（" 。addClass（「 "）"）; * /
//単一セットのCSS
/ * $（ "＃lldiv"）CSS（ "カラー"、 "イエロー"）;
//複数の
$（ "＃のlldiv"）、CSS （{ "国境"：「1ピクセル。 ブルーソリッド""背景色"："ピンク"}）;
//チェーン方式の
$（" ＃whtdiv色」、 "緑"）"）、CSS（"。。CSS（ "ボーダー"、 "固体1pxのブルー"）; * /

//次の要素
。$（ "＃のwhtdiv"）CSS（ "カラー"、 "グリーン"）次（）CSS（ "カラー"、 "ピンク"）次（）CSS（ "カラー"、 "オレンジ"）; ....

} ）;

</ SCRIPT>
jQueryの一般的に使用されるメソッド、およびイベント：詳細については、W3C参照
$（関数（）{
/ *画像を表示するためのボタンがクリックイベントを登録* /
$（ "＃ショー"）をクリックします（関数（）{。
$を（ "#imgs"）slideDown（3000）;.
}）;
$（ "＃隠す"）をクリックして（関数（）{
$（ "＃1 IMGS"）slideUp（3000）;.
}）;
}）;
--- -------------------------------------
$（関数（）{
$（ "李"）。 mouseOver（関数（）{
//ない$（ "李"）と
$（この）の.css（ "カラー"、 "青"）;
}）。マウスアウト（関数（）{
$（この）の.css（「カラー「」黒"）;
}）;

}）;
変換ドムjQueryのオブジェクトとオブジェクト：
ます。<script type =" text / JavaScriptを「>
$（関数（）{
/ * DOM JSオブジェクトを取得します* /
/ * VARのDOM =のdocument.getElementById（ "wht5"）; * /
/ *アラート（dom.innerHTML）; * /
/ *アラート（dom.innerText）。 * /
/ * value属性を取得します* /
/ *アラート（dom.value）; * /


/ * jQueryのオブジェクト* /
/ * $ JDOM VAR = $（ "＃のwht5"）; * /
/ *アラート（jdom.html （））; * /
/ *アラート（jdom.text（））; * /
/ *一般的なフォームの* /
/ *アラート（$ jdom.val（））; * /

/ *ドムjQueryオブジェクトオブジェクト*へ/
document.getElementById DOM = VAR（ "WHT"）;
VAR = $ $ JDOM（DOM）;
$ jdom.html（）;


/ * jQueryの回転DOMオブジェクト* /
VAR $ JDOM = $（ "＃のwht5"）;
VARのDOM JDOM $ = [0];
/ * VAR DOM jdom.get = $（0）; * /
アラート（dom.value）;
}）;
</ SCRIPT>