이 기사에서는 주로 JQuery 선택기 및 DOM 노드 작업 연습의 예를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
1. 수요 효과 분석:
2. 코드 예:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title></title>
<script src= "jquery-1.9.1/jquery.js" ></script>
<script type= "text/javascript" >
$( function () {
for ( var i = 0; i < $( "p" ).length; i++) {
$( "p" )[i].onclick = function () {
alert($(this).html());
};
};
});
</script>
</head>
<body>
<p>隔壁 Java 老师 很肥</p>
<p>隔壁Java 老师 很胖</p>
<p>隔壁Java 老师 很呆萌</p>
<p>隔壁Java 老师 爱捡肥皂</p>
<p>隔壁Java 老师 爱撒娇</p>
<p>隔壁Java 老师 装嫩</p>
<p>隔壁Java 老师 肾虚</p>
<p>隔壁Java 老师 等等</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
<p>隔壁Java 老师 很肥</p>
</body>
</html>
|
로그인 후 복사
2. 효과 분석:
2.
3. 연습문제 3![](https://img.php.cn/upload/article/000/054/025/2503be370731422d521b60ca5be1c7a7-1.png)
1. 효과 분석
2. 코드 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title></title>
<style type= "text/css" >
p {
display: none;
border: 1px solid red;
}
</style>
<script src= "jquery-1.9.1/jquery.js" ></script>
<script type= "text/javascript" >
$( function () {
$( "li" ).click( function () {
debugger;
$( "li>p" ).hide();
$(this.children).show();
});
});
</script>
</head>
<body>
<ul>
<li>
中国
<p>台湾</p>
<p>钓鱼岛</p>
<p>北京</p>
</li>
<li>
米国
<p>华盛顿</p>
<p>洛杉矶</p>
</li>
<li>
韩国
<p>首尔</p>
<p>釜山</p>
<p>济州岛</p>
</li>
</ul>
</body>
</html>
|
로그인 후 복사
관련 추천![](https://img.php.cn/upload/article/000/054/025/c1e428ce39f4c0532c660aebb8c9af09-2.png)
JQuery 선택기
jQuery 선택기(이전 ~ 형제) 상세 설명
j 쿼리 선택 기기의 일부 세부정보
위 내용은 JQuery 선택기 및 DOM 노드 작업 공유 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!