Daily coding

JQuery : 선택자 > 의 의미, this ,기본함수 - click 본문

Front-end/Client

JQuery : 선택자 > 의 의미, this ,기본함수 - click

sunnnkim 2020. 1. 10. 18:59

* JQuery 기본 함수

 

 

1> Click

    : 태그 클릭시 호출

    $("p").click( function () {

        클릭시 호출

    }); 

    */

    

* id / class 적용

  div 태그 안에 있는 p태그만 적용

     $('div p').click(function () {

        alert("div p tag click")

    }); 

    */

    /* 

    // div안에 클래스명이 cls인 태그에만 적용 

    $('div .cls').click(function () {

        alert("div p tag click")

    });

    */

    

 


> 의 개념

// div태그 안에 존재하는 모든 p(자식 + 자손)
$('div p).click(function () {
		alert("div p tag click")
});

  // div태그 바로 밑에 존재하는 자식 태그(자식의 자식(자손)은 불포함) 
$('div > p).click(function () {
		alert("div p tag click")
});

this

// this
	$('p').on("click",function(){
		// $(this).hide();	// --->  this : 클릭한 부분의 오브젝트 
		// 현재 클릭한 부분을 숨김
		
		//jquery에서 css접근하기
//		$(this).css( "property명", "property값");	// = setter
		$(this).css( "background", "red");	// setter : background
		
		// getter
		var color = $(this).css("background");
		alert(color);
	});