Jquery共通メソッド一覧(コレクション)_JavaScriptスキル

一般的な Jquery メソッドの古典的な概要

属性:
$("p").addClass(css で定義されたスタイル タイプ); 要素に追加 Style
$("img").attr({src:"test.jpg",alt:"test Image"}); 要素に属性/値を追加します。パラメータはマップです。
$(" img ").attr("src","test.jpg"); 要素に属性/値を追加します
$("img").attr("title", function() { return this.src }) ; 要素に属性/値を追加
$("要素名").html(); 要素内のコンテンツ (要素、テキストなど) を取得します
$("要素名") ).html(" 新しいもの"); 要素のコンテンツを設定します
$("要素名").removeAttr("属性名") 指定された属性と属性の値を削除します要素
$ ("要素名").removeClass("class") 要素から指定されたスタイルを削除します
$("要素名").text() 要素のテキストを取得します
$("要素名") .text(value); 要素のテキスト値を value
$("要素名").toggleClass(class) パラメータのスタイルに要素が存在する場合にキャンセルします。存在しないので、このスタイルを設定します。
$("入力要素名").val(); 入力要素の値を取得します。
$("入力要素名").val(value);入力要素の値を
の値に変換します。 操作:
$("要素名").after(content); 一致する要素
$("要素名") の後にコンテンツを追加します。 .append(content); 要素の後にコンテンツを挿入します
$("要素名").appendTo(content); 要素の後に要素
$("要素名") ).before(content); afterメソッドの逆です
$(" 要素名").clone(ブール式) ブール式がtrueの場合、要素をクローンします(パラメータがない場合は次のように扱われます) true)
$("要素名").empty() 要素の内容を変更します 空に設定します
$("要素名").insertAfter(content); 内容の後に要素を挿入します
$ ("要素名").insertBefore(content); content
$("Element").prepend(content); 要素の一部として要素を使用し、要素の先頭に配置します。 >$("Element").prependTo(content); この要素をコンテンツの一部として使用し、コンテンツの先頭に配置します
$("element").remove(); 指定された要素をすべて削除します
$("element").remove("exp"); exp
$("element").wrap("html"); を含む要素をすべて削除します
$("element"); ).wrap(element); 要素を使用して要素を囲みます

Traversing : add(expr)
add(html)
add(elements)
children( expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems )
parent(expr)
parents(expr)
prev(expr)
兄弟(expr)


