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 19 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
PHP获取网卡地址的代码
2008/04/09 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
jquery获得下拉框值的代码
2011/08/13 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python单例模式实例分析
2015/01/14 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python实现静态web服务器
2019/09/03 Python
什么是python的函数体
2020/06/19 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
优秀员工表扬信
2014/01/17 职场文书
爱国口号
2014/06/19 职场文书
移交协议书
2014/08/19 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书