jQuery

[jQuery] 5장 내용 필터

반응형

 

내용 필터

 

 

필터 내 용
:contains(text) 지정한 text를 포함하는 모든 요소를 반환 (대소문자 구분)

예)
$(“p:contains(jQuery)”).css(…);
$(“body *:contains(jQuery)”).css(…);
$(“body : contains(jQuery)”).css(…);
:has(selector) 지정한 selector를 포함하고 있는 모든 요소 반환

예)
$(“div:has(p, span)”).css(…);
:empty 자식 요소도 없고 text도 없는 모든 요소 반환 
:parent 자식 요소 또는 text를 갖고 있는 모든 요소 반환

 

 

 

  • 'jQuery'글자가 포함된 span 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
  // 'jQuery'글자가 포함된 span 요소
  $('span:contains(jQuery)').css('color','blue');
});
</script>
</head>
<body>
  <h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
  <div>
    <div></div>
    <div>헬로~~<span>오늘도 즐겁게</span></div>
    <p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
    <div>jQuery!!!!</div>
    <span>쉬운 제이쿼리</span><br>
    <p></p>
  </div>
</body>
</html>

 

결과 화면1

 

 

 

  • 'jQuery'글자가 포함되지 않은 span 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
  // 'jQuery'글자가 포함되지 않은 span 요소
  $('span:not(:contains(jQuery))').css('color','red');
});
</script>
</head>
<body>
  <h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
  <div>
    <div></div>
    <div>헬로~~<span>오늘도 즐겁게</span></div>
    <p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
    <div>jQuery!!!!</div>
    <span>쉬운 제이쿼리</span><br>
    <p></p>
  </div>
</body>
</html>

 

결과 화면2

 

 

 

  • span이 있는 div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
  // span이 있는 div
  $('div:has(span)').css('border','4px ridge green').css('padding','10px');
});
</script>
</head>
<body>
  <h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
  <div>
    <div></div>
    <div>헬로~~<span>오늘도 즐겁게</span></div>
    <p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
    <div>jQuery!!!!</div>
    <span>쉬운 제이쿼리</span><br>
    <p></p>
  </div>
</body>
</html>

 

결과 화면3

 

 

 

  • 아무것도 없는 빈 div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
  // 아무것도 없는 빈 div
  $('div:empty').css('border', '2px dotted red').css('padding','20px');
  // $('div:empty').css({'border':'2px dotted gold','padding':'20px'});
});
</script>
</head>
<body>
  <h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
  <div>
    <div></div>
    <div>헬로~~<span>오늘도 즐겁게</span></div>
    <p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
    <div>jQuery!!!!</div>
    <span>쉬운 제이쿼리</span><br>
    <p></p>
  </div>
</body>
</html>

 

결과 화면4

 

 

 

  • 자식이 있는(=부모인) p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
  // 자식이 있는(=부모인) p
  $('p:parent').css('text-shadow','2px 2px 4px purple');
});
</script>
</head>
<body>
  <h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
  <div>
    <div></div>
    <div>헬로~~<span>오늘도 즐겁게</span></div>
    <p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
    <div>jQuery!!!!</div>
    <span>쉬운 제이쿼리</span><br>
    <p></p>
  </div>
</body>
</html>

 

결과 화면5

 

 

 

Form상태 필터

 

 

필터 설 명
:enabled 현재 사용 가능한 요소
:disabled 현재 사용 불가능한 요소
:checked 체크된 요소 - checkedbox, radio
:selected 선택된 요소 - select option

 

 

 

  • enabled, disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){

  $(':enabled').css('border','1px ridge blue');
  $(':disabled').css('border','1px groove red');

  // 자바스크립트 방식으로 하나의 요소만 활성화하기
  let v_input = document.querySelectorAll('input');
  // v_input[0].setAttribute('disabled', faluse); // 불가능
  // v_input[0].setAttribute('enabled', faluse); // 불가능
  v_input[0].removeAttribute('disabled');
});
</script>
</head>
<body>
  <h4>:enabled :disabled</h4>
  <form>
    <input id="txt" disabled> <br>
    <input type="password" id="pw" disabled> <br>
    <select id="sel" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select> <br>
    <textarea id="mtline" disabled>multiline</textarea> <br>
    <input type="button" value="확인" onclick="alert()" disabled>
  </form>