コア: $(html) .appendTo("body") は、要素を取得するために本文
$(elems) に HTML コードを記述することと同等です。 DOM 上で
$(function(){……..}); 関数
$("div > p").css("border", "1px ソリッド グレー") を実行します。すべての div の子ノード p とスタイルを追加します
$("input:radio", document.forms[ 0]) 現在のページの最初のフォームにあるラジオ ボタンをすべて検索します
$.extend(prop) prop はjQuery オブジェクト、
例:
jQuery.extend({
min : function(a, b) { return a max: function(a, b) ) { return a > b ? a : b; } jQuery(expression, [context]) —$(expression, [context]);現在の HTML ドキュメント。

each( callback ) は、一致した各要素をコンテキストとして使用して関数を実行します。
例: 1
$("span").click(function){
$("li " ).each(function(){
$(this).toggleClass("example");
})
});
例: 2
$("ボタン" ) .click(function () {
$("div").each(function (index, domEle) {
// domEle == これ
$(domEle).css("backgroundColor", " yellow");
if ($(this).is("#stop")) {
$("span").text("div インデックス #" インデックスで停止しました);
return false ;
}
});



jQuery イベント:

$(ドキュメント); .ready() 本体に onload イベントがないことに注意してください。そうでない場合、関数は実行できません。各ページには 個の多くの関数がロードされて実行され、fn の順序で実行されます。
bind( type, [data], fn ) は、1 つ以上のイベント ハンドラー関数を、一致する各要素の特定のイベント (クリックなど) にバインドします。可能なイベント属性は次のとおりです:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、
mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、
keyup, error
one( type, [data], fn ) 1 つ以上のイベント ハンドラー関数を、一致する各要素の特定のイベント (クリックなど) にバインドします。このイベント ハンドラーは、各
オブジェクトで 1 回だけ実行されます。その他のルールはbind()関数と同じです。

trigger( type, [data] ) は、一致する各要素で特定のタイプのイベントをトリガーします。
triggerHandler( type, [data] ) この特定のメソッドは、要素で特定のイベントをトリガーし (イベント タイプを指定)、このイベントに対するブラウザのデフォルト アクションをキャンセルします。
unbind( [type], [ data] ) バインドを解除し、一致する各要素からバインドされたイベントを削除します。
$("p").unbind() はすべての段落のすべてのバインドされたイベントを削除します
$("p").unbind( "click" ) はすべての段落のクリック イベントを削除します
hover(over, out ) Over と out はどちらのメソッドでも、マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);

toggle( fn, fn ) 同じ要素が再度クリックされると、指定された最初の関数がトリガーされます。要素を指定すると、指定された 2 番目の関数がトリガーされます。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);

要素イベント リストの説明
注: パラメーターのない関数のパラメーターはオプションです。 jQuery は form 要素のリセット イベントをサポートしていません。
イベントの説明は要素またはオブジェクトをサポートします。
blur( ) 要素はフォーカスを失います。 a、input、textarea、button、select、label、map、area
change( ) ユーザーはフィールドの内容を変更します。 textarea, select
click( ) オブジェクトのほぼすべての要素をマウスでクリック
dblclick( ) オブジェクトのほぼすべての要素をマウスでダブルクリック
error( ) document または image window, img
focus ( ) 要素がフォーカスを取得します a、input、textarea、button、select、label、map、area
keydown( ) 特定のキーボードのキーが押されました ほぼすべての要素
keypress ( ) 特定のキーボードのキーが押された ほぼすべての要素
keyup( ) 特定のキーボードのキーが放された ほぼすべての要素
load( fn ) 特定のページまたは画像が読み込まれました window、img
Mousedown( fn ) Some ほぼすべての要素上でマウス ボタンが押されました
mousemove( fn ) ほぼすべての要素上でマウスが移動されました
mouseout( fn ) ほぼすべての要素上の要素からマウスが移動されました
Mouseover( fn ) マウスが要素上で移動されます。 要素の上にあるほとんどすべての要素
mouseup( fn ) マウス ボタンが離されます。 ほぼすべての要素
resize( fn ) ウィンドウまたはフレームのサイズが変更されます window、iframe、frame
scroll( fn ) ドキュメントをスクロールします 表示されている部分がウィンドウの場合
select( ) テキストが選択されています document、input、textarea
submit( ) 送信ボタンがクリックされたフォーム
unload( fn )ユーザーがページ ウィンドウを終了します

JQuery Ajax メソッドの説明:

load( url, [data], [callback] ) リモート HTML コンテンツを DOM ノードにロードします。
$("#feeds").load("feeds.html"); feeds.html ファイルをフィードの ID を持つ div にロードします。
$("#feeds").load("feeds. php", {limit: 25}, function(){
alert("フィードの最後の 25 エントリがロードされました");
});

jQuery.get( url, [data]、[callback] ) GET を使用してページをリクエストします。
$.get("test.cgi", { 名前: "ジョン", 時刻: "午後 2 時" }, function(data){
alert("ロードされたデータ: " data);
}) ;

jQuery.getJSON( url, [data], [callback] ) GET を使用して JSON データをリクエストします。
$.getJSON("test.js", { 名前: "ジョン", 時刻: "午後 2 時" }, function(json){
alert("JSON データ: " json.users[3].name );
});

jQuery.getScript( url, [callback] ) GET を使用して JavaScript ファイルをリクエストし、実行します。
$.getScript("test.js", function(){
alert("スクリプトがロードされ、実行されました。");
});
jQuery.post( url, [data], [callback]、[type] ) POST を使用してページをリクエストします。

ajaxComplete( callback ) AJAX リクエストの終了時に関数を実行します。これは Ajax イベントです
$("#msg").ajaxComplete(function(request, settings){
$(this).append("

Request Complete.

");
});
ajaxError( callback ) AJAX リクエストが失敗した場合、関数を実行します。これは Ajax イベントです
$("#msg").ajaxError(function(request, settings){
$(this).append("

ページ " settings.url "

のリクエスト中にエラーが発生しました");
});


ajaxSend( callback ) AJAX リクエスト送信時に関数を実行します。これは Ajax イベントです
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("

"

});

ajaxStart( callback ) AJAX リクエストが開始されてもまだアクティブになっていないときに関数を実行します。これは Ajax イベントです
AJAX リクエストが開始されたとき (まだアクティブ化されていないとき)、読み込み情報を表示します
$("#loading").ajaxStart(function(){
$(this).show( ) ;
});

ajaxStop( callback ) すべての AJAX が停止したときに関数を実行します。これは Ajax イベントです
すべての AJAX リクエストが停止したときに読み込み情報を非表示にします。
$("#loading").ajaxStop(function(){
$(this).hide();
});

ajaxSuccess( callback ) AJAX リクエストが成功しました 完了したら、関数を実行します。これは Ajax イベントです
AJAX リクエストが正常に完了したときに情報を表示します。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("

リクエストが成功しました!

");
}) ;

jQuery.ajaxSetup( options ) すべての AJAX リクエストのグローバル設定を行います。すべてのオプション情報を取得するには、$.ajax 関数を参照してください。
デフォルトのグローバル AJAX リクエスト オプションを設定します。
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”
}); myData });

