jQuery selector(선택자), val(), text(), html()

1. jQuery selector

※제이쿼리 객체로 만들기 $사용 => $(this)

(1) $("p")
▪  p 태그들 선택

(2) $('input')
▪  input인 태그 전부 가리킴
jQuery.fn.init(7) [input#all, input, input, input, input, input, input, prevObject: jQuery.fn.init(1)]


(3) $('input:checkbox‘)
▪  input 태그 중 checkbox 전부 가리킴
jQuery.fn.init(8) [input#all, input, input, input, input, input, input, input#log_button, prevObject: jQuery.fn.init(1)]


(4) $('input:checkbox[name=chk]')
jQuery.fn.init(6) [input, input, input, input, input, input, prevObject: jQuery.fn.init(1)]


(5) prop
▪  property 값 확인하려는 것.
▪  : 콜론을 꼭 붙여야한다.


<jQuery selector(제이쿼리 선택자) 예시1>

//id
$(“#id_name”)

//class
$(“.class_name”)

//element
$(“element_name”)

//현재  객체
$(this)

//※여러 선택자를 지정할 때는 콤마로 연결한다.
$('#CSS, #js').css('color','white');

---

<jQuery selector(제이쿼리 선택자) 예시2>

    //html 버튼
    $('#html').click(function(){
      $('#html').css('color','black');   //함수 작동시 HTML 버튼 글자색을 검정색으로 변경
      $('#html').css('backgroundColor','white');  //HTML 버튼 배경색은 흰색으로 변경
      
      // 선택자 : id지정이라서 #사용, Class라면 . 사용
      // 동일한 처리를 할 것이라서 한 번에 여러 선택자를 사용했다.
      $('#CSS, #js').css('color','white');   //함수 작동시 버튼 글자색을 흰색으로 변경
      $('#CSS, #js').css('backgroundColor','grey');  //버튼 배경색은 회색으로 변경
    });

 

---

 

2. val(), text(), html()

 

1) .val()
val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드

$( 'input#stuName' ).val( 'STUDNET' );
//ID가 stuName인 input태그의 값을 STUDENT로 변경

2) .text()
선택 요소의 텍스트 내용을 설정 및 받아옴

 

3) .html()
선택 요소에 html을 코드를 넣거나 받아 올 수 있음. 

 

참고 자료

w3schools
제타위키