网页元素操作与布局技巧-优快云博客

一、访问元素

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

1、元素属性操作

在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。

1.1、获取元素的属性

获取元素属性的语法格式如下：

attr(name)

其中，参数name表示属性的名称。

示例通过attr(name)方法获取元素的属性

#======================================================================== # FileName: demo6.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.youkuaiyun.com/Iamduoluo # LastChange: 2012-04-09 14:12:43 #======================================================================== <!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>获取元素的属性</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> body{ font-size:12px;} div{ float:left; padding-left:10px;} img{ border:solid 1px #ccc; padding:3px; float:left;} </style> <script type="text/javascript" charset="utf-8"> $(function() { var strAlt = $("img").attr("src"); strAlt += "<br/><br/>" + $("img").attr("title"); $("#divAlt").html(strAlt); }) </script> </head> <body> <img src="logo.jpg" alt="这是我的头像" title="这是我的头像"> <div id="divAlt" class=""> </div> </body> </html>

1.2、设置元素的属性

在页面中，attr()方法不仅可以获取元素的属性值，还可以设置元素的属性，其设置属性语法格式如下所示：

attr(key, value)其中，参数key表示属性的名称，value表示属性的值。如果要设置多个属性，也可以通过attr()方法实现，其语法格式如下所示：

attr({key0:value0, key1:value1})另外，attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，其语法格式如下所示：

attr(key, function(index))其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

1.3、删除元素的属性

jQuery中通过attr()方法设置元素的属性后，使用removeAttr()方法可以将元素的属性删除，其使用的语法格式为：

removeAttr(name)其中，参数name为元素属性的名称。

例如，可以通过如下的代码删除标记<img>中的src属性：

$("img").removeAttr("src");

2、元素内容操作

在jQuery中，操作元素内容的方法包括html()和text()。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerHTML属性，即获取或设置元素的文本内容。二者的格式与区别如下表所示。

html()和text()方法的区别
语法格式参数说明功能描述
html() 无参数用于获取元素的HTML内容
html(val) val参数为元素的HTML内容用于设置元素的HTML内容
text() 无参数用于获取元素的文本内容
text(val) val参数为元素的文本内容用户设置元素的文本内容

说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则既支持HTML文档，也支持XML文档。

示例设置或获取元素的内容

#======================================================================== # FileName: demo7.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.youkuaiyun.com/Iamduoluo # LastChange: 2012-04-10 12:47:45 #======================================================================== <!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>设置或获取元素的内容</title> <style type="text/css"> body { font-size:15px; text-align:center;} div {border:solid 1px #666; padding:5px; width:220px; margin:5px;} </style> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { var strHTML = $("#divShow").html(); //获取HTML内容 var strText = $("#divShow").text(); //获取文本内容 $("#divHTML").html(strHTML); //设置HTML内容 $("#divText").text(strText); //设置文本内容 }) </script> </head> <body> <div id="divShow" class=""> <b><i>Write Less Do More</i></b> </div> <div id="divHTML" class=""> </div> <div id="divText" class=""> </div> </body> </html>

3、获取或设置元素值

在jQuery中，如果要获取元素的值，是通过val()方法实现的，其语法格式如下所示：

val(val)其中，如果不带参数val，则是获取某元素的值；反之，则是将参数val的值赋给某元素，即设置元素的值。该方法常用于获取或设置对象的值。

另外，通过val()方法还可以获取select标记中的多个选项值，其语法格式如下所示：

val().join(",")
示例设置或获取元素的值

#======================================================================== # FileName: demo8.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.youkuaiyun.com/Iamduoluo # LastChange: 2012-04-10 13:08:01 #======================================================================== <!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>设置或获取元素的值</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("select").change(function(){ var strSel = $("select").val().join(","); $("#p1").html(strSel); }) $("input").change(function() { var strTxt = $("input").val(); $("#p2").text(strTxt); }) $("input").focus(function() { $("input").val(""); }) }) </script> <style type="text/css"> body {font-size:12px; text-align:center;} div { padding:3px; margin:3px; width:120px; float:left;} #s1 { height:96px; width:85px;} .txt{ border:#666 1px solid; padding:3px;} </style> </head> <body> <div id="" class=""> <select multiple="multiple" id="s1"> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> <option value="5">Item 5</option> <option value="6">Item 6</option> </select> <p id="p1"></p> </div> <div id="" class=""> <input type="text" id="" class="txt" name="" value=""> <p id="p2"></p> </div> </body> </html> 页面效果如下：

注意：在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array)，其作用是设置元素被选中。因此$(":radio").val(["radio2", "radio3"])此句代码的意思为：ID号为radio2和radio3的单选框被选中。

4、元素样式操作

在页面中，元素样式的操作包括：直接设置样式、增加CSS类别、类别切换、删除类别几部分。

4.1、直接设置元素样式值

在jQuery中，可以通过css()方法为某个指定的元素设置样式值，其语法格式如下所示：

css(name, value)其中，name为样式名称，value为样式的值。

4.2、增加CSS类别

通过addClass()方法增加元素类别的名称，其语法格式如下：

addClass(class)其中，参数class为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法格式为：

