jqueryのapiおよび使い方のまとめ-データ/操作/イベント

27633 ワード
データ#データ#
  • .data()

    • 一致する要素に関連する任意のデータを格納するか、一致する要素のセット内の最初の要素の所定の名前のデータ格納の値を返します.
    .data(obj)データを更新するためのキー/値ペア
    .data()メソッドでは、dom要素に任意のタイプのデータをバインドし、循環参照メモリの漏洩リスクを回避できます.
    div要素から格納して値を取り戻す
    この例では、#logに格納されているデータをそれぞれspanに抽出することができる
            
    
            the value is 
            
            and
            
        
    
        
            $('#log').data('test', {
                first: 16,
                last: 'jianmei',
            });
            // test first     #log 
            $('span:first').text($('#log').data('test').first);
            $('span:last').text($('#log').data('test').last);
  • .removeData()

    • エレメントにバインドされたデータを削除する
    .removeData([name])、削除するストレージデータ名
    .removeData([リスト])、削除するデータブロックの名前を配列または空間的に区切った文字列
            
    
            the value is 
            
            and
            
        
    
        
            $('#log').data('test1', {
                first: 16,
            });
            $('#log').data('test2', {
                last: 'jianmei',
            });
            $('span:first').text($('#log').data('test1').first);
            //     #log  test1  
            $('#log').removeData('test2');
            $('span:last').text($('#log').data('test2').last);

    操作
    コピー
    .clone                   

.clone()               ，        ，       ，    

             ，.clone()             

