ホームページ ウェブフロントエンド jsチュートリアル 初心者が学ぶための最も簡単な jQuery プログラム_jquery

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

May 16, 2016 pm 06:50 PM
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 に変更され、に削除されます)。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

徹底した分析: jQuery の長所と短所 徹底した分析: jQuery の長所と短所 Feb 27, 2024 pm 05:18 PM

徹底した分析: jQuery の長所と短所

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?

See all articles