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(选择器) 查找某个后代元素

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

jQ的事件和DOM操作笔记分享相关推荐

webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
js-day06-jQuery事件和DOM操作-练习题
jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. <button οnclick="alert(1);">点我< ...
jQuery2_事件绑定+DOM操作
回忆: 对象的获取: 1:$("选择器")-当前页,根据选择器能获取多少就获取多少 2:当前对象.过滤函数或者查找函数--找和当前对象有关的对象--第一个兄弟孩子父亲等等- ...
原生JS实现的DOM操作笔记（草稿整理）
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
Python文件的基本操作和目录操作笔记分享
# 文件的基本使用 # 上下文管理器的基本使用 # 文件的编码问题与常用文件与常用目录 # 内存临时文件的了解# 一.如何创建打开一个文件? file = open('status.txt','r') ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery基础：选择器、动画、DOM操作和事件等
本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 文章目录 *1.选择器 1.1 DOM和jQuery比较 1.2 隔行变色 1.3 层 ...
JQuery-学习笔记03【基础——DOM操作】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
js hover 触发事件_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...

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

jQ的事件和DOM操作

1.jQ中的事件

1.1JS的基本事件

1.2jQ的复合事件

2.jQ操作CSS样式

3.jQ操作DOM

jQ的事件和DOM操作笔记分享相关推荐

最新文章

热门文章

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

jQ的事件和DOM操作

1.jQ中的事件

1.1JS的基本事件

1.2jQ的复合事件

2.jQ操作CSS样式

3.jQ操作DOM

jQ的事件和DOM操作 笔记分享相关推荐

最新文章

热门文章

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

jQ的事件和DOM操作笔记分享相关推荐