プロパティの操作
jqueryの特性制御モジュールは、4つの部分に分かれています：HTMLの操作属性、DOMは、操作属性、および操作タイプスタイルの演算値
-
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr() -
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp() -
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass() -
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル> </ TITLE>
</ HEAD>
<BODY>
<DIV CLASS = "ボックス">
</ DIV>
<スクリプトはSRC = "jQueryの-3.3.1.js"> </ SCRIPT>
<SCRIPT>
// JS：getAttribute（）メソッドのsetAttribute（）
// jQの：ATTR（）セットプロパティクラス属性を複数設けても良いことはお勧めしません簡単removeClass toggleClassで覆われて。addClass
// removeAttr（）属性削除
操作小道具（）、RemoveProp（）の設定と削除、操作のために// JSオブジェクトのプロパティを
$（関数（）{
// $（ 'ボックス'を）.htmlを（ '<a href="http://www.baidu.com"> Baiduの二回</a>の'）;
}）
</ SCRIPT>
$（ 'ボックス'）HTML（' <a id="anchor"> </a>の'）。
$（ '#anchor'）.ATTR（ 'のhref'、 'のhttp：//www.baidu.com'）の.text（ ' 下二百度'）;
</ BODY>
</ HTML>
ドキュメントアクション
ドキュメントの操作には、4つのブロックが含まれています。編集操作の削除クローン操作を挿入します
ボックス）「11 </a>にを<a> '）（追加。';
$（ 'ボックス'）追加（'哈哈'）。
$（ 'ボックス'）追加（$（'スパン'））;
親要素stirngに付加// 2サブ要素、要素（JSオブジェクト）、jQueryの要素
$（ '<P> </ P>'）appendTo（$（ 'DIV'））;.
// 3.親に追加します要素の最初の位置
$（ 'UL'）先頭に追加（ '<LI> 最初の息子</李>'）;.
// 4.親要素の最初の位置に追加
$（「<P> < /p>').prependTo('ul '）;
// 5.マッチした要素の後に挿入
$（' ulの<H4>私は見出しH3である</ H4> '）'）（後に「;
$（ ）insertAfter（ 'UL'）;. '<H5>は私がH5の見出し</ H5>だ'
$（ 'UL'）の前に（ '<H3>は私は、H3見出し</ H3>'）;.
$（ ） '私は</ H2>を見出しh2と思います<H2>'のinsertBefore（ 'UL'）;
// 22222222222222操作をクローニング
。$（ 'ボタン'）をクリックします（関数（）{
// 1.clone（）：クローニングは、DOM要素を一致クリックして（関数（）{
// 2.clone（真の）：要素とそのイベントハンドラの全て及びこれらのクローンのコピー（短期でのチェックは、）真美同じイベント処理能力のコピーを持っている
$（この）.clone （真の）.InsertAfter（この）;
}）;
// 33333333333333変更操作は、
//タイトルタグのH5のすべて置き換える
$（ 'H5'）replaceWith（ '<a href="#"> </a>のHello Worldの'）;.
//タイトルタグのすべてのH5をDOM要素は、アプリ識別で置換されている
$（ 'H5'）replaceWith（$（ '＃アプリ'））;.
$（ '<H5> 55 </ H5>'）でReplaceAll（ 'H2'）;.
// 44,444,444,444,444削除
$（ 'UL'）（削除）;.
// ULのUL維持するために、サブ要素内で空に
$（ 'UL'）の空を（）;.
}）
</ SCRIPT>
</ BODY>
</ HTML>
バブリングを停止
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>タイトル</ TITLE>
<スタイル>
* {
パディング：0;
マージン：0;
}
.fu {
位置：固定されました。
トップ：0;
左：0;
幅：100％;
高さ：200pxの。
背景色：赤。
表示：なし;
}
{
テキスト装飾：なし。
}
のUL李{
フロート：左;
幅：100ピクセル;
高さ：20ピクセル;
マージン：0自動;
}
UL {
リストスタイル：なし。
}
.up {
色：青。
カーソル：ポインタ;
}
</スタイル>
</ HEAD>
<ボディスタイル= "高さ：2000px">
<a href="javascript:void(0)" id="changeFu">换肤</a>の
<DIV CLASS = "FU" >
<UL>
<LI>
<a href="javascript:void(0)">女神来临</a>の
</ LI>
<LI>
<a href="javascript:void(0)">
<SCRIPT SRC = "jQueryの-3.3.1.js"> </ SCRIPT>
<SCRIPT>
$（関数（）{
$（ '＃changeFu'）。クリックして（関数（イベント）{
//現在のを止めますデフォルトの動作のラベル
event.preventDefault（）;
//バブリング防ぐ
ことするevent.stopPropagation（）;
$（ 'FU。'）（1000）slideDown ;.
//そのするevent.stopPropagation（）; event.preventDefault +（）; = falseを返す
}）;
$（ 'ボディ、.UP'）をクリックします（関数（イベント）{
$ slideUp（1000）;.（ 'FU。 '）
}）;
$（' A李FU UL。'）。クリック（関数（イベント）{
するevent.stopPropagation（）。
$（この）の.css（ '色'、 '黄色'）親（ 'リー'）兄弟（ 'リー'）（ 'A'）を見つけるのcss（ '色'、 '青'）。。。。。
}）;
$（ 'FU'）をクリックします（関数（）{。
falseを返す;
}）
}）
</スクリプト>
</ BODY>
</ HTML>
イベントのデリゲート
バブリングの原理を使用して、イベントが、親にトリガ実行の効果を追加します
関数（）{ 警告（111）。
}）;
$（ 'UL'）追加（ '<LI>和苏ます。</ li>'）。
//のMouseEnterを模倣する合成イベントを置く/ /子要素を呼び出しているマウスオーバー/アウト親と呼ばれる親要素を通じてのみ残す
$を（「＃のBTN」）。ホバー（関数（）{
はconsole.log（「入力」） ;
}、関数（）{
はconsole.log（ '去る'）;
}）;
//シングルダブルクリックしてイベント
のvarタイマー= NULL;
$（ '＃のBTN1'）をクリックします（関数（）{
てclearTimeout（タイマ）;
タイマー= setTimeoutメソッド（関数（）{
はconsole.log（ '一'）;
}、300）;
//シングルダブルクリックする時、おそらくおよそ300msの二つの質問、単一の競合を防ぐためです
}）;
$（ '＃のBTN1'）DBLCLICK（関数（） {
てclearTimeout（タイマ）。
にconsole.logは（ 'デュアル「）;
}）;
//失われたフォーカスイベントフォーカス
// $（ 'INPUT [タイプ=テキスト]'）フォーカス（）;.
// $（ 'INPUT [タイプ=テキスト]'） .blur（）;
//アップ離鍵イベントダウン
$（ 'INPUT [タイプ=テキスト]'）KEYDOWN（関数（）{
にconsole.log（1）;
}）;
$（「INPUT [タイプ=テキスト]「）keyUpイベント（関数（）{
にconsole.log（1）;
}）;
//フォームコントロールイベント
//イベント入力ラベルの変更の内容を変更し、このイベントをトリガすることになる
// selectイベントときに選択されたイベントトリガー
//提出イベントデフォルトのフォームフォームを送信するイベント
}）;
</ SCRIPT>
</ BODY>
</ HTML>
単純に@mediaを使用
準備1：メタタグを設定
<メタのcharset = "UTF-8">
<メタ名= "ビューポート"
コンテンツ= "幅=デバイス幅、ユーザスケーラブル=なし、初期スケール= 1.0、最大規模= 1.0、最小スケール= 1.0" >
<META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
パラメータ：
幅=デバイス幅：現在のデバイスの幅に等しい幅
初期の規模：初期スケーリング（デフォルトではスケーリングを表していない1.0、です）
ユーザースケーラブル：ユーザーが手動でズームすることができるかどうか（私たちは、ユーザーがページをズームしたくないのでデフォルトは、noです）
準備2：ロード互換性のあるファイルのJS
<！ - [場合はIE 9 LT]> <スクリプトSRC = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ SCRIPT> <スクリプトSRC = "HTTPS： //oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js "> </ SCRIPT> <[endifの] - ！>
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"
コンテンツ= "幅=装置幅、ユーザースケーラブル=なし、initial-規模= 1.0、最大規模= 1.0、最小規模= 1.0 ">
<META HTTP-当量=" X-UA-互換性のある」コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイル>
@メディア・スクリーンと（最小幅：1170px）{
本体{
背景色：赤。
}
}
@media画面と（最小幅：768px）と（最大幅：992px）{
本体{
背景色：黄;
}
}
</スタイル>
</ HEAD>
<BODY>
</ BODY>
</ HTML>