Jquery[제이쿼리] :contains 셀렉터 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] :contains 셀렉터를 배워보겠습니다.

이렇게 준비해보았습니다.!!

이렇게 나오면된답니다.!

=============================== 
$('.b1').on('click',function(){
   var input1 = $('.input').val();
   var output1 =$('.div1:contains('+input1+')').text();
   $('.div1:contains('+input1+')').css({
    background:'green',
    color:'white'
   });
   $('.output').val(output1);   
  });
=============================== 
class b1가 click되면 <== 검색하기 버튼입니다.
input1변수에 class input의 value값을 저장합니다. <=="검색문구" 뒤에있는 text박스입니다.
output1변수에는 class div1중 :contains 셀렉터로 input1변수에 있는값으로 검색을 하여
해당되는 class div1들의 text값을 저장합니다.
그리고 해당되는  class div1들의 css를 변경하였습니다.
class output의 value값을 output1값으로 찍어 주었습니다.
여기서 class output는 "검색결과" 뒤에있는  text박스입니다.
※:contains란 특정 문자열을 포함하는 요소들을 리턴하여준답니다. 



=============================== 
$('.b2').on('click',function(){
   $('.div1').css({
    background:'none',
    color:'black'
   });
   $('.output').val("");
  });
=============================== 
class b2가 click되면 <== 다시하기 버튼입니다.
class div1의 css부분을 처음으로 리셋 하도록 하였습니다.
class output의 value의 값도 처음으로 리셋 하도록 하였습니다.

아무동작도 하기전 입니다.!
두근두근

검색문구 뒤에 있는 text박스에 "안녕" 이라고 적은뒤 검색하기 버튼을 눌러보았습니다.
그리고나니 class div1들중 "안녕" 이라고 글자가있는 div의 배경이 초록색으로
글자색이 흰색으로 바뀌었답니다.
그리고 검색결과 뒤에 있는 text박스에는 해당 div의 모든글자가 보이네요!!

이번에는 다시하기 버튼을 눌러 다시 처음으로 리셋 시킨모습입니다.

이번에는 검색문구 뒤에 있는 text박스에 " . "을 적고 검색하기 버튼을 눌러보았습니다.
class div1들중 " . "가있는 부분이 3군대나 있기때문에 3군대가 백경이 초록색
그리고 해당 값들이 모두 검색결과 뒤에 있는 text박스에 보이네요!

오늘은 제이쿼리[jquery] :contains 셀렉터를 배워보았습니다.
그럼 다음에 또만나요~