フロントエンドのJQuery(補足待ち)

12811 ワード

Jquery
jQuery紹介

jQueryは軽量級でマルチブラウザ対応のJavaScriptライブラリです.

jQueryは、ユーザーがHTML Document、Eventsをより容易に処理し、アニメーション効果を実現し、Ajaxインタラクションを容易に行うことができ、JavaScriptプログラミングを極めて簡素化することができる.その目的は「Write less,do more.」

jQueryのメリット

軽量級のJSフレームワーク.jQueryコアjsファイルは数十kbしかなく、ページのロード速度には影響しません.

豊富なDOMセレクタ、jQueryのセレクタは便利です.例えば、あるDOMオブジェクトの隣接要素を見つけるには、JSは数行のコードを書くかもしれませんが、jQueryは1行のコードで終わります.例えば、1つのテーブルの隔行を変色するには、jQueryも1行のコードで終わります.

チェーン式.jQueryのチェーン操作は、複数の操作を1行のコードに書くことができ、より簡潔になります.

イベント、スタイル、アニメーションのサポート.jQueryはまたjs操作cssのコードを簡略化し,コードの可読性もjsよりも強い.

Ajaxオペレーションサポート.jQueryはAJAX操作を簡略化し,バックエンドはJSON形式の文字列を1つ返すだけでフロントエンドとの通信を完了する.

は、ブラウザ間で互換性があります.jQueryは現在主流のブラウザと基本的に互換性があり、ブラウザの互換性の問題に悩まされる必要はありません.

プラグイン拡張開発.jQueryは豊富な第三者のプラグインを持っていて、例えば:木のメニュー、日付のコントロール、画像の切り替えプラグイン、ポップアップウィンドウなどの基本的なフロントエンドのページのコンポーネントはすべて対応するプラグインがあって、しかもjQueryプラグインで作った効果はとても眩しくて、しかも自分の必要に応じてプラグインを書き直してカプセル化することができて、簡単で実用的です.

jQueryコンテンツ

セレクタ

フィルタ

スタイル操作

テキスト操作

属性操作

文書処理

イベント

アニメーション効果

プラグイン

each、data、Ajax

jQueryバージョン

1.x:互換性IE 678、最も広く使用され、公式はBUGメンテナンスのみを行い、機能は追加されません.したがって、一般的な項目では1を用いる.xバージョンでOK、最終バージョン:1.12.4(2016年5月20日)

2.x:IE 678と互換性がなく、使用者が少なく、公式にはBUGメンテナンスのみを行い、機能は追加されません.互換性の低いバージョンのブラウザを考慮しない場合は2.x,最終バージョン:2.2.4(2016年5月20日)

3.x:IE 678と互換性がなく、最新のブラウザのみをサポートします.多くの古いjQueryプラグインがサポートしていないことに注意してください.x版.現在、このバージョンは公式の主な更新メンテナンスのバージョンです.

IE 678のメンテナンスは悩ましいことですが、一般的にはCSSとJSを追加して処理します.幸いなことに、これらのブラウザを使用する人も徐々に減少し、PC側のユーザーはモバイル側のユーザーに取って代わられ、特別な要求がなければ、678のサポートを放棄することが一般的です.
jQueryオブジェクト
jQueryオブジェクトとは、DOMオブジェクトをjQueryでパッケージしたものです.jQueryオブジェクトはjQuery独自です.1つのオブジェクトがjQueryオブジェクトである場合、jQueryのメソッド:例えば$("#i 1")を使用することができる.html(). $("#i1").html()とは、id値がi1の要素のhtmlコードを取得することを意味する.そのうちhtml()はjQueryの中の方法です.document.getElementById("i1").innerHTML;jQuery はDOM を包装した後に発生したが、jQuery はDOM のいかなる方法も使用できず、同様にDOM もjQueryの方法を使用できない.
jQueryオブジェクト変数を宣言するときに変数名の前に$を追加するという約束があります.

var $variable = jQuery  
var variable = DOM  
$variable[0]//jQuery    DOM

上記の例を挙げると、jQueryオブジェクトとDOMオブジェクトの使用:

$("#i1").html();//jQuery      jQuery   
$("#i1")[0].innerHTML;// DOM    DOM

jQuery基礎構文
セレクタ(ラベルの検索)

## $(select).action()      


##      
id   ：
$("#id")

     ：
$("tagName")

class   ：
$(".className")

    ：
$("div.c1")  //    c1 class  div  

       ：
$("*")

     ：
$("#id, .className, tagName")


     ：
x y        

$("x y");// x     y（    ）
$("x > y");// x     y（  ）
$("x + y")//        x   y
$("x ~ y")// x       y




##      ：

:first //    
:last //     
:eq(index)//     index     
:even //              ，  0     
:odd //              ，  0     
:gt(index)//               
:lt(index)//               
:not(     )//       not     
:has(     )//                    (         )

    
  ：
$("div:has(h1)")//         h1   div  
$("div:has(.c1)")//         c1    div  
$("li:not(.c1)")//        c1    li  
$("li:not(:has(a))")//          a   li  


