jQuery의 has(selector) 선택기에 대한 자세한 설명
- 黄舟원래의
- 2017-06-23 11:26:561788검색
개요
선택기와 일치하는 요소가 포함된 요소 일치
매개변수
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.