PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

紫旺柴
5 years ago
Views:

1 jquery 操作 DOM 管理科学与工程学科耿方方

2 主要内容 DOM 基础访问元素节点操作

3 DOM 基础 DOM(Document Object Model) 为文档提供了结构化表示方法, 通过该方法可以改变文档的内容和展示形式在实际运用中,DOM 更像是桥梁, 通过它可以实现跨平台跨语言的标准访问与 DOM 密不可分的是 JavaScript 脚本技术,DOM 在 Web 前端的应用也是基于 JavaScript 实现的, 在前面的章节中我们已经讲到了在 JavaScript 中是如何进行 DOM 操作的单词 Document 即文档, 当我们创建一个页面并加载到 Web 浏览器时, DOM 模型则根据该页面的内容创建了一个文档文件 ;Object 即对象, 是指具有独立特性的一组数据集合, 比如我们把新创建的页面文档称之为文档对象, 与对象相关联的特征称之为对象属性, 访问对象的函数称之为对象方法 ;Model 即模型, 在页面文档中, 通过树状模型展示页面的元素和内容, 而其展示方式是通过节点 (node) 来实现的

4 访问元素在访问页面时, 需要与页面中的元素进行交互式的操作在操作中, 元素的访问是最繁琐最常用的, 主要包括对元素属性内容值 CSS 的操作

5 访问元素属性操作在 jquery 中, 可以对元素的属性执行获取设置删除操作, 通过 attr() 方法可以对元素属性执行获取与设置操作, 通过 removeattr() 则可以执行删除元素属性操作我们可以通过 attr() 方法获取元素的属性, 其语法结构如下所示 : attr(name)

6 访问元素属性操作案例 1: <script> $(function(){ var stralt=$('img').attr("src"); stralt+="<br><br>"+$("img").attr("title"); $("#divalt").html(stralt); }); </script> </head> <body> <img src="images/7-07.jpg" title=" 这是一张画 "> <div id="divalt"></div> </body>

7 访问元素属性操作设置元素的属性在页面中,attr() 方法不仅可以用来获取元素的属性值, 还可以设置元素的属性, 其设置元素属性的语法格式如下所示 : attr(key,value) attr({key0:value0,key1:value1})

8 访问元素属性操作设置元素的属性另外,attr() 方法还可以绑定一个 function() 函数, 通过该函数返回的值作为元素的属性值语法格式如下所示 : attr(key,function(index)) 其中, 参数 index 为当前元素的索引号, 整个函数返回一个字符串作为元素的属性值

