《系列DOM操作理论.ppt》由会员分享，可在线阅读，更多相关《系列DOM操作理论.ppt（15页珍藏版）》请在三一文库上搜索。
1、1,DOM操作,JQuery系列,2,回顾,:input可以匹配哪些元素？ 所有 input, textarea, select 和 button 元素 修改元素样式有几种方法？ css(“样式名”,”样式值”) attr(“style”,”样式值”) addClass(“css类”)/removeClass(“css类”); attr(“class”,” css类”),3,本章任务,使用jQuery操作DOM 进一步了解jQuery事件,4,使用jQuery操作DOM 添加新元素 删除元素 替换元素 复制元素,本章目标,5,DOM操作,创建新元素 例： $(“”) 或者 $(“”) $(“新
2、元素”) 注意： HTML代码中标签必须完整 HTML代码中标签不要使用大写字母,语法：$(“HTML代码”),6,DOM操作,追加元素 添加儿子 添加兄弟,自己.append(小儿子) 或者 小儿子.appendTo(自己) 自己.prepend(大儿子) 或者 大儿子.prependTo(自己),自己.after(弟弟) 或者 弟弟.insertAfter(自己) 自己.before(哥哥) 或者 哥哥.insertBefore(自己),如果添加的元素为已有元素，则变为元素移动。,7,DOM操作,删除元素 empty() 删除匹配的元素集合中所有的子节点。 remove(expr) 从DO
3、M中删除所有匹配的元素。 detach(expr) 从DOM中删除所有匹配的元素。,remove / detach所有绑定的事件、附加的数据等不会/都会保留下来。,8,DOM操作,替换元素 replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素。 replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。,9,DOM操作,复制元素 clone() 克隆匹配的DOM元素并且选中这些克隆的副本。 clone(true) 克隆匹配的DOM元素以及其所有的事件处理并且选中这些克隆的副本。,10,事件,事件处理 bind(type
4、, data, fn) 为每个匹配元素的特定事件绑定事件处理函数。,11,事件,事件对象 fn这个参数的回调函数还可以接受一个参数。当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。,12,事件,事件处理 one(type, data, fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 unbind(type, fn) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。 如果没有参数，则删除所有绑定的事件。,13,事件,事件委托 live(type, data, fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。 这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。,14,添加/移动元素有哪几种方法？ empty() 和 remove()的区别？ bind(), one() 和 live()的区别？,总结,15,作业,作业： 作业.txt,