Table of Contents
1.复习内容
2.灵感代办
3.学习内容
-
事件分类
-
鼠标事件
-
键盘事件
-
加载完毕
-
表单事件
- onfocus() 表单控件获取到焦点
- onblur() 表单控件失去焦点
- onchange() 控件的值或者状态是否发生变化(比较之前与之后,等控件失去焦点判断,选择按钮常用)
- oninput(实时监听输入)
- onsubmit(监听表单事件是否可以发送,返回值true发送,false不发送)
-
this
- 指代函数的调用对象或者事件的触发对象
- 谁调用函数 谁就是this(比如window)
-
事件对象
- 事件对象跟随事件触发自动创建,保存与当前事件相关的信息。自动传入事件处理函数中,只需要接收
- 例子:btn.onclick = function(event){}
- 事件event是怎么传递的?
-
Jquery使用
- 文档地址:https://www.jquery123.com/
-
使用:
-
引入jquery文件
-
工厂函数 $() (对象和原生JS不同,)
- 用于获取元素,创建元素节点,转换对象类型
- 根据选择器选择元素,返回的jQuery对象
$(‘h1’),#id,.c1 组合 #di h1
-
DOM操作
-
常用获取元素的方法
jquery使用选择器获取元素
- 基础选择器(标签,id,类,群组选择器)
- 层级选择器(后代,子,相邻兄弟,通用兄弟)
- 相邻兄弟$(“h1+h2”)
查找h1后面相邻的兄弟元素,不满足找不到
- 通用兄弟选择器$(“h1~h2”)
- 空格找后代
- 大于号找子代
- 过滤选择器
过滤选择器与伪类选择器类似,必须与基础选择器结合使用
- :frist 第一个元素
- :last 最后一个元素
- :odd 查找奇数下标对应元素
- :even 查找偶数下标对应元素
- :eq查找指定下标对应的元素
- :gt查找大于指定下标的元素
- :lt查找小于指定下标的元素
- not(selector) 否定筛选(:not(:eq(5),:first())) 非常灵活
- 属性选择器
根据标签属性匹配元素
- [attrName] 匹配包含指定属性的元素
- [attrName = value ] 匹配属性名=属性值的元素
- [attrName ^=value ]匹配属性值以字符结尾的元素
- [attrName $=value] 匹配一指定字符结尾的元素
- [attrName * =value] 匹配包含指定字符的元素(任意位置)
- 子元素过滤选择器
- :first-child 匹配第一个
- :last-child 匹配最后一个
- :nth-child 匹配第N个
-
操作元素内容
- html() 方法可读可写
- text() 原样输出,不识别标签
- val() 相当于原生JS的Value
-
操作元素属性
-
操作元素样式
- css()
-
根据层级结构获取元素
-
元素创建,添加删除
-
js可以和jq互相转换
-
jq转js对象
- 用[0]下标来取元素
- 用.get(0)来获取元素
-
js转jq
- $(h1) 包装一下js对象
4.扩展延伸知识
-
表单控件
- action是地址,method是请求方法 enctype是编码类型
- JavaScript for in循环
- for (list in lists)list是一个索引
5.知识内容个人梳理
6.今天都复习了之前的什么内容
3.学习内容
-
事件分类
-
鼠标事件
-
键盘事件
-
加载完毕
-
表单事件
- onfocus() 表单控件获取到焦点
- onblur() 表单控件失去焦点
- onchange() 控件的值或者状态是否发生变化(比较之前与之后,等控件失去焦点判断,选择按钮常用)
- oninput(实时监听输入)
- onsubmit(监听表单事件是否可以发送,返回值true发送,false不发送)
-
this
- 指代函数的调用对象或者事件的触发对象
- 谁调用函数 谁就是this(比如window)
-
事件对象
- 事件对象跟随事件触发自动创建,保存与当前事件相关的信息。自动传入事件处理函数中,只需要接收
- 例子:btn.onclick = function(event){}
- 事件event是怎么传递的?
-
Jquery使用
- 文档地址:https://www.jquery123.com/
-
使用:
-
引入jquery文件
-
工厂函数 $() (对象和原生JS不同,)
- 用于获取元素,创建元素节点,转换对象类型
- 根据选择器选择元素,返回的jQuery对象
$(‘h1’),#id,.c1 组合 #di h1
-
DOM操作
-
常用获取元素的方法
jquery使用选择器获取元素
- 基础选择器(标签,id,类,群组选择器)
- 层级选择器(后代,子,相邻兄弟,通用兄弟)
- 相邻兄弟$(“h1+h2”)
查找h1后面相邻的兄弟元素,不满足找不到
- 通用兄弟选择器$(“h1~h2”)
- 空格找后代
- 大于号找子代
- 过滤选择器
过滤选择器与伪类选择器类似,必须与基础选择器结合使用
- :frist 第一个元素
- :last 最后一个元素
- :odd 查找奇数下标对应元素
- :even 查找偶数下标对应元素
- :eq查找指定下标对应的元素
- :gt查找大于指定下标的元素
- :lt查找小于指定下标的元素
- not(selector) 否定筛选(:not(:eq(5),:first())) 非常灵活
- 属性选择器
根据标签属性匹配元素
- [attrName] 匹配包含指定属性的元素
- [attrName = value ] 匹配属性名=属性值的元素
- [attrName ^=value ]匹配属性值以字符结尾的元素
- [attrName $=value] 匹配一指定字符结尾的元素
- [attrName * =value] 匹配包含指定字符的元素(任意位置)
- 子元素过滤选择器
- :first-child 匹配第一个
- :last-child 匹配最后一个
- :nth-child 匹配第N个
-
操作元素内容
- html() 方法可读可写
- text() 原样输出,不识别标签
- val() 相当于原生JS的Value
-
操作元素属性
-
操作元素样式
- css()
-
根据层级结构获取元素
-
元素创建,添加删除
-
js可以和jq互相转换
-
jq转js对象
- 用[0]下标来取元素
- 用.get(0)来获取元素
-
js转jq
- $(h1) 包装一下js对象
4.扩展延伸知识
-
表单控件
- action是地址,method是请求方法 enctype是编码类型
- JavaScript for in循环
- for (list in lists)list是一个索引
5.知识内容个人梳理
6.今天都复习了之前的什么内容
事件分类
-
鼠标事件
-
键盘事件
-
加载完毕
-
表单事件
- onfocus() 表单控件获取到焦点
- onblur() 表单控件失去焦点
- onchange() 控件的值或者状态是否发生变化(比较之前与之后,等控件失去焦点判断,选择按钮常用)
- oninput(实时监听输入)
- onsubmit(监听表单事件是否可以发送,返回值true发送,false不发送)
-
this
- 指代函数的调用对象或者事件的触发对象
- 谁调用函数 谁就是this(比如window)
-
事件对象
- 事件对象跟随事件触发自动创建,保存与当前事件相关的信息。自动传入事件处理函数中,只需要接收
- 例子:btn.onclick = function(event){}
- 事件event是怎么传递的?
Jquery使用
- 文档地址:https://www.jquery123.com/
-
使用:
-
引入jquery文件
-
工厂函数 $() (对象和原生JS不同,)
- 用于获取元素,创建元素节点,转换对象类型
- 根据选择器选择元素,返回的jQuery对象
$(‘h1’),#id,.c1 组合 #di h1
-
DOM操作
-
常用获取元素的方法
jquery使用选择器获取元素
- 基础选择器(标签,id,类,群组选择器)
- 层级选择器(后代,子,相邻兄弟,通用兄弟)
- 相邻兄弟$(“h1+h2”)
查找h1后面相邻的兄弟元素,不满足找不到
- 通用兄弟选择器$(“h1~h2”)
- 空格找后代
- 大于号找子代
- 相邻兄弟$(“h1+h2”)
- 过滤选择器
过滤选择器与伪类选择器类似,必须与基础选择器结合使用
- :frist 第一个元素
- :last 最后一个元素
- :odd 查找奇数下标对应元素
- :even 查找偶数下标对应元素
- :eq查找指定下标对应的元素
- :gt查找大于指定下标的元素
- :lt查找小于指定下标的元素
- not(selector) 否定筛选(:not(:eq(5),:first())) 非常灵活
- 属性选择器
根据标签属性匹配元素
- [attrName] 匹配包含指定属性的元素
- [attrName = value ] 匹配属性名=属性值的元素
- [attrName ^=value ]匹配属性值以字符结尾的元素
- [attrName $=value] 匹配一指定字符结尾的元素
- [attrName * =value] 匹配包含指定字符的元素(任意位置)
- 子元素过滤选择器
- :first-child 匹配第一个
- :last-child 匹配最后一个
- :nth-child 匹配第N个
-
操作元素内容
- html() 方法可读可写
- text() 原样输出,不识别标签
- val() 相当于原生JS的Value
-
操作元素属性
-
操作元素样式
- css()
-
根据层级结构获取元素
-
元素创建,添加删除
-
-
js可以和jq互相转换
-
jq转js对象
- 用[0]下标来取元素
- 用.get(0)来获取元素
-
js转jq
- $(h1) 包装一下js对象
-
-
-
表单控件
- action是地址,method是请求方法 enctype是编码类型
- JavaScript for in循环
- for (list in lists)list是一个索引
5.知识内容个人梳理
6.今天都复习了之前的什么内容