jQueryの主な機能は何ですか

jquery の主な機能は次のとおりです: 1. ページ フレームの一部にアクセスする; 2. ページのパフォーマンスを変更する; 3. ページのコンテンツを変更する; 4. イベントに応答する; 5. ページ フレームにアニメーションを追加するページ; 6. サーバーとの非同期対話; 7. よく使用される JavaScript 操作を簡素化します。

このチュートリアルの動作環境: Windows 10 システム、jquery3.2.1、Dell G3 コンピューター。

jquery の主な機能は何ですか?

jQuery の主な機能

1: ページ フレームの一部へのアクセス

jQuery により、DOM がノードやあるページ ノードの種類を修正する方法;

2: ページのパフォーマンスを変更する

ブラウザごとに CSS3 標準のサポートが異なるため、多くの CSS3 スタイルが適切に反映されません。 jQuery の登場により、この問題はうまく解決されました。 JavaScript コードをカプセル化して、さまざまなブラウザーが CSS3 標準を適切に使用できるようにします。

3: ページのコンテンツを変更する

jQuery は、強力で包括的な API を通じて、ページのコンテンツ、さらにはページ全体のフレームを簡単に変更できます。

4: イベントに応答する

ブラウザの互換性の問題を考慮する必要がなく、より簡単にイベントを処理できます;

5: ページにアニメーションを追加します

jQuery のライブラリには、多数のカスタマイズ可能なパラメータが用意されています。パラメータのアニメーション効果を定義します。

6: サーバーとの非同期対話

jQuery は、開発を大幅に容易にする Ajax 関連の操作の完全なセットを提供します。および非同期対話の使用;

7: 一般的な JavaScript 操作を簡素化する

jQuery は、配列操作、反復操作などの一般的な JavaScript 操作を簡素化するための多くの追加関数を提供します。

##jQuery の基本機能

#jQuery は DOM 関数をカプセル化し、DOM 関数の使用を非常に簡単かつ便利にします。 Web ページ要素の取得であっても、「追加、削除、変更、クエリ」であっても、より人道的な方法でカプセル化されています。 jQueryの基本機能とjQueryの設計の優秀さを簡単に紹介します。

1. Web ページ要素の取得

jQuery によって取得された結果はオブジェクトです

いくつかの基本的なメソッド

• $(document); // 选择整个文档对象
  $("#myId"); // 选择id = 'myId' 的元素
  $(".myClass"); // 选择class = 'myClass' 的元素
  $("div.myClass"); // 选择class = 'myClass' 的div元素
  $("input[name=first]"); // 选择name = 'first' 的 input 元素

jQuery 固有の式

• $("a:first"); // 选择网页中第一个a元素
  $("tr:odd"); // 选择表格中的奇数行
  $("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
  $("div:visible"); // 选择可见的div元素
  $("div:gt(2)"); // 选择所有的div元素，除了前3个
  $("div:animated"); // 选择当前处于动画状态的div元素

div

• ## の選択結果オブジェクトをさらにフィルタリングします。 #

  $("div").has("p"); // 选择包含p元素的div元素
  $("div").not(".myClass"); //选择class != 'myClass' 的div元素
  $("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
  $("div").first(); // 选择第1个div元素
  $("div").eq(5); // 选择第6个div元素

div を通じて他の要素を選択します

• $("div").next("p"); // 选择div元素后面的第1个p元素
  $("div").parent(); // 选择div元素的父元素
  $("div").closest("from"); // 选择离div最近的from父元素
  $("div").children(); // 选择div的所有子元素
  $("div").siblings(); // 选择div同级的其他兄弟元素（不包括自己）

2. チェーン操作

jQuery の最も優れたパート

jQuery は同じオブジェクトに対して連続関数操作を実行できます

#例:

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third

jQuery は毎回 1 つの関数操作を実行するため、チェーン操作は jQuery の最も便利な機能です。 value は元の操作の jQuery オブジェクトのままであるため、後で操作を直接続行できます。

.end() メソッド

.end() メソッドは、戻り値を前の jQuery オブジェクトに返します

例:

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'

3追加、削除、変更、確認

1. 追加新しい要素の作成: jQuery

let $myDiv = $("<div class=&#39;myDiv&#39;><p>Derek</p></div>"); // 创建新的元素，用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中

## に HTML 形式に準拠した文字列を直接渡します#Copy element

.clone()

現在の jQuery オブジェクトのクローン コピーを返します

すべての一致する要素、一致する要素の下位要素、およびテキスト ノードを含みます

2 パラメータ:

withDataAndEvents 要素のデータとバインディング イベントを同時にコピーするかどうか、デフォルト値は false

deepWithDataAndEvents データとバインディング イベントをコピーするかどうか要素のすべてのサブ要素を同時に削除する場合、デフォルト値は最初のパラメーター (withDataAndEvents) の値

2 です。削除

要素

.remove() 不保留被删元素的事件
.detach() 保留被删元素的事件，便于在重新插入文档时使用
.empty() 清空元素内容，但不删除该元素（即删除元素里面的所有节点）

3 を削除します。 Change

要素の挿入/移動

$("div").insertAfter($("p")); // 把div元素移动到p元素的后面
$("p").after($("div")); // 把p元素移动到div元素的前面

上 2 つのメソッドの効果は同じです

しかし、戻り値は異なります。$('div' ) と $('p') なので、後続の操作に基づいて選択する必要があります

要素を挿入/移動する他の 2 つの方法

// 在div内部的 末端 插入内容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div内部的 顶端 插入内容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

4. 1 つの getter/ を変更してチェックインします。 setter

同じ関数で、異なるパラメータを渡すことで変更/確認機能を実現できます

$("h1").html(); // html没有传参，实现取出h1的值
$("h1").html("Hello"); // html传参'Hello'，实现对h1进行赋值

jQuery 共通の値/代入関数

.html() HTML コンテンツの確認/変更

.text() テキスト内容の確認/変更

.attr() 属性値の確認/変更

.width() 要素の幅の確認/変更

.heigth() 要素の高さの確認/変更

.val() フォーム要素の値の確認/変更

#注:

結果オブジェクトに複数の要素が含まれている場合、値を割り当てるときにすべての要素が割り当てられます

値を取得するときは、最初の要素の値のみが取り出されます

.text () は例外で、すべての要素のテキスト コンテンツが取り出されます。

推奨学習: 「

jQuery ビデオ チュートリアル

>>

以上がjQueryの主な機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。