jquery 操作 DOM 管理科学与工程学科耿方方
主要内容 DOM 基础 访问元素 节点操作
DOM 基础 DOM(Document Object Model) 为文档提供了结构化表示方法, 通过该方法可以改变文档的内容和展示形式 在实际运用中,DOM 更像是桥梁, 通过它可以实现跨平台 跨语言的标准访问 与 DOM 密不可分的是 JavaScript 脚本技术,DOM 在 Web 前端的应用也是基于 JavaScript 实现的, 在前面的章节中我们已经讲到了在 JavaScript 中是如何进行 DOM 操作的 单词 Document 即文档, 当我们创建一个页面并加载到 Web 浏览器时, DOM 模型则根据该页面的内容创建了一个文档文件 ;Object 即对象, 是指具有独立特性的一组数据集合, 比如我们把新创建的页面文档称之为文档对象, 与对象相关联的特征称之为对象属性, 访问对象的函数称之为对象方法 ;Model 即模型, 在页面文档中, 通过树状模型展示页面的元素和内容, 而其展示方式是通过节点 (node) 来实现的
访问元素 在访问页面时, 需要与页面中的元素进行交互式的操作 在操作中, 元素的访问是最繁琐 最常用的, 主要包括对元素属性 内容 值 CSS 的操作
访问元素 属性操作 在 jquery 中, 可以对元素的属性执行获取 设置 删除操作, 通过 attr() 方法可以对元素属性执行获取与设置操作, 通过 removeattr() 则可以执行删除元素属性操作 我们可以通过 attr() 方法获取元素的属性, 其语法结构如下所示 : attr(name)
访问元素 属性操作 案例 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>
访问元素 属性操作 设置元素的属性 在页面中,attr() 方法不仅可以用来获取元素的属性值, 还可以设置元素的属性, 其设置元素属性的语法格式如下所示 : attr(key,value) attr({key0:value0,key1:value1})
访问元素 属性操作 设置元素的属性 另外,attr() 方法还可以绑定一个 function() 函数, 通过该函数返回的值作为元素的属性值 语法格式如下所示 : attr(key,function(index)) 其中, 参数 index 为当前元素的索引号, 整个函数返回一个字符串作为元素的属性值
访问元素 属性操作 案例 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";
访问元素 属性操作 删除元素的属性 jquery 中通过 attr() 方法设置元素的属性后, 使用 removeattr() 方法可以将元素的属性删除, 其语法结构如下所示 : removeattr(name)
访问元素 元素内容操作 在 jquery 中, 操作元素内容的方法包含 html() 和 text(), 前者与 JavaScript 中的 innerhtml 属性相似, 即获取和设置元素的 HTML 内容 ; 而后者类似于 JavaScript 中的 innertext 属性, 即获取或设置元素的文本内容 二者的格式和功能的区别如下所示 : html() 方法仅支持 XHTML 的文档, 不能用于 XML 文档, 而 text() 则既支持 HTML 文档, 也支持 XML 文档
访问元素 元素内容操作 案例 3 <body> 应用 text() 方法设置的内容 <div id="div1"> <span id="clock1"> 当前时间 : 2013-08-30 星期五 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"> 当前时间 :2013-08-30 星期五 13:20:10</span> </div> </body>
访问元素 元素值操作 jquery 提供了 3 种对元素值操作的方法 方法说明示例 val() 用于获取第一个匹配元素的当前值, 返回值可能是一个字符串, 也可能是一个数组 例如当 select 元素有两个选中值时, 返回结果就是一个数组 $("#username").val(); username 的元素的值 // 获取 id 为 val(val) 用于设置所有匹配元素的值 $("input:text").val(" 新值 ") 文本框设置值 // 为全部 val(arrval ) 用于为 checkbox select 和 radio 等元素设置值, 参数为字符串数组 $("select").val([' 列表项 1',' 列表项 2']); // 为下拉列表框设置多选值
访问元素 元素值操作 案例 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>
访问元素 元素样式操作 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
访问元素 元素样式操作 案例 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-3.2.1.js" type="text/javascript"></script> <script> $(function(){ $("p").click(function(){ $(this).addclass("cls1 cls2"); }); }); </script> <body> <p>write Less Do More</p> </body>
访问元素 元素样式操作 案例 6 <style>.clsimg{border: 1px solid #666;padding: 3px;} </style> <script src="jquery/jquery-3.2.1.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>
访问元素 元素样式操作 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" // 设置字体颜色 });
访问元素 元素样式操作 案例 7 <style> p{padding: 5px;width: 220px;} </style> <script src="jquery/jquery-3.2.1.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>
节点操作 创建节点元素 整个页面是一个 DOM 模型, 页面中各元素通过模型的节点相互关联形成树状 因此, 如果要在页面中增加某个元素, 只需要找到元素的上级节点, 通过函数 $(html) 完成元素创建后, 增加到该节点中 函数 $() 用户动态创建页面元素, 其语法格式如下 : $(html) 其中, 参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串, 即如果要在页面中动态创建一个 div 标记, 并设置其内容和属性, 可以加入如下代码 : var $div=$( <div title='jquery 理念 '> write less do more<div> ); $( body ).append($div);
节点操作 创建节点元素 另外一种方法就是先创建新元素, 二是将新元素插入到文档中 例如 : var $p=$( <p></p> ); $p.html( <span style='color:#ff0000'> 要添加的内容 </span> ); $( body ).append($div);
节点操作 插入节点 插入结点 在 jquery 中, 有很多的方法可以实现该功能, 我们前面例子中用到的 append() 方法仅仅是其中的一种, 按照插入元素的顺序类划分, 可以将插入节点分为内部和外部两种插入方法 内部插入节点 在元素内部插入节点就是向元素中添加子元素和内容
节点操作 元素样式操作 案例 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>
节点操作 元素样式操作 案例 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>
节点操作 插入节点 插入结点 外部插入节点
节点操作 元素样式操作 案例 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>
节点操作 复制节点 复制节点 在页面中, 有时候需要将某个元素节点复制到另外一个节点后, 在 jquery 中可以通过 clone() 方法来实现节点的复制, 其语法结构如下所示 : clone();
节点操作 复制节点 案例 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>
节点操作 替换节点 替换节点 在 jquery 中, 如果要替换元素中的节点, 可以使用 replacewith() 和 replaceall() 这两种方法, 其语法结构如下所示 : replacewith(content) replaceall(selector)
节点操作 替换节点 案例 12 <script> $(function(){ $("#span1").replacewith("<span> 套郭荣 </span>"); $("<span>gfhactcm@126.com</span>").replaceall("#span2"); }); </script> </head> <body> <p> 姓名 :<span id="span1"></span></p> <p> 邮箱 :<span id="span2"></span></p> </body>
节点操作 包裹节点 包裹结点 在 jquery 中, 不仅可以通过方法替换元素节点, 还可以根据需求包裹某个指定的节点, 对节点的包裹也是 DOM 对象操作中很重要的一项, 其与包裹节点相关的全部方法如下表所示 :
节点操作 包裹节点 案例 13 <script> $(function(){ $("#span1").replacewith("<span> 套郭荣 </span>"); $("<span>gfhactcm@126.com</span>").replaceall("#span2"); }); </script> </head> <body> <p> 姓名 :<span id="span1"></span></p> <p> 邮箱 :<span id="span2"></span></p> </body>
节点操作 遍历节点 遍历节点 在 DOM 元素操作中, 有时需要对统一标记的全部元素进行统一操作 在 JavaScript 中, 需要先获取元素的总长度, 然后用 for 循环语句, 循环处理 而在 jquery 中可以直接使用 each() 方法轻松实现元素的遍历, 其语法结构如下所示 : each(callback)
节点操作 遍历节点 案例 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>
节点操作 删除节点 删除节点 在 DOM 操作页面时, 删除多余或指定的页面元素时非常必要的, jquery 提供了两种可以删除元素的方法, 即 remove() 和 empty(), 严格的说 empty() 方法并非真正意义上的删除, 使用该方法, 仅仅可以清空全部的节点或节点所包含的所有后代元素, 并非删除节点与元素 remove() 方法的语法结构如下所示 : remove([expr]) empty() 方法语法结构如下所示 : empty()
节点操作 删除节点 案例 15 <script> $(function(){ $("button").click(function(){ $("p").remove(); }); }); </script> </head> <body> <p> 这是一个段落 </p> <p> 这是另一个段落 </p> <button> 删除所有 p 元素 </button> </body>