系列DOM操作理论.ppt

1DOM操作JQuery系列回顾20102:input可以匹配哪些元素？css(“样式名”,”样式值”)attr(“style”,”样式值”)addClass(“css类”)/removeClass(“css类”);attr(“class”,”css类”)所有input,textarea,select和button元素修改元素样式有几种方法？3本章任务使用jQuery操作DOM进一步了解jQuery事件使用jQuery操作DOM本章目标401020304添加新元素删除元素替换元素复制元素DOM操作5创建新元素例：$(“div/div”)或者$(“div/”)$(“divp新元素/p/div”)注意：HTML代码中标签必须完整HTML代码中标签不要使用大写字母语法：$(“HTML代码”)DOM操作6追加元素添加儿子添加兄弟自己.append(小儿子)或者小儿子.appendTo(自己)自己.prepend(大儿子)或者大儿子.prependTo(自己)自己.after(弟弟)或者弟弟.insertAfter(自己)自己.before(哥哥)或者哥哥.insertBefore(自己)如果添加的元素为已有元素，则变为元素移动。删除元素DOM操作7empty()删除匹配的元素集合中所有的子节点。remove([expr])从DOM中删除所有匹配的元素。 detach([expr])从DOM中删除所有匹配的元素。remove/detach所有绑定的事件、附加的数据等不会/都会保留下来。DOM操作8replaceWith(content)用匹配的元素替换掉所有selector匹配到的元素。 替换元素将所有匹配的元素替换成指定的HTML或DOM元素。replaceAll(selector)复制元素DOM操作9clone()01克隆匹配的DOM元素并且选中这些克隆的副本。clone(true)02克隆匹配的DOM元素以及其所有的事件处理并且选中这些克隆的副本。 03事件10事件处理bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。 参数类型说明typeString含有一个或多个事件类型的字符串，比如click或submitdata(可选)Object作为event.data属性值传递给事件对象的额外数据对象fnFunction绑定到每个匹配元素的事件上面的处理函数事件11事件对象fn这个参数的回调函数还可以接受一个参数。当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。 属性/方法说明pageX/pageY鼠标点击时相对于页面的坐标keyCode对于keyup和keydown事件返回被按下的键.不区分大小写,a和A都返回65.

对于keypress事件请使用which属性,因为which属性跨浏览时依然可靠.which对于键盘事件,返回触发事件的键的数字编码.对于鼠标事件,返回鼠标按键号(1左,2中,3右).事件12事件处理one(type,[data],fn)为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。unbind([type],[fn])bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。