9 访问元素属性操作案例 2 <style>.clsimg{ border: 2px solid #ccc;padding: 3px; float: left;} </style> <body> <img alt="" src="images/img03.jpg" width="400" height="300"> </body> <script> $(function(){ }); }); </script> $("img").attr("title"," 这是一张风景画 "); $("img").addclass("clsimg"); $("img").attr("src",function(){ return "Images/img0"+ Math.floor(Math.random()*2+1)+".jpg";

10 访问元素属性操作删除元素的属性 jquery 中通过 attr() 方法设置元素的属性后, 使用 removeattr() 方法可以将元素的属性删除, 其语法结构如下所示 : removeattr(name)

11 访问元素元素内容操作在 jquery 中, 操作元素内容的方法包含 html() 和 text(), 前者与 JavaScript 中的 innerhtml 属性相似, 即获取和设置元素的 HTML 内容 ; 而后者类似于 JavaScript 中的 innertext 属性, 即获取或设置元素的文本内容二者的格式和功能的区别如下所示 : html() 方法仅支持 XHTML 的文档, 不能用于 XML 文档, 而 text() 则既支持 HTML 文档, 也支持 XML 文档

12 访问元素元素内容操作案例 3 <body> 应用 text() 方法设置的内容 <div id="div1"> <span id="clock1"> 当前时间 : 星期五 13:20:10</span> </div> <br /> 应用 html() 方法设置的内容 <div id="div2"> <script type="text/javascript"> $(document).ready(function(){ $("#div1").text("<span style='color:#ff0000'> 我是通过 text() 方法设置的文本内容 </span>"); $("#div2").html("<span style='color:#ff0000'> 我是通过 html() 方法设置的 HTML 内容 </span>"); }); </script> <span id="clock2"> 当前时间 : 星期五 13:20:10</span> </div> </body>

13 访问元素元素值操作 jquery 提供了 3 种对元素值操作的方法方法说明示例 val() 用于获取第一个匹配元素的当前值, 返回值可能是一个字符串, 也可能是一个数组例如当 select 元素有两个选中值时, 返回结果就是一个数组 $("#username").val(); username 的元素的值 // 获取 id 为 val(val) 用于设置所有匹配元素的值 $("input:text").val(" 新值 ") 文本框设置值 // 为全部 val(arrval ) 用于为 checkbox select 和 radio 等元素设置值, 参数为字符串数组 $("select").val([' 列表项 1',' 列表项 2']); // 为下拉列表框设置多选值

14 访问元素元素值操作案例 4 <body> < s e l e c t n a m e = " l i k e " s i z e = " 4 " multiple="multiple" id="like"> <option> 列表项 1</option> <option s elected="s elec ted"> 列表项 2</option> <option> 列表项 3</option> <option s elected="s elec ted"> 列表项 4</option> <script type="text/javascript"> $(document).ready(function(){ var strsel=$("select").val().join(","); alert(strsel); }); </script> </select> </body>

15 访问元素元素样式操作 jquery 对元素的 CSS 样式操作可以通过修改 CSS 类或者 CSS 的属性来实现通过修改 CSS 类实现方法说明示例 addclass(class) removeclass(class) toggleclass(class) toggleclass(class,s witch) 为所有匹配的元素添加指定的 CSS 类名从所有匹配的元素中删除全部或者指定的 CSS 类如果存在 ( 不存在 ) 就删除 ( 添加 ) 一个 CSS 类如果 switch 参数为 true 则加上对应的 CSS 类, 否则就删除, 通常 switch 参数为一个布尔型的变量 $("div").addclass("user red"); // 为全部 div 元素添加 user 和 red 两个 CSS 类 $("div").removeclass("line"); // 删除全部 div 元素中添加的 CSS 类 line $("div").toggleclass("blue"); // 当匹配的 div 元素中存在 CSS 类 blue, 则删除该类, 否则添加该 CSS 类 $("img").toggleclass("show",true); // 为 img 元素添加 CSS 类 show $("img").toggleclass("show",false); // 为 img 元素删除 CSS 类 show

16 访问元素元素样式操作案例 5 <style> p{padding: 5px;width: 220px;}.cls1{font-weight: bold;font-style: italic;}.cls2{border: 1px solid #666;background-color: #eee;} </style> <script src="jquery/jquery js" type="text/javascript"></script> <script> $(function(){ $("p").click(function(){ $(this).addclass("cls1 cls2"); }); }); </script> <body> <p>write Less Do More</p> </body>

17 访问元素元素样式操作案例 6 <style>.clsimg{border: 1px solid #666;padding: 3px;} </style> <script src="jquery/jquery js" type="text/javascript"></script> <script> $(function(){ $("img").click(function(){ $(this).toggleclass("clsimg"); }); }); </script> </head> <body> <img src="images/img01.jpg" alt="" title=" 风景 " width="400" height="300"> </body>

18 访问元素元素样式操作 jquery 对元素的 CSS 样式操作可以通过修改 CSS 类或者 CSS 的属性来实现通过修改 CSS 属性实现方法说明示例 css(name) css(name,value) css(properties) 返回第一个匹配元素的样式属性为所有匹配元素的指定样式设置值以 { 属性 : 值, 属性 : 值, } 的形式为所有匹配的元素设置样式属性 $("div").css("color"); // 获取第一个匹配的 div 元素的 color 属性值 $("img").css("border","1px solid #000000"); // 为全部 img 元素设置边框样式 $("tr").css({ "background-color":"#0000ff",// 设置背景颜色 "font-size":"16px", // 设置字体大小 "color":"#ffffff" // 设置字体颜色 });

19 访问元素元素样式操作案例 7 <style> p{padding: 5px;width: 220px;} </style> <script src="jquery/jquery js" type="text/javascript"></script> <script> $(function(){ $("p").click(function(){ $(this).css("font-weight","bold"); $(this).css("font-style","italic"); $(this).css("background-color","#eee"); }) }) </script> </head> <body> <p>write Less Do More</p> </body>

20 节点操作创建节点元素整个页面是一个 DOM 模型, 页面中各元素通过模型的节点相互关联形成树状因此, 如果要在页面中增加某个元素, 只需要找到元素的上级节点, 通过函数 $(html) 完成元素创建后, 增加到该节点中函数 $() 用户动态创建页面元素, 其语法格式如下 : $(html) 其中, 参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串, 即如果要在页面中动态创建一个 div 标记, 并设置其内容和属性, 可以加入如下代码 : var $div=$( <div title='jquery 理念 '> write less do more<div> ); $( body ).append($div);

21 节点操作创建节点元素另外一种方法就是先创建新元素, 二是将新元素插入到文档中例如 : var $p=$( <p></p> ); $p.html( <span style='color:#ff0000'> 要添加的内容 </span> ); $( body ).append($div);

22 节点操作插入节点插入结点在 jquery 中, 有很多的方法可以实现该功能, 我们前面例子中用到的 append() 方法仅仅是其中的一种, 按照插入元素的顺序类划分, 可以将插入节点分为内部和外部两种插入方法内部插入节点在元素内部插入节点就是向元素中添加子元素和内容

23 节点操作元素样式操作案例 8 <script> $(function(){ $("div").append(rethtml); function rethtml(){ var str="<b>write Less Do More</b>"; return str; }; }); </script> </head> <body> <div>jquery</div> </body>

24 节点操作元素样式操作案例 9 <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("<b> Hello World!</b>").appendTo("p"); }); }); </script> </head> <body> <p>this is a paragraph.</p> <p>this is another paragraph.</p> <button> 在每个 p 元素的结尾添加内容 </button> </body>