##   ：      ，  jQuery         。




  
  
  
        
  






    
  
    
  
  



  var tButton = $("#i0")[0];
  tButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");

  };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");

  }







##     

[attribute]
[attribute=value]//     
[attribute!=value]//      


  ：



$("input[type='checkbox']");//   checkbox   input  
$("input[type!='text']");//       text input  



##     

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
 
  ：
$(":checkbox")  //      checkbox


      :

:enabled
:disabled
:checked
:selected

    
  ：

     input  ：




        
$("input:enabled")  //      input  


      option：

$(":selected")  //         option

筛选器(查找标签)

## $(select).action()      

##     

     ：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

     ：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

    ：
$("#id").parent()
$("#id").parents()  //               
$("#id").parentsUntil() //               ，             。

       ：
$("#id").children();//    
$("#id").siblings();//    

  ：
               。                       。

$("div").find("p")
   $("div p")


  
                。             。          。

$("div").filter(".c1")  //          c1    
    $("div.c1")


  ：
.first() //           
.last() //            
.not() //                       
.has() //            ，              。
.eq() //            

  ：

スタイルアクション(アクションラベル)

##   


addClass();//      CSS  。
removeClass();//      CSS  。
hasClass();//         
toggleClass();//   CSS  ，      ，       。

  ：       


##CSS

css("color","red")//DOM  ：tag.style.color="red"

  ：
$("p").css("color", "red"); //   p          






#    

offset()//                        
position()//               
scrollTop()//                 
scrollLeft()//                 


.offset()                 （document）     。

  .position()     ： .position()              。



##  ：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

テキストアクション(アクションラベル)

HTML  ：
html()//           html  
html(val)//          html  


   ：
text()//            
text(val)//            

 ：
val()//              
val(val)//           
val([val1, val2])//      checkbox、  select  


  ：
  
  


 


    ：
$("input[name='gender']:checked").val()

プロパティアクション(アクションラベル)

  ID       ：

attr(attrName)//              
attr(attrName, attrValue)//               
attr({k1: v1, k2: v2})//               
removeAttr()//                 


  checkbox radio

prop() //     
removeProp() //     

  ：
 1.x 2.x   jQuery   attr checkbox         bug， 3.x   jQuery        。     ，     checkbox radio          prop()，    attr("checked", "checked")。





  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);



prop attr   ：

attr  attribute(  ) 
prop  property(  )

      ，            ，attr      HTML    ， prop    DOM    ，    attr    ， prop    。

    ：


       ，

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false
    attr               undefined， prop      DOM     ，  checked false。

         ：


   ：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true
       attr    ，         HTML      ， prop      DOM     ，    true，     false。

              ，attr prop      ：


      ：

$("#i1").attr("me")   // "     "
$("#i1").prop("me")  // undefined
    prop             。

    ：

                     attr
          checkbox、radio option        prop。

ドキュメント処理(アクションラベル)

            

$(A).append(B)//  B   A
$(A).appendTo(B)//  A   B

            
$(A).prepend(B)//  B   A
$(A).prependTo(B)//  A   B


            
$(A).after(B)//  B  A   
$(A).insertAfter(B)//  A  B   


            
$(A).before(B)//  B  A   
$(A).insertBefore(B)//  A  B   

       
remove()//  DOM          。
empty()//                 。

  ：
             。
                 。

  
replaceWith()
replaceAll()

  
clone()//

≪イベント｜Events｜ldap≫
共通イベント

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})



hover    （       ，         ）：




    
    Title


         ，          ！




    $('p').hover(
        function () {
            alert('  ，  ')
        },
        function () {
            alert('   ～')
        }
    )





    input       ：




  
  
  
      input     






  /*

- oninput HTML5     
-     textarea,input:text,input:password input:search          ，
-            ，  onchange           
- oninput   IE9       ，    IE   onpropertychange    
-   jQuery       on           。
- */
$("#i1").on("input propertychange", function () {
alert($(this).val());
//           ，       ，         
  })

イベントバインド

.on( events [, selector ],function(){})

events:イベント

selector:セレクタ(オプション)

function:イベント処理関数

イベントの削除

.off( events [, selector ][,function(){}])

off()メソッドは、.on()でバインドされたイベントハンドラを除去する.

events:イベント

selector:セレクタ(オプション)

function:イベント処理関数

後続イベントのブロック

return false; //

e.preventDefault();




    
          




    




    $("#b1").click(function (e) {
        alert(123);
        return false;
        // e.preventDefault();
    });

注意:
click、keydownなどのDOMで定義されたイベントは、.on()メソッドを使用してイベントをバインドできますが、hoverというjQueryで定義されたイベントは.on()メソッドでバインドできません.
イベント委任を使用してhoverイベント処理関数をバインドするには、次のコードを参照して2つのステップに分けてイベントをバインドします.

$('ul').on('mouseenter', 'li', function() {//        
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//        
    $(this).removeClass('hover');
});

事件の泡を止める

js actionの戻り値の取得

Ajaxとポップアップウィンドウがブラウザにブロックされた(windows.open)問題