3.jQuery——基本セレクタ-/idセレクタ/クラスセレクタ/エレメント名セレクタ/すべてのエレメントセレクタ/パラレルセットセレクタ

概要:jQueryのセレクタは、Domモデルよりも簡潔で効率的です.

 

1.一例で説明する

    
    
    
    
    
    
    
      $(function(){
      	//  id one   
      	$("#btn1").click(function(){
      		$("#one").css("background","#bfa");
      	});
      	//  class mini     
      	$("#btn2").click(function(){
      		$(".mini").css("background","#bfa");
      	});
      	//        div      
      	$("#btn3").click(function(){
      		$("div").css("background","#bfa");
      	});
      	//        
      	$("#btn4").click(function(){
      		$("*").css("background","#bfa");
      	});
      	//      span   id two   
      	$("#btn5").click(function(){
      		$("span,#two").css("background","#bfa");
      	});
      });
    


    
                
    
                  

    

    
  セレクタ
    
    
    
    
    
    
    

    

    
    

        id one,class one div
        

            class mini
        
    
    

        id two,class one,title test div.
        

            class mini,title other
        
        

            class mini,title test
        
    
    

        

            class mini
        
        

            class mini
        
        

            class mini
        
        

        
    
    

        

            class mini
        
        

            class mini
        
        

            class mini
        
        

            class mini,title tesst
        
    
    

        style display "none" div
    
    

        class "hide" div
    
    

          input type "hidden" div
    
           span  .

2.プログラムの説明

1.ページには5つのボタンがあります.

idがoneの要素

を選択

classがminiのすべての要素

を選択

選択要素名divのすべての要素

すべての要素

を選択

すべてのspan要素とidがtwoの要素

を選択する
2.jQueryの$(function(){})によるボタンイベント登録、主にcss設定スタイル(背景色)によるjQueryのセレクタ効果

 $(function(){
      	//  id one   
      	$("#btn1").click(function(){
      		$("#one").css("background","#bfa");
      	});
      	//  class mini     
      	$("#btn2").click(function(){
      		$(".mini").css("background","#bfa");
      	});
      	//        div      
      	$("#btn3").click(function(){
      		$("div").css("background","#bfa");
      	});
      	//        
      	$("#btn4").click(function(){
      		$("*").css("background","#bfa");
      	});
      	//      span   id two   
      	$("#btn5").click(function(){
      		$("span,#two").css("background","#bfa");
      	});
      });

3.ページのbody部分は主にいくつかのDIVが重なって構成されていて、span要素のラベルがあり、ラベルの中で主にdivのclass特性とid特性が設定されています.
4.spanがアニメーション効果を持つのは、$(function(){})に次のコードが追加されたためであり、セレクタリセットの効果は以下のhtmlコードで行われる
実現した.

$(document).ready(function(){
	$("#reset").click(function(){
		$("*").removeAttr("style");
		$("div[class=none]").css({"display":"none"}); 
	});	
	$("input[type=button]").click(function(){
		if($("#isreset").is(":checked")){
			$("#reset").click();
		}
	});
	function animateIt() {
		$("#mover").slideToggle("slow", animateIt);
	}
	animateIt();
})

この章では、基本セレクタについて詳しく説明します.