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中map函数的两种方式
Apr 07 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php 保留小数点
2009/04/21 PHP
完美解决PHP中文乱码
2009/11/26 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
js图片上传的封装代码
2017/08/01 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
python动态网页批量爬取
2016/02/14 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python实现彩票系统
2020/06/28 Python
python中pip的安装与使用教程
2018/08/10 Python
python实现动态数组的示例代码
2019/07/15 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python requests模块cookie实例解析
2020/04/14 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
保证书范文大全
2014/04/28 职场文书
信仰心得体会
2014/09/05 职场文书
毕业设计工作总结
2015/08/14 职场文书
自荐信大全
2019/03/21 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
用python画城市轮播地图
2021/05/28 Python
如何在Python项目中引入日志
2021/05/31 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS