jQueryの使い方

jQueryを使う第一歩は、選択式を構成関数jQuery()に入れて、選択された要素を得ることが多いです。
式を選択するとCSS選択ができます。

 $(document)//        
 $('#myId')//  ID myId      
 $('div.myClass')//  class myClass div   
 $('input[name=first]')//  name    first input  

jQuery特有の表現であっても良いです。

$('a:first')//        a   
$('tr:odd')//         
$('#myForm :input')//      input   
$('div:visible') //     div   
$('div:gt(2)')//     div  ，      
$('div:animated')//           div  

二、変更結果集
複数の要素を選択すると、jQueryはフィルタを提供し、結果セットを縮小できます。

 $('div').has('p'); //    p   div   
 $('div').not('.myClass'); //  class   myClass div   
 $('div').filter('.myClass'); //  class  myClass div   
 $('div').first(); //   1 div   
 $('div').eq(5); //   6 div   

いくつかの場合、結果集から出発して、近くの関連元素に移動したいです。jQueryもDOMツリーの移動方法を提供しました。

$('div').next('p'); //  div        p   
 $('div').parent(); //  div       
 $('div').closest('form'); //   div     form    
 $('div').children(); //  div       
 $('div').siblings(); //  div      

三、チェーン操作
ウェブ要素を選択すると、何かの操作ができます。
jQueryはすべての操作をリンクさせてチェーン形式で書くことができます。$('div').find('h3').eq(2).html('Hello'); 私たちはこのように封を開けてもいいです。次のようにします。

$('div')//  div   
.find('h3')//     h3   
.eq(2)//   3 h3   
.html('Hello'); //       Hello 

これはjQueryの最も人に称賛され、最も便利な特徴です。ステップ毎のjQuery操作で、戻るのは全部jQueryオブジェクトですので、違う操作は繋がっています。
jQueryはまた.end()の方法を提供して、結果集を一歩後退させることができます。

$('div') 
.find('h3') 
.eq(2) 
.html('Hello') 
.end()//        h3       
.eq(0)//     h3   
.html('World'); //       World

四、元素の操作：値を取ると賦課
ウェブページの要素を操作して、最も一般的な需要はそれらの値を取るか、またはそれらを賦課することです。
jQueryは同じ関数を使って、取得値と赋値を完成します。値を取るかそれとも賦課するかは、関数のパラメータによって決まります。
htmlの内容を取り出します。または設定します。フォーム要素の値を取り出します。
注意したいのは、結果セットに複数の要素が含まれている場合、値を割り当てた場合、その中のすべての要素に値を割り当てます。値を取るときは、最初の要素の値(.text()を取り出します。例外的に、すべての要素のtext内容を取り出します。)
五、元素の操作：移動
選択した要素を移動するには、2つの方法があります。1つは要素を直接移動し、もう1つは他の要素を移動させ、目的要素が私たちの望む位置に達するようにします。
div元素を選択したと仮定して、p元素の後ろに移動する必要があります。
第一の方法は使用です。insertAfter()を使って、div元素をp元素の後ろに移動します。$('div').insertAfter('p');第二の方法は.after()を使って，p元素をdiv元素の前に加えることです。$('p').after('div');表面的に見ると、この2つの方法の効果は同じで、唯一の違いは操作画角の違いだけのようです。しかし、実際には大きな違いがあります。戻りの要素が違っています。第1の方法はdiv要素を返し、第2の方法はp要素を返す。必要に応じて、どの方法を使うかを選択してもいいです。
このモードを使った操作方法は全部で4つのペアがあります。

1 .insertAfter() .after()：        ，        
2 .insertBefore() .before()：        ，        
3 .appendTo() .append()：        ，        
4 .prependTo() .prepend() 
5 ：        ，       

六、要素の操作：コピー、削除、作成
コピー素子を使用します。clone()。
要素を削除して使用します。remove()と.detach()。両者の違いは、前者は削除された要素のイベントを保留しないこと、後者は保留して、ドキュメントを再挿入する時に使用することに役立ちます。
要素の内容をクリアします。ただし、この要素は削除しません。使用します。empty()。
新しい元素を作る方法はとても簡単です。新しい元素を直接jQueryの構造関数に導入すればいいです。

$('<p>Hello</p>'); 
$('<li class="new">new list item</li>'); 
$('ul').append('<li>list item</li>'); 

七、工具の方法
選択した要素を操作する以外に、jQueryはツールの方法を提供しています。要素を選択せずにそのまま使用できます。
Javascript言語の継承原理がわかれば、道具の方法の本質が分かります。jQueryコンストラクタに定義されている方法です。すなわちjQuery.method()です。直接使用できます。これらの操作要素の方法は、構造関数のプロトタイプオブジェクト上に定義される方法、すなわちjQuery.prototype.method()であるので、インスタンスを生成して使用しなければなりません。この違いを理解しないなら、問題も大きくないです。道具の方法を理解すれば、javascript原生関数のように直接使える方法でいいです。
一般的なツールの方法は以下の通りです。

ドル.trim()は文字列の両端のスペースを削除します。 

ドル.each（）は1つの配列またはオブジェクトを巡回します。 

ドル.inarry()は、配列内のインデックス位置の値を返します。この値が配列内にない場合は-1を返します。 

ドル.grep()は、配列中のある基準に適合する要素を返します。  