serialize() は、入力要素のセットを名前と値で連結します。フォーム要素の正しいシーケンスを実装しました。
function showValues() {
var str = $("form").serialize();
$("#results").text(str); > }
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);

serializeArray ( ) はすべてのフォームとフォーム要素を連結します (.serialize() メソッドと同様) が、JSON データ形式を返します。
フォームから一連の値を取得して表示します。
function showValues() {
var field = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value " ") ;
});
$(":checkbox, :radio").click(showValues);
$("select").change(showValues); );


JQuery Effects メソッドの説明


show() 非表示の一致する要素を表示します。
show(speed, [callback]) は、一致するすべての要素をエレガントなアニメーションで表示し、表示が完了したときにオプションでコールバック関数をトリガーします。 hide( ) は、一致する要素をすべて非表示にします。 hide(speed, [callback] ) エレガントなアニメーションで一致する要素をすべて非表示にし、表示が完了した後にオプションでコールバック関数をトリガーします。
toggle( ) 要素の表示状態を切り替えます。要素が表示されている場合は非表示に切り替えられ、要素が非表示になっている場合は
によって表示に切り替えられます。
slideDown(speed, [callback] ) は、高さの変更 (下方向に増加) を通じて、一致するすべての要素を動的に表示し、表示の完了後にオプションでコールバック関数
をトリガーします。このアニメーション効果は要素の高さのみを調整し、一致する要素を
「スライド」方式で表示できるようにします。
slideUp(speed, [callback] ) は、高さを変更 (上向きに減少) することで、一致するすべての要素を動的に非表示にし、オプションで
非表示の完了後にコールバック関数をトリガーします。このアニメーション効果は要素の高さを調整するだけで、
を「スライド」することで一致する要素を非表示にすることができます。
slideToggle(speed, [callback] ) は、高さの変更によって一致するすべての要素の表示を切り替え、オプションで切り替えが完了したときにコールバック関数をトリガーします。 このアニメーション効果は要素の高さを調整するだけで、一致する要素を「スライド」方式で非表示にしたり表示したりできます。
fadeIn(speed, [callback] ) は、不透明度を変更することで一致するすべての要素をフェードインし、オプションでアニメーションの完了後にコールバック関数をトリガーします。 このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての要素の
高さと幅は変更されません。
fadeOut(speed, [callback] ) は、不透明度を変更することで一致するすべての要素をフェードアウトし、オプションでアニメーションの完了後にコールバック関数をトリガーします。 このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての要素の
高さと幅は変更されません。
fadeTo(speed, opacity, [callback] ) は、一致するすべての要素の不透明度を指定された不透明度に段階的に調整し、オプションでアニメーションの完了後にコールバック関数をトリガーします
。 このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての
要素の高さと幅は変更されません。
stop( ) は、一致するすべての要素の現在実行中のアニメーションを停止します。キューにアニメーションがある場合は、すぐに開始されます。
queue() 最初に一致した要素のアニメーション シーケンスへの参照を取得します (内容が関数である配列を返します)
queue(callback) 一致した各要素のイベント シーケンスの最後に実行可能関数を追加しますこの要素のイベント関数
queue( queue ) は、一致するすべての要素の元のアニメーション シーケンスを新しいアニメーション シーケンスに置き換えます
dequeue( ) が実行され、アニメーション シーケンスの先頭にあるアニメーションが削除されます
animate( params, [duration ], [easing], [callback] ) カスタム アニメーションを作成するための関数。
animate( params, options ) カスタム アニメーションを作成する別の方法。機能は上記と同じです。

