Jquery の概要とその詳細な使用法-jsチュートリアル-php.cn

この記事では、Jquery の概要とその詳細な使用法について説明します。必要な方は参考にしていただければ幸いです。

1. Jquery の概要

Jquery は優れた Javascript フレームワークです。これは軽量の js ライブラリです (圧縮後わずか 21k)。CSS3 およびさまざまなブラウザー (IE 6.0、FF 1.5、Safari 2.0、Opera 9.0) と互換性があります。 Jquery をプロジェクトに適用すると、プログラマーは複雑な JS アプリケーションの設計と作成から解放され、実装の詳細ではなく機能要件に注意を向けることができるため、プロジェクトの開発速度が向上します。 JavaScript と Ajax プログラミングを簡素化するのに役立ちます。 Web ページ上のドキュメントの操作、イベントの処理、特殊効果の実装、Web ページへの Ajax インタラクションの追加を簡単に行うことができます。

2. jQuery の機能

a. 軽量なアプリケーション c. DOM 操作、モーションアニメーション、AJAX -browser (ブラウザの互換性は考慮されなくなりました) f. 暗黙的な反復 g. 豊富なプラグインライブラリ....

jQueryを導入する

路径引入
<script src=&#39;文件路径&#39;></script>
引入在线资源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

ログイン後にコピー

entry関数

$(document).ready(function(){    
//类似于原生js的window.onload
});
//简写
$(function(){   });

ログイン後にコピー

とwindow.onloadの違い

違い 1: 書き込み番号の違い

Js エントリ関数は 1 回しか出現できません。複数回出現すると、イベントカバレッジの問題が発生します。 jQuery のエントリ関数は、イベントカバレッジなしで何度でも出現できます。

違い 2: 実行タイミングの違い

Js エントリ関数は、すべてのファイルリソースが読み込まれた後に実行されます。これらのファイルリソースには、ページドキュメント、外部 js ファイル、外部 css ファイル、画像などが含まれます。

#jQuery のエントリ関数は、ドキュメントが読み込まれた後に実行されます。ドキュメントのロードが完了すると、DOM ツリーがロードされた後、すべての外部リソースがロードされるのを待たずに DOM を操作できるようになります。

DOM オブジェクトと jQuery オブジェクト

jQuery オブジェクト:

jQuery セレクターは DOM を取得します。オブジェクトはカプセル化され、jQuery メソッドを備えた jQuery オブジェクトになります。端的に言えば、これは DOM オブジェクトの再パッケージ化です。

jQuery オブジェクトを DOM オブジェクトに変換する

最初の方法:

var btn1 = $btn[0];

ログイン後にコピー

// ここでポイントとして、jQuery オブジェクト $btn は DOM オブジェクト btn1 に変換されます (この方法が推奨されます)。2 番目のメソッド

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

ログイン後にコピー

DOM オブジェクトは jQuery

# に変換されます。 ##$(domObject) パッケージを使用して jQuery オブジェクトにラップします

jQuery セレクター

jQuery セレクターには次の機能があります。 jQuery ページ上の要素をより便利に取得できるようにする一連のメソッドを提供します。構文は CSS セレクターと一致しています。

#基本セレクター

"#"

ID セレクター

--例

$(“#btnShow”).css(“color”, “red”);

ログイン後にコピー

#ID btnShow を持つ要素を選択します (戻り値は jQuery オブジェクトです)

#"."

クラスセレクター

--例

$(“.liItem”).css(“color”, “red”);

ログイン後にコピー

すべてを含む選択クラス liItem

"element"

##タグセレクターの要素

--例#

$(“li”).css(“color”, “red”);

ログイン後にコピー

#タグ名 li

##"Space"

のタグ名を持つすべての要素を選択します階層セレクター (子孫セレクター)

--例

$(“#j_wrap li”).css(“color”, “red”);

ログイン後にコピー

ID j_wrap li

## を持つ要素のすべての子孫要素を選択します。

">"

子セレクター

##-- 例

$(“#j_wrap > ul > li”).css(“color”, “red”);

ログイン後にコピー

ID j_wrap li を持つ要素のすべての子要素 ul をすべて選択

##基本フィルターセレクター

#" :eq(インデックス)"

选择匹配到的元素中索引号为index的一个元素，index从0开始

--示例

$(“li:eq(2)”).css(“color”, ”red”);

ログイン後にコピー

选择li元素中索引号为2的一个元素

":odd"

选择匹配到的元素中索引号为奇数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

ログイン後にコピー

选择li元素中索引号为奇数的所有元素

":even"

选择匹配到的元素中索引号为偶数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

ログイン後にコピー

选择li元素中索引号为偶数的所有元素

筛选（方法）

find(selector)

查找指定元素的所有后代元素（子子孙孙）

--示例

$(“#j_wrap”).find(“li”).css(“color”, “red”);

ログイン後にコピー

选择id为j_wrap的所有后代元素li

children()

查找指定元素的直接子元素（亲儿子元素）

--示例

$(“#j_wrap”).children(“ul”).css(“color”, “red”);

ログイン後にコピー

选择id为j_wrap的所有子代元素ul

siblings()

查找所有兄弟元素（不包括自己）

--示例

$(“#j_liItem”).siblings().css(“color”, “red”);

ログイン後にコピー

选择id为j_liItem的所有兄弟元素

parent()

查找父元素（亲的）

--示例

$(“#j_liItem”).parent(“ul”).css(“color”, “red”);

ログイン後にコピー

选择id为j_liItem的父元素

eq(index)

查找指定元素的第index个元素，index是索引号，从0开始

--示例

$(“li”).eq(2).css(“color”, “red”);

ログイン後にコピー

选择所有li元素中的第二个

jQuery各大版本的引用

官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
jquery-3.0.0
官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
jquery-2.1.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
jquery-2.1.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
jquery-2.0.0
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
jquery-1.11.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
jquery-1.11.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
jquery-1.10.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
jquery-1.9.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
jquery-1.8.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
jquery-1.7.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
jquery-1.6.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
jquery-1.5.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
jquery-1.4.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
jquery-1.4.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
jquery-1.3.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
jquery-1.2.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>

ログイン後にコピー

以上がJquery の概要とその詳細な使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。