jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명
- 黄舟원래의
- 2017-06-23 13:56:091649검색
개요
복합 속성 선택기, 여러 조건을 동시에 충족해야 할 때 사용됩니다.
Parameters
selector1Selector
속성 선택기
selector2Selector
범위를 더욱 좁힐 수 있는 또 다른 속성 선택기
selectorNSelector
속성 선택기의 개수에 관계없이
예
설명:
id를 포함하는 모든 속성을 찾고 해당 이름 속성은 다음으로 끝납니다. man
HTML 코드:
<input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" />
j쿼리 코드:
$("input[id][name$='man']")결과:
[ <input id="letterman" name="new-letterman" /> ]
각 선택기와 일치하는 요소를 결합하여 함께 반환합니다.
jQuery( "selector1, selector2, selectorN" )
selector1: 유효한 모든 선택
selector2: 기타 유효한 선택
selectorN: 원하는 대로 더 많은 유효한 선택.
단일 결과로 결합할 선택기를 원하는 만큼 지정할 수 있습니다. 이 다중 표현식 조합은 다양한 요소를 선택하는 효율적인 방법입니다. 파일에 있는 순서대로 표시되므로 반환된 jQuery 객체의 DOM 요소 순서는 동일하지 않을 수 있습니다. 또 다른 선택기 조합은 .add() 메서드입니다.
예:
예: 아래 세 가지 선택기와 일치하는 요소를 찾으세요.
<!DOCTYPE html>
<html>
<head>
<style>
div,span,p {
width: 126px;
height: 60px;
float:left;
padding: 3px;
margin: 2px;
background-color: #EEEEEE;
font-size:14px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<script>$("div,span,p.myClass").css("border","3px solid red");</script>
</body>
</html>결과:
![jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명](https://img.php.cn//upload/image/248/909/362/1498197320290160.png "1498197320290160.png")
예: jQuery 개체에 순서를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<style>
b { color:red; font-size:16px; display:block; clear:left; }
div,span,p { width: 40px; height: 40px; float:left;
margin: 10px; background-color: blue;
padding:3px; color:white;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
<script>
var list = $("div,p,span").map(function () {
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
</script>
</body>
</html>결과:
![jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명](https://img.php.cn//upload/image/369/320/226/1498197364532924.png "1498197364532924.png")
위 내용은 jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.