JQuery Traversing メソッドの説明

eq(index) 一致した要素コレクションから指定された位置にある要素を取得します。インデックスは 0 から始まります
filter(expr) 指定された要素との一致を返します式 要素のコレクションの場合、「,」を使用して複数の expr を区切ることができます。これは、複数の条件フィルタリングを実装するために使用されます。
filter( fn ) は、セット内の一致しない要素を削除するためのフィルタリング条件として特別な関数を使用します。
is(expr) は、式を使用して現在選択されている要素のセットを確認し、少なくとも 1 つの要素が指定された
式と一致する場合に true を返します。
map(callback) は、コールバック メソッドを使用して jQuery オブジェクト内の一連の要素をその値に変換し、それらを jQuery 配列に追加します。
not(expr) 指定された式に一致する要素を、一致した要素のセットから削除します。
slice(start, [end]) 配列の組み込みスライス メソッドと同じように、一致する要素のセットからサブセットを取得します。
add(expr) は、式に一致する要素を jQuery オブジェクトに追加します。
children( [expr] ) 一致した要素セット内の各要素のすべての子要素を含む要素セットを取得します。オプションのフィルター
を使用すると、このメソッドは一致する要素 (テキスト ノードではなく要素ノードのみ) のみと一致します。
contents() は、一致する要素セット内の各要素のすべての子孫ノードを含むセットを取得します (
テキスト ノードを除く要素ノードのみが含まれます)。要素が iframe の場合は、ドキュメント要素
を取得します。 find(expr) は、指定された式に一致するすべての要素を検索します。
next( [expr] ) 一致した要素セット内の各要素の直後の兄弟要素を含む要素セットを取得します。
nextAll( [expr] ) 一致した要素セット内の各要素の後続の兄弟要素をすべて含む要素セットを取得します。
parent( [expr] ) 一致するすべての要素の一意の親要素を含む要素を取得します。 。
parents( [expr] ) 一致するすべての要素 (ルート要素を除く) の一意の祖先要素を含む要素のセットを取得します。
prev([expr]) 一致した要素セット内の各要素の直前の兄弟要素を含む要素セットを取得します。
prevAll( [expr] ) 一致した要素セット内の各要素の前のすべての兄弟要素を含む要素セットを取得します。
siblings( [expr] ) 一致する要素セット内の各要素のすべての兄弟要素を含む要素セットを取得します。
andSelf() 以前の一致する要素セットを現在のセットに追加します。
すべての div 要素とその中の p 要素を取得し、ボーダー クラス属性を追加します。すべての div 要素の p 要素を取得し、
背景クラス属性を追加します
$("div").find("p").andSelf().addClass("border"); div").find("p").addClass("background");
end( ) は現在の操作を終了し、現在の操作
の前の操作に戻り、すべての中からスパン要素のセットを見つけます。次に、p 要素のコレクションを返し、css 属性
$("p").find("span").end().css("border", “2px red Solid”); を追加します。 >
JQuery セレクター メソッドの説明