25 节点操作插入节点插入结点外部插入节点

26 节点操作元素样式操作案例 10 <script> $(function(){ $("span").after(rethtml); function rethtml(){ var str="<span><b>write Less Do More</b></span>"; return str; }; }); </script> </head> <body> <span>jquery</span> </body>

27 节点操作复制节点复制节点在页面中, 有时候需要将某个元素节点复制到另外一个节点后, 在 jquery 中可以通过 clone() 方法来实现节点的复制, 其语法结构如下所示 : clone();

28 节点操作复制节点案例 11 <script> $(function(){ $("img").click(function(){ $(this).clone(true).appendto("span"); }) }); </script> </head> <body> < s p a n > < i m g s r c = " I m a g e s / i m g 01. j p g " a l t = " " w i d t h = " 200" height="100"></span> </body>

29 节点操作替换节点替换节点在 jquery 中, 如果要替换元素中的节点, 可以使用 replacewith() 和 replaceall() 这两种方法, 其语法结构如下所示 : replacewith(content) replaceall(selector)

30 节点操作替换节点案例 12 <script> $(function(){ $("#span1").replacewith("<span> 套郭荣 </span>"); }); </script> </head> <body> <p> 姓名 :<span id="span1"></span></p> <p> 邮箱 :<span id="span2"></span></p> </body>

31 节点操作包裹节点包裹结点在 jquery 中, 不仅可以通过方法替换元素节点, 还可以根据需求包裹某个指定的节点, 对节点的包裹也是 DOM 对象操作中很重要的一项, 其与包裹节点相关的全部方法如下表所示 :

32 节点操作包裹节点案例 13 <script> $(function(){ $("#span1").replacewith("<span> 套郭荣 </span>"); }); </script> </head> <body> <p> 姓名 :<span id="span1"></span></p> <p> 邮箱 :<span id="span2"></span></p> </body>

33 节点操作遍历节点遍历节点在 DOM 元素操作中, 有时需要对统一标记的全部元素进行统一操作在 JavaScript 中, 需要先获取元素的总长度, 然后用 for 循环语句, 循环处理而在 jquery 中可以直接使用 each() 方法轻松实现元素的遍历, 其语法结构如下所示 : each(callback)

34 节点操作遍历节点案例 14 <script> $(function(){ $("img").each(function(index){ this.title=" 第 "+ index+" 风景图片,alt 内容是 "+this.alt; }); }); </script> </head> <body> <img src="images/img01.jpg" alt=" 第 0 幅风景图 " width="300" height="160"> <img src="images/img02.jpg" alt=" 第 1 幅风景图 " width="300" height="160"> <img src="images/img03.jpg" alt=" 第 2 幅风景图 " width="300" height="160"> </body>

35 节点操作删除节点删除节点在 DOM 操作页面时, 删除多余或指定的页面元素时非常必要的, jquery 提供了两种可以删除元素的方法, 即 remove() 和 empty(), 严格的说 empty() 方法并非真正意义上的删除, 使用该方法, 仅仅可以清空全部的节点或节点所包含的所有后代元素, 并非删除节点与元素 remove() 方法的语法结构如下所示 : remove([expr]) empty() 方法语法结构如下所示 : empty()

36 节点操作删除节点案例 15 <script> $(function(){ $("button").click(function(){ $("p").remove(); }); }); </script> </head> <body> <p> 这是一个段落 </p> <p> 这是另一个段落 </p> <button> 删除所有 p 元素 </button> </body>

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1