* jQuery中的DOM操作
* 基本操作
* 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()
* 样式操作 - css
* attr("class",classValue) - 设置
* addClass() - 追加样式
* removeClass() - 删除样式
* 不传参 - 删除所有样式
* 传参 - 删除指定样式
* toggleClass() - 切换样式
* 只接受一个参数
* 是在没有样式与指定样式之间切换
* hasClass() - 判断样式
* 判断指定元素是否包含指定样式
* css() - 操作样式
* 设置
* css(name,value)
* css(options)
* options - 选项
{
name : value,
name : value,
...
}
* 获取 - css(name)
* 遍历节点
* parent() - 获取指定节点的父节点
* children() - 获取指定节点的所有子节点
* next() - 获取指定节点的下一个兄弟节点
* prev() - 获取指定节点的上一个兄弟节点
* siblings() - 获取指定节点的所有兄弟节点
* find(expr) - 在指定节点中查找指定内容
* 注意 - 查找指定节点的后代节点
* 创建节点
* 元素节点 - $(HTML代码)
* 文本节点 - text()
* 属性节点 - attr()
* jQuery - $(HTML代码)
* 删除节点
* remove() - 删除自身及后代节点
* empty() - (清空)删除后代节点,但保留自身节点
* 插入节点
* 内部插入
* append
* prepend
* appendTo
* prependTo
* 外部插入
* before
* after
* insertBefore
* insertAfter
* 替换节点
* repalceWith
* replaceAll - 就是颠倒了的repalceWith
* 复制节点
* jQuery - clone(boolean)
* boolean参数 - 表示是否复制事件
* DOM - cloneNode(boolean)
* boolean参数 - 表示是否复制后代节点
* 事件
* ready() - 类似于window.onload的作用
* 写法
* $(document).ready(function(){});
* $().ready(function(){});
* $(function(){});
* ready与onload的区别
* ready
* 具有简写方式
* 在一个HTML页面中允许多个
* 等待HTML页面中所有DOM结构加载完毕后就可以执行
* onload
* 没有简写方式
* 在一个HTML页面中只能一个
* 必须等待HTML页面中所有内容全部加载完毕后才能执行
* 事件绑定与解绑
* 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')的简写方式
* 事件对象(event)
* 事件对象被封装在事件对应的处理函数的参数
ele.onclick = function(event){
event
}
* 常用用法
* pageX/clientX/offsetX/x - 当前x轴
* pageY/clientY/offsetY/y - 当前y轴
* target - 当前绑定事件的源对象(元素)
* returnValue - 返回值,Boolean类型
* return false - 阻止页面的默认行为
* which/keyCode/charCode - 键盘对应值
* 事件冒泡
* 捕获
* 冒泡
* 模拟事件(了解)
* trigger()
* 事件切换
* hover(over,out)方法
* over - onmouseover事件的处理函数
* out - onmouseout事件的处理函数
* 回顾内容
* 原生DOM绑定事件三种
* 在HTML页面元素中指定事件名称
* 在javascript代码中
* element.onclick = function(){}
* element.addEventListener("click",function(){});