基本セレクター
$("#myDiv") は、この ID 値を持つ唯一の要素と一致します$("div") は一致します指定された名前 すべての要素
$(".myClass") このクラス スタイル値を持つすべての要素と一致します
$("*") すべての要素と一致します
$("div,span,p.myClass")すべて結合 一致セレクター
カスケード セレクター
$("form input") 子孫セレクター、祖先のすべての子孫ノードを選択します
$("#main > *") 子セレクター、親のすべての子ノードを選択します
$("label input") 近接セレクター、prev
の次の近接ノードを選択します。$("#prev ~ div") 兄弟セレクター、prev
のすべての兄弟ノードを選択します。 基本的なフィルター処理 セレクター
$("tr:first") は最初に選択された要素と一致します
$("tr:last") は最後に選択された要素と一致します
$("input:not(:checked) span") は一致するすべての要素を除外します元の要素コレクションのセレクター (ここでは一時的なセレクター)
$("tr:even") はコレクション内の偶数の位置にあるすべての要素と一致します (0 から始まります)
$("tr:odd")セット内の奇数の位置にあるすべての要素と一致します (0 から始まります)
$("td:eq(2)") セット内の指定された位置にある要素と一致します (0 から始まります)
$("td: gt(4)") セット内の指定された位置より後のすべての要素と一致します (0 から開始します)
$("td:gl(4)") セット内の指定された位置より前のすべての要素と一致します (0 から開始します)
$(":header") はすべてのヘッダーに一致します
$("div:animated") は実行中のアニメーションを持つすべての要素に一致します
コンテンツ フィルター セレクター
$("div :contains('John') ") 指定されたテキストを含むすべての要素と一致します
$("td:empty") すべての空の要素と一致します (テキストのみを含む要素は空の要素としてカウントされません)
$("div: has(p)" ) 元の要素セットの少なくとも 1 つのセレクターを含むすべての要素に再度一致します
$("td:parent") は空ではないすべての要素に一致します (テキストを含む要素もカウントされます)
$("div:hidden ") フォームの非表示フィールドを含むすべての非表示要素に一致します
$("div:visible") すべての表示要素に一致します
属性フィルター セレクター
$("div [id]") はすべての要素に一致します指定された属性
$("input[name='newsletter']") は、指定された属性値を持つすべての要素と一致します
$("input[name!='newsletter' ]") そうでないすべての要素と一致します指定された属性値を持つ
$("input[name^='news']") 値
$("input[name$= 'letter']") で始まる指定された属性値を持つすべての要素と一致します指定された属性値が値
$("input[name*='man']") で終わるすべての要素と一致します。 指定された属性値に値文字
$("input [id][name$) が含まれるすべての要素と一致します。 ='man']") 複数のセレクターに同時に一致するすべての要素に一致します
子要素フィルター セレクター
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)")、親要素の n 番目の子要素と一致します
$("ul li:nth-child(3n 1)")

