1. 가시성 필터 선택기
:hidden은 보이지 않는 모든 요소를 선택합니다. 예를 들어 $(":hidden")은 보이지 않는 모든 요소를 선택한다는 의미입니다. 포함:
<input type="hidden" />
<div style="display:none;"></div>
<div style="visibity:hidden"></div> 로그인 후 복사
html 페이지의 주석 콘텐츠/**/,
,
(이 태그가 페이지에 있는 경우) ,
, , ,
및 기타 요소를 입력하세요.
요소만 제거하려면 $("input:hidden")을 사용하면 됩니다. input:hidden 사이에 공백이 없다는 점에 유의하세요. 공백이 있는지 없는지 나중에 설명하겠습니다.
확인은 다음과 같습니다.
확인 페이지 코드:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试jQuery选择器</title>
<script src="Scripts/jquery-1.7.1.js"></script>
<style type="text/css">
.test {
background-color: yellow;
}
</style>
</head>
<body>
<input type="hidden" value="hidden"/>
<div style="display:none"></div>
<script type="text/javascript">
var $hidden1 = $(":hidden");
var $hidden2 = $("input:hidden");
var len1 = $hidden1.length;
var len2 = $hidden2.length;
console.log("$(':hidden').length:"+len1);
console.log("$('input:hidden').lengh:" + len2);
$.each($hidden1, function () {
console.log(this.nodeName+":"+ this.innerHTML);
});
$.each($hidden2, function () {
console.log(this.nodeName + ":" + this.innerHTML);
});
</script>
</body>
</html> 로그인 후 복사
출력 결과는 다음과 같습니다.
$(':hidden').length:8
$('input:hidden').lengh:1
HEAD:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试jQuery选择器</title>
<script src="Scripts/jquery-1.7.1.js"></script>
<style type="text/css">
.test {
background-color: yellow;
} </style>
META:
TITLE:测试jQuery选择器
SCRIPT:
STYLE: .test {
background-color: yellow;
}
INPUT:
DIV:
SCRIPT:
var $hidden1 = $(":hidden");
var $hidden2 = $("input:hidden");
var len1 = $hidden1.length;
var len2 = $hidden2.length;
console.log("$(':hidden').length:"+len1);
console.log("$('input:hidden').lengh:" + len2);
$.each($hidden1, function () {
console.log(this.nodeName+":"+ this.innerHTML);
});
$.each($hidden2, function () {
console.log(this.nodeName + ":" + this.innerHTML);
});
INPUT: 로그인 후 복사
2.
선택기의 공백은 무시할 수 없습니다. 공백이 있든 없든 다른 결과를 얻을 수 있습니다. 다음 예를 보세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试jQuery选择器</title>
<script src="Scripts/jquery-1.7.1.js"></script>
<style type="text/css">
.test {
background-color: yellow;
}
</style>
</head>
<body>
<div class="test">
<div style="display:none">a</div>
<div style="display:none">b</div>
<div style="display:none">c</div>
<div class="test" style="display:none">d</div>
</div>
<div class="test" style="display:none;">e</div>
<div class="test" style="display:none">f</div>
<script type="text/javascript">
var $t1 = $(".test :hidden");//带空格
var $t2 = $(".test:hidden");//不带空格
var len1 = $t1.length; var len2 = $t2.length;
console.log("$('.test :hidden').length:" + len1);
console.log("$('.test:hidden').length:" + len2);
$.each($t1, function () {
console.log(this.nodeName+":"+ this.innerHTML);
});
console.log();
$.each($t2, function () {
console.log(this.nodeName + ":" + this.innerHTML);
});
</script>
</body>
</html> 로그인 후 복사
출력 결과는 다음과 같습니다.
$('.test :hidden').length:4
$('.test:hidden').length:3
DIV:a
DIV:b
DIV:c
DIV:d
DIV:d
DIV:e
DIV:f 로그인 후 복사
결과가 다른 이유는 하위 항목 선택기와 필터 선택기가 동일하기 때문입니다. 다른.
$(".test:hidden")은 공백 없이 클래스가 "test"인 숨겨진 요소를 선택합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
