jquery使用8

5595 ワード

ラップノード

$(“strong”).wrap(“”);//要素をラベルで包む
結果:
あなたの好きな果物
はすべてのノード
を包む.
wapAll()
$(“strong”).wrap(“”);
1 2 3 

$(“strong”).wrapAll(“”);
1 2 3 4 5 

ラップ内部ノード
$(“strong”).wrapInner(“”);
結果:
<あなたの好きな果物

属性操作

要素のプロパティtitleを取得する場合は、attr()メソッドにパラメータ、すなわちプロパティ名を渡すだけです.
var para = $(“p”);
var p_txt = para.attr(“titile”);//

要素ノードのプロパティを取得するtitle
$(“p”).attr(“title”,”your title”);//個々の属性値の設定
$(“p”).attr({“title”: ”your title”,”name”: ”test”});

属性

を削除
$(“p”).removeAttr(“title”);//

要素の属性titleを削除

スタイル操作

var p_class = $(“p”).attr(“class”);//

要素のclassを取得
$(“p”).attr(“class”,”high”);//

要素のclassを「high」に設定

追加スタイル

jqueryは、スタイルを追加するためのaddClass()メソッドを提供します.


   
   
   
   
    
    
    
    
    1 
    
    
    
    $("input:eq(2)").click(function()
    
    
    
    {
    
    
    
     
    
    
    
    2 
    
    
    
     $("p").addClass("another"); //  <p>    "another"  
    
    
    
    3 
    
    
    
    
    
    
    
    }
    
    
    
    );

スタイル

を削除
$(“p”).removeClass(“high”)';//

要素の値が「high」のclassを除去
$(“p”).removeClass(“high another”)';//複数のスタイルの削除

切替スタイル


   
   
   
   
    
    
    
    
    1 
    
    
    
    $("#toggleBtn").toggle(function()
    
    
    
    {
    
    
    
     
    
    
    
    2 
    
    
    
     //      
    
    
    
    3 
    
    
    
    
    
    
    
    }
    
    
    
    ,function()
    
    
    
    {
    
    
    
     
    
    
    
    4 
    
    
    
     //      
    
    
    
    5 
    
    
    
    
    
    
    
    }
    
    
    
    )

繰り返しスタイルを切り替え
$(“p”).toggleClass(“another”);//クラス名「another」を繰り返す

ある様式

を含むか否かを判断する.
$(“p”).hasClass(“another”);

html()メソッド


   
   
   
   
    
    
    
    
    1 
    
    
    
    var p_html = $("p").html(); //   <p>   HTML   
    
    
    
    2 
    
    
    
    alert(p_html); //   <p>   HTML   
    
    
    
    3 
    
    
    
    $("p").html("<strong>         </strong>"); //   <p>   HTML

text()メソッド


   
   
   
   
    
    
    
    
    1 
    
    
    
    <p title="    "><strong>        </strong></p> 
    
    
    
    2 
    
    
    
     
    
    
    
    3 
    
    
    
    var p_text = $("p").text(); //   <p>        
    
    
    
    4 
    
    
    
    alert(p_text); //   (        )

val()メソッド


   
   
   
   
    
    
    
    
    1 
    
    
    
    $("#address").focus(function()
    
    
    
    {
    
    
    
     
    
    
    
    2 
    
    
    
     var txt_value = $(this).val(); 
    
    
    
    3 
    
    
    
     if(txt_value == "       "){ 
    
    
    
    4 
    
    
    
     $(this).val(""); 
    
    
    
    5 
    
    
    
     
    
    
    
    }
    
    
    
     
    
    
    
    6 
    
    
    
    });

2番目のドロップダウン・ボックスが選択されました
$(“#single”).val(“choose two option”);
複数のオプションを選択
$(“#multiple”).val([“first option”,”second option”]);
複数選択ボックスとラジオボックスも使用可能
$(“:checkbox”).val([“check2”,”check1”]);
$(“:radio”).val([“radio”]);

jQuery基本実現構想

【フロントエンド】(四)ES 6の新しい特性の解構賦値