JQuery 选择器、DOM节点操作练习实例


Posted in jQuery onSeptember 28, 2017

一、练习一

1、需求效果分析:

JQuery 选择器、DOM节点操作练习实例

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

二、练习二

1、效果分析:

JQuery 选择器、DOM节点操作练习实例

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、效果分析

JQuery 选择器、DOM节点操作练习实例

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节点操作练习实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 #jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
You might like
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
angularJS 入门基础
2015/02/09 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python的函数嵌套的使用方法
2014/01/24 Python
python k-近邻算法实例分享
2014/06/11 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
浅谈Python中函数的参数传递
2016/06/21 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
大学生职业规划前言模板
2013/12/27 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
停水通知
2015/04/16 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS