Jqueryでよく使われる方法

19252 ワード
Java Web
{一般的な方法}
1、循環each
JS構文で1次元配列を作成し、stringタイプの名前を格納し、反復します.
    var nameArray = new Array("  ","  ","  ");
    for(var i=0;i");
    }

JSON構文で1次元配列を作成し、stringタイプの名前を格納し、反復します.
    var nameArray = ["  ","  ","  ","  "];//js  
    var $nameArray = $(nameArray);//jquery  
    $nameArray.each(function(){
        //this          ，this  js  ，this  string  
        alert(this);
    });

JSON構文で1次元配列を作成し、objectタイプの名前と給料を格納し、反復します.
    var nameArray = [
        {
            name : "  ",
            sal : 6000
        },
        {   
            name : "  ",
            sal : 7000
        },
        {
            name : "  ",
            sal : 8000
        }
    ];
    var $nameArray = $(nameArray);
    $nameArray.each(function(){
        //this  object  
        alert(this.name + ":"+this.sal);
    });

2、内部挿入append
  • html 
      
    
    •    
      • 
    
    •    
      • 
    
    •    
      • 

     


    


         ，

    • 1)DIVタグがULタグに挿入された後(親子関係)
        $("ul").append( $("div") );

    2)DIVタグがULタグに挿入される前(親子関係)
        $("ul").prepend( $("div") );

    2、外部挿入
    1)DIVタグがULタグに挿入された後(兄弟関係)
        $("ul").after( $("div") );

    2)DIVタグがULタグに挿入される前(兄弟関係)
        $("ul").before( $("div") );

    3、属性の操作
  • html

    • 1)form内の最初のinput要素のtype属性を取得する
        alert( $("form input:first").attr("type") );

    2)form内の最後のinput要素を読み取り専用テキストボックスに設定する
        $("form input:last").attr("readonly","readonly")
    $(":password").attr("readonly","readonly")

    4、ノードの作成(DOMオブジェクト)
  • div要素を作成し、「ハハ」テキスト、ID属性を追加し、ドキュメントに追加

  • ははは

    • 1)js方式
        var divElement = document.createElement("div");
    divElement.innerHTML = "   ";
    divElement.setAttribute("id","2015");
    divElement.id = "2015";
    document.body.appendChild(divElement);*/

    2)jquery方式
        var $div = $("
         
    ");
    $("body").append( $div ); 
    $(document.body).append( $div );

    5、ノードの削除
  • html 
      
    
    •    
      •     
    
    •    
      •       
    
    •    
      •     

    


      
    
    •    
      •     
    
    •    
      •       
    
    •    
      •     

    


      div

    • 1)IDがsecondIDのLI要素を削除する
        $("#secondID").remove();

    2)すべてのLI要素を削除する
        $("#a li").remove();

    3)UL要素の削除
        $("#b").remove();

    6、ラベルノードの内容を取得する
  • html

    • 1 divの内容を取得する
        alert( $("div").text() );

    2)optionの値と説明を取得する
        var $option = $("#city option");
    var value = $option.val();
    var html = $option.text();
    alert(value + ":" + html);

    7、コピー
  • html

    • 1)元のinput要素をコピーし、元のinput要素に追加した後、同級
        var $old = $(":button");
    var $new = $old.clone();
    $new.val("   ");
    $old.after( $new );

    2)元のinput要素にクリックイベントを動的に追加し、元のinput要素をコピーします.
        //var $old = $(":button");
    //$old.click(function(){
    //  alert("    ");
    //});

    3)元のinput要素に追加すると、同じクラスで、元のボタンと同じ動作になります.
        //var $new = $old.clone(true);
    //$new.val("   ");
    //$old.after( $new );

    8、置換
  • html

    • 1)divのテキストをダブルクリックし、テキストボックスで置換
        $("div").dblclick( function(){
        var $text = $("");
        //     div  
        $(this).replaceWith( $text );
    } );

    9、削除
  • html 
    
    
    
        
                border/align/width
        
        
                align

    • 1)table要素に属性border/align/widthを追加
        var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")

    2)table要素のalign属性を削除する
        $table.removeAttr("align");

    10、スタイルの操作
  • html
    • 第13週プロジェクト3-ヘルプ
    JS配列内のある要素の位置を変える関数