一、练习一

1、需求效果分析：

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

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

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节点操作练习的更多相关文章

  1. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  2. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  3. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  4. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  5. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  6. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  7. jQuery克隆DOM节点

    jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  8. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  9. 第6章 DOM节点操作

    一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  10. Jquery6 DOM 节点操作

    学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,通过这 ...

随机推荐

  1. 【CV知识学习】early stop、regularation、fine-tuning and some other trick to be known

    深度学习有不少的trick,而且这些trick有时还挺管用的,所以,了解一些trick还是必要的.上篇说的normalization.initialization就是trick的一种,下面再总结一下自 ...

  2. JQuery编程demo练习

    JQuery练习demo:     编敲代码,实现:     1.选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色). 2.取消选中复选框时,所在行的背景色恢复. ============ ...

  3. C/C++综合測试题(四)

    又刷了一套题 这些题都是百度.阿里巴巴.腾讯.网易.新浪等公司的面试原题.有一定的难度.只是确实相当有水平.能够通过做题来查漏补缺. 11.以下代码的输出是什么? class A { public: ...

  4. cocos2dx 在android平台打开文件问题

        我们有一个项目是基于cocos2dx + lua,在网络部分用到了protobuf, 在初始化protobuf的时候须要读取本地文件,用lua的io.open读取文件在windows,ios上 ...

  5. [办公自动化]计算机突然死机后asd自动恢复文档未能恢复，如何打开使用

    今天计算机突然死机,但是word未能提示自动恢复窗格.所以无法自动恢复word文档.但是在文档所在的文件夹看到了一个“自动恢复”开头的asd恢复文档. 该如何使用这个文档呢? 按照以前的惯例,尝试了如 ...

  6. 【OI】线性筛

    如何查找一个范围内的所有素数? 可以是从1~n挨个判断n%i 是否 == 0,也可以从 1~sqr(n) 一个个判断. 相信你们也听说过埃氏筛法,是使用每一个数的倍数筛掉合数!但是!每一个合数要被筛多 ...

  7. Git经常使用命令总结

    Git是一款开源的分布式版本号控制系统,由Linux之父Torvalds用C语言开发. "the stupid content tracker",Git自诩为stupid,却是一个 ...

  8. #1543 : SCI表示法

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 每一个正整数 N 都能表示成若干个连续正整数的和,例如10可以表示成1+2+3+4,15可以表示成4+5+6,8可以表示成 ...

  9. YTU 2623: B 抽象类-形状

    2623: B 抽象类-形状 时间限制: 1 Sec  内存限制: 128 MB 提交: 235  解决: 143 题目描述 定义一个抽象类Shape, 类中有两个纯虚函数. 具体类正方形类Shape ...

  10. git log 常用选项

    git log 常用选项 -p 按补丁格式显示每个更新之间的差异. jiqing@Ubuntu:/home/wwwroot/default/5hao/sheep$ git log -p commit ...