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);});
$("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>
<!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)
