jQuery学習小記

3198 ワード

Web 2.0が来て、Ajax、RSSの火が熱くなって、jsはますます多く使われて、jQueryは1つの強大なjsフレームワークで、彼は私たちにもっと少ないコードを書くことができて、ますます少なくなって、応援して、ますます少なくなって、応援しました.

勉強しながら書かせてください.

1.まずこれを見て

$(document).ready(function() {
	$("a").click(function() {
		alert("Hello world!");
	});
});

$(document).ready(function()は伝説のonload、$(「a」)はすべてのaラベルを取得し、リンクラベル:).click(function(){})は、すべての接続ラベルにonclickメソッドを追加します.このメソッドは何をしますか?alert(「Hello world!」); 2.この

$(document).ready(function() {
	$("#orderedlist").addClass("red");
});

$("#orderedlist")は、idがorderelistであるelementを取得するものです(このように呼ばせていただきます).addClass("red");このelementにcss:(「red」)3を加える.続けて

$(document).ready(function() {
	$("#orderedlist > li").addClass("blue");
});

$(document).ready(function() {
                $("#orderedlist li:last").addClass("blue");
});

$("#orderedlist>li")を参照して、idがorderelistのelementの下にあるすべての

ラベルを取得します.(「#orderedlist li:last」)idがorderelistのelementの下にある最後の

ラベル4を取得する.

$(document).ready(function() {
	$("#orderedlist").find("li").each(function(i) {
		$(this).html( $(this).html() + " BAM! " + i );
	});
});

$("#orderedlist")を止めないでください.find(「li」)は$(「#orderedlist li」)に等しい.each()はすべてのliを反復し,これに基づいてより多くの処理を行うことができる.html()は、取得するオブジェクトのhtmlコードである.html(「xxx」)は、「xxx」をオブジェクトとするhtmlコードである.続けて

$(document).ready(function() {
	$("li").not("[ul]").css("border", "1px solid black");
});

$(「li」)not([[ul])は、すべてのliを選択し、ulサブエレメントを除くliエレメント[]は、1つのエレメントを表すサブエレメントまたは属性

$(document).ready(function() {
	$("a[@href*=/content/gallery]").background("#eee");
});

$("a[@href*=/content/gallery])は、hrefを/content/galleryとする接続を選択し、「*=」は部分マッチングであり、「=」は完全マッチングであり、むやみにやってはいけないことに注意してください. 6.高級な

$(document).ready(function() {
	$('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});

ドル('#faq')をください.find('dd').hide().end()はidがfaqの要素を選択し、ddというサブ要素を探して隠し、その後今回のfindを終了し、次のfindを行い、dt要素を見つけ、clickイベントを加える.next();は、一致する要素の集合のうち、各要素が隣接する後の同世代の要素を取得する要素の集合である.is()は、現在選択されている要素のセットを1つの式でチェックし、少なくとも1つの要素がこの与えられた式に合致している場合はtrueを返し、要素がこの式に合致していない場合、または式が無効である場合はfalseを返します.hide()、show()、一致する要素を非表示/表示にします.slideToffle()、slideUp()、slideDown()は、高さの変化によって一致する要素を「スライド」で非表示または表示にします.fadeTo()、fadeIn()、fadeOut()は、不透明度の変化によってすべての一致する要素のフェードアウト効果を実現します. 7.まだ足りないの?

$(document).ready(function() {
	$("a").hover(function() {
		$(this).parents("p").addClass("highlight");
	}, function() {
		$(this).parents("p").removeClass("highlight");
	});
});

parent()、parents()、children()、next()、prev()などなど・・・ 8.疲れたので、また来ます!

微信ウィジェットカスタムswitch

Webページの文字数は行数を表示して、多く使って...に代わる