当時、私はまだ jquery を勉強していました。勉強メモ_jquery

Jquery は JavaScript で書かれたライブラリであることがわかり、これらのメソッドは複数のブラウザと互換性があり、優れたアニメーション効果を実現できます。 🎜> 1. $ 記号
1. セレクター
HTML タグ、ID、クラスなどを選択できます。
以下のように

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

<script type="text/javascript">
$(
function() {
$("table.datalist tr:nth-child(odd)").addClass("one");//odd: 奇数に一致、even: 偶数、nth-child: N 番目の子または奇数に一致親要素の下にある偶数の要素、1 から始まります
var obj = $("h2 a"); //h2 より下の値を取得し、配列
を返します (var i = 0; i obj[i].innerHTML = i.toString();
var obj1 = $("#demo"); ;
var obj2 = $(".Class") //取得するのは array
alert(obj2); "Two") ; // a が含まれる識別子を取得し、 Class="Two"
$("li:lt(2)").addClass("one"); li に Class="one" を 1 つ追加します。添字は 0
$("p>span").addClass("Two") から始まります。 //p、parent>child
} )
</script>


2. タグ内の属性を取得します

コード

コードは次のとおりです。 var sTitle = $("p>span").attr("Title"); // タグ内の属性値を取得します$ ("p>a" ).text(sTitle);//text() を使用して値を取得すると、html

3 を除いたテキストが取得されます。属性を設定します

コードをコピーします

コードは次のとおりです: $("button:gt( 0)").attr("disabled", "disabled "); //最初のボタンの後のボタンを取得し、それらの disable 属性を使用不可に設定します。この属性がないと、未定義が返されます $("img ").attr({ src: "test.jpg" , alt: "テスト画像" });

3.1. 属性の削除
$("img").removeAttr("src ");
4. Modify Class, if 存在する（存在しない）場合は、クラスを削除（追加）します。

コードをコピー

コードは次のとおりです。 $( function() { $("div>p").mouseover(

function() {

$(this).toggleClass("HightLight");//スタイル クラスを変更します
}
) ;
}


4.1. クラス
$("p").removeClass("selected"); ).addClass( "selected");
5. 画像をコピーします
$("img:eq(0)").clone().appendTo($("p"));最初の写真

6. イベントバインディング、複数の同じイベントをバインドできます




コードをコピー


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

$(function() { $("img").bind("click", function() { //バインディング イベント alert("Click! 1"); }); $("img").bind("click", function() { //バインディングイベント

alert("Click! 2");

}); })


7. イベントを削除します




コードをコピーします

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

$(function() { $("input[type=button]").click(function() { $("img").unbind("click",eventImg );//バインドを解除してメソッド alert("Remove event!"); })

8. 要素の表示と非表示を切り替える



コードをコピー


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

<script type="text/javascript">

$(function() { $("#demobtnF").click(function() { $("#p_btn").show(); //表示}); $("#demobtn").click(function() { $("span:first").hide();//隠す})

</ script>

フェードインおよびフェードアウト効果: フェードインおよびフェードアウト効果を取得するには、show() および Hide() メソッドに時間パラメーターをアップロードします。 >


コードをコピー


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

<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$(" #imgs").show(10000);
});
$("#Button2").click(function() {
$("#imgs").hide(5000);
});
})

コードをコピー

コードは次のとおりです。 <input id="Button1" type="button" value="Show" /> <input id="Button2" type=" button" value ="非表示" />

<hr />

<img id="imgs" src="images/27m03.jpg" alt="log" />
<hr /> 次のように:




コードをコピー

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

$ ("#Button3").click( function() { $("#imgs").fadeIn(10000); }); ) { $("# imgs").fadeOut(5000); 2. スライド効果 - slideUp() メソッドと slideDown() メソッドによって実装されます。 >

コードをコピー


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

$("#Button1").click(function) () {
$("#imgs ").slideUp(10000);
$("#Button2").click(function() {

$("#imgs ").slideDown(5000); }); 3. Jquery 関数 function 1. ブラウザ検出 $.browser、次のように:

コードをコピー


コードは次のとおりです。 🎜>if ($.browser.safari) リターンアラート( "safari");
if ($.browser.mozilla) リターンアラート("mozilla");
if ($.browser.opera) リターンアラート; ("opera");

2. ボックス モデル $.boxModel は次のとおりです:
alter($.boxModel ? "standard" : "IE"); JavaScript オブジェクトの処理 $.each(arr,function) //配列の場合 各オブジェクトは次のように関数 function

で処理されます: コードをコピーします

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


var aArr = ["one", "two", "three"];
$.each(aArr, function(iNum) , value) {
alert(iNum "," value);

}) ;


$.grep(Arr,funtion(value)):Filter
例: 🎜>

コードをコピーします コードは次のとおりです:

var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var DemoArr = $.grep(aArray , function(value) {
戻り値 > 4;
ドキュメント。 write(DemoArr.join());
$.map(Array,function(value,index) )

この記事はすべて当時の研究ノートに基づいています。
概要
Jquery ライブラリには多くの関数があり、その一部、特に Jquery の Ajax は非常に重要です。この記事は、当時の Jquery の学習の日々を思い出します。