22.06.07 TIL

JavaScript - 선택자

제이쿼리를 사용해서 선택자를 지정할때는 $()를 사용하여 지정한다. 태그: 그냥 태그이름을 작성 클래스: .클래스이름 을 사용하여 작성 아이디: #태그를 사용하여 작성

<script>
	$(function(){
		$("h1").css("background-color","#0ff") //h1태그를 찾는 선택자
		.css("border", "2px dashed #f00");
	});
</script>

JavaScript(jQuery) - parent()

선택자와 관계되어있는 태그들을 지정할때 사용한다.

$(선택자).parent()....
//parent() = 선택자의 부모태그
//next() = 선택자의 다음태그

JavaScript(jQuery) - children()

해당 선택자의 모든 자식엘리먼트들을 지정한다.

$(function(){
		$("#wrap > h1").css("border","2px dashed #f00");

		$("#wrap > section").children()
		.css({ 
			"background-color":"yellow",
			"border":"2px solid #f00"
		});
	});

JavaScript(jQuery) - 변수로 지정

스타일을 변수로 지정해서 사용한다.

$(function(){
		var style_1 = {
			"background-color":"red",
			"border":"2px solid #f00"
		}
		var style_2 = {
			"background-color":"yellow",
			"border":"2px dashed #f00"
		}
		$(".txt").css(style_1);
		*$(".txt").css(style_2);*
	});

JavaScript(jQuery) - prev(), prevAll()

선택자의 이전 엘리먼트를 지정시킬때 사용한다.

$(".txt").prev().css(css속성); //이 경우에는 "<p>내용1</p>"이 해당된다.
$(".txt").prevAll().css(css속성); //이 경우에는 "<p>내용1</p>", "<h1>인접 관계 선택자</h1>"이 해당된다.

<div id="wrap">
		<h1>인접 관계 선택자</h1>
		<p>내용1</p>
		<p class="txt">내용2</p>
		<p>내용3</p>
		<p>내용4</p>
	</div>

JavaScript(jQuery) - next(), nextAll()

선택자의 이후 엘리먼트를 지정할때 사용한다.

$(".txt").next().css(css속성); //이 경우에는 "<p>내용3</p>"이 해당된다.
$(".txt").nextAll().css(css속성); //이 경우에는 "<p>내용3</p>", "<p>내용4</p>"이 해당된다.

<div id="wrap">
		<h1>인접 관계 선택자</h1>
		<p>내용1</p>
		<p class="txt">내용2</p>
		<p>내용3</p>
		<p>내용4</p>
	</div>

JavaScript(jQuery) - sibling()

prevAll() + nextAll() 형태이다.

JavaScript(jQuery) - parents()

parent()와 유사한 형태이다. 선택된 엘리먼트의 부모태그와 그 위 부모태그 모두 선택된다.

$(".txt2").parents("div")
		.css({
			"border":"2px solid #f00"
		});

<section> //예시 태그의 경우 "xxxx"값이 있는 태그가 아니라 #test가 선택된다.
		<div id="test">test
			<div>xxxx</div>
			<div>
				<p class="txt2">내용</p>
			</div>
		</div>
	</section>

JavaScript(jQuery) - html()

html()메소드의 인자값으로 들어간 내용을 선택된 엘리먼트에 넣는다.

<script>
	$(function(){
		var result_1 = $("#sec_1").html( );
		console.log(result_1);
		
		$("#sec_1 p").html("<a href=\"#\">Text1</a>"); //html값을 인자로 넣는다.

		var result_2 = $("#sec_2").text( );
		console.log(result_2);    
		$("#sec_2 h2").text("adgafgarfg");
	});
</script>

	<section id="sec_1">
		<h2><em>html()</em></h2>
		<p>내용1</p>
	</section>
	<section id="sec_2">
		<h2><em>텍스트()</em></h2>
		<p>내용2</p>
	</section>

JavaScript(jQuery) - text()

특정태그에 text()의 인자값을 넣는다.

$("#sec_2 h2").text("adgafgarfg");

<section id="sec_2">
		<h2><em>텍스트()</em></h2>
		<p>내용2</p>
	</section>

JavaScript(jQuery) - click()

특정 엘리먼트에 클릭이벤트효과를 부여한다.

$("#chb1").click(function() {
	//실행할 구문
});