jQ的事件和DOM操作 笔记分享

jQ的事件和DOM操作

1.jQ中的事件

1.1JS的基本事件

事件：理解为一种触发器 何时触发

常见的事件：点击事件、双击事件、鼠标悬浮事件、鼠标移除事件、获取焦点事件、失去焦点事件……

JS：DOM对象.onclick = xxx

jQ：jQ对象.click(function(){})

鼠标事件

• 点击事件 click
• 双击事件 dbclick
• 鼠标移过事件 mouseover 当鼠标经过被选元素或其子元素时 都会触发
• 鼠标移出事件 mouseout
• 鼠标进入事件 mouseenter 当鼠标经过被选元素时 才会触发
• 鼠标离开事件 mouseleave

键盘事件

• 键盘按下事件 keydown
• 键盘释放事件 keyup
• 键盘产生可打印字符时触发 keypress

window事件

• 窗口事件 resize

表单事件（表单验证学习）

绑定和解绑事件

• bind() 可以同时绑定多个事件
• unbind() 解绑指定事件 如果在参数中不指定事件 则解除所有事件

1.2jQ的复合事件

• hover() 相当于mouseover和mouseout的结合体

• toggle(fn1,fn2) 模拟连续点击事件 如果不写参数 表示show() hide() 集合功能

• toggleClass(类样式) 自动切换类样式 如果当前节点没有此样式则追加 有此样式则移除

2.jQ操作CSS样式

• css() 设置单个或多个普通样式
• addClass() 添加类样式
• removeClass() 移除类样式
• hasClass() 判断是否拥有某种类样式

addClass()和removeClass()如果操作相同的样式 则等价于toggleClass()

3.jQ操作DOM

• 节点内容操作

  • html() HTML内容设置或获取 例如：$(‘div’).html(‘xxx’) 解析HTML 等价于innerHTML

    如果是获取内容 获取的是第一个匹配的节点内容

  • text() 文本内容设置或获取 例如：$(‘div’).text(‘xxx’) 普通文本展示 等价于innerText

    如果是获取内容 获取的是所有匹配的节点内容

• 表单

  • val() 等价于value属性

创建节点：

• JS：document.createElement() 创建元素节点 想添加属性 → .setAttribute()

• jQ：$(‘HTML代码段’) 就可以直接将代码段转换为节点对象

  $('<li><a href=""></a></li>')

插入节点：

• 子节点的插入

  • append() 向父节点内添加子节点 向后追加
  • prepend() 向父节点内添加子节点 向前追加

• 兄弟节点的插入

  • after() 给节点后添加兄弟节点 加个弟弟
  • before() 给节点前添加兄弟节点 加个哥哥

删除节点：

• remove() 删除节点
• empty() 清空节点内容 等价于html(’ ')

替换节点：

• replaceWith() 以xx节点替换掉自己

复制节点：

• JS：cloneNode(deep) 复制节点 如果为true表示同时复制子节点

• jQ：clone(boolean) 复制节点 是否复制事件

节点属性设置和获取：

• attr() 获取属性
• removeAttr() 删除属性

节点遍历：

• 节点查询
  • children(选择器) 获取所有的直接子元素节点
  • next() 获取下一个兄弟节点
  • prev() 获取上一个兄弟节点
  • siblings() 获取所有的兄弟节点
  • parent() 获取直接父元素
  • parents() 获取所有的父元素
  • find(选择器) 查找某个后代元素

注：笔记思路来自查老师！！