JavaScript と JQuery フレームワークの基本チュートリアル

1. JS オブジェクト

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>テスト js 作成オブジェクト</title>
		<スクリプト>
			//2. オブジェクトメソッド2を作成する:
				var p2 = {
					//属性名にバインド: "Zhang San"、
					年齢:19歳
					//バインドされた関数 eat:function(a){
						コンソールにログ出力します。
					}
				}
				コンソールログ(p2);
				p2.eat(10);//関数を呼び出す //1. オブジェクトメソッド1を作成する:
				//オブジェクト関数 Person() を宣言する{}
				//オブジェクトを作成する var p = new Person();
				//動的バインディング属性 p.name="Zhang San";
				18歳以上
				//動的バインディング関数 p.eat=function(){
					console.log("豚肉を食べる");
				}
				//console.log(p) を表示します。
				//関数 p.eat() を呼び出します。
		</スクリプト>
	</head>
	<本文>
	</本文>
</html>

DOM

–1、機能

ドキュメントオブジェクトのさまざまなメソッドとプロパティを使用します。 Web ページ内のさまざまな要素を分析します。

ID で要素を取得します ----- getElementById ("id 属性の値")

名前で要素を取得する ----- getElementsByName ("name 属性の値")

クラス別に要素を取得する----- getElementsByClassName ("クラス属性の値")

タグ名で要素を取得する ----- getElementsByTagName ("タグ名")

ブラウザでの出力-----write("表示するコンテンツ")

innerHtml

innerText

style

–2、テスト

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>Web ページ要素の DOM 解析をテストする</title>
		<スクリプト>
			関数メソッド(){
				// 4. タグ名が p であることを確認します。 var d = document.getElementsByTagName("p");
				d[0].innerHTML="こんにちは...";
				コンソールにログ出力します。
				// 3. class="f" を取得します
				var c = document.getElementsByClassName("f");
				c[0].innerHTML="こんにちは...";
				コンソールにログ出力します。
				// 2. name="d" を取得します
				var b = document.getElementsByName("d");//複数の要素を取得 // b[0].innerHTML="test..."; //最初の要素のコンテンツを変更 b[0].style.color="blue"; //最初の要素のテキストの色を変更 console.log(b[0].innerHTML);//最初の要素のコンテンツを取得 // 1. id="a1" を取得
				var a = window.document.getElementById("a1");//要素を取得します // a.innerText = "<h1>hello</h1>" ; //コンテンツを変更します // document.write( a.innerText ); //データを直接 Web ページに書き込みます // //innerText と innerHtml の違いは何ですか? innerHtml は HTML タグを解析できます // a.innerHtml = "<h1>hello</h1>" ; // コンテンツを変更します // document.write( a.innerHtml ); // データを Web ページに直接書き込みます }
		</スクリプト>
	</head>
	<本文>
		<div name="d" onclick="method();">私はdiv1です</div>
		<div name="d">私はdiv2です</div>
		<div class="f">私はdiv3です</div>
		<a href="#" id="a1">私はa1です</a>
		<a href="#" class="f">私はa2です</a>
		<p class="f">私はp1です</p>
		<p>私はp2です</p>
	</本文>
</html>

3. jQuery

–1. 概要

JS の記述を簡素化するために使用され、 HTML css jsを組み合わせます。

構文: $(セレクタ).event

–2、使用手順

まずjQueryファイルを導入します。スクリプトタグを使用してHTMLに導入します。

jQuery構文を使用してWebページの要素を変更する

–3. エントリーケース

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>jq 構文のテスト</title>
		<!-- 1. jQuery ファイルをインポートする-->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. Web ページに JS コードを埋め込む -->
		<スクリプト>
			// pタグをクリックしてテキストを変更します function fun(){
					//dom は要素を取得します var a = document.getElementsByTagName("p");//タグ名に従って要素を取得します a[0].innerHTML="変更しました...";//テキストを変更します //jq は要素を取得します -- jq 構文: $(selector).event $("p").hide();//要素を非表示にします $("p").text("33333 を変更しました...");//テキストを変更します }
		</スクリプト>
	</head>
	<本文>
		<p onclick="fun();">あなたは p2 です</p>
	</本文>
</html>

–4、jQueryのドキュメントが準備完了

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>jq のドキュメント準備状況をテストする</title>
		<!-- 1. jq ファイルをインポートします-->
		<script src="jquery-1.8.3.min.js"></script>
		<スクリプト>
			//方法 1 の問題: 使用したい h1 がまだロードされていないため、使用するとエラーが報告されます //解決策: h1 がロードされた後に書き込み、ドキュメント準備関数を使用します (最初に jq をインポートします)
			// document.getElementsByTagName("h1")[0].innerHTML="変更しました...";
			// 書き方 2: ドキュメント準備関数を使用する (最初に jq をインポート) - これはドキュメントの準備が整っていることを意味し、次に要素 $(document).ready(function(){ を使用します。
				//document.getElementsByTagName("h1")[0].innerHTML="変更しました...";//js dom 書き込みメソッド $("h1").text("変更しました...");//jq 書き込みメソッド });
		</スクリプト>
	</head>
	<本文>
		<h1>私はh1です</h1>
	</本文>
</html>

4番目は、JQueryの構文

–1、セレクター

タグ名セレクター: $(“div”) – div を選択

IDセレクター: $("#d1") – id=d1の要素を選択します

クラスセレクター: $(".cls") – class=cls の要素を選択します

属性セレクタ: $("[href]") – href属性を持つ要素を選択します

高度なセレクター: $(“div.d3”) – class=d3 の div を選択します

–2、共通機能

text() html() val() — 値を取得または設定する

hide() – 非表示

$(“p”).css(“background-color”,“yellow”); --スタイルを設定する

show() — 表示

fadeIn() — フェードイン

fadeOut() — フェードアウト

–3、一般的なイベント

クリックイベント – click !!!

ダブルクリックイベント – dblclick

マウスエンターイベント – mouseenter

マウスアウトイベント – mousleave

マウスオーバーイベント – hover

キーボードイベント – keydown keyup keypress

–4、練習

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>jq 演習のテスト</title>
		<!-- 1. jq をインポート -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. jq 構文を使用して構文を練習します: $(selector).event-->
		<スクリプト>
			// jq ドキュメント準備関数:: すべての要素がロードされていることを確認したら、安心して使用できます。そうでない場合はエラーが報告されます $(function(){
				// 演習 1: id=d1 の要素をクリックして、id=p1 の要素を非表示にします $("#d1").click(function(){
					$("#p1").非表示();
				})
			});
			$(関数(){
				// 演習 2: class="dd" の要素をダブルクリックして、div に背景色を追加します $(".dd").dblclick(function(){
					$("div").css("背景色","緑");
				})
				// 演習 3: マウスが id="d1" の div に入ると、href 属性を持つ要素を非表示にします $("#d1").mouseenter(function(){
					$("[href]").hide();
				})
			});
		</スクリプト>
	</head>
	<本文>
		<div id="d1">私はdiv1です</div>
		<div class="dd">私はdiv2です</div>
		<div>私はdiv3です</div>
		<div class="dd">私はdiv4です</div>
		<p id="p1">私はp1です</p>
		<p>私はp2です</p>
		<a class="dd">私はa1です</a>
		<a href="#">私はa2です</a>
		<a href="#">私はa3です</a>
	</本文>
</html>