jqueryの注意事項と共通構文 summary_jquery

1. セレクターに含まれる特殊記号について
セレクターには「.」、「#」、「(」、「]」などの特殊文字が含まれており、W3C の規定により属性値はたとえば、次のような特殊文字を含めることはできません:

コードをコピー コードは次のとおりです:

bb

通常の方法に従って取得します。例:

コードをコピー コードは次のとおりです:

$("#id#b" );
$("#id[1]");

上記のコードでは正しく要素を取得できません。

コードをコピー コードは次のとおりです:

$("#id\#b" );
$("#id\[1\] ");

2. セレクターにスペースが含まれる
については、例を見てください。その HTML コードは次のとおりです:

コードをコピーします コードは次のとおりです:

aa

bb

cc

dd

🎜>

ee

ff

jquery を使用して選択します 個別に取得します:

コードをコピー コードは次のとおりです:

alert($(".test :hidden").length);//出力 4
alert($(".test:hidden")。 length);//出力 3

結果が異なる理由は、子孫セレクターがフィルター セレクターと異なるためです。

コードをコピー コードは次のとおりです:

$(".test :hidden") .length; //

とスペース。上記のコードは、クラス「test」の要素内の非表示要素を選択します。

コードをコピー コードは次のとおりです:

$(".test:hidden") .length; //

スペースなし 上記のコードは、クラス「test」の非表示要素を選択します。

3. val() メソッドについて jquery では、val() メソッドは、オプションの値またはテキストのいずれかが一致した場合に、前方に読み込みます。選択されています。例:

コードをコピー コードは次のとおりです:

<オプション値="1 No.">No. 2
No.1

val の使用に関係なく("No.1") または val("No.2") の場合、後者が選択されます

4. css() メソッドについて
パラメータの値が数値の場合font-size、background-color、その他の属性などの属性に「-」記号がある場合、これらの属性の値を引用符なしで設定する必要があります。キャメルケース記述を使用します。例:

コードをコピー コードは次のとおりです:

$ ("p").css({fontSize:"30px"、backgroundColor:" #888888"});
引用符を含める場合は、「font-size」または「fontSize」と記述することができます。習慣を付けるために引用符を付けることをお勧めします。
5. height()メソッドについて
(1). jQuery1.2以降では、height()メソッドを使用してウィンドウやドキュメントの高さを取得することができます。
(2). css() メソッドを使用して高さの値を取得する場合と height() メソッドを使用する場合の違いは、 css() メソッドによって取得される高さの値はスタイルの設定に関連している可能性があります。 "auto" を取得するか、"10px" " やその他の文字列を取得することもできます。height() メソッドによって取得される高さの値は、スタイル設定に関係なく、ページ上の要素の実際の高さであり、単位はありません。 。
6. イベントオブジェクト (event) のプロパティについて
jQuery はイベントオブジェクトの共通プロパティをカプセル化し、ブラウザを必要とせずにすべての主要なブラウザでイベント処理が正常に実行できるようにします。タイプ判定。
(1)、event.type() メソッド
このメソッドの機能は、イベントのタイプを取得することです。

コードをコピー コードは次のとおりです。

$("a").click( function(event ) {
alert(event.type);// イベント タイプを取得します
return false;// リンクジャンプを防止します
});

上記のコードは「クリック」を実行した後に戻ります。
(2)、event.preventDefault() メソッド
このメソッドの機能は、デフォルトのイベント動作を防止することです。 W3C 仕様に準拠した JavaScript のPreventDefault() メソッドは、さまざまなブラウザとの互換性を確保するために、IE ブラウザでは無効です。
(3)、event.stopPropagation() メソッド
このメソッドの機能は、イベントのバブリングを防ぐことです。 W3C 仕様に準拠した JavaScript の stopPropagation() メソッドは、さまざまなブラウザとの互換性を確保するために、IE ブラウザでは無効です。
(4)、event.target() メソッド
このメソッドの機能は、イベントをトリガーする要素を取得することです。 jQuery がそれをカプセル化すると、異なるブラウザー間の違いが回避されます。

コードをコピー コードは次のとおりです:

$("a[href=http: //baidu .com]").click(function(event) {
alert(event.target.href);//イベントをトリガーした 要素の href 属性値を取得します
return false;
} );

上記のコードを実行すると、「http://baidu.com」が返されます。
(5)、event.popularTarget() メソッド
標準 DOM では、マウスオーバーとマウスアウトが発生する要素には、event.target() メソッドを通じてアクセスでき、関連要素には、event.popularTarget() メソッドを通じてアクセスできます。 ) メソッドにアクセスしました。マウスオーバーのevent.relativeTarget()メソッドはIEブラウザのevent.fromElement()メソッドに相当し、マウスアウトの場合はIEブラウザのevent.toElement()メソッドに相当し、さまざまな互換性を持たせるためにjQueryでカプセル化されています。ブラウザの一種。
(6)、event.pageX()メソッド/event.pageY()メソッド
このメソッドの機能は、ページに対するカーソルのx座標とy座標を取得することです。 jquery を使用しない場合、IE ブラウザではevent.x()/event.y() メソッドが使用され、Firefox ブラウザではevent.pageX()/event.pageY() メソッドが使用されます。ページにスクロール バーがある場合は、スクロール バーの高さと幅も追加します。 IE ブラウザでは、デフォルトの 2px の境界線も減算する必要があります。

コードをコピー コードは次のとおりです。

$("a").click( function(event ) {
alert("現在のマウス位置: "event.pageX","event.pageY);//ページを基準とした現在のマウスの座標を取得します。
return
} );

(7)、event.that() メソッド
このメソッドの機能は、マウスの左、中、右のボタンを取得することです。マウス クリック イベント。キーボード イベント キーボード キーで取得します。

