jqueryの注意事項と共通構文 summary_jquery-jsチュートリアル-php.cn

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

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

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

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

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

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

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

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

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

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

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

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");
} );
});