JQuery の一般的なメソッドの基本チュートリアル_jquery

$("p").addClass(css で定義されたスタイル タイプ); 要素にスタイルを追加します
$("img").attr({src:"test.jpg",alt:" test Image "}); 要素に属性/値を追加します。パラメータはマップ
$("img").attr("src","test.jpg"); 要素に属性/値を追加します
$("img").attr("title", function() { return this.src }); 要素に属性/値を追加します
$("要素名").html() ; 要素内のコンテンツを取得します (要素、テキストなど)
$("要素名").html("new things"); 要素のコンテンツを設定します
$ ("要素名").removeAttr("属性名") 要素から指定された属性と属性の値を削除します。
$("要素名").removeClass("class") 要素から指定されたスタイルを削除します。 element
$("要素名").text(); 要素のテキストを取得します
$("要素名").text(value); 要素のテキスト値を値
に設定します$("要素名" ).toggleClass(class) パラメータのスタイルに要素が存在する場合はキャンセルします。存在しない場合は、このスタイルを設定します。
$("入力要素名").val();入力要素の値
$( "入力要素名").val(value); 入力要素の値を値
に設定します。 操作:
$("要素名").after( content); 一致する要素の後にコンテンツを追加します
$("要素名").append(content); 要素のコンテンツとしてコンテンツを要素
$("要素名").appendTo(content) の後に挿入します); content
$( "要素名").before(content); の後にコンテンツを挿入します
$("要素名").clone(ブール式) ブール式が true の場合、要素のクローンを作成します (パラメータなしの場合、true 処理として扱われます)
$("要素名").empty() 要素の内容を空に設定します
$("要素名").insertAfter(content ); コンテンツの後に要素を挿入します
$("要素名").insertBefore(content); コンテンツを要素の一部として挿入します。要素の先頭に配置します
$("Element").prependTo(content); 要素をコンテンツの一部として扱い、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)
siblings(expr)

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

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 イベント:

$(document).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 ) ドキュメントをスクロールします 表示されている部分が window の場合
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 " のリクエスト中にエラーが発生しました < /li>");
});

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 ") タイプがテキストのすべての入力要素に一致します
$(":password") タイプがパスワードのすべての入力要素に一致します
$(":radio") タイプがラジオのすべての入力要素に一致します
$ (": checkbox") タイプのすべての入力要素に一致します checkbox
$(":submit") タイプのすべての入力要素に一致します submit タイプ
$(":image") タイプのすべての入力要素に一致します
$(" :reset") は、reset タイプのすべての入力要素に一致します
$(":button") は、button タイプのすべての入力要素に一致します
$(":file") は、すべてのタイプの入力要素に一致します file $(":hidden") は、非表示タイプのすべての入力要素またはフォームの非表示フィールドに一致します
フォーム要素フィルター セレクター
$(":enabled") は、操作可能なすべてのフォーム要素に一致します
$(" :disabled") は、操作できないすべてのフォーム要素に一致します
$(":checked") は、選択されたすべての要素に一致します
$("select option:selected") は、選択されたすべての要素に一致します

JQuery CSS メソッドの説明

css( name ) 最初に一致した要素のスタイル プロパティにアクセスします。
css(properties ) 「名前と値のペア」オブジェクトを、一致するすべての要素のスタイル プロパティとして設定します。
$("p").hover(function () {
$(this).css({ backgroundColor:" yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “rgb(0,40,244)”
}
$(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 > ;
});
jQuery.makeArray( obj ) 配列のようなオブジェクトを実際の Array
選択された div 要素のコレクションを配列に変換します
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // のリストに対して Array メソッドを使用します。 dom 要素
$(arr).appendTo(document.body);
jQuery.map( array, callback ) はメソッドを使用して配列内の項目を変更し、新しい配列を返します
jQuery.inArray ( value, array) は配列内の value の位置を返します。見つからない場合は -1 を返します
jQuery.unique( array) は配列内のすべての重複要素を削除し、ソートされた配列
を返します