第8章 jQuery中的DOM操作-任务3 制作电子邮件删除效果

$p[2].html();
//获取第3个子元素的内容
遍历节点
➢ 遍历同辈元素
• jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
语法 next([expr]) prev([expr]) slibings([expr])
功能 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); 用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange");
CSS-DOM操作
➢ 除css()外，还有获取和设置元素高度、宽度等的样式操作方法
语法 css() height([value]) width([value]) offset([value]) offsetParent( ) position( ) scrollLeft([position]) scrollTop([position])
实现全选或全不选。 3. 为“删除邮件”按钮绑定onclick事件。 4. 查找所有checked属性值为true的复选框，删除其所在的行，即删除
了该邮件
• 掌握jQuery中删除节点的方法 • 掌握jQuery中遍历节点的方法
删除节点
➢ jQuery提供了三种删除节点的方法
方法 remove()
语法格式
html( )
参数说明
无参数
功能描述 用于获取第一个匹配元素的HTML内容或文本内容
html(content) content为元素的HTML内容 用于设置所有匹配元素的HTML内容或文本内容
text( )
无参数
用于获取所有匹配元素的文本内容
text (content) content为元素的文本内容 用于设置所有匹配元素的文本内容
if($(this).is(":checked"))
$(this).parent().parent().remove();
})
如果复选框是选中状态，则返
})
回该行对象将其删除
练一练
练习 实现删除行的功能。单击“删除”时，能删除相应行
遍历节点
➢ 遍历前辈元素
• parent()：获取元素的父级元素 • parents()：元素元素的祖先元素（包括父级元素，父级元素的父级元素……)
$("li:eq(1)").parent().addClass("orange"); 示例
$("li:eq(1)").parents().addClass("orange");
}
else {
未选中设置“checked”属性
$("input[name=Select]").prop("checked",true);
}
});
任务实现
关键代码
//删除选中邮件 $('div div a:eq(1)').click(function() {
对每个复选框执行函数
$("input[name=Select]").each(function(){
alert($(this).text()) }); //输出每个 <li> 元素的文本
2. var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this); });
//遍历数组
遍历节点
➢ end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前
说
jQuery中提供了find()、filter()等 each( ) ：规定为每个匹配元素规定运行的函数
选择器的位置
语法： $(selector).each(function(index,element))
当前的元素
示例
1.$("li").each(function(){
功能
设置或返回匹配元素的样式属性 设置或返回匹配元素的高度 设置或返回匹配元素的宽度 返回以像素为单位的top和left坐标。仅对可见元素有效 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被 设置为relative、absolute或fixed的元素 返回第一个匹配元素相对于父元素的位置 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 参数可选。设置或返回匹配元素相对滚动条顶
任务描述
在邮件列表前都有一个复选框，单击可以选中或取消选中。当单击“全选/ 全不选”按钮，所有复选框都随之选中或取消选中。单击“删除邮件”按 钮可删除被选中的邮件。
演示任务3：电子邮件删除效果
任务分析
实现思路
1. 为“全选/全不选”按钮绑定onclick事件。 2. 查找所有的复选框，把每个复选框的checked属性值变为true或false，
任务实现
关键代码
判断复选框是否是选中状态
$("div div a:eq(0)").click(function(){
if($("input[name=Select]").is(":checked")) {
选中删除“checked”属性
$("input[name=Select]").removeAttr("checked");
功能 删除指定的元素，后代节点也会删除。返回 值是一个指向已被删除的节点的引用
示例 $(“p”).remove()删除p元素
detach()
删除指定元素，但其绑定的事件、附加的数 $(“p”).detach() 据都会保留下来
empty() 清空指定元素
$(“p”).empty()清空p元素
复制节点
• 通过clone()方法实现复制节点
参数ture或flase, true复制 事件处理，flase时反之
语法： $(selector).clone([includeEvents])
示例
$("ul li").click(function(){ $(this).clone().appendTo("ul"); //复制当前单击的节点，并将它追加到<ul>中 })
$('ul.first').find('.foo').css('background-color', 'red') .end().find('.bar').css('background-color', 'green');
HTML代码操作
➢ html( )：可以对HTML代码进行操作，类似于JS中的innerHTML ➢ text( ): 可以获取或设置元素的文本内容,类似于JS中的innerText
的状态
示例
<ul class="first"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li>
</ul> <ul class="second">
<li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul>
替换节点
➢ 通过replaceWith()和replaceAll()方法替换节点
• replaceWith()方法将匹配的元素全部替换成指定的HTML或者DOM元素
• replaceAll()方法颠倒了replaceWith()操作
两者的关系类似于 append()和appendTo()
$("ul li:last").replaceWith("<li>乒乓球</li>"); 示例
$("<li>乒乓球</li>").replaceAll("ul li:last");
遍历节点
➢ 遍历子元素
• children()方法可以用来获取元素的所有子元素
语法： $(selector).children([expr])
var $p=$(“ul”).children(); 示例
alert($p.length);