JQuery DOMの一般的なメソッドをまとめます-jsチュートリアル-php.cn

1. jquery オブジェクトの基本メソッド:

(1) get(); 一致する要素の 1 つを取得する $(this).get(0) は $ と同等です。 (this)[0]
(3) Number Index(jqueryObj); サブオブジェクトを検索します
(4) each(callback); foreach と似ていますが、要素の配列を走査します
例:

$("img".each(function(index){
    this.src = "test" + index + ".jpg";
 });

ログイン後にコピー

return false を使用します; return true; Break と continue を表す関数

(5) length, size(); すべての要素の合計値を返します

(6) jQuery.noConflict(true); など:この時、 $

の代わりに dom.query を使用します。 2. JQuery セレクター

(1) 基本:

* はすべての DOM 要素に一致します

.classname は指定されたクラス名の DOM 要素に一致します

element (DOM タグ名) はすべての DOM 要素に一致します指定された名前の DOM 要素

id は、指定された ID を持つ DOM 要素

と一致し、で区切られ、複数の選択条件の 1 つと一致することを示します

(2) レベル:

Select one [space] Select two は 1 つを選択することを意味します2 番目の条件を満たすすべての要素

1 つ選択[>]2 つ選択とは、条件 2 を満たす選択 1 内の最初の要素を意味します

1 つ選択[+]2 つ選択とは、条件 2 を満たす次の要素が次に選択されることを意味します

1 つ選択[ ~]Select Two は、条件 2 つの兄弟

(3) のすべての要素の選択を表します。 Operator

:animated アニメーション化された要素

:eq(index) インデックス位置、例: $("div:eq(1)"

:偶数偶数要素

dd：最後の要素：not（selector）exclus（string）選択したオブジェクトはcontasを含みます：空の選択したオブジェクトは空です。

:first-child

:last-child
:nth-child(index)
nly-childの数唯一の子要素

form

:text :checkbox :radio :image :file :submit :reset :password :button

form Status
:checked :disabled :enabled :selected

Visibility

:hidden :visible

属性とその演算子

[属性名] 指定された属性を含む要素と一致します

[ att = value]上記の

[att*= value]を通して '' s '' '' 'out's out out out out out out out out out out out out out out out out out's' s '' 's' 's' 's' 's''' 's' 's' 's' 's''' 's' 's' 's' 's''' 一緒にオフアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトソーアウトソーアーソスto to to to to to to to to to to Totos [att3]... 複数の属性条件のいずれかに一致

3. JQuery DOM の共通操作

(フィルタリング後に実行できる共通操作を指します)セレクターを介した DOM、つまり JQuery オブジェクトインスタンスのメソッド)

1. 属性操作 (注: attr(name)、html()、val() は最初に一致した要素に対してのみ操作します。他のものはすべてに作用します)

attr(name); 一致する要素を取得する最初の要素で指定された属性

attr(key, fn) と attr(key, value) は、一致するすべての要素の属性値を設定します。前者は関数であり、値はこの

関数の戻り値です。 Value

attr(properties) キーと値のペアを使用して、一致するすべての要素に 1 つ以上の属性値を設定します。例: $("img" .attr({ src: "test.jpg", alt: "テスト画像" });
removeAttr(name) 一致する要素の指定された属性値を削除します
addClass(classname) クラス名を追加します。 class属性
removeClass(classname)
toggleClass(classname) クラス名の切り替え(存在する場合は削除、存在しない場合は追加) )

html()

html(setvalue)

text()

text(setvalue)

val()

val(val) 通常の要素の場合、select、radio などの使用方法は object.val(set value); である必要があります。次に、次のように値を使用してこの値のオブジェクトを示します。 "#Multiple". Val (["value1", "value3"]; "]);

2. フィルタリング
実際、多くのフィルタリングメソッドはセレクター演算子を通じて実装できるため、ここでは一部の特別な操作メソッドのみをリストします。。

eq(index)、filter(expr)、hasClass(class)、is(expr)、not(expr)、

filter(fn)オブジェクトは一度計算されます
'$.each')。呼び出された関数は false を返し、要素は削除されます。それ以外の場合は保持されます)

