JQuery 学習の概要 [1]
1: JQuery
1 JQuery の知識
*: JQ プラグインの呼び出し方を学びましょう。JQ プラグインは、実際には JS を内部にカプセル化したものです。
*: jquery には 3 つのファイルがあります
2 番目と 3 番目のファイルは実際には同じ内容ですが、3 番目のファイルはブラウザのアクセス時間を短縮するために圧縮されています。
Jquery-1.4.2.js と jquery.1.4.2-vsdoc を一緒に使用する場合、実際には vsdoc.js をクリックしてコードを書くことができます。 。
*: 「ボタンをクリックしてダイアログボックスの内容をポップアップ表示する」「Web ページ内のテキストをクリックしてテキストを行ごとに消す」を練習します (「$」は実際には関数です)
<head>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function () { alert($("#un").val()); });//点击弹出内容
$("div").click(function() { $(this).hide("slow"); });//文字消失
});
</script>
</head>
<body>
<input type="text"id="un"/>
<input type="button" id="btn"/>
<div>文字内容</div>
</body>ログイン後にコピー
2 準備完了JQueryで「Webページの先頭にポップアップ」 Content》
$(dounction).ready(function(){alert("Loading completed");})
実はこんな風に書くこともできます
$(function(){alert("読み込み完了");} );
<分析: "$" この関数は、匿名関数 function() を実行準備完了として登録します。 >
3 jquery 組み込み関数
.map(array,fn) は、fn 関数を呼び出して配列内の各要素を処理し、最終的に新しい配列を取得します。 .map(array,fn) は fn 関数を呼び出して配列内の各要素を処理し、最終的に新しい配列を取得します。 map は辞書形式の配列を処理できません。以下の $.each を使用して処理します。
$.each(array.fn) は、値を返さずに fn 関数を呼び出して配列 arr の各要素を処理します。
var arr=[3,5,7];
Var arr2=$map.(arr,function(item){return item*2}) 函数式编程。
Var arr={“tom”;”檀木”,”xiaozhang”;”小张”}
$.each(arr,function(key,value){alert(key+”=”+value);});ログイン後にコピー
4 JQuery オブジェクト、Dom オブジェクト
Jquery オブジェクトは、Dom オブジェクトを jquery でラップすることで生成されます。また、jquery オブジェクトは、jquery オブジェクトによってカプセル化されたメソッドのみを呼び出すことができます。 Dom オブジェクトのメソッドを呼び出すことはできません。 $(function(){$("#id").css("background","red")});上記のコードはコピーされ、 の場合は背景色を赤に設定します。 css 属性が1つの場合は値を取得し、属性が2つの場合は値を設定します。 5 jqueryセレクター*idセレクター$("#div").html();*TabNameセレクター<タブセレクター>$("div").click( function()｛alert( "こんにちは、私は p");｝);ここでは、Web ページ内のすべての div タグを選択し、それらにクリック イベントを追加します。 * CSS セレクター 複数のスタイルを同時に選択すると、カスタマイズされたスタイルが追加されます。 $(“div”).click(function(){alert(“これは情報です”)});6 複数条件セレクター/階層セレクター
7 jquery反復 以上がエラーですプログラムはエラー プロンプトを表示しません。判断するには if/elae ステートメントを追加する必要があります。 
8 jquery のノードトラバーサル は、next() メソッドと nextall() メソッドを使用してトラバースします。配列を走査するのと同じです。ここでは、次の要素の値を取得するだけです。 Siblings(): すべての要素の兄弟要素 (兄弟ノード) を取得します。 *: jquery のチェーン プログラミング$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white")
});ログイン後にコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#tables td").html("<img src='images/1.jpg'/ alt="JQuery学習のまとめ" >")
.mouseover(function () {
$("#tables td") .html("<img src='images/1.jpg'/ alt="JQuery学習のまとめ" >");
$(this).nextAll().html("<img src='images/2.jpg'/");
});
});
</script>
</head>
<body>
<table id="tables">
<tr><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>ログイン後にコピー
セレクターやフィルターなど、非常に強力なフィルターをここでまとめて書くことができます。 セレクターは絶対位置指定だけでなく、$() の 2 番目のパラメーターを相対要素として指定するだけで、相対位置指定にも使用できます。 ケース: 
(相対配置) 
: ここの要素は、positioning #tables tr 10 属性フィルターの下の td の配置です 
例: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<title></title>
<script type="text/javascript">
$(function() {
$("input[value=显示选中的内容]").click(function() {
alert($("input:checked").val());
});
});
</script>
</head>
<body>
<input type="checkbox" value="上海"/>上海<br/>
<input type="checkbox" value="宝鸡"/>宝鸡<br/>
<input type="checkbox" value="深圳"/>深圳<br/>
<input type="checkbox" value="西安"/>西安<br/>
<input type="checkbox" value="北京"/>北京<br/>
<input type="submit" value="显示选中的内容"/>
</body>
</html>ログイン後にコピー
11 各要素of each
れぇ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
