JQuery.selector

JQuery의 selector는 tag, id, class등을 선택하는데 사용된다.

- 버튼 클릭시 p tag 숨기기
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("p").hide();
	});
});
</script>

- 버튼을 누르면 test라는 id를 가진 것을 숨기기
- id를 select할 땐, #을 사용한다.
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("#test").hide();
	});
});

<script>
$(document).ready(function(){
	$("button").click(function(){
    	$(".test").hide();
	});
});
</script>

 

 

 

- 전부다 선택하기: *
<script>
$(document).ready(function(){
	$("botton).click(function(){
    	$("*").hide();
	});
});
</script>

- 현재의 element 선택: this
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("this").hide();
	});
});
</script>

- p이고 class가 intro인 것 선택
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("p.intro").hide();
    });
});
</script>

- 첫 p element를 선택
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("p:first").hide();
    });
});
</script>

- ul의 첫 li를 선택
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("ul li:frist").hide();
    });
});
</script>

- ul의 모든 첫li를 선택
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("ul li:frist-child").hide();
    });
});
</script>

- href를 다 선택
(하이퍼 레퍼런스)
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("[href]").hide();
    });
});

- target이 _blank인 모든 것을 선택
(_blank: 새창열기)
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("a[target='_blank']").hide();
    });
});
</script>


- target이 _blank이 아닌 것을 선택
(_blank: 새창열기)
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("a[target!='_blank']").hide();
    });
});
</script>

- 모든 버튼 선택
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$(":button").hide();
    });
});
</script>

- table에서 짝수 선택
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("tr:even").css("background-color","yellow");
    });
});
</script>

- table에서 홀수 선택
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("tr:even").css("background-color","yellow");
    });
});
</script>