快捷導航

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

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

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

一、練習一

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>

二、練習二

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>

三、練習三

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é)點操作練習實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery live()調(diào)用不存在的解決方法
新版的jquery中，live()方法已經(jīng)被刪除了，所以在調(diào)用的時候會提示該函數(shù)不存在，下面有個不錯的解決方法，大家可以參考下
2014-02-02
jQuery+css+html實現(xiàn)頁面遮罩彈出框
面遮罩彈出框已經(jīng)不是一個陌生的話題了，實現(xiàn)的方法大同小異多種多樣，今天用jQuery實現(xiàn)頁面遮罩彈出框，主要用的技術(shù)有JQuery，css和html,感興趣的朋友可以參考下哈
2013-03-03
jQuery實現(xiàn)購物車全功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)購物車全功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
easyui中combotree循環(huán)獲取父節(jié)點至根節(jié)點并輸出路徑實現(xiàn)方法
下面小編就為大家?guī)硪黄猠asyui中combotree循環(huán)獲取父節(jié)點至根節(jié)點并輸出路徑實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
jQuery開發(fā)者都需要知道的5個小技巧
JQuery是個不錯的框架，以下總結(jié)了5個每個網(wǎng)站開發(fā)者都應(yīng)該知道的小技巧，都是一些非常不錯的，經(jīng)常能用得到的。
2010-01-01
jQuery簡單實現(xiàn)頁面元素置頂時懸浮效果示例
這篇文章主要介紹了jQuery簡單實現(xiàn)頁面元素置頂時懸浮效果的方法,涉及jQuery針對頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下
2016-08-08
今天小編就為大家分享一篇jquery.param()實現(xiàn)數(shù)組或?qū)ο蟮男蛄谢椒?，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10