《锋利的JQuery》读书要点笔记2—

第三章 jQuery中的DOM操作

3.1 DOM(Document Object Model)操作的分类

　　1. DOM Core 例如：document.getElementsByTagName("form")

　　 2. HTML-DOM 例如: document.forms

　　 3. CSS-DOM 例如：element.style.color="red"

3.2 jQuery中的DOM操作

先构建一个网页，下面的DOM操作都围绕这个网页展开。

//...省略头部
<p title="选择你喜欢的水果">你最喜欢的水果？</p>

<ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

</ul>
//...省略尾部

1. 查找节点——jQuery选择器

可以利用attr()方法来获取选择到的元素的各种属性的值。

      var $para = $("p");            // 获取<p>节点

      var $li = $("ul li:eq(1)");   // 获取第二个<li>元素节点

      var p_txt = $para.attr("title"); // 输出<p>元素节点属性title

      var ul_txt =  $li.attr("title");    // 获取<ul>里的第二个<li>元素节点的属性title

      var li_txt =  $li.text();       // 输出第二个<li>元素节点的text

      alert(ul_txt);

      alert(li_txt);

      alert(p_txt);

2. 创建节点

$() 创建元素节点，append()等方法，创建文本节点，创建属性节点

    var $li_1=$("<li></li>");   //创建元素节点

    $("ul").append($li_1);      //添加节点到ul节点中，使之能在网页上显示

    var $li_2=$("<li title='香蕉'>香蕉</li>");   //创建属性和文本节点

    $("ul").append($li_2);

3. 插入节点

4. 删除节点

三个方法：remove(); detach(); empty()

remove()方法，该方法所包含的所有后代节点将同时被删除。这个方法返回被删除节点的引用，因此在以后可以再使用这个元素。

可以通过传递参数来选择性地删除元素：

detach()方法，注意与remove()方法的区别

empty()方法，并不删除节点，而是清空节点，它能清空元素的所有后代节点

5. 复制节点

clone()方法，复制节点后新的元素不具有任何行为，如果需要新元素也具有和原来一样的功能，可以这样：

　　 $("ul li").click(function(){

        $(this).clone(true).appendTo("ul");  //注意参数true,表示复制元素的同时复制元素所绑定的事件

    });

6. 替换节点

replaceWith()方法和repleaceAll()方法

7. 包裹节点

wrap()方法，wrapAll()方法，wrapInner()方法

8. 属性操作

使用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

9. 样式操作

attr()方法来获取样式和设置样式：

追加样式addClass()方法：

移除样式removeClass()方法，当它不带参数时会将全部的class删除

切换样式toggleClass()方法:

判断是否含有某个样式hasClass()方法

10. 设置和获取HTML，文本和值

--html()方法

类似js中的innerHTML属性，可以用来读取或设置某个远端中的html内容

--text()方法

　类似js中的innerText属性，用法和html()方法类似。

--val()方法

　类似Js中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

来两个例子来演示val()方法的使用：第一个是实现类似邮箱登录界面的效果

邮箱文本框和密码文本框都有默认的文字，点击时默认文字消失，如果没有输入任何内容则鼠标点到另一文本框的话默认文字又会显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>3-10-2-1</title>

 <!--   引入jQuery -->

 <script src="../../scripts/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">

 //<![CDATA[

  $(function(){

      $("#address").focus(function(){         // 地址框获得鼠标焦点

            var txt_value =  $(this).val();   // 得到当前文本框的值

            if(txt_value=="请输入邮箱地址"){

                $(this).val("");              // 如果符合条件，则清空文本框内容

            }

      });

      $("#address").blur(function(){          // 地址框失去鼠标焦点

              var txt_value =  $(this).val();   // 得到当前文本框的值

            if(txt_value==""){

                $(this).val("请输入邮箱地址");// 如果符合条件，则设置内容

            }

      })

      $("#password").focus(function(){　　　　//密码框处理类似

            var txt_value =  $(this).val();

            if(txt_value=="请输入邮箱密码"){

                $(this).val("");

            }

      });

      $("#password").blur(function(){

              var txt_value =  $(this).val();

            if(txt_value==""){

                $(this).val("请输入邮箱密码");

            }

      })

  });

  //]]>

  </script>

