jQuery の入門レベルの学習ノートとソース コード_jquery

jQuery は本当に優れており、エフェクトによっては思わず悲鳴を上げてしまうことさえあります。さまざまなプラグインで好みの効果を実現できます。この方法は、クロックスの靴と同じように、jQuery の人気の基礎を築きました。 jQuery のもう 1 つの利点は、動作を構造から分離するという目的を達成できることです。

内容の概要:
1. インストール
2. こんにちは、jQuery
3. 検索: セレクターとイベントの使用
4. 評価してください: AJAX の使用
5. Animate me (私を生き返らせる): FX (jQuery FX、jQuery UI に続く 2 番目のサブライブラリで、UI の外観モジュールではなく、オブジェクトの消失と外観、色、サイズ、およびアニメーション効果を強調する) を使用します。位置変換。)
6. 並べ替え: tablesorter プラグインを使用します (テーブルの並べ替え)

custom.js

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

$(document).ready(function() { //## 短縮メソッド: (document).ready は削除可能
## クリックされたときにすべての "" が入力されるようにしますhello world"
$("a").click(function() {
alert("Hello world");
});

## ID は "順序リスト" が追加されましたクラス名は「red」で、core.css で定義されています。
$("#ownedlist").addClass("red");

## id は、「ownedlist」の最後の li です。 , マウスが上を通過すると色が変わります
$("#ownedlist li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
}
);

## find() を使用すると、選択された要素 Find に対する条件なので、$("#ownedlist).find("li") は $("#ownedlist li") と同じです。 each() メソッドはすべての li を反復処理し、これに基づいてさらに多くの処理を実行できます。
## addClass() などのほとんどのメソッドは、独自の each() を使用して、各 li の HTML テキストを取得し、テキストを追加し、HTML に設定します。 li のテキスト。
$("#ownedlist").find("li").each(function(i) {
$(this).html($(this).html() " バーム! " i);
}
);

## すべての入力値をクリア
$("#reset").click(function() {
$ (" input").attr("value", "");
});

## このコードは、すべての li 要素を選択し、ul サブ要素を持つ li 要素を削除します。ブラウザを更新した後、
## 非常に便利な css() メソッドに注目してください。実際にテストして観察してください。たとえば、CSS スタイルの変更などの効果はありますか?別の CSS スタイルを追加してみてはどうでしょうか?
$("li").not("[ul]").css("border", "1px 単色黒").css("color", "red"); # このコードは、name 属性を持つすべてのリンクに背景色を追加します。 [注: jQuery1.2 以降では、@ 記号を削除する必要があります]
$("a[@name]").background("#eee");

## が必要になる場合があります。特徴的な href 属性を持つリンクを選択してください。 href の理解はブラウザによって異なる可能性があるため、完全一致 ("=") の代わりに部分一致 ("*=") を使用します。
$ ("a[@href *=bot]").click(function() {
alert("hello world 2");
});

## ここではコード量を減らすためにいくつかの Chain 式を使用しますより直感的で理解しやすくなります。 '#faq' が 1 回だけ選択されるのと同様に、end() メソッドを使用すると、最初の find() メソッドは終了 (元に戻され) します。
## したがって、後で次の操作を行わずに find('dt') を続けることができます。 $('#faq').find('dt') を再度書き込みます。
## click イベントでは、$(this).next() を使用して dt のすぐ下にある dd 要素を見つけます。これにより、クリックされた質問の下にある回答をすばやく選択できます。
$('#faq').find('dd').hide().end().find('dt').click(function() {
var 答え = $(this). next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown(); >});

## 同じレベルの要素を選択するだけでなく、親レベルの要素も選択できます。ユーザーがマウスを動かしたときに、記事の特定の段落にあるリンクの親要素を強調表示したい場合があります。
$("a").hover(function () {
$(this) を試してください。 ).parents("p").addClass("ハイライト");
}, function() {
$(this).parents("p").removeClass ("ハイライト"); });

## AJAX の最初の試み。まず、サーバー側のコードが必要です。この例では、ASPX ファイルを使用して評価パラメーターを読み取り、評価の合計数と平均を返します。
// マークアップを生成します
var ratingsMarkup = [" 評価してください: "];
for (var i = 1; i RatingMarkup[評価Markup.length] = "" i "
$ ( "#rated").append(ratedMarkup.join('')).find("a").click(function(e) { //join メソッドを使用して、配列のすべての要素を接続する文字を返します。指定されたシンボル String
e.preventDefault(); //このメソッドは、イベントに関連付けられたデフォルトのアクション (そのようなアクションが存在する場合) を実行しないように Web ブラウザーに通知します
// リクエストを送信します
$ .post(" rate.aspx?rated=" $(this).html(), {}, function(xml) { //ここでは、スペースを占有するために {} を使用する必要があります
// 結果のフォーマット
var result = [
"評価していただきありがとうございます、現在の平均: ",
$("平均", xml).text(),
"、投票数: ",
$( "count", xml). text()
]// 結果を出力します
$("#rated").html(result.join(''));
});

## 一部の動的効果は show() と Hide() を使用して実行できます。伸縮効果。
$("a").toggle(function() { //双方向スイッチを切り替えます
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});

## animate() と組み合わせて、スライド効果などの効果を作成できます。 fade
$("a").toggle(function() {
$(".stuff").animate({
高さ: '非表示',
不透明度: '非表示'
} , 'slow');
}, function() {
$(".stuff").animate({
高さ: '表示',
不透明度: '表示'
} , 'slow');
});

## tablesorter プラグインを使用します (テーブルのソート)
## ほとんどすべての特殊な項目は次のように使用されます: 最初に js ファイルをインクルードしますもちろん、いくつかのパラメータ オプションも設定できます。
$("#large").tableSorter(); >
## このテーブルにいくつか追加することもできます。効果を強調するために、インターレース背景色 (横断歩道) 効果を作成できます。
$("#large").tableSorter({
stripingRowClass : ['odd', 'even'], // 配列として提供されるストライピング用のクラス名。
stripRowsOnStartUp: true // tableSorter init で行を削除します。

}); ;

jquery-starterkit.rar