jQuery入門およびセレクタ編

1、jQuery入門
1.1、jQueryとは?
jQueryはJavaScript関数ライブラリです.jQueryは軽量級の「書くことが少なく、作ることが多い」JavaScriptライブラリです.jQueryライブラリには、HTML要素の選択、HTML要素の操作、CSS操作、HTMLイベント関数、JavaScript特効とアニメーション、HTML DOM遍歴と修正、AJAX、Utilitiesなどの機能があります.
1.2、jQueryの優位性はJavaScriptプログラミングを大幅に簡略化して栗を挙げる以下はjavascriptとjQueryの対比である

    
    
        
        //  JavaScript  
        /*window.onload=function(){
            var p = document.getElementById('yxt');
            p.innerHTML="     ，    ";
            p.style.color="pink";
        }*/
        
        //jQuery  
        $(document).ready(function(){
            var $p = $('#yxt');
            $p.html('     ，    ').css('color','pink');
        })
</code></pre> 
 <p>1.3、     jQuery</p> 
 <blockquote> 
  <p> jquery.com  </p> 
 </blockquote> 
 <p>jQuery       jQuery     ：<br> Production version -         ，       。Development version -        （   ，      ）</p> 
 <blockquote> 
  <p>    CDN （      ）    jQuery。</p> 
 </blockquote> 
 <p>jQuery      JavaScript   ，      HTML       ：</p> 
 <pre><code><script src="jquery-3.1.0.js">

ヒント:ダウンロードしたファイルをWebページの同じディレクトリの下に置くと、jQueryを使用できます.なぜラベルにtype=「text/javascript」を使用していないのか疑問に思っていますか?
2、jQueryのコア・ベース2.1、$およびjQueryの説明$は、jquery内のオブジェクトの1つであり、jquery内のすべてのメソッドおよび属性がこのオブジェクトに追加され、$はjQueryに等価であり、その簡略化された形式である.2.2、jQueryオブジェクトとDOMノードの相互変換//DOMノードとjQueryオブジェクトは、相手のメソッド、属性を混用できない.

       //jquery     DOM  
       
       $(function(){
           //1、       （       0   ，           0）
           var $div = $('div') //jQuery  
           var div = $div[0] //   DOM  
           div.style.color = 'red' //  DOM     
           //2、  jQuery   get()  
           var div = $div.get(0);
       })

jQueryがDOMに変換されるのと比較して,開発ではdomオブジェクトをjQueryオブジェクトに加工することが多い.(パラメータ)は多機能な方法であり,異なるパラメータを伝達することによって異なる役割を果たす.$(DOM)関数に渡すパラメータがDOMオブジェクトである場合、jQueryメソッドはこのDOMオブジェクトを新しいjQueryオブジェクトにパッケージする.

//DOM     jQuery  
var div = document.getElementsByTagName('div');//DOM  
        var $div = $(div)//jQuery  
        var $first = $div.first();//     div  
        $first.css('color','red');//          

次の話:window.onloadと$(document).ready()の違い
1、実行タイミング:onloadイベントはページのロードが完了してから実行しなければならない.readyは、ページdomノードのロードが完了すると実行できます.onloadより2、追加個数:onloadは複数を追加し、前のonloadイベントを上書きする最後のonloadイベントのみを実行します.readyイベントは複数追加でき、互いに上書きしない(onloadイベントとreadyイベントの間も上書きしない)3、簡略化書き方:onloadは書き方を簡略化していない;readyイベントは$(function(){})に簡略化できる.
jQueryセレクタ
idセレクタ、クラスセレクタ、要素(ラベル)セレクタ

$('#yxt')；$('.yxt')；$('div')

パスセレクタ

$('*')

レベルセレクタ
サブセレクタ、子孫セレクタ、隣接兄弟セレクタ、一般兄弟セレクタ

$("parent > child");$("ancestor descendant");$("prev + next"); $("prev~siblings");

きほんフィルタセレクタ
このセレクタの使い方はCSSの擬似クラスセレクタと似ており、セレクタは「:」で始まる

$(":first") //        
$(":last") //         
$(":not(selector)") //        
$(":even") //           ， 0    
$(":odd")//   （    ）
$(":eq(index)") //             index   
$(":gt(index)") //     index
$(":lt(index)") //  
$(":header") //        ， h1,h2,h3 
$(":focus") //           、、   autofocus   
$(":animated") //               

コンテンツセレクタ

$(":contains(text)")  //             
$(":parent")    //              
$(":empty")     //              
$(":has(selector)")     //               

可視性(フィルタ)セレクタ

$(":visible")   //         
$(":hidden")    //         

プロパティーセレクタ(フィルタ)

$(":[attribute]")   //        
$(":[attribue='value']")    //    value   
$(":[attribute!='value']")  //     value   
$(":[attribue^='value']")   //    value     
$(":[attribue$='value']")   //    value     
$(":[attribue*='value']")   //     value   

サブエレメントセレクタ
jQuery実装:nth-child(index)はCSS仕様から厳格に由来する.index 1からカウント

$(":first-child")   //                
$(":last-child")    //       
$(":nth-child(index)")//index 1    
$(":nth-child(even)")// 
$(":nth-child(odd)")// 
$(":nth-child(xn)") // 3n 3..6..9 n   0      1 
$(":nth-child(xn+1)") //3n+1 1..4..7

フォーム要素セレクタ

$(":input")     //    input,textarea,select button  
$(":text")      //       
$(":password")  //       
$(":radio")     //        
$(":checkbox")  //       
$(":submit")    //        
$(":image") //       
$(":reset")     //        
$(":button")    //      
$(":file")      //       

フォーム・オブジェクトのプロパティ・セレクタ

$(":enable")    //         
$(":disabled")  //    
$(":checked")   //        
$(":selected")  //