Web应用开发 矫桂娥 13816715819 办公室：222#

Chap4 习题结果 (1)修改样式表，一开始先隐藏页面内容，当 页面加载后，慢慢地淡入内容。 $('body').css('display','none'); $('body').fadeIn(3000);

Chap4 习题结果 此种方法做了扩展，鼠标悬停时，相应段落应 用黄色背景色，当鼠标移开后变成白色： $('p').mouseover(function(){ $(this).css('backgroundColor', 'yellow') .mouseout(function(){ $(this).css('backgroundColor', 'white') }); });

Chap4 习题结果 (3) $('h2').on('click', function(){ $(this) .fadeTo('slow', 0.25) .animate({ paddingLeft: '+=200px' },{ duration: 'slow', queue:false }) .queue(function(next) { $('div.speech').fadeTo('slow', 0.5) }) })

内容列表 1.DOM操作分类 2.操作属性 3.DOM树操作

1.DOM操作分类 ＤＯＭ是一种与浏览器、平台、语言无关 的接口，使用可以轻松的访问页面中所有 的标准组件。 并不都属于Javascript，任何一种支持DOM 的程序设计语言都可以使用。 分类：DOM Core、HTML-DOM和CSS- DOM

举例： document.getElementsByTagName(“form” ); DOM Core： getElementById() getElementsByTagName() getAttribute() setAttribute() 举例： document.getElementsByTagName(“form” );

HTML-DOM CSS-DOM 获取表单对象的方法：Document.forms 获取某元素的src属性的方法：element.src; Element.style.color=“red”;//javaScript语句 .css()//jQuery语句

DOM树

2.操作属性 查找元素节点：jQuery选择符 var $li=$(“ul li:first”); var li_txt=$li.text(); 操作类属性： addClass() removeClass()

$('div.chapter a').attr({rel: 'external'}); var $p=$(“p”); 操作非类属性 .attr() .removeAttr() 比如： $('div.chapter a').attr({rel: 'external'}); var $p=$(“p”); var p_txt=$p.attr(“class”);

值回调 例句2： title: function() { return 'Learn more about ' + $(this).text() + ' at Wikipedia.'; },

DOM属性与HTML属性 HTML属性：html标记中放在引号中的值 DOM属性：通过Javascript能够存取的值 .console.log()方法可以测试、调试变量的 值，在调试平台中可以进行。

3.DOM树操作 创建元素： $()函数，用来改变页面中的内 容，主要把html元素作为函数参数 既可以改变DOM结构。 实例： Var $topA= $(“<a href=‘#top’>return top</a>”);

创建元素 拆分： Var $topA1= $(“<a ></a>”); Var $topA= $(“<a href=‘#top’>return top</a>”); 拆分： Var $topA1= $(“<a ></a>”); Var $topA2= $(“<a>return top</a>”); Var $topA3= $(“<a href=‘#top’>return top</a>”);

插入元素 方法 功能 示例 append() appendTo() prepend() prependTo() after() 示例　 append() 向元素内部添加内容 $(“p”).append(“<b>Hello</b>”); 结果：<p><b>Hello</b></p> appendTo() 将内容追加到指定的内容 $(“<b>Hello</b>”).appendTo(“p”); 结果：<p><b>Hello</b></p> prepend() 在指定元素内容前增加内容 有<p>World</p> $(“p”).prepend(“<b>Hello </b>”); 结果：<p><b>Hello </b>World</p> prependTo() 将内容增加到指定元素内容前 $(“<b>Hello </b>”).prependTo(“p”); 结果：<p><b>Hello </b>World</p> after() 在匹配的元素后加入内容 $(“p”).after(“<b>Hello</b>”); 结果：<p></p><b>Hello</b> insertAfter() 将内容加入到匹配元素后 $(“<b>Hello</b>”).insertAfter(“p”); before() 在匹配的元素之前加入内容 $(“p”).before(“<b>Hello</b>”); 结果：<b>Hello</b><p></p> insertBefore() 将内容加入到匹配的元素之前 $(“<b>Hello</b>”).insertBefore(“p”);

DOM树操作之删除元素 方法 功能 示例 remove() 删除指定元素 $(“p”).remove()删除p元素 empty() 清空指定元素 $(“p”).empty()清空p元素

DOM树操作之包装元素 wrap() $(“strong”).wrap(“<b></b>”); 结果：<b><strong></strong></b> wrapAll() 将所有匹配的元素包裹 如：<p>1</p><p>2</p> $(“p”).wrapAll(“<b></b>”); 则结果为：<b> <p>1</p><p>2</p></b>

DOM树操作之包装元素 wrapInner() 将指定元素内容包裹 <p>1234</p> 则：$(“p”).wrapInner(“<b></b>”); 结果为：<p><b>1234</b></p>;

DOM树操作之复制元素 clone()方法 clone(true)方法 $(“p”).clone().appendTo(“body”); 实现复制节点，但该方法所生成的节点不会触发 相应的事件。 clone(true)方法 实现复制节点及其事件。

DOM树操作之内容替换 replaceWith() replaceAll() $(“p”).replaceWith(“<b>hello world!</b>”); 将页面中的所有p元素替换为<b>hello world!</b>，注意是每一个匹配的p都会被替换。 replaceAll() $(“<b>Hello World!</b>”).replaceAll(“p”) 将页面中的所有p元素用<b>Hello World!</b>替换，每一个匹配项都会被替换。

html()方法，标记 text()方法，文本 var tit=$(“p”).html(); //获得p元素的内容 $(“p”).html(“<b>Hello World!</b>”);//设置p的内容 text()方法，文本 如果<p><b>Hello World</b></p> alert($(“p”).text()); //得到Hello World! $(“p”).text(“hello world!”); 则p变成 <p>hello world!</p>

val()方法，须有属性 实例1: 用于获取和设置元素的值。包括：文本框 、下拉列 表、还是单选框。 $(function(){ $(“#username”).focus(function(){ var txt=$(this).val(); if(txt==“请输入用户名”) $(this).val(“”); })

实例2： <select id=“sin”> <option>A1</option> $(“#sin”).val(“A3”); //设置A3倍选中 $(“#sin”).val([“A3”,”A4”]); //设置A3和A4被选中

实例操作1 $("#single ").val(" 选择2号 "); $(":checkbox").val(["check2","chec k3"]); $(":radio").val(["radio2"]); $("#single ").val(" 选择2号 "); $("#multiple").val (["选择2号", "选 择3号"]);

实例操作2 超链接和图片的提示效果 操作步骤： 鼠标划入时，创建一个div元素，然后在当前页面中插入这个div元素，最后进行css样式的设置 待解决问题： 原有的title属性怎么处理？ 鼠标移动的效果处理？

课后练习 学号最后一位是X的同学完成，课程中心提 交，注意提交作业的时间节点和排名！

第一阶段总结 jQuery选择元素 事件的处理 动画的制作 DOM操作的基本方法 课后习题 课上的案例

Thanks