初心者が学ぶための最も簡単な jQuery プログラム_jquery

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

🎜>< ;STYLE type='text/css'>
display:block;
height:100px;
}
.css2{
display:block;
height:100px;
background-color:red;スタイル>


tt 'jquery- 1.3.2.js'>

$(document).ready(function(){
$("#freee") .hover( function(){
$(this).addClass("css2");
}, function(){
$(this).removeClass("css2");
} );
});






events
jQuery では、HTML の要素を選択する 2 つの方法が提供されています。1 つ目は、CSS と Xpath セレクターを組み合わせて文字列を形成し、それを jQuery のコンストラクターに送信する方法です ($("div > ul a") など)。 ; 2 番目の方法は、jQuery オブジェクトのいくつかのメソッドを使用することです。これら 2 つの方法を組み合わせて使用​​することもできます。

これらのセレクターをテストするには、starterkit.html の最初の順序付きリストを選択して変更してみます。

最初に、リスト自体を選択する必要があります。このリストには という ID があります。通常の JavaScript 記述メソッドは document.getElementById("ownedlist") です。jQuery では、次のようにします。

$(document).ready(function() {

$(" #順序リスト").addClass("赤");
}); ここでは、スターターキットの CSS スタイル red が順序リストに添付されています (翻訳者 Keel の注: テスト パッケージ .css の css ディレクトリにあるコアを参照してください) 、赤のスタイルが定義されています)。したがって、starterkit.html を更新すると、最初の順序付きリストの背景色が赤に変わりますが、2 番目の順序付きリストは変化しないことがわかります。

次に、新しいスタイルをいくつか追加しましょう。リストの子ノード。このようにして、順序リスト内のすべての li にスタイル「blue」が追加されます。

次に、もう少し複雑なことをしてみましょう。マウスを li オブジェクトの上に置いて遠ざけると、スタイルが切り替わりますが、それはリストの最後の要素にのみ適用されます。

$(document).ready(function() {
$("#ownedlist li:last").hover(function() {
$(this).addClass("green" );
}, function() {
$(this).removeClass("green");
}); 同様の CSS および XPath の例も多数あります。 , 詳細 多くの例とリストがここにあります。 (翻訳者 Keel の注: 始めるにはこの記事を読んでください。栽培は個人によって異なります。始めた後にさらに詳しく知りたい場合は、遅かれ早かれこの段落のリンクを読む必要があります。再度翻訳する必要はありません。 ..^_ ^!)

onclick、onchange、onsubmit などのすべての onXXX イベントは有効であり、すべて jQuery と同等の表現メソッドを持っています (翻訳者の Keel の注: jQuery は onXXX を好まないため、 XXX に変更され、に削除されます)。