jQueryオブジェクトの基本的な使い方の紹介

jQuery は、Web 開発で広く使用されている軽量の JavaScript ライブラリであり、多くの一般的な DOM 操作とイベント処理メソッドをカプセル化し、JavaScript プログラミングを大幅に簡素化します。この記事では、jQuery セレクターの使用方法、DOM 要素の操作方法、イベントの処理方法など、jQuery オブジェクトの基本的な使用方法を紹介し、読者が jQuery の基本知識をより深く理解し習得できるように、具体的なコード例を使用します。

1. jQuery ライブラリの導入

まず、HTML ドキュメントに jQuery ライブラリを導入します。jQuery ファイルをダウンロードしてページに導入することも、CDN を使用して導入することもできます:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. セレクターを使用して要素を選択する

jQuery セレクターを使用してページ上の DOM 要素を選択できます。一般的に使用されるセレクターには次のものがあります:

• Select要素タグ名による要素: $("div")
• クラス名による要素の選択: $(".classname")
• Select ID による要素: $("#id")
• 属性による要素の選択: $("[attrName='attrValue']")

サンプル コード:

// 选取所有p元素
$("p").css("color", "red");

// 选取class为content的元素
$(".content").hide();

// 选取id为header的元素
$("#header").show();

// 选取属性data-id为1的元素
$("[data-id='1']").addClass("selected");

3. DOM 要素の操作

jQuery には、追加、削除、変更、検索操作など、DOM 要素を操作するための豊富なメソッドが用意されています。

#要素の追加:
• append()、prepend()、after()、before()
要素の削除:
• remove()、empty()
属性の変更:
• attr()、prop (), css()
コンテンツの取得:
• text(), html(), val()

// 在p元素后添加一个span元素
$("p").after("<span>这是新增的内容</span>");

// 删除class为content的元素
$(".content").remove();

// 修改id为header的元素的背景色
$("#header").css("background-color", "#f5f5f5");

// 获取输入框的值
var inputValue = $("input").val();

イベント ハンドラーの追加:
• on()
イベント ハンドラーの削除:
• off()
トリガー イベント:
• trigger()

// 点击按钮时弹出提示框
$("#btn").on("click", function() {
    alert("按钮被点击了！");
});

// 移除按钮的点击事件处理程序
$("#btn").off("click");

要素の表示と非表示:
• show()、hide()、toggle()
フェードインおよびフェードアウト:
• fadeIn()、fadeOut()、fadeToggle()
スライド効果:
• slideDown() 、 slideUp()、 slideToggle()
カスタム アニメーション:
• animate()

// 点击按钮时展示隐藏的内容
$("#toggleBtn").on("click", function() {
    $("#content").slideToggle();
});

// 自定义动画效果
$("#box").animate({ 
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
}, 1000);

以上がjQueryオブジェクトの基本的な使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。