jquerydom object_jqueryのイベント非表示表示とオブジェクト配列例

1. イベント処理

1.1. イベントバインディング

bind(type,fn)

コードをコピーします コードは次のとおりです: $(function(){

//正式な書き方
$('#d1 ' ).bind('click',function(){
$(this).css('font-size','80px');
});

//省略形
$('#d1').click(function(){
$(this).css('font-size','80px');
});


1.2. バインドメソッドの略語

コードをコピー

コードは次のとおりです。 click(function(){ });

1.3. 合成イベント

hover(enter,leave): カーソルホバーイベントをシミュレートします
toggle(fn1,fn2...): 連続マウス クリック イベントをシミュレートします

例 1:




コードをコピー

コードは次のとおりです: $(function(){ //イベントを分離$('.s1').mouseenter(function(){

$ (this ).addClass('s2');

$('.s1').mouseleave(function(){
$(this).removeClass('s2') );
});

//合成イベント
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});


例 2: >



コードをコピーします

コードは次のとおりです:

$(function(){ $( '#a1') .toggle(function(){ $('#d1').show('slow'); },function(){ $('#d1'). Hide('slow' ; >1.4.1. イベント オブジェクトを取得する // e などの任意の変数をイベント処理関数に追加するだけです // e は実際のイベント オブジェクトではなく、基礎となるイベント オブジェクトのパッケージですイベントオブジェクト

click(function(e){

})

例 1:

コードをコピー


コードは次のとおりです:


$(function(){
$('a').click(function(e){
//e:jQuery オブジェクト、内部にはイベント オブジェクトが含まれます。
//ターゲット属性は、イベント ソースである DOM オブジェクトを返します。
var srcObject = e.target;
alert(srcObject.innerHTML)
});

1.4.2 event.stopPropagation(); 例 2:

コードをコピーします


コードは次のとおりです。


$(function(){
$('a').click(function(e){

alert('リンクをクリックしました');
//バブルを停止
e.stopPropagation();
});

$('#d1').click(function(e){
alert('div をクリックしました' ) ;

}); }); 1.4.3. デフォルト動作を停止しますevent.preventDefault();//例: フォーム送信>

例 3:

コードをコピー


コードは次のとおりです:


$( function(){
$('a').click(function(e){
var flag =confirm('削除してもよろしいですか?');

if(!flag){
// デフォルトの動作を停止します
e.preventDefault();
}
});

1.5. event .type: イベントタイプevent.target: イベントソースを返します (dom オブジェクトです!!!) event.pageX/pageY: クリックされたポイントの座標

例 4:

コードをコピー


コードは次のとおりです:


$( function(){

$('a').click(function(e){

alert(e.type); //イベントタイプを取得します

alert(e. pageX ' ' e.pageY);

} );


1.6. など。$('xxx').mouseenter( );

$('xxx').trigger ('シミュレートされたイベント');//例 5:

を簡略化することもできます。

コードをコピー


コード 次のようになります:


$(function(){
$('#b1').click(function(){
//ユーザー名に対応するテキスト入力ボックスにフォーカスを取得させます
$('#username').trigger('focus');
//さらに、

$( '#ユーザー名').focus();
});
2. アニメーション

2.1.show()/hide()//Show/Hide
//機能: 要素の幅と高さを同時に変更して表示と非表示を切り替えます

使用法:
show(speed,[callback function]);

速度には「normal」、「fast」、「slow」を使用することも、ミリ秒を使用することもできます

コールバック アニメーション全体が実行された後に関数が実行されます

2.2. slideUp() / slideDown()

//関数: の高さを変更することで表示と非表示を切り替えます。要素
使用法は上記と同じです。


例:

コードをコピー コードは次のとおりです:

$ (function(){
$('#a1').toggle(function(){

$('#d1').show('slow');

$ ('#d1').slideDown('slow');

},function(){

$('#d1').hide('slow');

$('#d1').slideUp('slow');

})
});

2.3. fadeIn() / fadeOut()//フェードイン、フェードアウト

//機能：要素の不透明度を変更して表示・非表示を切り替えます
使い方は上記と同じです。

例:

コードをコピー コードは次のとおりです:

$ (function( ){
$('#b1').toggle(function(){

$('#d1').fadeOut('slow');

} ,function( ){

$('#d1').fadeIn('slow')

});

2.4.アニメーションの定義以降

animate(params,speed,[callback])

params: //アニメーション実行終了時のスタイルを記述するJavaScriptオブジェクトです。

speed: //速度、単位はミリ秒です。

callback: //アニメーションの完了後にコールバック関数が実行されます。


例:

コードをコピー コードは次のとおりです:

$ (function(){
$('#d1').click(function(){
//アニメーションキュー
$(this).animate({'left':'400px' },3000 );
$(this).animate({'top':'250'},2000).fadeOut('slow');
});


3. 配列のような操作

//配列のような操作: 見つかったすべての DOM オブジェクトを jQuery オブジェクトにカプセル化する jQuery セレクターを指します。
//これらの DOM オブジェクトは、配列状オブジェクトと呼ばれます。

3.1.length プロパティ: //jQuery オブジェクトに含まれる DOM オブジェクトの数を取得します。

3.2.each(fun(i)): //各要素をループします。これは反復される dom オブジェクトを表します。
//$(this) は反復される jquery オブジェクトを表します。

3.3.eq(index): //インデックス 1 の jquery オブジェクトを返します。

3.4.index(obj): //添え字を返します。obj は dom オブジェクトまたは jquery です。物体。

3.5.get(): // dom オブジェクトの配列を返します。

3.6.get(index): // インデックス 1 の dom オブジェクトを返します。

例:

コードをコピー コードは次のとおりです: $ (function( ){

$('#b1').click(function(){

//var $obj = $('ul li');
alert($obj.length);

$obj.each(function(i){
//i: アクセスされている DOM オブジェクトの添え字を示します。
//添え字は 0 から始まります。
//this : アクセスされている DOM オブジェクトを表します。
if(i==0){
$(this).css('font-size','60px');
}else if(i== 1) ){
$(this).css('font-style','italic');
}else{
$(this).css('color','red'); >}
});

//var $obj = $('ul li');
var $o = $obj.eq(1); .css('font-size','60px');
var インデックス = $obj.index($o)
//alert(index); = $('ul li');
var arr = $obj.get();
//alert(arr[1].innerHTML);

var $obj = $( ' ul li');
var obj.get(1)
});