</head>

<body>

    <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>

    <input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>

    <input type="button" value="登录"/>

</body>

</html>

本例中也可使用表单的defaultValue属性实现同样的功能。

val()方法的另外一个用处是它能使select(下拉列表框), checkbox(多选框)和radio(单选框)相应的选项被选中。来一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>3-10-3</title>

<style type="text/css">

.test{

 font-weight:bold;

 color : red;

}

.add{

 font-style:italic;

}

</style>

 <!--   引入jQuery -->

 <script src="../../scripts/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">

 //<![CDATA[

  $(function(){

      //设置单选下拉框选中

      $("input:eq(0)").click(function(){

            $("#single").val("选择2号");

      });

      //设置多选下拉框选中

      $("input:eq(1)").click(function(){

            $("#multiple").val(["选择2号", "选择3号"]);

      });

      //设置单选框和多选框选中

      $("input:eq(2)").click(function(){

             $(":checkbox").val(["check2","check3"]);

            $(":radio").val(["radio2"]);

      });    

  });

  //]]>

  </script>

</head>

<body>

    <input type="button" value="设置单选下拉框选中"/>

    <input type="button" value="设置多选下拉框选中"/>

    <input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">

  <option>选择1号</option>

  <option>选择2号</option>

  <option>选择3号</option>

</select>

<select id="multiple" multiple="multiple" style="height:120px;">

  <option selected="selected">选择1号</option>

  <option>选择2号</option>

  <option>选择3号</option>

  <option>选择4号</option>

  <option selected="selected">选择5号</option>

</select>

<br/><br/>

<input type="checkbox" value="check1"/> 多选1

<input type="checkbox" value="check2"/> 多选2

<input type="checkbox" value="check3"/> 多选3

<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1"/> 单选1

<input type="radio" value="radio2"/> 单选2

<input type="radio" value="radio3"/> 单选3

</body>

</html>

11. 遍历节点

--children()方法，用来获取匹配元素的子元素的集合，不考虑其他后代元素。

--next()方法，取得匹配元素后面紧邻的元素

--prev()方法，和上面正好相反

--siblings()方法，取得匹配元素前后所有的同辈元素

--closet()方法：

12. CSS-DOM操作

设置<p>元素的透明度为半透明：

获取某个元素的height属性：或者

设置高度：

offset()方法：获取元素在当前视窗的相对偏移，返回的对象包含top和left这两个属性

position()方法：

scrollTop()和scrollLeft()方法

3.3 案例研究——网站的图片提示效果

鼠标划过图片显示大图，大图下面出现相应的介绍文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片提示</title>

 <!--   引入jQuery -->

 <script src="scripts/jquery.js" type="text/javascript"></script>

<style type="text/css">

body{

    margin:0;

    padding:40px;

    background:#fff;

    font:80% Arial, Helvetica, sans-serif;

    color:#555;

    line-height:180%;

}

img{border:none;}

ul,li{

    margin:0;

    padding:0;

}

li{

    list-style:none;

    float:left;

    display:inline;

    margin-right:10px;

    border:1px solid #AAAAAA;

}

/* tooltip */

#tooltip{

    position:absolute;

    border:1px solid #ccc;

    background:#333;

    padding:2px;

    display:none;

    color:#fff;

}

</style>

<script type="text/javascript">

//<![CDATA[

$(function(){

    var x = 10;

    var y = 20;

    $("a.tooltip").mouseover(function(e){

        this.myTitle = this.title;

        this.title = "";

        var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";

        var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素

        $("body").append(tooltip);    //把它追加到文档中

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left":  (e.pageX+x)  + "px"

            }).show("fast");      //设置x坐标和y坐标，并且显示

    }).mouseout(function(){

        this.title = this.myTitle;

        $("#tooltip").remove();     //移除

    }).mousemove(function(e){

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left":  (e.pageX+x)  + "px"

            });

    });

})

