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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JQuery animate动画应用示例
May 14 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
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
python中random模块详解
2021/03/01 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
员工教育培训协议书
2014/09/27 职场文书
2014年公司工作总结
2014/11/22 职场文书