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实现文字打印动态效果
Apr 21 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现放大镜案例
Oct 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
$()JS小技巧
2007/07/21 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
js实现数组转换成json
2015/06/26 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
python读写LMDB文件的方法
2018/07/02 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
简单了解django缓存方式及配置
2019/07/19 Python
Django如何将URL映射到视图
2019/07/29 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
基于python实现文件加密功能
2020/01/06 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
C有"按引用传递"吗
2016/09/06 面试题
教育课题研究自我鉴定范文
2013/12/28 职场文书
运动会入场解说词
2014/02/07 职场文书
三严三实对照检查材料
2014/09/22 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
python程序的组织结构详解
2021/12/06 Python