addClass(class0 class1 ...)

注意：使用addClass()方法仅是追加样式类别，即它还保存原有的类别。

4.3、类别切换

通过toggleClass()方法切换不同的元素类别，其语法格式如下：

toggleClass(class)其中，参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。

4.4、删除类别

与增加CSS类别的addClass()方法相对应，removeClass()方法则用于删除类别，其语法格式如下：

removeClass(class)其中，参数class为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。

如果要删除p标记是cls0的类别，可以使用如下的代码：

$("p").removeClass("cls0");注意：toggleClass()方法可以实现类别间的切换，而css()或addClass()方法仅是增加新的元素样式，并不能实现类别的切换功能。

二、创建节点元素

我们知道，整个页面是一个DOM模型，页面中的各元素通过模型的节点相互关联形成树状，因此，如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。

函数$()用于动态创建页面元素，其语法格式如下：

$(html)其中，参数html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码：

var $div = $("<div title='jQuery理念'>Write Less Do More</div>"); $("body").append($div);执行上述代码后，将在页面文档body中创建一个div标记，其内容为“Write Less Do More”，属性title的值为“jQuery 理念”。

三、插入节点

在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery中，有多种方法可以实现该功能，append()方法仅是其中之一，按照插入元素的顺序来分，可以分为内部和外部两种插入方法。下面将分别对这些方法进行详细介绍。

3.1、内部插入节点方法

内部插入节点的方法如下表所示：

内部插入节点
语法格式	参数说明	功能描述
append(content)	content表示追加到目标中的内容	向所选择的元素内部插入内容
append(function(index, html))	通过function函数返回追加到目标中的内容	想所选择的元素内部插入function函数所返回的内容
appendTo(content)	content表示被追加的内容	把所选择的元素追加到另一个指定的元素集合中
prepend(content)	content表示插入目标元素内部前面的内容	向每个所选择的元素内部前置内容
prepend(function(index, html))	通过function函数返回插入目标元素内部前面的内容	向所选择的元素内部前置function函数所返回的内容
prependTo(content)	content表示用于选择元素的jQuery表达式	将所选择的元素前置到另一个指定的元素集合中

3.2、外部插入节点方法

外部插入节点
语法格式	参数说明	功能描述
after(content)	content表示插入目标元素外部后面的内容	向所选择的元素外部后面插入内容
after(function)	通过function函数返回插入目标外部后面的内容	向所选择的元素外部后面插入function函数所返回的内容
before(content)	content表示插入目标元素外部前面的内容	向所选择的元素外部前面插入内容
before(function)	通过function函数返回插入目标外部前面的内容	向所选择的元素外部前面插入function函数所返回的内容
insertAfter(content)	content表示插入目标元素外部后面的内容	将所选择的元素插入另一个指定的元素外部后面
insertBefore(content)	content表示插入目标元素外部前面的内容	将所选择的元素插入另一个指定的元素外部前面

四、复制节点

在页面中，有时需要将某个元素节点复制到另外一个节点后，如购物网站中购物车的设计。在传统的javaScript中，需要编写较为复杂的代码，而在jQuery中，可以通过方法clone()轻松实现，该方法的语法格式为：

clone()其功能为复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现，其格式为：

clone(true);其中的参数设置为true就可以复制元素的所有事件处理。

示例复制元素节点

#======================================================================== # FileName: demo9.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.youkuaiyun.com/Iamduoluo # LastChange: 2012-04-10 13:56:12 #======================================================================== <!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>复制元素节点</title> <style type="text/css"> img { border:solid 1px #ccc; padding:3px; margin:5px; width:200px; height:200px;} </style> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img").click(function() { $(this).clone(true).appendTo("span"); }) }) </script> </head> <body> <span id="" class=""> <img src="logo.jpg" alt="封面" name="封面" /> </span> </body> </html> 页面效果如下所示：

注意：由于本示例中使用的是clone(true)方法，因此，当单击被复制的新图片时，由于它具有原图片的事务处理，因此，将在该图片的右侧出现一副通过其复制的新图片；如果使用clone()方法，那么只有单击原图片才可以复制新的图片元素，新复制的图片元素不具有任何功能。

五、替换节点

在jQuery中，如果要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法，其语法格式分别如下：

replaceWith(content)该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。

replaceAll(selector)该方法的功能是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。

示例替换元素节点

#======================================================================== # FileName: demo10.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.youkuaiyun.com/Iamduoluo # LastChange: 2012-04-10 14:27:24 #======================================================================== <!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>替换元素节点</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("#Span1").replaceWith("<span title='replaceWith'>低调走过</span>"); $("<span title='replaceAll'>361789273@qq.com</span>").replaceAll("#Span2"); }) </script> <style type="text/css"> body { font-size:13px;} span { font-weight:bold;} p { background-color:#eee; padding:5px; width:200px;} </style> </head> <body> <p>姓名：<span id="Span1" class=""></span></p> <p>邮箱：<span id="Span2" class=""></span></p> </body> </html> 页面效果如下所示：

注意：replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。

六、包裹节点

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

