ホームページ > 記事 > ウェブフロントエンド > JQuery学習のまとめ
JQuery学習のまとめ
- 高洛峰オリジナル
- 2016-12-03 09:50:311050ブラウズ
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("読み込み完了");} );
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 オブジェクト
$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white")
}); は、ドット演算子を使用して簡単に操作できます。 //これはチェーン操作であり、if/else やその他の操作の使用を減らします。プログラミングスタイルを変更しました。 <!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>9: 基本フィルター
<!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
れぇ声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。