slice(start,[end]) 一致するサブセットを選択します

要素のセットを他の配列に変換します (配列であるかどうかに関係なく)。要素の配列かどうか）は、選択した要素を現在の要素に追加しますString、Element、jQueryのいずれかを指します。以下同様。

appendTo(content) 上記の逆で、上記は選択したオブジェクトに追加すること、これは選択したオブジェクトをコンテンツ選択に追加することです

prepend(content), prependTo(content), after(content), before(content )

replaceWith(content) 選択した要素を content に置き換えます

replaceAll(selector) 選択したオブジェクトを現在のオブジェクトに置き換えます

empty()
remove([expr])
clone()
clone(true)複製時イベントをまとめて複製します

4. CSS処理

css(name) 最初に一致した要素のstyle属性にアクセス
css(name,value) 一致したすべての要素にstyle属性の値を設定します
css(プロパティ) キーと値のペアを使用して値を与えます

offset() 選択した要素の変位を取得します。戻り値はオブジェクト Object{top,left}

height(), height(val), width(), width(val)

4.
JQuery オブジェクトのイベント処理

1. グローバル操作

(1) ready(fn)

DOM の準備ができたときのイベント。 $(function(){ … });

( 2) binding(type,[data],fn) は、イベントをすべての一致にバインドします。data は、このイベント関数に渡される追加オブジェクトです。例: $(" p".bind("click", function() {

alert( $(this).text() );

});

function handler(event) {

alert(event.data.foo);
}
$("p".bind("click", {foo: "bar"}, handler)

(3) one(type,[data],fn) 上記の違いは、このイベントが 1 回だけ応答することです
( 4) それぞれのtrigger(type,[data]) イベントは要素上で1回トリガーされます
(5)triggerHandler(type,[data])はイベント関数をトリガーするだけで、ブラウザーで同じイベントをトリガーしません
( 6) unbind([type],[data]) はバインディングイベントを削除します
(7) hover(overFn, outFn) はマウス通過イベントに応答します
(8) toggle(fn1,fn2...) はさまざまな関数に応答しますマウスをクリックするたびに順番に

2. パラメータを使用しない固定イベント

以下はイベントを実行することを意味し、パラメータを使用するとイベントを設定することを意味します

次のイベントはトリガーされ、設定することもできます:

blur()、change ()、click()、dblclick()、error()、focus()、keydown()、keypress()、keyup()、select()、submit()

以下のイベントは設定のみ可能であり、設定はできませんJS によってトリガーされる:

load(fn)、mousedown(fn)、mousemove(fn)、mouseout(fn)、mouseover(fn)、mouseup(fn)、resize(fn)、scroll(fn)、unload(fn) )

5. 効果

hide()

hide(speed ,[callback]) アニメーションを使用して非表示にします。コールバックはアニメーションが完了したときに実行される関数です

show()

show(speed,[ callback])

toggle() switch state

slideDown(speed,[callback] ) 高さの変更 (下方向に増加) を通じて、一致するすべての要素を動的に表示し、オプションで表示完了後に

コールバック関数

をトリガーします。

slideUp(speed,[callback]) 高さを変更 (上方に減少) することで、一致するすべての要素を動的に非表示にし、オプションで非表示の完了後にコールバック関数をトリガーします。

slideToggle(speed,[callback]) 高さの変更によって一致するすべての要素の表示を切り替え、オプションで切り替え完了後にコールバック関数をトリガーします。

fadeIn(speed,[callback]) 不透明度の変更を通じて、一致するすべての要素のフェードイン効果を実装し、オプションでアニメーションの完了後にコールバック関数をトリガーします。

fadeOut(speed,[callback]) 不透明度の変更を通じて、一致するすべての要素のフェードアウト効果を実現し、オプションでアニメーションの完了後にコールバック関数をトリガーします。

fadeTo(speed,opacity,[callback]) 一致するすべての要素の不透明度を指定された不透明度に段階的に調整し、アニメーションの完了後にオプションでコールバック関数をトリガーします。
animate(params,options) カスタムアニメーションの作成に使用される関数。

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
options (Options) : 一组包含动画选项的值的集合。

animate(params[,duration[,easing[,callback]]])

duration、 easing 是预设的动画动作
duration (String,Number) : (可选) 三种预定速度之一的字符串(“slow”, “normal”, or > “fast”或表示动画时长的毫秒数值(如：1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).> 默认jQuery提供”linear” 和 “swing”.
dequeue() 从动画队列中移除一个队列函数
queue() 返回指向第一个匹配元素的队列(将是一个函数数组)
queue(callback) 在匹配的元素的动画队列中添加一个函数
queue(queue) 将匹配元素的动画队列用新的一个队列来代替(函数数组)
stop()

六、AJAX

1、jQuery.ajax(options) 通过 HTTP 请求加载远程数据。

参数列表：
(1) async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
(2) beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 是Function的唯一参数
(3) cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
(4) complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。
(5) contentType (String) : (默认: “application/x-www-form-urlencoded” 发送信息至服务器时内容编码类型。
(6) data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为

Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1″, “bar2″]} 转换为 ‘&foo=bar1&foo=bar2’。
(7) dataFilter (Function) :给Ajax返回的原始数据的进行预处理的函数。
(8) dataType (String) : 预期服务器返回的数据类型，”xml”、”html”、”script”、”json”、”jsonp”、”text”。
(9) error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。
(10) global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件
(11) ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
(12) jsonp (String) : 在一个jsonp请求中重写回调函数的名字。
(13) password (String) : 用于响应HTTP访问认证请求的密码
(20) username (String) : 用于响应HTTP访问认证请求的用户名
(14) processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。如

果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
(15) scriptCharset (String) : 只有当请求时dataType为”jsonp”或”script”，并且type是”GET”才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
(16) success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。
(17) timeout (Number) : 设置请求超时时间（毫秒），此设置将覆盖全局设置。
(18) type (String) : (默认: “GET” 请求方式 (“POST” 或 “GET”)，默认为 “GET”。
(19) url (String) : (默认: 当前页地址) 发送请求的地址。

参数用 : 分开，如：

$.ajax({
url: "test.html",
cache: false,
success: function(html){
    $("#results").append(html);
}
});

ログイン後にコピー

2、封装好的简易方法(callback是成功时执行的函数，参数是返回的数据)

jQuery.get(url,[data],[callback])
jQuery.getJSON(url,[data],[callback])
jQuery.getScript(url,[callback]) 载入远程JS并执行
jQuery.post(url,[data],[callback])
load(url,[data],[callback]) 把远程的HTML载入当前选中的DOM中

3、事件(事件参数为event, XMLHttpRequest, ajaxOptions, thrownError)

ajaxError(callback) AJAXリクエストでエラーが発生した場合に関数を実行します。
ajaxSend(callback) AJAXリクエスト送信前に関数を実行
ajaxComplete(callback) AJAXリクエスト完了時に関数実行
ajaxStart(callback) AJAXリクエスト開始時に関数実行
ajaxStop(callback) AJAXリクエスト終了時に関数を実行
ajaxSuccess(call back) AJAXリクエスト成功時に関数
jQuery.ajaxSetup(options)を実行
serialize() 構造データ
を設定します。

7. 一般的に使用される静的メソッド

jQuery.boxModel 現在のページのブラウザがページのレンダリングに標準ボックスモデルを使用するかどうか

jQuery.browser ブラウザカーネルの識別。 navigator.userAgent に依存します。

jQuery.each(obj,callback) は、オブジェクトと配列を反復するために使用できる一般的な反復メソッドです。
jQuery.inArray(value,array) は、配列内の最初のパラメータの位置を決定します (見つからない場合は -1 を返します)。
jQuery.map(array,callback) 配列のようなオブジェクトを配列オブジェクトに変換します。コールバックは古い配列を個別に処理できます。
jQuery.unique(array) 配列内の重複した要素を削除します。

以上がJQuery DOMの一般的なメソッドをまとめますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。