Xiaoqiang の HTML5 モバイル開発への道 (34) – jQuery のセレクター-htmlチュートリアル-php.cn

Xiaoqiang の HTML5 モバイル開発への道 (34) – jQuery のセレクター

黄舟

リリース： 2017-02-04 14:43:20

オリジナル

1454 人が閲覧しました

1.jQueryとは何ですか?

jQuery はアメリカ人の John Resig によって作成され、世界中から多くの JavaScript マスターが参加するようになりました。

Xiaoqiang の HTML5 モバイル開発への道 (34) – jQuery のセレクター jQuery の創設者であり技術リーダーであり、現在は Mozilla で JavaScript ツール開発エンジニアとして働いています。彼は、『Pro JavaScript Techniques』 (すなわち、『Mastering JavaScript』) などの古典的な JavaScript 書籍の著者です。

jQuery は、プロトタイプに次ぐもう 1 つの優れた JavaScript フレームワークです。その目的は、- WRITE LESS, DO MORE、書くコードを減らして、より多くのことを実行することです。

jQuery は他の JS ライブラリにはない軽量の JS ライブラリ (圧縮後わずか 21k) で、CSS3 やさまざまなブラウザと互換性があります。

ダウンロードアドレス: http://jquery.com/download/

jQuery は、ユーザーが HTML ドキュメントとイベントをより簡単に処理し、アニメーション効果を実現し、Web サイトのインタラクションに AJAX を簡単に提供できるようにする、高速で簡潔な JavaScript ライブラリです。

jQuery は、ユーザーの HTML ページのコードと HTML コンテンツを分離したままにすることができます。つまり、コマンドを呼び出すために HTML に大量の JS を挿入する必要はなく、ID を定義するだけです。 2. 現在人気の JavaScript ライブラリ

jQuery

EXTJS

Prototype

DWR

Dojo

YUI

Mo oTools

3. jQuery ライブラリには次の機能が含まれています。

1. HTML 要素の選択

2. HTML 要素の操作

4. HTML イベント関数

5. HTML DOM のトラバースと変更

7. AJAX

8. ユーティリティ

4. jQuery ライブラリを追加します

Google または Microsoft の CDN jQuery を追加できます

Google の CDN

<head>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs  
/jquery/1.4.0/jquery.min.js"></script>  
</head>

ログイン後にコピー

Microsoft の CDN

<head>  
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery  
/jquery-1.4.min.js"></script>  
</head>

ログイン後にコピー

注: HTML5 では、type="text を記述する必要はありません/javascript" はい、JavaScript は HTML5 およびすべての最新のブラウザーのデフォルトのスクリプト言語です。

ダウンロードできる JQuery のバージョンは 2 つあります: http://jquery.com/download/

1. 製品バージョン: 実際の Web サイトで使用され、合理化および圧縮されています。

2. 開発バージョン: テストと開発に使用され、非圧縮で読み取り可能です。

5. シンプルで実用的な方法

jQuery 構文は HTML 要素を選択するためにコンパイルされており、要素に対して特定の操作を実行できます。

基本的な構文は次のとおりです: $(selector).action()

$: ドル記号の定義 jQuery

selector: HTML 要素のクエリと検索

action(): 要素に対する操作の実行

例: $(this ) .hide 現在の HTML 要素を非表示にします

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
<span style="white-space:pre">  </span>$(document).ready(function(){  
  <span style="white-space:pre">        </span>$("button").click(function(){  
  <span style="white-space:pre">            </span>$(this).hide();  
<span style="white-space:pre">      </span>});  
<span style="white-space:pre">  </span>});  
</script>  
</head>  
  
<body>  
<button type="button">Click me</button>  
</body>  
  
</html>

ログイン後にコピー

上記のコードに注意を払った友人は、上記の次のコードに混乱するかもしれません

$(document).ready(function(){  
  
--- jQuery functions go here ----  
  
});

ログイン後にコピー

このコードは、ドキュメントが完全にロードされたときに jQuery コードが実行されないようにするためのものです。そうしないと問題が発生する可能性があります。起こる。

上記に加えて、他のメソッドを通じて要素オブジェクトを取得することもできます

1. 要素セレクター

$("#test"): id="test" の要素。

$("p"):

要素。

$(".test"): class="test" の要素。

$("p.intro") : class="intro" の

要素。

$("p#demo") : id="demo" を持つ

要素。

2. 属性セレクター

jQuery は、XPath 式を使用して、指定された属性を持つ要素を選択します。

$("[href]") href 属性を持つすべての要素を選択します。

$("[href='#']") href と値が # に等しいすべての要素を選択します。

$("[href!='#']") href 値が "#" に等しくないすべての要素を選択します。

$("[href$='.jpg']") href 値が「.jpg」で終わるすべての要素を選択します。

3. CSS セレクター

jQuery CSS セレクターは、HTML 要素の CSS プロパティを変更するために使用できます。

$("p").css("background-color","red");

ログイン後にコピー

VI. jQuery セレクターテーブル

上記は Xiaoqiang の HTML5 モバイル開発ロード (34) - jQuery のセレクターの内容の詳細については、PHP 中国語 Web サイト ( www .php.cn)!