> 웹 프론트엔드 > JS 튜토리얼 > JQuery 선택기 및 DOM 노드 작업 공유 예제

JQuery 선택기 및 DOM 노드 작업 공유 예제

小云云
풀어 주다: 2017-12-27 10:17:24
원래의
2054명이 탐색했습니다.

이 기사에서는 주로 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 () {

      //方法一:jQuery

      //$("p").click(function () {

      //  alert(this.textcontent);

      //  //alert($(this).html());

      //});

 

      //方法二:jQuery--for循环

      for (var i = 0; i < $("p").length; i++) {

        $("p")[i].onclick = function () {

          alert($(this).html());

        };

      };

    });

 

    //方法三:JavaScript中的for循环

    /*window.onload = function () {

      var temp = document.getElementsByTagName("p");

      for (var i = 0; i < temp.length; i++) {

        temp[i].onclick = function () {

          alert(this.innerHTML);

        };

      };

    }*/

  </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

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>

로그인 후 복사

관련 추천

JQuery 선택기


jQuery 선택기(이전 ~ 형제) 상세 설명

j 쿼리 선택 기기의 일부 세부정보

위 내용은 JQuery 선택기 및 DOM 노드 작업 공유 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