$ ("div span: first-child") は親要素の最初の子要素と一致します
$("div span:last-child") は親要素の最後の子要素と一致します
$("div button:only -child" ) 親要素の唯一の子要素と一致します
フォーム要素セレクター
$(":input") は、すべてのタイプの入力、テキストエリア、選択、ボタンを含むすべてのフォーム入力要素と一致します
$(": text") はタイプのすべての入力要素に一致します text
$(":password") はタイプのすべての入力要素に一致しますpassword
$(":radio") はタイプ radio のすべての入力要素に一致します要素
$( ":checkbox") は、checkbox 型のすべての入力要素に一致します
$(":submit") は、submit 型のすべての入力要素に一致します
$(":image") は、すべての型に一致します 画像の入力要素の場合
$(":reset") は、reset 型のすべての入力要素に一致します
$(":button") は、button 型のすべての入力要素に一致します
$(":file" ) file 型のすべての入力要素に一致します
$(":hidden") 非表示タイプのすべての入力要素、またはフォームの非表示フィールドと一致します
フォーム要素フィルター セレクター
$(":enabled") すべての操作可能なフォーム要素と一致します
$(" :disabled") 操作できないすべてのフォーム要素と一致します
$(":checked") クリックされたすべての要素と一致します
$("select option: selected") 選択されたすべての要素と一致します

JQuery CSS メソッドの説明

css( name ) は、最初に一致した要素の style 属性にアクセスします。
css(properties ) 「名前と値のペア」オブジェクトを、一致するすべての要素のスタイル プロパティとして設定します。
$("p").hover(function () {
$(this).css({ backgroundColor:" yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “#0028f4”
}
$(this).css(cssObj) ;
});
css( name, value ) 一致するすべての要素にスタイル属性の値を設定します。
offset( ) は、現在のビジュアル ウィンドウを基準とした最初に一致した要素の位置を取得します。返されるオブジェクトには
top と left の 2 つの属性があり、属性値は整数です。この関数は、表示されている要素に対してのみ使用できます。
var p = $("p:last");
var offset = p.offset();
p.html( “left: " offset.left ", top: " offset.top ) ;
width( ) は、現在の最初に一致する要素の幅の値を取得し、
width( val ) は、一致する各要素に指定された幅の値を設定します。
height( ) は、現在最初に一致する要素の高さの値を取得し、
height( val ) は、一致する各要素に指定された高さの値を設定します。

JQuery Utilities メソッドの説明
jQuery.browser
.msie は、つまり、
jQuery.browser.version はユーザーのブラウザのバージョン情報を読み取ります。
jQuery.boxModel はユーザーのブラウザを検出します。現在のページの表示が w3c CSS ボックス モデルに基づいているかどうか
jQuery.isFunction( obj ) は、渡されたパラメーターが関数であるかどうかを確認します
function stub() { }
var objs = [
関数 () { },
{ x:15, y:20 },
null,
スタブ,
"関数"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " i ")").text(isFunc);
jQuery.trim ( str ) 文字列の両端から空白を削除します。正規表現を使用して、指定された文字の両端から空白を削除します。
jQuery.each( object, callback ) 使用できる汎用イテレータです。オブジェクトと配列をシームレスに反復するための
jQuery.extend( target, object1, [objectN] ) は、オブジェクトを拡張し、元のオブジェクトを変更して返します。これは、継承を実装するための強力な
ツールです。 JavaScript の
プロトタイプ チェーン メソッドの代わりに値を渡します。
設定オブジェクトとオプション オブジェクトをマージし、変更された設定オブジェクトを返します。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

デフォルト オブジェクトとオプション オブジェクトをマージします。デフォルト オブジェクトは変更されていません。 options オブジェクトの値
は、defaults オブジェクトの値の代わりに空に渡されます。

var 空 = {}
var デフォルト = { 検証: false、制限: 5、名前: "foo" };
var オプション = { 検証: true、名前: "bar" } ;
var settings = $.extend(empty,defaults,options);
jQuery.grep(array, callback, [invert] ) フィルター関数を使用して配列内の項目を削除します
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj) 配列のようなオブジェクトを実数の配列に変換します。 >選択した div 要素のセットを配列に変換します
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // dom のリストに対して Array メソッドを使用します。 elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) メソッドを使用して配列内の項目を変更し、新しい配列を返します
jQuery .inArray( value, array) 配列内の value の位置を返します。見つからない場合は、-1 を返します。
jQuery.unique(array) 配列内のすべての重複要素を削除し、ソートされた配列を返します。