jQuery의 has(selector) 선택기에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery의 has(selector) 선택기에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-23 11:26:56

원래의

1773명이 탐색했습니다.

개요

선택기와 일치하는 요소가 포함된 요소 일치

매개변수

selectorSelectorV1.1.4

로그인 후 복사

필터링용 선택기

예

설명:

p 요소가 포함된 모든 div 요소에 텍스트 클래스 추가

HTML 코드 :

<div><p>Hello</p></div> <div>Hello again!</div>

로그인 후 복사

jQuery 코드:

$("div:has(p)").addClass("test");

로그인 후 복사

결과:

[ <div class="test"><p>Hello</p></div> ]

로그인 후 복사

이 선택자의 정의는 약간 혼란스러울 수 있습니다. 요소에 선택기와 일치하는 요소가 포함되어 있으면 이 요소는 다음과 같습니다. 일치합니다. 예:

$("div:has(p)")

로그인 후 복사

위 선택기는 p 요소가 포함된 div 요소와 일치합니다.
이 선택기는 일반적으로 클래스 선택기 및 요소 선택기 등 다른 선택기와 함께 사용됩니다. 예:

$("div:has(p)").css("color","blue")

로그인 후 복사

위 코드는 p 요소가 포함된 div 요소의 글꼴 색상을 파란색으로 설정합니다.
다른 선택기와 함께 사용되지 않는 경우 기본 state가 * 선택기와 함께 사용됩니다. 예를 들어 $(":has")는 $("*:has")와 동일합니다.

매개변수 목록:

매개변수 ~ .

예제 코드:

예제 1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div 
{
  border:1px solid green;
  height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("div:has(span)").css("border","1px solid red") 
  }) 
}) 
</script>
</head>
<body>
<div>我不含span</div>
<div> <span>我是span</span></div>
<button>点击查看效果</button>
</body>
</html>

로그인 후 복사

위 코드는 범위 요소가 포함된 div의 테두리 색상을 빨간색으로 설정할 수 있습니다.

예제 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div 
{
  border:1px solid green;
  height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("*:has(span)").css("border","1px solid red") 
  }) 
}) 
</script>
</head>
<body>
<div>我不含span</div>
<div><span>我是span</span></div>
<p><span>我是span</span></p>
<button>点击查看效果</button>
</body>
</html>

로그인 후 복사

위 코드에서는 :has 선택기와 함께 사용할 선택기를 지정하지 않았기 때문에 기본적으로 * 선택기와 함께 사용되므로 위 코드는 모든 범위를 결합할 수 있습니다. 요소의 테두리 색상이 빨간색으로 설정되었습니다.

위 내용은 jQuery의 has(selector) 선택기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!