包裹节点
语法格式	参数说明	功能描述
wrap(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用其他字符串代码包裹起来
wrap(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用其他DOM元素包装起来
warp(fn)	fn参数为包裹结构的一个函数	把所有选择的元素用function函数返回的代码包裹起来
unwrap()	无参数	移除所选元素的父元素或包裹标记
warpAll(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用单个元素包裹起来
warpAll(elem)	elem参数用于宝藏所选元素的DOM元素	把所有选择的元素用单个DOM元素包裹起来
warpInner(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素的自内容（包括文本节点）用字符串代码包裹起来
warpInner(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来
warpInner(fn)	fn参数为包裹结构的一个函数	把所有选择的元素的自内容（包括文本节点）用function函数返回的代码包裹起来

在上述表格中，warp(html)与wrapInner(html)方法较为常用，前者包裹外部元素，后者包裹元素内部的文本字符。

七、遍历元素

在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript中，先获取元素的总长度，然后，以for循环语句，递减总长度，访问其中的某个元素，代码相对复杂；而在jQuery中，可以直接使用each()方法实现元素的遍历。其语法格式如下：

each(callback)其中，参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号（从0开始）；如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。

八、删除元素

在DOM操作页面时，删除多余或指定的页面元素是非常必要的，jQuery提供了两种可以删除元素的方法，即remove()和empty()。严格来说，empty()方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。

remove()方法的语法格式如下：

remove([expr])其中，参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表述式获取指定的元素，并进行删除。

empty()方法的语法格式如下：

empty()其功能为清空所选择的页面元素或所有的后代元素。

九、综合案例分析——数据删除和图片预览在项目中的应用

该案例的需求如下：

在页面中创建一个表格，用于展示多项数据信息，各行间采用隔行变色的方法展示每一行的数据。
如果选中表格中某行的复选框，并单击表格下面的“删除”按钮，那么将删除其选中的行；选中“全选”复选框后，再次单击“删除”按钮时，将删除表格的全部行数据。
如果将鼠标一道表格中某行的小图片上，将在该图片的右下角出现一幅与之对应的大图片，用以实现图片预览的效果。

界面效果如下所示：

功能实现代码如下：

#======================================================================== # FileName: demo11.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.youkuaiyun.com/Iamduoluo # LastChange: 2012-04-10 15:31:17 #======================================================================== <!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>数据管理</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色 /*全选复选框单击事件*/ $("#chkAll").click(function() { if(this.checked) { //如果自己被选中 $("table tr td input[type=checkbox]").attr("checked", true); } else { $("table tr td input[type=checkbox]").attr("checked", false); } }) /*删除按钮单击事件*/ $("#btnDel").click(function() { var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项 if(intL!=0) { $("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) { //遍历除全选复选框外的行 if(this.checked) { //如果选中 $("table tr[id=" + this.value + "]").remove(); } }) } }) /*小图片鼠标移动事件*/ var x = 5; var y = 15; $("table tr td img").mousemove(function(e) { $("#imgTip") .attr("src", this.src) .css({"top":(e.pageY+y) + "px", "left":(e.pageX+x) + "px"}) .show(300); }) /*小图片鼠标移出事件*/ $("table tr td img").mouseout(function() { $("#imgTip").hide(); }) }) </script> <style type="text/css"> body { font-size:12px;} table { width:360px; border-collapse:collapse;} table tr th, td { border:solid 1px #666; text-align:center;} table tr td img { border:solid 1px #ccc; padding:3px; width:42px; height:60px; cursor:hand;} table tr td span { float:left; padding-left:12px;} table tr th { background-color:#eee; height:32px;} .clsImg { position:absolute; border:solid 1px #ccc; padding:3px; width:85px; height:120px; background-color:#eee; display:none;} .btn { border:#666 1px solid; padding:2px; width:50px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorStr=#ffffff,EndColorStr=#ECE9D8);} </style> </head> <body> <table border="0"> <tr> <th>选项</th> <th>编号</th> <th>封面</th> <th>购书人</th> <th>性别</th> <th>购书价</th> </tr> <tr id="0"> <td><input type="checkbox" id="Checkbox1" class="" name="" value="0"></td> <td>1001</td> <td><img src="logo.jpg" alt=""></td> <td>低调走过</td> <td>男</td> <td>35.60元</td> </tr> <tr id="1"> <td><input type="checkbox" id="Checkbox2" class="" name="" value="1"></td> <td>1002</td> <td><img src="logo1.jpg" alt=""></td> <td>gossipt</td> <td>女</td> <td>37.8元</td> </tr> <tr id="2"> <td><input type="checkbox" id="Checkbox3" class="" name="" value="2"></td> <td>1003</td> <td><img src="logo2.jpg" alt=""></td> <td>lowkey</td> <td>男</td> <td>45.60元</td> </tr> </table> <table border="0"> <tr> <td style="text-align:left; height:28px;"> <span id="" class=""> <input type="checkbox" id="chkAll" class="" name="" value=""> 全选 </span> <span id="" class=""> <input type="button" id="btnDel" class="btn" name="" value="删除"> </span> </td> </tr> </table> <img src="a2.jpg" alt="" id="imgTip" class="clsImg"> </body> </html>

jQuery 操作DOM