__  __:   clone   ，          ，

    すべてのb要素をコピーして、すべての段落に挿入します.
            hello
        
    have a good day
    
        
            // prependTo         
            // $('b').clone().prependTo('p');
            // appendTo         ,       
            $('b').clone().appendTo('p');

    DOM挿入、ラップ
  • .wrap()

    • 集合内で一致する各要素の周囲にhtml構造を包む
    すべてのpの外にdivが包まれています.この例では2つのdivがあります.
            
    have a good day
    
        
    have a nice day
    
        
        // p      class demo div
            $('p').wrap("
    ")
    1. wrapAll()

    在集合中所有匹配元素的外面包裹一个html元素，此例中只有一个包裹在两个p元素怒外面的div，div的数量只有一个

            
    have a good day
    
        
    have a nice day
    
        
            //  wrap    wrap                   div
            //  wrapAll              div        
            $('p').wrapAll("
    ")
    1. wrapInner()

    在匹配元素里的内容外包一层结构

    选择所有的段落，包裹每一个匹配元素的内容

    注意:wrap和wrapInner都是包裹每一个匹配的元素

    但是不同的是wrap是在选择的每一个元素外包裹一层，但是wrapInner是在选择的每个元素的内容外包裹一层

            
    have a good day
    
        
    have a nice day
    
        
        //      have a good day
            $('p').wrapInner("
    ")

    DOM插入，内部插入

    1. append()

    在每个匹配元素里面的末尾处插入参数内容

            //  div   p
            $('div').append($('b'));
  • appendTo()

    • 一致する要素をターゲット要素の一番後ろに挿入
            hello
        
    
        
        //  p   div 
            $('b').appendTo($('.demo'));
    1. html()

    获取集合中第一个匹配元素的html内容或者设置每一个匹配元素的html内容

            
    123
    
        
    123
    
        
    123
    
        
            //            ,     div    
            // $('.demo').html('');
            //  div     
            $('.demo').html('jianmei');

    4.prepend()
    各一致する要素の前(要素の内部)にパラメータの内容を挿入します.
            hello
        
    123
    
        
            //  div   b
            // b          div     , append    
            $('.demo').prepend($('b'));
  • prependTo()

    • ターゲットの前面(エレメント内)にすべてのエレメントを挿入
            hello
        
    123
    
        
            //  b   div 
            $('b').prependTo($('.demo'));
  • text()

    • 一致する要素のセット内の各要素のテキスト内容(子孫を含む)を取得するか、一致する要素のセット内の各要素のテキスト内容を指定したテキスト内容に設定します.
            
    have a good day
    
        
    have a nice day
    
        
            //    p     
            $('p').text('jianmeinew text');

    DOM挿入、外部挿入
    1、after()
    一致するエレメントセットの各エレメントの後ろに、パラメータで指定した内容を兄弟ノードとして挿入します.
            
    123
    
        
    123
    
        
            //  demo     p  
            // $('.demo').after('
    jianmei
    ')
            //  demo       p
            $('.demo').after($('p'));

    2、beforeとafterの理論は同じで、パラメータの設定によって、一致する要素の前に内容を挿入し、外部に挿入する.
                //  demo     p  
            $('.demo').before('
    jianmei
    ')

    3、insertAfterとafterは同じ機能で、主に挿入内容と目標の位置が異なり、
                // p   demo   
            $('p').insertAfter('.demo');

    4、同じ理屈でinsertBeforeの原理がわかる
                //  p  demo   
            $('p').insertBefore('.demo');

    DOM除去
    1、detach()は、DOMからすべての一致する要素を除去する
    detachはremoveメソッドと同様に、deachがすべてのjqueryデータを保存し、移動された要素に関連付ける以外は
    この方法は、データを移動し、間もなくDOMに要素を挿入する必要がある場合によく使用されます.
            
    hello
    
        
    you
    
        
        
            //   DOM     
            $('p').click(function () {
                $(this).toggleClass('.off');
            });
            var p;
            $('button').click(function () {
                if(p) {
                    p.appendTo('body');
                    p = null;
                    }else {
                        p = $('p').detach();
                    }
            });

    2、remove()は一致する要素の集合をDOMから削除する(同時に削除するのは要素上のイベントとjqueryデータもある)
    削除したい要素を削除できます
    すべての段落をDOMから
                //       DOM   
            $('button').click(function () {
                $('p').remove();
            })

    3、empty()DOMからセット内の一致する要素のすべてのサブノードを除去する
    この方法では、サブエレメントと子孫エレメントだけでなく、エレメント内のテキストも削除します.
            
    hello
    
        
    you
    
        
        
        $('button').click(function () {
            $('p').empty();
        });

    4、unwrap()は、一致する要素の集合の親要素を削除し、自身(および兄弟要素が存在する場合)を元の位置に保持します.
    各段落の外側にdivを追加するか、divを削除します.
    ボタンをクリックしてスタイルを追加または削除
            
    hello
    
        
    you
    
        
        
            //      p      demo            
            var pTags = $('p');
            //  button    
            $('button').click(function () {
                //   p        demo  
                //      
                if(pTags.parent().is('.demo')) {
                    pTags.unwrap();
                }
                //         demo   div
                else{
                    pTags.wrap('
    ');
                }
            });

    DOM替换
    1、 replaceAll()

    用集合的匹配元素替换每个目标元素

    .replaceAll(target)

                //     p   demo
            $('button').click(function () {
                $('
    div
    ').replaceAll($('p'));
            })

    2、 replaceAll()
    セット内の一致するすべての要素を指定した内容で置き換え、削除された要素のセットを返します.
    .replaceWith()はdomからコンテンツを削除したり、この場所に新しいコンテンツを挿入したりすることができます.
                //        , div    
            $('button').click(function () {
                //  div     button
                $(this).replaceWith("
    " + $(this).text() + "
    ");
            })

    ≪イベント｜Events｜ldap≫
    ブラウザイベント
    1、 .resize()
    jsのresizeイベントに処理関数をバインドするか、要素上のイベントをトリガーします.
    例:ウィンドウのサイズが変更された場合(変更後)、ウィンドウの幅を表示します.
                $(window).resize(function () {
                $('body').prepend('
    ' + $(window).width() + '
    ');
            })

    2、 .scroll()
    jsのscrollイベントに処理関数をバインドするか、要素上のイベントをトリガーします.
    例:ページをスクロールするときに一連のアクションをトリガーする
                $('p').clone().appendTo(document.body);
            $('p').clone().appendTo(document.body);
            $('p').clone().appendTo(document.body);
            $('p').clone().appendTo(document.body);
            $('p').clone().appendTo(document.body);
            $(window).scroll(function () {
                $('span').css({
                    'display':'inline'
                }).fadeOut('slow');
            })

    3、ドキュメントのロード(holdReady())
    ロードされるまで、準備完了イベントを一時停止またはリカバリします.
                $.holdReady(true);
            $.getScript(''),function () {
                $.holdReady(false);
            };

    3、 ready()
    domが準備ができたら、実行する関数を指定します.
    例:domがロードされた情報を表示する
                $(document).ready(function () {
                $('p').text("the dom is")
            })
                // dom      ,        
            $(document).ready(function () {
                //  button      ,  button,  p         
                $('button').click(function () {
                    $('p').slideToggle();
                });
            })

    4、unload()
    jsのunloadイベントに処理関数をバインドする
    例:ページを離れるとプロンプトボックスが表示されます.
                $(window).unload(function () {
                return "bye now";
            });

    イベントバインド
    1、 bind()
    要素にイベントハンドラをバインドする
    bindの基本的な使い方:p上でクリックイベントをバインドする$('p').bind('click', function () { alert('user clicked'); })
    例:段落ラベルのバインドのクリックイベント
            
    ppp 
    
        
        
            //   p          span 
            //           class  
            $('p').bind('click', function (event) {
                $('span').text('clicked:' + event.pageX + ',' +  event.pageY);
            })
            $('p').bind('mouseenter mouseleave', function (event) {
                $(this).toggleClass('demo');
            })

    2、 delegate()
    すべての一致セレクタの要素に1つ以上のイベント処理関数をバインドし、指定したルート要素のサブセットに基づいて、一致する要素には現在一致している要素も含まれ、今後一致する可能性のある要素も含まれます.
    例:別の段落を追加するには、delegate()をクリックします.delegate()は、すべての段落のclickイベント、さらには新しい段落をバインドします.
                // delegate()
            //  p        ,     ,                p
            $('body').delegate('p', 'click', function () {
                $(this).after('
    new paragraph
    ')
            });

    3、 off()
    イベント処理関数の削除
    例:clickイベントの削除
            
    ppp 
    
        
        
    
        
        
            // ready(), dom       ,       
            $(document).ready(function () {
                $('p').on('click', function () {
                    $(this).css('background-color', 'pink');
                });
                //   button  click    ,        
                $('button').click(function () {
                    $('p').off('click');
                });
            })
  • one()

    • 要素のイベントに処理関数を追加します.処理関数は要素ごとに最大1回実行されます.
    one()とon()は同じであり、異なる点は、所与の要素とイベントタイプに対して、プロセッサが最初にイベントをトリガした後、直ちにバインドを解除することである.
    例:どの段落をクリックしても、段落のフォントサイズは一度だけ変更されます.
                //    one,           ,         ,   on    ,              
            $(document).ready(function () {
                $('p').one('click', function () {
                    $(this).animate({
                        fontSize: "+=6px"});
                });
            });
  • trigger()

    • trigger()とtriggerHandle()の違いは、triggerがデフォルトイベントをトリガーすることです.
    一致要素にバインドされた指定されたイベントタイプに基づいて、すべてのプロセッサと動作を実行します.
            
        
        
            //   button  input    
            $('input').ready(function () {
                $('button').click(function () {
                    $('input').trigger('select');
                })
            })
  • triggerHandle()はtriggerメソッドと同様であり、triggerがフォームのコミットなどのイベントのデフォルト動作をトリガーするのとは異なる.

    • フォームイベント
  • blur()

    • 要素がフォーカスを失うとblurイベントが発生し、この方法は通常focusとともに使用される.
                //  input           
            $(document).ready(function () {
                $('input').blur(function () {
                    alert('     ');
                })
            })
  • focus()メソッドとblur()メソッドの使用法の差は多くない
    •             //        ,     
            $(document).ready(function () {
                $('input').focus(function () {
                    $('span').css({
                        'display':'inline',
                    }).fadeOut(2000);
                })
            })
  • change()要素の値が変更されるとchangeイベント(フォームフィールドのみ)
    • が発生します.
    入力ボックスの値が変更された場合、enterキーを押すか、入力ボックスの外部をクリックすると、プロンプトボックスがポップアップします.
                $(document).ready(function () {
                $('input').change(function () {
                    alert('       ');
                })
            })
  • select()

    • jsのselectイベントに処理関数をバインドする
    例:入力ボックスのテキストが選択されている場合、div内にテキストが表示されます.
                $(document).ready(function () {
                $('input').select(function () {
                    $('div').text('select').show().fadeOut(2000)
                })
            })
  • submit()

    • フォームをコミットするとsubmitイベントが発生し、form要素にのみ適用されます.
            
    
            
            
            
        
    
        
            $(document).ready(function () {
                $('form').submit(function () {
                    alert('  ');
                });
            });

    キーボードイベント
  • keydown()とkeyup()
    • keydownイベントに関連するイベントの順序
    * keydown        
* keypress     
* keyup

    例:キーボードを押して入力すると入力ボックスの色が変わります()
                $(document).ready(function () {
                $('input').keydown(function () {
                    $('input').css({
                        'background-color':'red',
                    });
                });
                $('input').keyup(function () {
                    $('input').css({
                        'background-color':'green',
                    })
                })
            });
  • keypress()

    • 例:inputフィールド内のキー数の計算
                var i = 0;
            $(document).ready(function () {
                $('input').keypress(function () {
                    $('span').text(i += 1);
                })
            })

    マウスイベント
  • click()単一クリックdblick()ダブルクリック
    • 2.マウス関連イベント
                $(document).ready(function () {
                $('div').mousedown(function () {
                    $(this).css({
                        'border':'2px solid blue',
                    });
                }).mouseout(function () {
                    $(this).css({
                        'border':'4px solid green',
                    })
                }).mouseover(function () {
                    $(this).css({
                        'background':'pink',
                    })
                }).mouseleave(function () {
                    $(this).css({
                        'background':'darkgrey',
                    })
                }).mouseenter(function () {
                    $(this).css({
                        'background' :'red',
                    })
                }).onmouseup(function () {
                    $(this).css({
                        'background' :'blue',
                    })
                })
            })
  • mousemove() 
    •             //          ,        
            $(document).ready(function () {
                $(document).mousemove(function (event) {
                    $('span').text(event.pageX + ',' + event.pageY);
                });
            });
  • focusin()およびfocusout()
    • エレメントまたはその内の任意のエレメントがフォーカスを取得するとfocusinイベントが発生します.
    例:div要素またはその任意のサブ要素がフォーカスを取得した場合、div要素の背景色を設定します.
                // focusin() focusout
            $(document).ready(function () {
                $('nav.demo').focusin(function () {
                    $(this).css({
                        'background' : 'red',
                    });
                });
                $('nav.demo').focusout(function () {
                    $(this).css({
                        'background' : '#90EE90',
                    })
                })
            })

    イベントオブジェクト
    1、event.currentTarget
    このプロパティは、イベントバブルフェーズ内の現在のdom要素であり、通常はthisに等しい.
        $(document).ready(function () {
                $('button, div, p').click(function () {
                    //          ,     ,     hi     ,event.currentTarget  this,    true
                    alert(event.currentTarget === this);
                });
            });

    2、event.data()
    現在実行されているハンドラがバインドされたときにイベントメソッドに渡されるオプションのデータを含む
    例:p要素ごとにonメソッドで渡されたデータを返す
    ここはまだわからない
                $(document).ready(function () {
                $('p').each(function (i) {
                    $(this).on('click',{x:i},function (event) {
                        // index 0   
                        alert('num:' + $(this).index() + ',' + event.data.x);
                    });
                });
            });

    3、event.isDefaultPrevented()
    指定したイベントがpreventDefault()を呼び出したかどうかを確認します.
    例:urlを開くリンクを防止し、preventDefaultが呼び出されているかどうかを確認します.
                $(document).ready(function () {
                $('nav').click(function(event) {
                    event.preventDefault();
                    //          true
                    alert('    ：'+ event.isDefaultPrevented());
                });
            });

    4、 event.それは...pageY
    ドキュメントの左端と上端に対してマウスの位置を返します.
    例:マウスの位置を取得する
                $(document).ready(function () {
                $(document).mousemove(function (event) {
                    $('nav').text("x:" + event.pageX  +"y:" + event.pageY);
                })
            })

    5、 event.preventDefault()
    要素のデフォルトの動作をブロックします.たとえば、コミットをクリックするとフォームのコミットがブロックされ、urlのリンクがブロックされます.
    例:urlを開くリンクを防止する
                $(document).ready(function () {
                $('a').click(function (event) {
                    event.preventDefault();
                });
            });

    5、event.whichは、指定したイベントで押されたマウスボタンまたはボタンを返します.
    例:上記の入力ボックスに内容を入力するとdivに入力キーのデジタルコードが埋め込まれます.
                $(document).ready(function () {
                $('input').keydown(function (event) {
                    $('div').html('key:' + event.which);
                })
            })

    効果
    きそ
    1、hide()とshow()
    選択した要素を非表示にします.css 3のdisplay:noneと同様に、非表示の要素は完全に表示されず、レイアウトに影響しません.
    例:ボタンをクリックしてすべてのp要素を非表示/表示
            
      /     
    
        
        
        
            $(document).ready(function () {
                $('.btn1').click(function () {
                    $('p').hide();
                });
                $('.btn2').click(function () {
                    $('p').show();
                });
            })

    2、 toggle()
    toggleメソッドは、選択された要素のclickイベント間の切り替えに応答するために2つ以上の関数を追加します.
    例:p要素をクリックして色切り替えを行う
            
        
            $('.btn3').click(function () {
                $('p').toggle(function () {
                    $(this).css({
                        'background':'red',
                    });
                });
            })

    ツールバーの
    1、 animate()
    この方法はcssスタイルによって要素を1つの状態から別の状態に変更する
    注:一般的には、[+=][-=]を使用して相対アニメーションを作成します.
    例:要素の高さを変更して、要素にアニメーションを適用する
            
        
        
    
        
            $(document).ready(function () {
                $('.btn4').click(function () {
                    $('div').animate({
                        'height': '300px',
                    });
                });
                //   
                $('.btn5').click(function () {
                    $('div').animate({
                        'height': '150px',
                    });
                });
            })

    2、 delay()

    对队列中的下一项执行的设置延迟

    例子：隐藏再显示两个div，其中绿色的div在显示之前，有1秒的延迟

            
        
    
        
    
        
    $(document).ready(function () {
                $('.btn6').click(function () {
                    //slideUp(300),300    div  ，800ms  
                    $('.item1').slideUp(300).fadeIn(800),
                    $('.item2').slideUp(300).delay(1000).fadeIn(800);
                });
            });

    3、dequeue()和queue()
    dequeue()方法从队列中移除下一个函数，然后执行函数，队列是一个或者多个等待运行的函数，通常和queue方法一起使用

    queue()方法显示被选元素上要执行的函数队列

    例：从队列中移除下一个函数，然后执行函数

    注意：必须保证dequeue()方法在queue()添加的函数之内被调用，简单的说就是必须保证queue()函数内必须有dequeue()

            
        
    
        
            $(document).ready(function () {
                $('.btn7').click(function () {
                    var item1 = $('.item1');
                    item1.animate({
                        'height':'200',
                        'width':'200',
                    },'slow');
                    //    
                    item1.queue(function () {
                        //css       ，  dequeue()   queue()    
                        item1.css({
                            'background' :' pink',
                        });
                        item1.dequeue();
                    });
                    item1.animate({
                        'height':'100',
                        'width':'100',
                    },'slow');
                })
            })

    4、 finish()

    停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有的动画

            
        
        
    
        
            $(document).ready(function () {
                $('.btn8').click(function () {
                    $('.item1').animate({
                        'height':'200'
                    },2000);
                    $('.item1').animate({
                        'width':'200'
                    },2000);
                });
                $('.btn9').click(function () {
                    $('.item1').finish();
                });
            });

    5、 stop()

    被选元素停止当前正在运行的动画

    原理和finish差不多，不同的是finish会停止当前执行的动画并完成整个动画的过程，而stop就相当于按了暂停键，停止当前动画，点击开始的时候会接着之前动画轨迹进行运动。

    渐变

    1、 fadeIn 和 fadeOut

    in是逐渐改变被选元素的不透明度，从隐藏到可见，即进入的过程

    out是从可见到隐藏，即出去的过程

            
        
        
    
        
    
        
            $('.btn10').click(function () {
                $('.item2').fadeIn(1000);
            });
            $('.btn11').click(function () {
                $('.item2').fadeOut(1000);
            })

    2、 fadeToggle()

    可以在fadeIn和fedeOut之间切换，如果元素已经淡出，则元素会被添加上淡出的效果，反之一样。

            
        
    
        
            //     ,                
            $(document).ready(function () {
                $('.btn12').click(function () {
                    $('.item1').fadeToggle(3000);
                })
            })

    3、fadeTo()

    允许渐变为给定的不透明度（0，1）

            
        
    
        
    
        
    
        
            $(document).ready(function () {
                $('.btn13').click(function () {
                    $('.item1').fadeTo('1000', 0.45);
                    $('.item2').fadeTo('2000', 0.15);
                })
            })

    滑动

    1、 slideDown()和slideUp()

    down:以滑动的方式显示被选元素，放出展示

    up:以滑动的方式隐藏被选元素，收起隐藏

            
        
        
    
        
    
        
            $(document).ready(function () {
                $('.btn14').click(function () {
                    $('.item1').slideUp(2000);
                });
                $('.btn15').click(function () {
                    $('.item1').slideDown(2000);
                });
            })

    2、slideToggle()

    在被选元素上进行slideUp和slideDown之间进行切换

            
        
            $(document).ready(function () {
                $('.btn16').click(function () {
                    $('.item1').slideToggle(1000);
                });
            });
    JAvascriptラップノード
    jQuery easyui tabsコンポーネントを拡張し、id(またはカスタム属性)に基づいてtabラベルを操作する