Download presentation
Presentation is loading. Please wait.
1
Web应用开发 矫桂娥 办公室：222#
2
Chap4 习题结果 (1)修改样式表，一开始先隐藏页面内容，当 页面加载后，慢慢地淡入内容。 $('body').css('display','none'); $('body').fadeIn(3000);
3
Chap4 习题结果 此种方法做了扩展，鼠标悬停时，相应段落应 用黄色背景色，当鼠标移开后变成白色： $('p').mouseover(function(){ $(this).css('backgroundColor', 'yellow') .mouseout(function(){ $(this).css('backgroundColor', 'white') }); });
4
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) }) })
5
内容列表 1.DOM操作分类 2.操作属性 3.DOM树操作
6
1.DOM操作分类 ＤＯＭ是一种与浏览器、平台、语言无关 的接口，使用可以轻松的访问页面中所有 的标准组件。
并不都属于Javascript，任何一种支持DOM 的程序设计语言都可以使用。 分类：DOM Core、HTML-DOM和CSS- DOM
7
举例： document.getElementsByTagName(“form” );
DOM Core： getElementById() getElementsByTagName() getAttribute() setAttribute() 举例： document.getElementsByTagName(“form” );
8
HTML-DOM CSS-DOM 获取表单对象的方法：Document.forms 获取某元素的src属性的方法：element.src;
Element.style.color=“red”;//javaScript语句 .css()//jQuery语句
9
DOM树
10
2.操作属性 查找元素节点：jQuery选择符 var $li=$(“ul li:first”);
var li_txt=$li.text(); 操作类属性： addClass() removeClass()
11
$('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”);
12
值回调 例句2： title: function() {
return 'Learn more about ' + $(this).text() + ' at Wikipedia.'; },
13
DOM属性与HTML属性 HTML属性：html标记中放在引号中的值 DOM属性：通过Javascript能够存取的值
.console.log()方法可以测试、调试变量的 值，在调试平台中可以进行。
14
3.DOM树操作 创建元素： $()函数，用来改变页面中的内 容，主要把html元素作为函数参数 既可以改变DOM结构。 实例：
Var $topA= $(“<a href=‘#top’>return top</a>”);
15
创建元素 拆分： 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>”);
16
插入元素 方法 功能 示例 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”);
17
DOM树操作之删除元素 方法 功能 示例 remove() 删除指定元素 $(“p”).remove()删除p元素 empty()
清空指定元素 $(“p”).empty()清空p元素
18
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>
19
DOM树操作之包装元素 wrapInner() 将指定元素内容包裹 <p>1234</p>
则：$(“p”).wrapInner(“<b></b>”); 结果为：<p><b>1234</b></p>;
20
DOM树操作之复制元素 clone()方法 clone(true)方法 $(“p”).clone().appendTo(“body”);
实现复制节点，但该方法所生成的节点不会触发 相应的事件。 clone(true)方法 实现复制节点及其事件。
21
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>替换，每一个匹配项都会被替换。
22
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>
23
val()方法，须有属性 实例1: 用于获取和设置元素的值。包括：文本框 、下拉列 表、还是单选框。 $(function(){
$(“#username”).focus(function(){ var txt=$(this).val(); if(txt==“请输入用户名”) $(this).val(“”); })
24
实例2： <select id=“sin”> <option>A1</option>
$(“#sin”).val(“A3”); //设置A3倍选中 $(“#sin”).val([“A3”,”A4”]); //设置A3和A4被选中
25
实例操作1 $("#single ").val(" 选择2号 ");
$(":checkbox").val(["check2","chec k3"]); $(":radio").val(["radio2"]); $("#single ").val(" 选择2号 "); $("#multiple").val (["选择2号", "选 择3号"]);
26
实例操作2 超链接和图片的提示效果 操作步骤： 鼠标划入时，创建一个div元素，然后在当前页面中插入这个div元素，最后进行css样式的设置
待解决问题： 原有的title属性怎么处理？ 鼠标移动的效果处理？
27
课后练习 学号最后一位是X的同学完成，课程中心提 交，注意提交作业的时间节点和排名！
28
第一阶段总结 jQuery选择元素 事件的处理 动画的制作 DOM操作的基本方法 课后习题 课上的案例
29
Thanks
Similar presentations
