jQuery の基本構文には、セレクター(CSS スタイルのセレクター) とメソッドを使用して、選択された要素を操作することが含まれます。 jQuery の基本的な構文の例をいくつか示します。
要素の選択
-
HTML タグ名で要素を選択します:
$("tagname")例: ページ上の$("p")すべての要素を選択します。<p> -
CSS クラスによる要素の選択:
$(".classname")例:$(".myClass")クラス「myClass」を持つすべての要素を選択します。 -
ID による要素の選択:
$("#idname")例:$("#myElement")ID「myElement」の要素を選択します。 -
属性による要素の選択:
$("[attribute='value']")例:$("[data-type='button']")属性がdata-type「ボタン」に設定された要素を選択します。 -
選択範囲の結合:
$("tagname.classname")、$("#idname .classname")、 ...
選択した要素の操作
-
要素のコンテンツの変更:
.html()例.text():$("#myElement").html("New content")ID「myElement」の要素の HTML コンテンツを設定します。 -
要素の属性の変更:
.attr()、.prop()例: すべての要素の属性$("img").attr("src", "newimage.jpg")を変更します 。src<img> -
要素の CSS クラスの操作:
.addClass()、.removeClass()、.toggleClass()例:$("#myElement").addClass("highlight")クラス「highlight」を ID「myElement」の要素に追加します。 -
要素の非表示/表示:
.hide()、.show()、.toggle()例:$(".myClass").hide()クラス「myClass」のすべての要素を非表示にします。 -
要素のイベントの処理:
.click()、.hover()、.submit()、 ... 例:$("button").click(function() { ... })クリック イベント ハンドラーを登録します。
要素のコレクションの操作
-
コレクションの反復:
.each()例: ページ上の$("li").each(function() { ... })各要素を反復します。<li> -
コレクションのフィルタリング:
.filter()例.not():要素$("div").filter(".myClass")をフィルタリングし<div>、クラス「myClass」を持つ要素を選択します。 -
コレクションへの要素の挿入:
.append()、.prepend()、.after()、.before()例: ID「myElement」の要素に$("#myElement").append("<p>New paragraph</p>")新しい要素を追加します。<p>
エフェクトとアニメーション
-
フェードイン/フェードアウト効果の実行:
.fadeIn()、.fadeOut()例:$("#myElement").fadeIn(1000)ID「myElement」の要素を 1 秒間フェードインします。 -
slideUp/slideDown エフェクトの実行:
.slideUp()例.slideDown():$(".myClass").slideUp(500)クラス「myClass」を持つすべての要素を 0.5 秒間にわたって上にスライドします。 -
カスタム アニメーションの実行:
.animate()例:$("#myElement").animate({ left: '250px', opacity: '0.5' })ID「myElement」の要素の左の位置と不透明度を変更してアニメーション化します。
これらの例は、jQuery の基本構文のさまざまな側面を使用して要素を選択し、そのプロパティを操作し、効果やアニメーションを適用する方法を示しています。 jQuery は、Web 開発タスクを簡素化し、強化するための豊富なメソッドと機能のセットを提供します。