</body>
</html>

 

결과 화면6 : 위와 같은 식으로 쓸 시 하나가 적용되지 않음

 

 

=> css가 모두 적용되게 수정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
:enabled {
  border: 1px ridge blue;
}
:disabled {
  border: 1px ridge red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
  // 자바스크립트 방식으로 하나의 요소만 활성화하기
  let v_input = document.querySelectorAll('input');
  v_input[0].removeAttribute('disabled'); // 속성 상태 변경을 위해 제거해야 함
});
</script>
</head>
<body>
  <h4>:enabled :disabled</h4>
  <form>
    <input id="txt" disabled> <br>
    <input type="password" id="pw" disabled> <br>
    <select id="sel" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select> <br>
    <textarea id="mtline" disabled>multiline</textarea> <br>
    <input type="button" value="확인" onclick="alert()" disabled>
  </form>
</body>
</html>

 

결과 화면7

 

 

=> JS 방식으로 일괄 활성화 처리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
:enabled {
  border: 1px ridge blue;
}
:disabled {
  border: 1px ridge red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
  // JS방식으로 일괄 활성화 처리하기
  let v_all = document.querySelectorAll('form *');
  console.log(v_all.length); // 13, 모든 요소 대상 (br, option태그 포함)

  for(let i=0; i<v_all.length; i++) {
    v_all[i].removeAttribute('disabled');
  }
});
</script>
</head>
<body>
  <h4>:enabled :disabled</h4>
  <form>
    <input id="txt" disabled> <br>
    <input type="password" id="pw" disabled> <br>
    <select id="sel" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select> <br>
    <textarea id="mtline" disabled>multiline</textarea> <br>
    <input type="button" value="확인" onclick="alert()" disabled>
  </form>
</body>
</html>

 

결과 화면8

 

 

=> 제이쿼리 방식으로 활성화 처리하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
:enabled {
  border: 1px ridge blue;
}
:disabled {
  border: 1px ridge red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
  // 제이쿼리 방식으로 활성화 처리하기
  // $('form *').attr('enabled', true); // x
  // $('form *').attr('disabled', false); // o, 현재 요소에 적용된 속성을 대상으로만 boolean 처리 가능
  $('form *').removeAttr('disabled'); // o
});
</script>
</head>
<body>
  <h4>:enabled :disabled</h4>
  <form>
    <input id="txt" disabled> <br>
    <input type="password" id="pw" disabled> <br>
    <select id="sel" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select> <br>
    <textarea id="mtline" disabled>multiline</textarea> <br>
    <input type="button" value="확인" onclick="alert()" disabled>
  </form>
</body>
</html>

 

결과 화면9

 

 

 

  • checked, selected
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>:checked :selected</h4>
    
    <span>취미 : </span>
    <input type="checkbox" value="여행" checked>여행
    <input type="checkbox" value="블로그">블로그
    <input type="checkbox" value="베이킹">베이킹
    <input type="checkbox" value="슬라임" checked>슬라임
    <input type="checkbox" value="골프">골프
    <input type="button" value="선택">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    $('input:button').on('click', function(){
        // 입력양식선택자:상태필터
        let hobby = [];
        $(':checkbox:checked').each(function(){
            console.log(this); // 선택된 요소 자체가 넘어옴
            console.log($(this).val()); // 선택된 값만 넘어옴
            hobby.push($(this).val());
        });
        console.log("나의 취미는 " + hobby);
    });

</script>
</body>
</html>

 

결과 화면10

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 7장 get/set 메소드1  (0) 2024.02.22
[jQuery] 6장 기타 필터  (0) 2024.02.21
[jQuery] 4장 필터 및 기본 필터  (0) 2024.02.21
[jQuery] 3장 jQuery 선택자  (0) 2024.02.21
[jQuery] 2장 jQuery 기초  (0) 2024.02.20

티스토리툴바