//]]>

</script>

</head>

<body>

<h3>有效果：</h3>

    <ul>

        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>

        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>

    </ul>

<br/><br/><br/><br/>

<br/><br/><br/><br/>

<h3>无效果：</h3>

<ul>

        <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>

        <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

        <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

        <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>

    </ul>

</body>

</html>

第三章的个人总结：这一章主要内容是jQuery的DOM操作，简而言之就是对节点的各种编辑功能以及对其各种属性的操作，读取和设置style对象的各种属性。

《锋利的JQuery》读书要点笔记2——DOM操作的更多相关文章

jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件第一章认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点查找元素节点查找属性节点创建节点创建元素节点创 ...
《锋利的JQuery》读书要点笔记5——jQuery与Ajax的应用
第6章 jQuery与Ajax的应用 Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的 ...
《锋利的JQuery》读书要点笔记4——表格表单的操作
第五章 jQuery对表单,表格的操作以及更多应用这章主要以一些具体案例讲解了jQuery对表单,表格的常用操作,以及一些常见的jQuery应用,用到的都是上几章说的东西.下面就以具体的案例来展开. ...
锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
《锋利的jQuery》心得笔记--Two Sections
第三章 1. DOM操作(节点) 1) 查找节点可以查找元素节点和属性节点 2) 创建节点: (1) 创建元素节点 var addLi = $(“&l ...
【锋利的jQuery】学习笔记03
第三章 jQuery中的DOM操作一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可 ...
jQuery学习笔记（DOM操作）
DOM操作的分类一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

随机推荐

福大软工1816：Alpha（3/10）
Alpha 冲刺 (3/10) 队名:第三视角组长博客链接本次作业链接团队部分团队燃尽图工作情况汇报张扬(组长) 过去两天完成了哪些任务: 文字/口头描述: 1.学习qqbot库: 2.实 ...
用vs调试项目页面无样式
ASP.NET Development Server 上的文件授权在文件系统网站中,静态文件(例如图像和样式表)遵守 ASP.NET 授权.例如,如果禁用了对静态文件的匿名访问,匿名用户则不能使用文 ...
HDU 1028 整数拆分问题 Ignatius and the Princess III
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
poj1094拓扑排序
Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 29539 Accepted: 10 ...
【bzoj5070】危险的迷宫费用流
题目描述 JudgeOnline/upload/201710/55.doc 输入第一行是两个整数A与B(1≤A,B≤10),中间用空格分隔,表示该迷宫是A行B列的. 第2行至第A+1行,每行有B个1 ...
【题解】SDOI2014数数
真的很开心呢,总算是有一道完完全全由自己做出来的题目啦~ 这一道题目洛谷P3311和另一道JSOI文本生成器的题目是十分相像的,dp方面几乎相同.只是<=n的约束,让这道题目必须结合数位dp的方 ...
[Leetcode] String to integer atoi 字符串转换成整数
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
[Leetcode] Remove duplicate from sorted list ii 从已排序的链表中删除重复结点
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
洛谷 P1829 [国家集训队]Crash的数字表格 / JZPTAB 解题报告
[国家集训队]Crash的数字表格 / JZPTAB 题意求$\sum\limits_{i=1}^n\sum\limits_{j=1}^mlcm(i,j)$,$n,m\le 10^7$ 鉴于 ...
BZOJ_day9
哇,一道巨大的水题害得我wa了无数次... 总结一下教训大家一定记住(给我自己看的) 位运算一定要加()!!! 重要的事情说三遍位运算一定要加()!!! 位运算一定要加()!!! 位运算 ...

《锋利的JQuery》读书要点笔记2——DOM操作

《锋利的JQuery》读书要点笔记2——DOM操作的更多相关文章

随机推荐

热门专题