目次
2.DOM オブジェクト --> JQuery オブジェクト:
3.JQuery オブジェクト --> DOM オブジェクト:
1. JQuery のクイック スタート
1.基本的な紹介:
(1) JQuery は、ユーザーが HTML、CSS、DOM をより便利に処理できるようにする高速かつ簡潔な JS ライブラリです。
(2) JQuery は、カプセル化されたメソッド、イベント、セレクターなどを提供します。また、ブラウザーの互換性の問題も解決し、 Web サイトに AJAX インタラクションを提供します。
(3) JQuery の設計目的は、「書き込みを減らし、より多くのことを行う」です。
2. はじめるケース:
下の図に示すように JQuery をダウンロードし、右クリックして「名前を付けて保存」してローカルに保存します。
demo.html コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery intro</title>
<!--引入JQuery库-->
<script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
/**
* (1) $(function () {})等价于原生JS的window.onload = function() {}。
* (2) 得到的JQuery对象其实就是对DOM对象的包装。（一个伪数组）
* (3) JQuery中，获取对象的方法是 $("#id")，注意：id前必须加 #
* (4) 编程中，约定俗成JQuery对象的命名以$开头。
*/
$(function () {
var $btn_01 = $("#btn_01");
$btn_01.click(function () {
alert("This is JQuery!")
});
});
</script>
</head>
<body>
<button id="btn_01">点我点我快点我！</button>
</body>
</html>ランニング効果：（下のGIF）
2. JQueryオブジェクト
1.基本的な紹介:
(1) JQuery オブジェクトは、DOM オブジェクトをパッケージ化して生成されるオブジェクトです。例: $("#id").html() - 意味: ID = id を持つ要素の HTML コードを取得します; DOM の document.getElementById("id").innerHTML に相当します。
(2) JQuery オブジェクトは JQuery に固有のものであり、JQuery のメソッドを使用できます。例: $("#id").html();
2.DOM オブジェクト --> JQuery オブジェクト:
dom_jquery.html コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM --> JQuery</title>
<script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
/* $(DOM对象) 可以将DOM对象转换为JQuery对象 */
window.onload = function () {
var username = document.getElementById("input_01");
console.log("username's value = " + username.value)
var $username = $(username);
console.log("$username's value = " + $username.val());
}
</script>
</head>
<body>
Username : <input type="text" id="input_01" name="username" value="在这儿输入您的大名捏~"/>
</body>
</html>実行結果:
3.JQuery オブジェクト --> DOM オブジェクト:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery --> DOM</title>
<script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
/*
* JQuery对象 --> DOM对象————
* (1) 方法一 : 通过数组对象[index]下标的方式取出相应的DOM对象; (一般是0)
* (2) 方法二 : 通过JQuery本身提供的get(index)方法得到相应的DOM对象。
* */
window.onload = function () {
var $input_01 = $("#input_01");
console.log("$input_01's value = " + $input_01.val());
var input_01 = $input_01[0];
console.log("input_01's value = " + input_01.value)
var input_01_EX = $input_01.get(0);
console.log("input_01_EX's value = " +input_01_EX.value)
}
</script>
</head>
<body>
Color : <input type="text" name="color" value = "你喜欢什么颜色捏~" id="input_01"/>
</body>
</html>実行結果:
3. JQueryセレクター
1 はじめに:
JQuery では、イベント処理、DOM、および AJax 操作はすべてセレクターに依存します。
形式は次のとおりです——
$("#id") は document.getElementById("id); と同等です。
$("tagName") は document.getElementsByTagName("tagName") と同等です。
2.基本セレクター:
基本セレクターは、JQuery で最も単純なセレクターであり、最も一般的に使用されるセレクターであり、要素 ID、クラス値、およびタグ名によって DOM 要素を検索します。
利用形式は以下の通りです——
(1) #id——$("#id"); は、 単一要素のコレクションを返します (id = "id" を持つ要素を選択するために使用されます)。
(2) Element——$("element"); は、 コレクション要素 (HTML で定義されているタグ要素を選択するために使用されます) を返します。
(3) .class——$(".class"); は、コレクション要素を返します (class="class" で要素を選択するために使用されます)。
(4) * ——$("*");は、コレクション要素を返します (すべての要素を選択するために使用され、主にコンテキストに基づいて検索するために使用されます)。
(5) selector1, selector2, selectorN——$("#id, .class, span, p.myClass");、コレクション要素を返します（各セレクタで一致した要素が結合されて返されます。次のように指定できます）セレクター。その中で、p.myClass は一致する要素 [p class="myClass"]) を表します。
追伸：
① css() メソッドに関しては、 css("propertyname", "value"); で指定した属性値を指定した属性に設定することができます。例: $("p").css("背景色","黄色");
3.レベルセレクター:
階層セレクターは、子孫要素、子要素、隣接要素、兄弟要素などのDOM 要素間の階層関係を通じて特定の要素を取得できます。
利用形式は以下の通りです——
(1) ancestor子孫—$("form input");、 コレクション要素を返します(親>子とは異なり、指定された祖先要素の下にある指定された子孫要素をすべて選択するために使用されます)。
(2) parent > child——$("form > div");、 コレクション要素を返します（指定された親要素の下にある指定された子要素をすべて選択するために使用され、それが子要素、つまり最初の要素である必要があることを強調しています） -level 子孫要素。たとえば $("form > div > div"); のように入れ子にして使用することもできます。親子関係に注意してください)。
(3) prev + next——$("label + input"); は、コレクション要素を返します (prev 要素の直後にあるすべての next 要素を選択するために使用されます)。
(4) prev ~兄弟——$("form ~ input");、セット要素を返します（ prev要素の後のすべての兄弟要素を選択するために使用されます。この要素は含まれておらず、兄弟は同じになるように選択されることに注意してください）前の要素と同様)。
追伸:
① JQueryのsisters()メソッドは前後位置に関係なく、兄弟ノードであれば選択可能です。
4. フィルターセレクター:
4.1 基本的なフィルターセレクター
使用形式は次のとおりです - (コロン: フィルタリングを表します)
(1) :first——$("div:first"); は、単一要素のコレクションを返します (最初の要素を選択するために使用されます)。
(2) :last——$("tr:last"); は、 コレクション要素を返します (:first: に対応する最後の要素を選択するために使用されます)。最後の要素はページの「右下」要素を参照することに注意してください。 ）。
(3) :not(selector)——$("input:not(:checked)");、コレクション要素を返します (指定されたセレクターに一致するすべての要素を削除するために使用され、non と多少似ています。ここでは削除タイプ = input です)チェックボックスにチェックされた属性を持つ要素。not () 括弧内に二重引用符を追加する必要がないことに注意してください。
(4) :even——$("tr:even");、コレクション要素を返します (0 から数えて偶数のインデックス値を持つすべての要素を選択するために使用されます。たとえば、テーブル内の最初の tr のインデックス値は偶数の 0 )。
(5) :odd——$("tr:odd"); は、 コレクション要素を返します (奇数のインデックス値を持つすべての要素を選択するために使用され、 :even に対応し、ページの最初の要素は 0 からカウントされます)。
(6) :eq(index)——$("tr:eq(0)"); は、 コレクション要素を返します (指定されたインデックス値を持つ要素を選択するために使用されます。インデックス値は括弧内にあります)。
(7) :gt(index)——$("tr:gt(0)"); は、コレクション要素を返します (指定されたインデックス値より大きいすべての要素を選択するために使用されます)。
(8) :lt(index)——$("tr:lt(2)"); は、コレクション要素を返します (指定されたインデックス値未満のすべての要素を選択するために使用されます)。
(9) header (固定の記述方法) - $(":header").css("background", "#EEE");、 コレクション要素を返します（h1、h2、h3 などのヘッダー要素を選択するために使用されます）。
(10) アニメーション (固定書き込み); 、コレクション要素を返します (アニメーション効果を実行しているすべての要素を選択するために使用されます)。
4.2 コンテンツフィルタリングセレクター
利用形式は以下の通りです——
(1) :contains(text)——$("div:contains('Cyan')"); は 、コレクション要素を返します (指定された text を含む要素
(2) :empty——$("td:empty"); は、コレクション要素を返します (子要素またはテキストを含まないすべての空の要素を選択するために使用されます)。
(3) :parent——$("td:parent"); は、コレクション要素を返します (子要素またはテキストを含むすべての要素を選択するために使用されます。:empty に対応します)。
(4) :has('selector')——$("div:has(p)").addClass("test"); 、コレクション要素を返します (指定されたセレクターと一致する要素を含む要素を選択するために使用されます) 。ここでは、p 要素を含むすべての div タグ要素に class = "test" 属性を追加します)。
4.3 可視性フィルターセレクター
利用形式は以下の通りです——
(1) :hidden——$("input:hidden"); は、 コレクション要素を返します (すべての非表示要素を選択するために使用されます。非表示要素には、CSS の display:none および <input type = "hidden in HTML "/> が含まれます)。
(2) :visible——$("div:visible"); は、コレクション要素を返します (すべての可視要素を選択するために使用されます)。
追伸:
① JQuery の show() メソッドは、隠し要素を表示できます。② JQuery の each() メソッドを使用して、jquery 配列を走査できます。例えば：
$inputs.each(function() {
console.log($(this).val()); //このオブジェクトは、走査されるたびに取り出される DOM オブジェクトです
})
4.4 属性フィルターセレクター
利用形式は以下の通りです——
(1) [attribute]——$("div[id]");、 JQuery コレクション要素を返します (指定された属性を含む要素を選択するために使用されます)。
(2) [attribute=value]——$("input[name='bian']"); は、 コレクション要素を返します (指定された属性を含み、その属性が特定の値である要素を選択するために使用されます)。[値に「一重引用符」を追加します]
(3) [attribute!=value]——$("input[name!='シアン']");、コレクション要素を返します（指定された属性を含まない要素、または指定された属性を含むが、属性値は特定の Value要素ではありません。基本フィルタ セレクターの:not([attr=value]) と同等です。指定された属性を含む要素のみを選択したいが、属性値が特定の値ではない場合は、次のようにすることができます。 [attr]:not([attr=value]) を使用します。
(4) [attribute^=value]——$("input[name^='bian']"); は、コレクション要素を返します (特定の value で始まる特定の属性を含む要素を
(5) [attribute$=value]——$("input[name$='bian']"); は、 コレクション要素を返します (特定の value で終わる特定の属性を含む要素を
(6) [attribute*=value]——$("input[name*='bian']"); は、 コレクション要素を返します (「特定の値を含む」特定の属性を持つ要素
(7) [attributeFilter1][attributeFilter2][attributeFilterN]——$("input[id][name^='シアン']"); は、コレクション要素 (複合属性セレクター。同時に; ここに id 属性と シアンで始まる属性を持つ要素があります)。
4.5 子要素フィルターセレクター
利用形式は以下の通りです——
(1) :nth-child(index/even/odd/equation)——$("ul li:nth-child(2)");、 コレクション要素を返します（親要素の下にある N 番目の子要素を選択するために使用されます）奇数または偶数の要素。基本的なフィルター セレクターの eq() に似ていますが、ここでのインデックスは 1 から始まります。)
:nth-child(even/odd)、各親要素の下のインデックス値が偶数/奇数である要素を選択します。
:nth-child(3) は、各親要素の下にあるインデックス値 3 の要素を選択します。
:nth-child(3n) は、各親要素のインデックス値が 3 の倍数である要素を選択します。
:nth-child(3n + 1) は、各親要素の下でインデックス値が 3n + 1 である要素を選択します。
(2) :first-child——$("ul li:first-child"); は、 コレクション要素を返します (最初の子要素を選択するために使用されます。基本的なフィルター セレクター ':first' は 1 つの要素のみに一致することに注意してください)このセレクターは、親要素ごとに 1 つの子要素と一致します)。
(3) :last-child——$("ul li:last-child"); は、コレクション要素を返します (最後の子要素を選択するために使用されます。基本的なフィルター セレクター ':last' は 1 つの要素のみに一致することに注意してください)このセレクターは、親要素ごとに 1 つの子要素と一致します)。
(4) :only-child——$("ul li:only-child"); は、コレクション要素を返します (親要素内の唯一の子要素を選択するために使用されます)。
4.6 フォーム属性フィルターセレクター
利用形式は以下の通りです——
(1) :enabled——$("input:enabled"); は、コレクション要素を返します (フォームの使用可能なすべての要素、つまり、<input/> タグ内に disabled="disabled" のないタグを選択するために使用されます)。
(2) :disabled——$("input:disabled");、 コレクション要素を返します (:enabled に対応する、フォームの使用できない要素をすべて選択するために使用されます)。
(3) :checked——$("input:checked");、コレクション要素を返します（選択された要素（チェックボックスやラジオなど）を選択するために使用されますが、選択ドロップダウンボックスのオプション要素は含まれません） 。）
(4) :selected——$("input:selected");、コレクション要素を返します (選択されたすべてのオプション要素を選択するために使用されます)。
5. フォームセレクター:
1. :input——$(":input"); コレクション要素を返します (すべての input、textarea、select 、button要素 に一致します )。2. :text——$(":text"); コレクション要素を返します (すべての単一行テキスト ボックスに一致します )。3. :password——$(":password"); コレクション要素を返します (すべてのパスワード ボックスに一致します)。4. :radio——$(":radio"); コレクション要素を返します (すべてのラジオ ボタンに一致します)。5. :checkbox——$(":checkbox"); コレクション要素を返します (すべてのチェックボックスに一致します)。6. :submit——$(":submit"); コレクション要素を返します (すべての送信ボタンに一致します)。7. :image——$(":image"); コレクション要素 (すべての画像フィールドに一致する) を返します。8. :reset——$(":reset"); コレクション要素を返します (すべてのリセット ボタンに一致します)。9. :button——$(":button"); コレクション要素を返します ( 直接定義された <button></button> ボタンと <input type="button"/> タグの形式のボタンを含むすべてのボタンに一致します ) 。10. :file——$(":file"); コレクション要素を返します (すべてのファイル フィールドに一致します)。11. :hidden——$("input:hidden"); コレクション要素を返します (type = hidden の要素を含むすべての非表示要素 と一致します 。フォーム要素に限定されません。スタイルが hidden の要素も一致します)。
System.out.println("END------------------------------------------ -------------------------------------------------- ------------------------");