ホームページ > 記事 > ウェブフロントエンド > jQueryパッケージの使い方
はじめに
Web開発において、JavaScriptは必要なツールとなっています。 jQuery ライブラリは間違いなく最も人気のある JavaScript ライブラリの 1 つです。 DOM、Ajax、イベント処理などをより効率的に操作するのに役立つ、シンプルで使いやすい API を提供します。この記事では初心者向けにjQueryの使い方を紹介します。
1. jQuery のインストール
始める前に、まず jQuery をインストールする必要があります。
jQuery 公式 Web サイトから最新バージョンの jQuery.zip または jQuery.min.js ファイルをダウンロードできます。ダウンロード Web サイト: https://jquery.com/download/
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 を提供しますこれらの要素を操作します。
次の事前定義された基本セレクターを使用して、HTML 要素を選択できます:
$("element") 匹配所有给定元素。 $(".class") 匹配所有给定类名的元素。 $("#id") 匹配所有给定 id 的元素。
例:
$("p") //匹配所有的 <p> 标签 $(".intro") //所有类名为 "intro" 的元素 $("#demo") //id 为 demo 的元素
階層セレクターを使用して、特定の関係を持つ要素を選択できます:
$("parent>child") 匹配父元素下的子元素。 $("prev + next") 匹配紧接在 prev 元素之后的 next 元素。 $("prev ~ siblings") 匹配 prev 元素之后的所有同级 siblings 元素。
例:
$("div>p") //匹配 <div> 中所有 <p> 元素 $("h1+p") //所有 <h1> 元素后直接跟着的 <p> 元素 $("h1~p") //所有 <h1> 元素后的同级 <p> 元素
フィルター セレクターは、選択した要素に基づいてフィルターします。以下はフィルター セレクターの例です:
: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) 从字符串中创建元素。 $("<element>") 创建元素。 $("<element>", { 创建设置元素属性的元素。 html: "", css: "", id: "" })例:
$("p").after("<p>Hello World!</p>"); //在所有的 <p> 元素后添加一个 <p> 元素
$("element").remove(); 从页面中删除元素。例:
$("p").remove(); //删除所有的 <p> 元素
$("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 サイトの他の関連記事を参照してください。