jQueryパッケージの使い方

はじめに

Web開発において、JavaScriptは必要なツールとなっています。 jQuery ライブラリは間違いなく最も人気のある JavaScript ライブラリの 1 つです。 DOM、Ajax、イベント処理などをより効率的に操作するのに役立つ、シンプルで使いやすい API を提供します。この記事では初心者向けにjQueryの使い方を紹介します。

1. jQuery のインストール

始める前に、まず jQuery をインストールする必要があります。

1. 公式 Web サイトで jQuery をダウンロード

jQuery 公式 Web サイトから最新バージョンの jQuery.zip または jQuery.min.js ファイルをダウンロードできます。ダウンロード Web サイト: https://jquery.com/download/

2. CDN (コンテンツ配信ネットワーク) を使用する

CDN を使用すると、jQuery ファイルをより効率的に取得できます。ローカルに保存します。

一般的に使用される 2 つの jQuery CDN:

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

2. jQuery を使用して要素を選択する

jQuery はセレクター構文を使用して要素を選択し、使いやすい API を提供しますこれらの要素を操作します。

1. 基本セレクター

次の事前定義された基本セレクターを使用して、HTML 要素を選択できます:

$("element")              匹配所有给定元素。
$(".class")               匹配所有给定类名的元素。
$("#id")                  匹配所有给定 id 的元素。

例:

$("p")   //匹配所有的 <p> 标签
$(".intro")  //所有类名为 "intro" 的元素
$("#demo")   //id 为 demo 的元素

2. 階層セレクター

階層セレクターを使用して、特定の関係を持つ要素を選択できます:

$("parent>child")         匹配父元素下的子元素。
$("prev + next")          匹配紧接在 prev 元素之后的 next 元素。
$("prev ~ siblings")      匹配 prev 元素之后的所有同级 siblings 元素。

例:

$("div>p")  //匹配 <div> 中所有 <p> 元素
$("h1+p")   //所有 <h1> 元素后直接跟着的 <p> 元素
$("h1~p")   //所有 <h1> 元素后的同级 <p> 元素

3. フィルター セレクター

フィルター セレクターは、選択した要素に基づいてフィルターします。以下はフィルター セレクターの例です:

:first                    选择序列中的第一个元素。
:last                     选择序列中的最后一个元素。
:even                     选择序列中索引为偶数（从 0 开始）的元素。
:odd                      选择序列中索引为奇数（从 0 开始）的元素。
:eq(index)                选择序列中索引指定为 index 的元素。
:gt(no)                   选择索引大于 no 的元素。
:lt(no)                   选择索引小于 no 的元素。

例:

$("li:first")  //选取列表中的第一个 <li> 元素
$("li:last")   //选取列表中的最后一个 <li> 元素
$("li:even")   //选取列表中的偶数 <li> 元素
$("li:eq(1)")  //选取列表中第二个 <li> 元素

3. jQuery は DOM 要素を操作します

jQuery を通じてページ要素を変更、追加、または削除できます。

#新しい要素

次のメソッドを使用して新しい HTML 要素を作成できます:

$(html)            从字符串中创建元素。
$("<element>")     创建元素。
$("<element>", {    创建设置元素属性的元素。
    html: "",
    css: "",
    id: ""
})

例:

$("p").after("<p>Hello World!</p>");  //在所有的 <p> 元素后添加一个 <p> 元素

要素の削除

remove() メソッドを使用して要素を削除できます:

$("element").remove();              从页面中删除元素。

例:

$("p").remove();  //删除所有的 <p> 元素

Change element

jQuery には、要素の属性とコンテンツを変更するための一連のメソッドがあり、その中で最も一般的に使用されるのは attr() メソッドと text() メソッドです。

$("element").attr("attribute", "value")    改变元素的属性。
$("element").html(content)                 更改元素的内容。
$("element").text(content)                 更改元素的文本内容。

例:

$("img").attr("src", "new_src.jpg");  //更改图片的 src 属性
$("<p>").text("Hello World!");       //创建一个新的 <p> 元素，以文本 Hello World! 作为其内容

4. 要素の走査

jQuery には、要素を走査する次のメソッドがあります:

next()                  返回下一个兄弟元素。
prev()                  返回前一个兄弟元素。
parent()                返回当前元素的直接父元素。
parents()               返回当前元素的所有先辈元素。
find()                  查找匹配选择器的后代元素。

例:

$("p").next()     //返回第一个 <p> 元素的下一个兄弟元素
$("p").parent()   //返回第一个 <p> 元素的直接父元素
$("p").parents()  //返回第一个 <p> 元素的所有先辈元素

5. イベント処理

次のメソッドを使用してイベント ハンドラーをバインドできます。

click()                 当元素被点击时运行的函数。
mouseover()             当指针移动到元素上时运行的函数。
keydown()               当键盘上按下键时运行的函数。
submit()                当提交表单时运行的函数。
ready()                 当文档被加载时运行的函数。

例:

$("button").click(function(){
    alert("Button Clicked!");
});

6. Ajax

jQuery は AJAX (非同期 JavaScript および XML) を使用して、ページ全体をリロードすることなく Web ページ上のコンテンツを動的に更新します。

jQuery は、$.ajax() または $.get() 関数を使用してリクエストを送信し、$.parseJSON() または $.getJSON() 関数を使用してサーバーからの JSON データを処理できます。

例:

$.ajax({
    url: "demo.txt",
    success: function(result){
        $("div").html(result);
    }
});

結論

この記事では、インストール、要素の選択、DOM 要素の操作、要素の走査、イベント処理、AJAX など、jQuery の基本を紹介します。もちろん、jQuery には、深い学習と理解が必要な高度な使用法が数多くあります。

以上がjQueryパッケージの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。