快捷導(dǎo)航

JQuery 選擇器、DOM節(jié)點操作練習(xí)實例

更新時間：2017年09月28日 07:57:06 作者：青衫故人1

下面小編就為大家?guī)硪黄狫Query 選擇器、DOM節(jié)點操作練習(xí)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、練習(xí)一

1、需求效果分析：

2、代碼示例：

<!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循環(huán)
      for (var i = 0; i < $("p").length; i++) {
        $("p")[i].onclick = function () {
          alert($(this).html());
        };
      };
    });

    //方法三：JavaScript中的for循環(huán)
    /*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>

二、練習(xí)二

1、效果分析：

2、代碼示例

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

三、練習(xí)三

1、效果分析

2、代碼示例

<!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">
    .box {
      border: 1px solid #aaccff;
      padding: 10px;
      margin: 10px;
    }

    .box1 {
      border: 1px solid #aacc66;
      padding: 10px;
      margin: 10px;
    }

    .red {
      color: Red;
    }

    p {
      padding: 10px;
      margin: 10px;
    }
  </style>
  <script src="jquery-1.9.1/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#mybox").click(function () {
        $("#mybox").css("border", "5px dotted green");
      });
      //$(".box").click(function () {
      //  $(".red").css("border", "5px dotted green");
      //});
      $(".box1").click(function () {
        $("div").css("border", "5px dotted green");
      });
      $(".box").click(function () {
        $("#mybox,p").css("border", "5px dotted green");
      });
      $("div[class='box red']").click(function () {
        $(this).siblings().hide();
        $(".box3").show();
      });
    });
    function find1() {
      $(".red").css("border", "5px dotted green");
    };
  </script>
</head>
<body>
  <div id="mybox" class="box1">
    點擊我讓所有id為mybox的元素邊框該為：5px dotted green=》提示 $().css("border","5px dotted green")
  </div>


  <div class="box" onclick="find1();">
    點擊我讓所有class=red的元素邊框該為：5px dotted green
  </div>


  <div class="box1 red" onclick="find2();">
    點擊我讓所有div的元素邊框該為：5px dotted green
  </div>


  <div class="box" onclick="find3();">
    點擊我讓id為mybox的元素、p元素邊框該為：5px solid green
  </div>


  <div class="box red" onclick="find4(this);">
    點擊我隱藏除了我以外所有的兄弟元素
  </div>

  <p>我是段落...</p>
</body>
</html>

以上這篇JQuery 選擇器、DOM節(jié)點操作練習(xí)實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: