jqueryは簡明な教程を使います。
7705 ワード
一、ウェブ要素jQueryの基本設計と主な使い方を選択すると、「あるウェブ要素を選択して、ある種類の操作を行う」ということです。これは他の関数ライブラリと区別する根本的な特徴です。jQueryを使う第一歩は、選択式を構成関数jQuery()に入れて、選択された要素を得ることが多いです。
選択式はCSSセレクタでもいいです。
jQueryはまた.end()の方法を提供して、結果集を後退させることができるようにします。
div元素を選択したと仮定して、p元素の後ろに移動する必要があります。
第一の方法は使用である。insertAfter()は、div要素をp要素の後ろに移動させる。
このモードを使った操作方法は全部で4対
六、要素の操作：コピー、削除、作成
コピー素子を使用します。clone()。要素を削除して使用します。remove()と.detach()。両者の違いは、前者は削除された要素のイベントを保留しないこと、後者は保留して、ドキュメントを再挿入する時に使用することに役立ちます。
要素の内容をクリアします。ただし、この要素は削除しません。使用します。empty()。
新しい要素を作成する方法は非常に簡単で、新しい要素を直接jQueryの構造関数に導入すればいいです。
一般的なツール方法としては、次のようなものがあります。
イベントハンドラ関数では、イベントに対するDOM要素を返すためにthisキーワードを使用することができます。
ドル（'h 1'）.show（）//h 1のタイトルを表示する際によく使われる特殊効果は以下の通りです。show（）とhide（）を除いて、他の効果のデフォルト実行時間はすべて400 ms（ミリ秒）です。しかし、この設定を変更することができます。
選択式はCSSセレクタでもいいです。
$(document)//
$('#myId')// ID myId
$('div.myClass')// class myClass div
$('input[name=first]')// name first input
$('a:first')// a
$('tr:odd')//
$('#myForm :input')// input
$('div:visible') // div
$('div:gt(2)')// div ，
$('div:animated')// div
$('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
$('div').next('p'); // div p
$('div').parent(); // div
$('div').closest('form'); // div form
$('div').children(); // div
$('div').siblings(); // div jQueryはまた.end()の方法を提供して、結果集を後退させることができるようにします。
$('div').find('h3').eq(2).html('Hello');
$('div')// div
.find('h3')// h3
.eq(2)// 3 h3
.html('Hello'); // Hello div元素を選択したと仮定して、p元素の後ろに移動する必要があります。
第一の方法は使用である。insertAfter()は、div要素をp要素の後ろに移動させる。
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end()// h3
.eq(0)// h3
.html('World'); // World
.html() html
.text() text
.attr()
.width()
.height()
.val() このモードを使った操作方法は全部で4対
$('div').insertAfter('p');六、要素の操作：コピー、削除、作成
コピー素子を使用します。clone()。要素を削除して使用します。remove()と.detach()。両者の違いは、前者は削除された要素のイベントを保留しないこと、後者は保留して、ドキュメントを再挿入する時に使用することに役立ちます。
要素の内容をクリアします。ただし、この要素は削除しません。使用します。empty()。
新しい要素を作成する方法は非常に簡単で、新しい要素を直接jQueryの構造関数に導入すればいいです。
$('p').after('div');一般的なツール方法としては、次のようなものがあります。
.insertAfter() .after()： ，
.insertBefore() .before()： ，
.appendTo() .append()： ，
.prependTo() .prepend()： ，
$('
Hello
');
$('
new list item
');
$('ul').append('
list item
');
$.trim() 。
$.each() 。
$.inArray() 。 ， -1。
$.grep() 。
$.extend() ， 。
$.makeArray() 。
$.type() （ 、 、 、 ）。
$.isArray() 。
$.isEmptyObject() （ ）。
$.isFunction() 。
$.isPlainObject() "{}" "new Object" 。
$.support() 。
$('p').click(function(){
alert('Hello');
});
.blur() 。
.change()
.click()
.dblclick()
.focus()
.focusin()
.focusout()
.hover() mouseenter mouseleave
.keydown() （ ， ）
.keypress() （ ， ）
.keyup()
.load()
.mousedown()
.mouseenter() （ ）
.mouseleave() （ ）
.mousemove()
.mouseout() （ ）
.mouseover() （ ）
.mouseup()
.ready() DOM
.resize()
.scroll()
.select()
.submit()
.toggle() ，
.unload()
$('input').bind('click change'， // click change
function(){
alert('Hello');
}
);
$("p").one("click"， function(){
alert("Hello"); // ，
});イベントハンドラ関数では、イベントに対するDOM要素を返すためにthisキーワードを使用することができます。
$('p').unbind('click');
$("p").click(function(e){
alert(e.type); //"click"
});ドル（'h 1'）.show（）//h 1のタイトルを表示する際によく使われる特殊効果は以下の通りです。show（）とhide（）を除いて、他の効果のデフォルト実行時間はすべて400 ms（ミリ秒）です。しかし、この設定を変更することができます。
event.pageX ，
event.pageY ，
event.type ( click)
event.which
event.data ，
event.target
event.preventDefault() ( ， )
event.stopPropagation()
$('a').click(function(){
if ($(this).attr('href').match('evil')){//
e.preventDefault(); //
$(this).addClass('evil'); // class
}
});
$('a').click();
$('a').trigger('click');