コードをコピー コードは次のとおりです。

$(function() {
$(" body").mousedown(function(e) {
alert(e.that);//1=マウスの左ボタンを左; 2=マウスの中ボタン; 3=マウスの右ボタン
});
} );

(8)、event.metaKey() メソッド
ブラウザーによって の解釈が異なります。 .metaKey() メソッドを使用してキーボード イベントの キーを取得します。
(9)、event.originalEvent() メソッド
このメソッドの機能は、元のイベント オブジェクトを指すことです。
7.bind() メソッドについて
(1)、複数のイベント タイプをバインドする

コードをコピーします コードは次のとおりです:

$(function() {
$("div").bind("mouseover Mouseout", function() {
$ (この ).toggleClass("over");
});
(2)、イベント名前空間を追加します

コードをコピー コードは次のとおりです:

$ (function() {
$("div").bind("click.plugin", function() {
$("body").append("

click});
$("div").bind("mouseover.plugin", function() {
$("body").append("

mouseover< ;/ p>");
});
$("div").bind("dblclick", function() {
$("body").append("

dblclick< /p>");
});
$("button").click(function() {
$("div").unbind(".plugin");
} );
});

イベントを削除するときに名前空間を指定するだけで済むように、バインドされたイベント タイプの後に名前空間を追加します。 要素をクリックすると、「plugin」名前空間は削除されますが、「plugin」名前空間にない「dblclick」イベントはまだ存在します。
(3)、同じイベント名、異なる名前空間実行メソッド

コードをコピー コードは次のとおりです:

$(function() {
$("div").bind("click", function() {
$("body").append("

click< ;/ p>");
});
$("div").bind("click.plugin", function() {
$("body").append("< p> click.plugin

");
});
$("button").click(function() {
$("div").trigger("click!" ); // クリック後の感嘆符に注意してください
});

要素をクリックすると、click イベントと click.plugin同時にイベントも発生します。 要素をクリックしただけの場合、click.plugin イベントではなく、click イベントのみがトリガーされます。 trigger("click!") の後の感嘆符は、名前空間に含まれていないすべてのクリック メソッドと一致することに注意してください。両方をトリガーする必要がある場合は、感嘆符を削除してください。
8. jQuery でのアニメーションについて
(1). jQuery を使用してアニメーション効果を作成すると、アニメーションのジッターが発生する可能性があります。標準モードでは、ファイル ヘッダーに次の DTD 定義が含まれている必要があります:

(2). jQuery のアニメーション効果では、「slow」、「normal」、「fast」という 3 つの速度パラメータを指定できます (時間の長さはそれぞれ0.6秒、0.4秒、0.2秒）。 Speed キーワードを使用する場合は、show("slow") のように引用符で囲みます。time パラメーターとして数値を使用する場合は、show(1000) のように引用符で囲む必要はありません。
(3). animate() メソッドを使用して要素をアニメーション化する前に、要素の「top」、「left」、「buttom」、「right」のスタイル属性を変更する必要があります。要素の位置スタイルを「相対」または「絶対」に設定します。
9.load() メソッドについて
このメソッドは通常、Web サーバーから静的データ ファイルを取得するために使用されます。
(1)load()を使用して、読み込んだHTMLドキュメントのコンテンツをフィルタリングします。
このとき、load()メソッドのURLパラメータの構文構造は「urlセレクタ」であることに注意してください。 URLとセレクターの間にはスペースを入れてください。たとえば、test.html ページのクラス「para」のコンテンツのみをロードする必要がある場合は、 $("#xxx").load("test.html .para"); を使用できます。 2)、load() メソッドのコールバック関数のパラメータ
load() メソッドによって提供されるコールバック関数には 3 つのパラメータがあり、それぞれリクエストによって返されるコンテンツ、リクエストのステータス、および XMLHttpRequest オブジェクトを表します。次のように:

コードをコピー コードは次のとおりです:

#("#resText" ).load("test.html", function(responseText, textStatus, XMLHttpRequest) {
//responseText: リクエストによって返されたコンテンツ
//textStatus: リクエストのステータス: 4 種類: success、error、notmodified、 timeout
//XMLHttpRequest: XMLHttpRequest object
});

load() メソッドでは、Ajax リクエストが成功したかどうかに関係なく、コールバック関数 (callback) ) は、リクエストが完了している限りトリガーされます。これは、$.ajax() メソッドの完全なコールバック関数に対応します。

10. $.get() メソッドについて (1). このメソッドのコールバック関数は、レスポンスの戻りステータスが成功の場合にのみ呼び出されます。
(2)。このメソッドのコールバック関数には、返されるコンテンツ (XML ドキュメント、JSON ファイル、HTML フラグメントなど) である data と、リクエストのステータスである textStatus という 2 つのパラメーターがあります。 (成功、エラー、notmodified、タイムアウトの4種類)
$.post() メソッドは基本的に $.get() メソッドと同じであることに注意してください。

11. コンテンツ セレクターについて
コンテンツ セレクター: contains() セレクターでは大文字と小文字が区別されます。 12. プラグインの通常の書き方について

コードをコピーします コードは次のとおりです。

(function ($) {
$.fn.extend({
"resize" : function (userOptions) {
var defaultOptions = {高さ:100, 幅:100};
var mergeOptions = $.extend({},defaultOptions, userOptions);
return this.each(function () {
$(this).animate(mergeOptions, "slow", function () {
$(this).fadeTo("slow", ".70")
});
}
});


注:

1. プラグイン関数の this は、通常、6 行目のように単なる jQuery オブジェクトです。ただし、this.each の this は DOM オブジェクトを指します。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript デバッグ手順_JavaScript スキル次の記事：JavaScript デバッグ手順_JavaScript スキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル