jquery二次学習

jquery二次学習
1.jquery 8大セレクタ:基本、属性セレクタ、階層、サブエレメントセレクタ、コンテンツ、可視性セレクタ、フォーム、フォーム属性セレクタ
2.jquery dom要素操作(オブジェクトアクセス)
     each()   $("img").each(function{alert("test each()";});
     size()   $("img").size();dom要素の個数を計算する
    length  $("img").length;同上
    get()   $("img").get();dom要素の集合を取得するには
    get(index) $("img").get(0);dom要素を取得
    index(subject) $("li").index($("#bar"))インデックス値の取得
3.属性操作:
    attr(name,val);
    removeAttr(name)
html(//html(「append」);負の値
text()同上
val()現在値をとる
4.css関連操作
    css:
            css(name,val);
場所:
            offset()   $("p:last").offset({top:30,left:20}); 
documentオブジェクトに対する一致要素の座標を設定する
            postion() var postion = $("p:first").postion(); 
親要素に対する一致要素のオフセット座標scrollTop()$(「p:last」)を取得する.scrollTop();
スクロールバーの上部に対する一致する要素のオフセットを取得
            scrollLeft   $("p:last").scrollLeft;       
スクロールバーの左側に対する一致する要素のオフセットを取得
サイズ:
            width();
            height();
            innerWidth();innerHeight();
            outerWidth();outerHeight();          
5.文書処理
内部挿入:
        append();一致する要素に挿入
        appendTo();挿入
        prepend();
        prependTo()
外部挿入:
        after();  $("p").after("ss");一致する要素の後ろに配置
        insertAfter(); 一致する要素を後ろに配置
        before();
        insertBefor()
小包:
        wrap(html,elem,fn);作用と内部挿入appendTo()の差は多くない
        unwrap();親要素の除去
        wrapInner(html,elem,fn);wrapとは逆に、マッチング要素の内部にラップされます.
置換:replaceWith();replaceAll();
削除:
     empty();一致する要素のすべてのサブ要素をクリア
    remove();一致する要素のみを空にし、一致する要素の内容を空にしない
コピー:clone();clone(true);
6.フィルタ
フィルタ:
        eq(index);indexでの値の取得
        first();
        last();
        filter();   $("p").filter(".myClass,:first");    
        is();    $("input[type='checkbox']").parent.is("form");formであればtrue、そうでなければfalseを返します
        has();   $("li").has("ul").css("background-color","red");
        not();   $("p").not($("#id")[0]); 一致する要素を削除
        slice(start,end);

hello

ni hao

hoo

最初のP,$(「p」)を選択する.slice(0,1);
    
検索:
        find(expr)        $("p").find("span"); exprは.selected  .myClass
children(expr)exprを持たない場合は検索条件を持たないすべてのサブノード要素
parent(expr)は、一致する要素の唯一の親要素を検索し、最後に一致する要素も含む
prev(expr)前の隣接要素を取得
next(expr)取得後の隣接要素
subling(expr)同級の他のサブ要素の集合を取得する
  7.≪イベント｜Events｜ldap≫
        bind(type,[data],fn);

$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});

        one(type,[data],fn);最初のイベントのみバインド

$("p").one("click", function(){
  alert( $(this).text() );
});

        trigger(type,[data]);一致する要素でイベントをトリガー

$("form:first").trigger("submit")   submit       

//         
$("p").click( function (event, a, b) {
  //           ，a b undefined  
  //           ，  a  "foo", b  "bar"
} ).trigger("click", ["foo", "bar"]);

//  Hello World!
$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

     unbind([type],[data]);  
    hover(overFn,outFn);  ，
    

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

        toggle(fn1,fn2,fn3....) 
    

 $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":", "color":"});
      }
    );

8.
     ：
        show(); show(speed,callback)
        hidden(); hidden(speed,callback)
        toggle(); toggle(speed,callback);
     ：
        slideDown(speed,[callback]);
        slideUp(speed,[callback]);
        slideToggle(speed,[callback]);
     ：
        fadeIn(speed,[callback]);
        fadeOut(speed,[callback]);
        fadeTo(speed,opacity,[fn]); //opacity, (0 1
     ：
        animate(parames,[duration],[easing],[callback])
        

paramsOptions

duration ( )String,Number

("slow", "normal", or "fast") ( ：1000)

easing ( )String

( ). jQuery "linear" "swing".

callback ( )Function

//                  
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

 9.
    $.each(Array or Object,[callback]); // 
      

//    ，             。
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

      $.grep(array,callback,[invert]) //

//        0    
$.grep( [0,1,2], function(n,i){
  return n > 0;
});
  ：[1,2]

    $.map(array,callbak)//   ，
    

//           4         。
$.map( [0,1,2], function(n){
  return n + 4;
});

//       0      1 ，    

$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});
    
  
    $.makeArray(obj) //              
  
 
   
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
  
   
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); //         
  
   
Fourth
Third
Second
First
  
  
        $.inArray(val,array)  // 
                (   ) ,     -1
     
  
        $.toArray();           //   DOM          
  
        $.merge(arr1,arr2);//       
  
        $.unique(array);//      ，    dom       ，             
  
 10.     
  
        $.contains(container,contained)  // 
    DOM         DOM   
  
        $.isEmptyObject(obj)   //        ，         
  
        $.trim(str)