Unit02： jQuery操作DOM 、 jQuery事件
【DOM操作】
1. 回顾原生DOM操作
获取节点
创建节点
遍历节点
替换节点
删除节点
插入节点
复制节点
2. jQuery中的DOM操作
2.1 基本操作
html() - 类似于原生DOM的innerHTML属性
获取 - html()
设置 - html(html代码)
val() - 类似于原生DOM的value属性
获取 - val()
设置 - val(value)
text() - 类似于原生DOM的textContent属性
获取 - text()
设置 - text(文本内容)
attr() - 获取或设置指定元素的属性
获取 - attr(attrName) - 类似于getAttribute()
设置 - attr(attrName,attrValue) - 类似于setAttribute()
removeAttr(attrName) - 类似于removeAttribute()
2.2 样式操作 - css
attr("class",classValue)
addClass() - 追加样式
removeClass() - 删除样式 传参删除指定的class类，不传参删除所有class类；
toggleClass() - 切换样式 传一个参，在 有 跟 没有 之间切换；
hasClass() - 判断样式 传一个参，判断指定的class类有没有；
css() - 操作样式
设置
css(name,value)
css(options)
options - 选项
{
name : value,
name : value,
...
}
获取 - css(name)
2.3 遍历节点
parent() - 获取指定节点的父节点
children() - 获取指定节点的所有子节点
next() - 获取指定节点的下一个兄弟节点
prev() - 获取指定节点的上一个兄弟节点
siblings() - 获取指定节点的所有兄弟节点
find(expr) - 在指定节点中查找指定内容
注意 - 查找指定节点的后代节点
2.4 创建节点
元素节点 - $(HTML代码)
文本节点 - text()
属性节点 - attr()
jQuery - $(HTML代码)
2.5 删除节点
remove() - 删除自身及后代节点
empty() - (清空)删除后代节点,但保留自身节点
2.6 插入节点
内部插入
append
prepend
appendTo
prependTo
外部插入
before
after
insertBefore
insertAfter
2.7 替换节点
repalceWith
replaceAll - 就是颠倒了的repalceWith
2.8 复制节点
jQuery - clone(boolean)
boolean参数 - 表示是否复制事件
DOM - cloneNode(boolean)
boolean参数 - 表示是否复制后代节点
【事件】
3.1 ready() - 类似于window.onload的作用
写法
$(document).ready(function(){});
$().ready(function(){});
$(function(){});
ready与onload的区别
ready
具有简写方式
在一个HTML页面中允许多个
等待HTML页面中所有DOM结构加载完毕后就可以执行
onload
没有简写方式
在一个HTML页面中只能一个
必须等待HTML页面中所有内容全部加载完毕后才能执行
3.2 事件绑定与解绑
bind(type,data,fn) - 绑定事件
type - 指定绑定的事件名称, 如果绑定多个事件时,使用空格隔开
data - 可选项,作为event.data属性值传递给事件对象的额外数据对象
fn - 绑定事件的处理函数
unbind() - 解绑事件
type - 指定解绑的事件名称
默认不传递任何内容 - 解绑所有事件
指定单个事件名称 - 解绑单个事件
指定多个事件名称 - 解绑多个事件
绑定与解绑允许指定哪些事件?
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
注意
所谓的click()事件是bind('click')的简写方式
3.3 事件对象(event)
事件对象被封装在事件对应的处理函数的参数
ele.onclick = function(event){
event
}
常用用法
pageX/clientX/offsetX/x - 当前x轴
pageY/clientY/offsetY/y - 当前y轴
target - 当前绑定事件的源对象(元素)
returnValue - 返回值,Boolean类型
return false - 阻止页面的默认行为
which/keyCode/charCode - 键盘对应值
事件冒泡
捕获
冒泡
3.4 模拟事件(了解)
trigger()
3.5 事件切换
hover(over,out)方法
over - onmouseover事件的处理函数
out - onmouseout事件的处理函数
回顾内容
原生DOM绑定事件三种
在HTML页面元素中指定事件名称
在javascript代码中
element.onclick = function(){}
element.addEventListener("click",function(){});
