JQuery 学習トランスクリプトシンプル JQuery_jquery-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JQuery 学習トランスクリプトシンプル JQuery_jquery

May 16, 2016 pm 05:54 PM

jquery

JQuery入門
通常のJavaScriptのデメリット: 各コントロールの操作方法が統一されておらず、ブラウザごとに違いがあるクロスブラウザのプログラムを書くのは非常に面倒。そのため、Prototype、Dojo、ExtJS、JQuery など、多くの JavaScript カプセル化ライブラリが登場しました。これらのライブラリは JavaScript をカプセル化し、開発を簡素化します。これらのライブラリは JavaScript のカプセル化です。つまり、JQuery の関数を呼び出します。JQuery は JavaScript 構文で記述された関数クラスであり、内部実装は引き続き JavaScript と呼ばれるため、JQuery 内のこの関数は JavaScript で多数のコードを呼び出すのに役立ちます。 , したがって、JavaScript を置き換えるものではありません。 JQuery コードの使用、JQuery 拡張プラグインの作成などには、依然として JavaScript テクノロジが必要です。Jquery 自体は JavaScript 関数の集まりです。
なぜ JQuery を選ぶのですか?
、VS2010 で JQuery を継承した Microsoft など、現在多くの大企業が JQuery をサポートしています。 🎜>
JQueryでできることは普通のDomでできること、普通のDomでできることはJQueryでもできること

コードをコピー

コードは次のとおりです。 <script src="../js/jquery-1.4.2-vsdoc-cn. js" type="text/javascript" ></script> <script type="text/javascript">

$(document).ready(function () {

alert( "JQuery"); 
} ) 
</script> 

 
 Onload イベントと同等ですが、Onload は 1 つのイベントしか登録できませんが、JQuery は複数のイベントを登録できます 
 JQuery オブジェクト 
 jQuery オブジェクトは使用できませんDOM オブジェクトのメソッドと DOM オブジェクトのメソッドは jQuery オブジェクトのメソッドを使用できませんが、相互に変換できます 

コードをコピー

コードは次のとおりです。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> ><title></title>

<script type="text/javascript"> 
window.onload = function () { 
var btn = document.getElementById("btn"); ("OK"); 
</script> 
<body> 
<input id="btn" type="button" ="ボタン" /> 
</body> 

 
 
DOM オブジェクトへ

 

コードをコピーします

コードは次のとおりです:

<html xmlns="http://www.w3 .org/ 1999/xhtml"> <head> <title></title> <script src="../js/jquery-1.4.2-vsdoc- cn.js " type="text/javascript"></script> <script type="text/javascript"> $(function () { // var dom = $(" #btn").get(0);

//または

var dom = $("#btn")[0]; 
dom.value = "OK"; }) 
</script> 
<body> 
<input type="button" value="button" /> 🎜></body> 
</html> 

 コードをコピーします

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
 <script src="../js/jquery-1.6.1.js" type="text/javascript"></script>

var $cr = $("#cr"); var vr = $cr[0]; $cr.click( function () { if (cr.checked) { alert("サポートありがとうございます。続行できます!") } })

})

</script>
</head>
<body><input type="checkbox" id="cr"/><label for="cr">同意書を読みました </label>
</html>
$.()は静的メソッドと同等です
配列を扱う関数
$.map() ある配列の要素を別の配列に変換します。

コードをコピーコードは次のとおりです。

 
<html xmlns=" http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery -1.4. 2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var arr = [3 , 5, 7];//配列を定義
arr = $.map(arr, function (value) {//最初のパラメータは元の配列、2 番目のパラメータは処理関数です
return値 1; // 処理メソッド
alert(arr);// 
}); body> 
</body> 
</html> 

 
 は、配列配列の各要素を処理するために fn 関数を呼び出します。戻り値はありません
 
?

コードをコピー

コードは次のとおりです: &lt ;html xmlns="http://www .w3.org/1999/xhtml"> <head>

<title> ./js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript"> 
$(function () { 
var arr = { "ファーストネーム": "Zhang San", "2 位": "Li Si", "3 位": "Wang Wu" };//辞書配列を定義します
$。 each(arr, function (key, value) {//配列を走査します。key はキーを表し、value は値を表します。
alert(key " " value);// 
}) 
}) 
</script> 
<body> 

 

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。