[JS]JavaScriptフレーム(1)jQuery

jQueryは、ユーザーがHTML(標準共通マーク言語の下のアプリケーション)、events、アニメーション効果をより便利に処理し、ウェブサイトにAJAXインタラクションを提供することを可能にする.jQueryはもう一つの大きな利点があります.ドキュメントの説明が非常に完全であり、各種の応用も非常に詳細であり、同時に多くの成熟したプラグインがあります.
 
公式サイトAPI:

　　　　http://api.jquery.com
 
ダウンロード:
NuGet:Install-Package jQuery
　　
知識点:主な機能、バージョン、基本的な文法、イベント、操作要素、特殊効果、AJAX、拡張$
先頂して見る
 
 
 
1.主な機能
html選択、操作、css操作、イベント、特殊効果、遍歴、ajax
 
2.バージョン
1.x:IE 6+(本人テスト、一部の方法はまだIE 8および以下をサポートしていません)
2.X:IE 9＋
 
3.基本文法
$(selector).action()
例えば:

        function func() {
            $(this).hide();             //  div  
        }
        $('div').click(func);           
        $('div').bind('click', func);   //unbind
        $('div').on('click', func);     //off   bind      on

 
4.イベント
jqueryとjsのイベントの対象は違います.(js対象を包装しました.origginalEvent属性はjsイベント対象です.)
イベントオブジェクト:
type:イベント名、例えば:click
タージ:トリガ元、実際にターゲットをクリックします.
currentTarget:トリガソース、トリガイベントターゲット.

    <div>
        <p>Text</p>
    </div>
    <script>
        $('div').first().click(function (e) {
            console.log(e);
        })
    </script>

 
泡を防ぐ:

    <div>text</div>
    <div>text</div>
    <script>
        function func(e) {
            console.log(e);                     //    
            e.stopImmediatePropagation();       //      
            e.stopPropagation();                //      
            //todo
        }
        $('div')[1].onclick = func;             //js  
        $('div').first().click(func);           //jquery  
    </script>

　　
5.操作要素
調べて、直す:text、html、val、atr、css

    <p><a>p1</a></p>
    <p><a>p2</a></p>
    <input type="text" value="v1" />
    <input type="text" value="v2" />
    <script>
        var ps = $('p');            //  p  jquery  
        ps.eq(0).text();            //innerText
        ps.eq(1).html();            //innerHTML
        $('input').val();           //value
    </script>

増加:

    <p> text </p>
    <script>
        $('p').prepend('prepend');          //    
        $('p').append('append');            //    
        $('p').before('before');            //    ，   
        $('p').after('after');              //    ，   
    </script>

削除:

    <div>
        <p> text </p>
    </div>
    <span>          </span>
    <script>
        $('div').css({ height: '200px', background: '#0094ff' });           //  div  
        $('div').remove();                                                  //        
        $('div').empty();                                                   //     
    </script>

　　
6.効果
文法:effect(time,func)

    <button>  </button>
    <button>  </button>
    <button>  </button>
    <div>
    </div>
    <script>
        $('div').css({ height: '100px', background: 'red' });
        $('button').eq(0).click(function () {
            $('div').show(1000);                        //  
            $('div').fadeIn(1000);                      //  
            $('div').slideUp(1000);                     //   
        })
        $('button').eq(1).click(function () {
            $('div').hide(1000);
            $('div').fadeOut(1000);
            $('div').slideDown(1000);
        })
        $('button').eq(2).click(function () {
            $('div').toggle(1000);
            $('div').fadeToggle(1000);
            $('div').slideToggle(1000);
        })
    </script>

　　
7.AJAX
文法:$method(url,data,func)

    <script>
        $.get('handle.ashx',{ time: new Date().toLocaleString() }, function (data) {
            alert(data);
        }).error(function (e) {
            //todo　　      
        })
    </script>

 
文法:$(selector).load(url,func)//ファイルのロード
文法:$get Script/ロードscript、本質は$get(url、undefined、func、script);
 
8.jQueryを拡張する
$fnを拡張として、チェーンプログラミングが可能です.

    <div>text</div>
    <script>
        $.fn.func = function () {
            alert(this);                //this jQuery  
        }
        $('div').func();
    </script>

　
9.noConflick
この方法は$識別子の制御を解放する.

    <div>text</div>
    <script>
        var my$ = $.noConflict();       //  $
        my$('div').hide(1000);
        //$('div').hide(1000);          //  
    </script>

　　
10.css
構文:$(selector).css(name,value)$
よく使う操作:$

        $('div').css('width', '200px').css('background', 'blue');
        $('div').css({width:'200px',background:'blue'});

 
11.遍歴
元素を巡回
サブ要素:chilrden()find()
父元素:parent()parent()parent Unitil(selector)
同じレベルの要素:

    <script>
        var d = $('div');
        d.siblings();                           //        
        d.next();                               //       
        d.nextAll();                            //        
        d.nextUntil(selector);                  //     selector      
        d.prev();                               //       
        d.prevAll();                            //        
        d.prevUntil(selector);                  //     selector      
    </script>

フィルタ:first()last()eq(index)filter(selector)not(selector)
eq(index):jQueryオブジェクト配列のいくつかのオブジェクトをとり、0から開始します.
filter(selector):jQueryを取る対象配列の中でselectorに該当するオブジェクトは、not(selector)は反対です.
 
巡回集合
 
map
 
行列を巡回して、新しい行列を返します.
 
文法:$map(],function(v,i){}
 
 
 
each
 
巡回行列
 
文法:$each(],function(v,i){}
 
 
12.DOM対象のjQueryオブジェクトは互いに回転します.
DOMオブジェクト=>jQueryオブジェクト:$(DOMオブジェクト)
例えば:var ele= Dcument.getElemenntById('id')ドル(ele)　　　
よく使う操作:'  jQuery对象=>DOM对象：jQuery对象[0]:（ele）[0];    13.ready、onloadreadyは前にして、onloadは後にします。DOMツリノドが完了しました。 $(document).ready(function(){}ロド完了：window.onload=function(){}