Example sharing JQuery selector and DOM node operation exercises

This article mainly brings you an example of JQuery selector and DOM node operation exercises. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Exercise 1

1. Demand effect analysis:

2. Code example:

nbsp;html>


  <meta>
  <title></title>
  <script></script>
  <script>
    $(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>


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

2 , Exercise 2

1. Effect analysis:

2. Code example

nbsp;html>


<meta>
  <title></title>
  <style>
    p {
      display: none;
      border: 1px solid red;
    }
  </style>
  <script></script>
  <script>
    $(function () {
      $("li").click(function () {
        debugger;
        $("li>p").hide();
        $(this.children).show();
      });
    });
    
  </script>


  

    
•       中国       

  台湾

        

  钓鱼岛

        

  北京

      
    
•       米国       

  华盛顿

        

  洛杉矶

      
    
•       韩国       

  首尔

        

  釜山

        

  济州岛

      
  

3. Exercise 3

1. Effect analysis

2. Code example

nbsp;html>


<meta>
  <title></title>
  <style>
    .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></script>
  <script>
    $(function () {
      $("#mybox").click(function () {
        $("#mybox").css("border", "5px dotted green");
      });
      //$(".box").click(function () {
      //  $(".red").css("border", "5px dotted green");
      //});
      $(".box1").click(function () {
        $("p").css("border", "5px dotted green");
      });
      $(".box").click(function () {
        $("#mybox,p").css("border", "5px dotted green");
      });
      $("p[class=&#39;box red&#39;]").click(function () {
        $(this).siblings().hide();
        $(".box3").show();
      });
    });
    function find1() {
      $(".red").css("border", "5px dotted green");
    };
  </script>


  <p>
    点击我让所有id为mybox的元素边框该为：5px dotted green=》提示 $().css("border","5px dotted green")
  </p>


  <p>
    点击我让所有class=red的元素边框该为：5px dotted green
  </p>


  <p>
    点击我让所有p的元素边框该为：5px dotted green
  </p>


  <p>
    点击我让id为mybox的元素、p元素边框该为：5px solid green
  </p>


  <p>
    点击我隐藏除了我以外所有的兄弟元素
  </p>

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

Related recommendations

JQuery selector

Detailed explanation of jQuery selector (prev ~ siblings)

Some details in jQuery selector

The above is the detailed content of Example sharing JQuery selector and DOM node operation exercises. For more information, please follow other related articles on the PHP Chinese website!