【Javaベース】JQueryの一般的な操作

jQueryの一般的な操作
一、表示オブジェクトを隠す
idがtestの要素のdisplayは「none」に変更されました.すなわち、idがtestの要素が隠されています.

$('#test').css('display','none')

または

$('#test').style.display="none"

エレメントの非表示と現実を切り替えるためによく使用されます.コードは次のとおりです.

var show = $('#test').css('display');//  id test    display  
$('#test').css('display',show =='block'?'none':show);//      

二、クリックイベント-click()方法

$("button").click(function(){
});

三、操作要素のスタイル

$("#msg").width("300"); // id msg        300 
$("#msg").height("300"); // id msg        300
$("#msg").css("background"); //          
$("#msg").css("background","#ccc") //          
$("#msg").height(300); $("#msg").width("200"); //     
$("#msg").css({ color: "red", background: "blue" });//            
$("#msg").addClass("select"); //        select class 
$("#msg").removeClass("select"); //       select class 
$("#msg").toggleClass("select"); //    （   ）   （  ）   select class

四、操作要素のVALUE

$("input").val(); //        value  
$("input").val("test"); //       value   test
$("input").val(""); //       value  

五、集合処理機能
jqueryが返すコレクションの内容については、自分でループして各オブジェクトを別々に処理する必要はありません.jqueryはすでに私たちに提供している便利な方法でコレクションの処理を行います. 
次の2つの形式があります.

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) 
//      0，1，2 p             。 
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) 
//            
$("p").click(function(){alert($(this).html())})

//p要素ごとにclickイベントを追加し、p要素をクリックするとその内容がポップアップされます
六、必要な機能を拡張する
2つのパラメータを入力し、最大値と最小値を取得するなど、自分の望む機能を拡張します.

$.extend({ 
min: function(a, b){return a  b?a:b; } 
}); // jquery   min,max     ，  “$.   ”  ： 
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

七、サポート方法の連写
連写とは,1つのjqueryオブジェクトに対して種々の異なるメソッドを連続的に呼び出すことができる. 
例:

$("#test").click(function(){alert($(this).html())}) 
.mouseover(function(){alert('mouse over event')}) 
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

要素idをtestとする3つのメソッドを追加します.click()、mouseover()、each()です.
転載先:https://blog.51cto.com/lyhmm/1944476