素晴らしい Jquery - Jquery と DOM オブジェクト間の相互変換と DOM_jquery の 3 つの操作

jQuery クラス ライブラリのさまざまな関数を呼び出せるのは jQuery オブジェクトだけです。同様に、dom オブジェクトの一部のプロパティとメソッドは jQuery 上で呼び出すことができませんが、基本的に jQuery クラス ライブラリが提供する関数にはすべての dom 操作が含まれます。そのためには、jQuery オブジェクトを DOM との間で変換する方法を知る必要があります。

1. jQuery オブジェクトは、DOM オブジェクトを jQuery でラップして生成されるオブジェクトです。

2. jQuery オブジェクトと DOM オブジェクト間の変換。

良い書き方:

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

var $input=$("input")

jQueryで取得したオブジェクトは変数の前に$を付けます。

jQuery オブジェクトを DOM オブジェクトに変換する (2 つのメソッド: [index] と get(index)

)

a:var $cr=$("#cr") //jQuery オブジェクト
var cr=$cr[0] //DOM オブジェクト
b:var $cr=$("#cr") //jQuery オブジェクト
var cr=$cr.get(0) //DOM オブジェクト

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

var cr=document.getElementById("cr"); //DOM オブジェクト
var $cr=$(cr);

3. 他のライブラリとの競合を解決します

jQuery.noConflict()。
jQuery は $ を独自のショートカットとして使用します。

4. jQuery を使用する利点

簡潔な文章
<2>CC1 ～ CCS3 をサポート
完璧な処理メカニズム

上記のコードを実行すると、ブラウザがエラーを報告します。
しかし、次のように書くと:

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

$('#tt').css("色","赤");

そのような要素がないため、ブラウザはエラーを報告しません。

5.jQuery セレクター

jQuery セレクターは jQuery の最優先事項です。

jQuery フィルター セレクターは、CSS の疑似クラス セレクターに似ています。

偶数および奇数セレクター

偶数: $("tr:even")
奇数: $("tr:odd")

CSS3 擬似クラスセレクターの奇数と偶数

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

p:nth-child(奇数)
{
背景:#ff0000;
}
p:n 番目の子(偶数)
{
背景:#0000ff;
}

フォームタイプセレクター

<3>エラーを防ぐためのエスケープセレクター

6.DOM操作分類(1:DOMコア 2.HTML-DOM 3.CSS-DOM)

1.DOM コア

DOM コアは JavaScript 専用ではなく、DOM をサポートするあらゆるプログラミング言語で使用できます。その用途は Web ページの処理に限定されません。 XML などのマークアップ言語で記述されたドキュメントを処理するためにも使用できます。

2.HTML_DOM

JavaScript と DOM を使用して HTML ファイルのスクリプトを作成する場合、HTML-DOM に固有の属性が多数あります。
HTML_DOM は、さまざまな HTML 要素の属性を説明するためのより簡潔な表記法を提供します。
例:

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

document.forms
要素.src

WEB限定

3.CSS_DOM

CSS_DOM は CSS の操作です。主に、スタイル オブジェクトのさまざまなプロパティを取得および設定します。
スタイル オブジェクトのさまざまなプロパティを変更します。さまざまな効果を変更します。

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

element.style.color="赤";

7. ノードを移動します

1.children()
2.next()
3.prev()
4.兄弟()
5.closest()

8.jquey css

<1> 不透明度を使用して透明度を設定できます。互換性の問題は jQuery ですでに解決されています。

$("p").css("不透明度","0.5");

<2>$("p").height(100) //デフォルトの単位 100 は px です。他の単位を使用したい場合は、文字列
を使用する必要があります。

offset() メソッド

ビューポートを基準としたオフセットを返します

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

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

位置()

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

//最新の位置スタイルを基準としたオフセットを返します。
var 位置=$("p").position();
var left=position.left;
var top=position.top;

scrollTop() およびscrollLeft()

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

//スクロールバーの上端と左端からの距離を返します。
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//指定した位置にスクロールを設定することもできます:
$("ab").scrollTop(300);

pageX と pageY、ページ上のマウスの位置を取得します

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

$(document).mousemove(function(e){
$("span").text("X: " e.pageX ", Y: " e.pageY);
});