JQuery中的選擇器

JQuery中的選擇器

讓咱們可以更加精確找到咱們要操做的元素

基本選擇器

• ID選擇器 : #ID的名稱
• 類選擇器: 以 . 開頭 .類名
• 元素選擇器: 標籤的名稱
• 通配符選擇器: *
• 選擇器,選擇器: 選擇器1,選擇器2

基本選擇器的案例

<!--
			- ID選擇器 :     #ID的名稱
			- 類選擇器:     以 . 開頭  .類名
			- 元素選擇器:    標籤的名稱
			- 通配符選擇器:   * 
			- 選擇器,選擇器:  選擇器1,選擇器2
		-->
		<script>
			//文檔加載事件,頁面初始化的操做
			$(function(){
				//初始化操做: 給按鈕綁定事件
				$("#btn1").click(function(){
					$("#two").css("background-color","palegreen");					
				});
				
				//找出mini類的全部元素
				$("#btn2").click(function(){
					$(".mini").css("background-color","palegreen");					
				});
				$("#btn3").click(function(){
					$("div").css("background-color","palegreen");					
				});
				$("#btn4").click(function(){
					$("*").css("background-color","palegreen");
					
				});
				/*選擇器分組*/
				
				//找出mini類 和 span元素
				$("#btn5").click(function(){
					$(".mini,span").css("background-color","palegreen");
				});
			});
		</script>

JQ中的層級選擇器

• 子元素選擇器: 選擇器1 > 選擇器2
• 後代選擇器: 選擇器1 兒孫
• 相鄰兄弟選擇器 : 選擇器1 + 選擇器2 : 找出緊挨着的一個弟弟
• 找出全部弟弟: 選擇器1~ 選擇器2 : 找出全部的弟弟

<script>
			//文檔加載事件,頁面初始化的操做
			$(function(){
				//初始化操做: 給按鈕綁定事件
				//找出body下面的子div   
				$("#btn1").click(function(){
					$("body > div").css("background-color","palegreen");					
				});
				//找出body下面的全部div
				$("#btn2").click(function(){
					$("body div").css("background-color","palegreen");					
				});
				$("#btn3").click(function(){
					$("#one+div").css("background-color","palegreen");					
				});
				$("#btn4").click(function(){
					$("#two~div").css("background-color","palegreen");					
				});
				
			});
		</script>

JQ中的基本過濾器

格式： div:first

<script>
			$(function(){
				/<script>
			//文檔加載事件,頁面初始化的操做
			$(function(){
				
				//初始化操做: 給按鈕綁定事件
				//過濾出全部div中第一個元素
				$("#btn1").click(function(){
					$("div:first").css("background-color","palegreen");					
				});
				
				//過濾出全部div中偶數位的div
				$("#btn2").click(function(){
					$("div:even").css("background-color","palegreen");					
				});
//過濾出全部div中奇數位的div
				$("#btn3").click(function(){
					$("div:odd").css("background-color","palegreen");					
				});
//過濾出全部div中索引大於2的div
				$("#btn4").click(function(){
					$("div:gt(2)").css("background-color","palegreen");					
				});
			
			});
		</script>

JQ中的屬性選擇器

$(function(){
				//找到有name屬性的input
				$("#btn1").click(function(){
					$("input[name]").attr("checked",true);
				});
				$("#btn2").click(function(){
					$("input[name='accept']").attr("checked",true);
				});
				$("#btn3").click(function(){
					$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
				});
			});

JQ中的表單過濾器

<script>
  //1.文檔加載事件	
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>