ドルです。exted()は複数のオブジェクトを最初のオブジェクトに統合します。  

ドルです。makeAray（）はオブジェクトを行列に変換します。 

$.type()は、対象のカテゴリ（関数オブジェクト、日付オブジェクト、配列オブジェクト、正規オブジェクトなど）を判断します。 

$.isAray()は、あるパラメータが配列であるかどうかを判定します。 

$.isEmptyObject()は、オブジェクトが空かどうかを判断します。

$.isFunction()は、あるパラメータが関数かどうかを判定します。 

$.isPlainObject()は、あるパラメータが「{%」または「new Object」で作成されたオブジェクトかどうかを判断します。 

ドル.support()は、ブラウザがある特性をサポートしているかどうかを判断する。

八、イベント操作
jQueryはウェブページの要素に対してイベントを結び付けることができます。イベントによって、対応する関数が実行されます。

 $('p').click(function(){ 
 alert('Hello'); 
 });

現在、jQueryは主に以下のイベントをサポートしています。

.blur（）フォーム要素がフォーカスを失う。 

.change（）フォーム要素の値が変化します。 

.click()マウスクリック 

.dblclick()マウスをダブルクリックします。 

.フォーム要素に焦点を合わせる 

.focusin()サブ要素は、焦点

を得る。

.focusout()サブ要素がフォーカスを失う 

.hover（）は、同時にmouseenterとmouseleaveイベント指定処理関数

である。

.keydown（）キーを押して（長時間キーを押して、一つのイベントだけを返します）

.キーレス（）キーを押すと

に戻ります。

.keyup（）はキーボードを放します。 

.ロード（）要素のロードが完了しました。 

.mousedown（）マウスを押す 

.mouseenter（）マウス入力（サブ要素入力はトリガしません）

.mouseleaveマウスが離れる（サブ要素が離れてトリガしない）

.mousemove()マウスは要素の内部を移動します。 

.mouseoutマウスが離れる（サブ要素が離れてもトリガする）

.mouseoverマウス入力（サブ要素入力もトリガ）

.mouseup（）マウスを離す 

.ready（）DOMロード完了 

.resize（）ブラウザウィンドウのサイズが変更されました。

.scroll（）スクロールバーの位置が変化します。 

.select（）ユーザが選択したテキストボックスの内容 

.submit（）ユーザがフォームを手渡す。 

.toggale()は、マウスのクリック数に応じて、複数の関数

を順次実行する。

.unload()  ユーザがページから離れる

これらの事件はjQueryの中にあります。bind()の便利な方法です。使用.bind()は、複数のイベントのために同一の関数を結合するなど、イベントをより柔軟に制御することができる。

$('input').bind( 
'click change'， //    click change   
function(){ 
alert('Hello'); 
} 
);

イベントを一度だけ実行させたい場合は.one()メソッドを使用できます。

 $("p").one("click"， function(){ 
 alert("Hello"); //     ，          
 }); 

unbind()はイベントバインディングを解除するために使用されます。$('p').unbind('click');すべてのイベントハンドラ関数は、次の例のeのようなパラメータとして一つのイベントオブジェクトを受け入れることができます。

 $("p").click(function(e){ 
 alert(e.type); //"click" 
 });

このイベントオブジェクトにはいくつかの有用な属性と方法があります。

event.pageXイベントが発生した時、マウスはウェブページの左上の水平距離

から離れています。

event.pageYイベントが発生した時、マウスはウェブページの左上の垂直距離

から離れています。

event.typeイベントの種類（例えば、click）

event.whichがどのキーを押したか

event.dataは、イベントオブジェクトにデータをバインディングし、その後、イベント処理関数

に入る。

event.targetイベントに対するウェブページ要素

event.preventDefault（リンクをクリックすると自動的に新しいページが開きます）イベントのデフォルトの動作を阻止します。

event.stopPropagation（）停止イベントが上位元素に泡を噴き出した。
イベントハンドラ関数では、イベントに対するDOM要素をthisキーワードで返すことができます。

$('a').click(function(){ 
if ($(this).attr('href').match('evil')){//          
e.preventDefault(); //     
$(this).addClass('evil'); //       class 
} 
});

二つの方法があります。一つのイベントを自動的にトリガすることができます。一つは直接イベント関数を使うこと、もう一つは.trigger()または.trigger Handler()を使うことです。

 $('a').click();
 $('a').trigger('click');

九、特殊効果
jQueryはオブジェクトにいくつかの特殊効果を与えることができます。$('h1').show(); // h1 常用する特殊効果は以下の通りです。$('h1').show(); // h1 常用する特殊効果は以下の通りです。

.fadeIn()   
.fadeOut()   
.fadeTo()      
.hide()     
.show()     
.slideDown()     
.slideUp()     
.slideToggle()            
.toggle()            

show()とhide()を除いて、他の効果のデフォルト実行時間はすべて400 msですが、この設定を変更することができます。

$('h1').fadeIn(300); // 300      
$('h1').fadeOut('slow'); //     

効果が終了したら、実行する関数を指定できます。$('p').fadeOut(300, function(){$(this).remove(); });より複雑なエフェクトは、カスタムアニメーションを使用することができます。

$('div').animate( 
{ 
left : "+=50"，//     
opacity : 0.25 //      
},
300,//      
function(){ alert('done!'); }//    

以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。