预习
3. 事件行为
1. onload事件
常用于为body绑定load事件，表示等待body内容加载完毕再
执行事件函数
et :
<body onload = "fun();"></body>
//JS动态绑定
window.onload = function () {
//等待文档加载完毕之后再执行
};
2. onsubmit事件
只有在表单提交时才触发
注意 ：该事件需要一个Boolean返回值来通知表单是否
要提交，返回true表示表单可以提交，
返回false表示阻止表单提交
常用于验证表单是否可以提交
4. 事件对象
1. 事件对象 event
伴随事件触发产生，包含了当前事件所有的信息
2. 获取事件对象
由于事件对象伴随事件触发自动产生，浏览器会
自动将其作为参数传递给事件处理函数，所以我们
需要在事件处理函数出接收参数，就可以获取事件对象
et:
function sum (a,b){
return a + b;
}
sum(10,20);
div.onclick = function (evt) {
console.log(evt);
};
3. 事件对象的常用操作
不同的事件对应不同的事件对象，其所包含的信息也不同
1. 获取事件源
触发事件的节点对象
evt.target;
2. 鼠标事件对象包含的属性
1. offsetX,offsetY
获取鼠标在元素上的坐标点（以元素左上角为原点）
2. clientX,clientY
获取鼠标在网页中的坐标点
3. screenX,screenY
获取鼠标在屏幕中的坐标点
3. 键盘事件对象包含的信息
键盘事件 ：onkeypress onkeydown onkeyup
1. keypress 事件
只有在输入字符（键盘输入）时才触发
事件对象的属性 ：
1. which 属性
获取当前按下字符的ASC码
2. key
获取当前键位表示的字符
2. keydown
1. which
获取当前键位的键码
值区分按键，不区分大小写
注意 ：键盘事件的监听顺序 keydown keypress keyup
事件
事件绑定方式
1. 内联 <button onclick="">
2. div.onclick = function (){};
事件处理函数
鼠标事件
键盘事件
表单处理
form onsubmit
input(text passwprd) onfocus onblur onchange oninput
load事件 onload
事件对象
如何获取
以参数形式在事件处理函数中接收即可
事件对象属性
evt.target
-----------------------------------
一 事件传递机制
1. 事件传递 ：
当页面一个元素触发事件时，其他相关的元素都会接收这个
事件，都可以选择对事件作出响应
2. 事件传递机制 ：
事件传递机制描述的是页面中元素处理事件的顺序，有两种
机制 ：冒泡 和 捕获
1. 冒泡传递 ：
从里向外逐个触发（默认传递方式）
2. 捕获传递 ：
从外向里逐个触发 （IE不支持）
阻止事件传递 ：
该事件只在当前元素中执行，不向上传递
evt.stopPropagation(); (默认冒泡情况下)
二 jQuery
1. 介绍
jQuery是一个JavaScript的库，通过封装
原生的JavaScript，得到一整套定义好的方法，
简化JS操作
Write Less ，Do More
jQuery版本 ：
jQuery 1.xx.x 版本，兼容IE 6,7,8
jQuery 2.xx.x 版本，不再兼容IE 6,7,8
2. jQuery的功能和优势
1. 简化DOM操作，像操作CSS一样去操作DOM
2. 直接通过选择器设置元素样式
3. 简化JS的代码操作 （链式调用）
4. 事件的处理更加容易
-------------------------
5. 各种动画效果使用更加方便
6. 让Ajax技术更完美
7. 基于jQuery有大量方便的插件
8. 自行扩展功能插件
3. jQuery使用
1. 引入jQuery文件
1. 本地文件引入
<script src=""></script>
2. 网络文件引入
<script src="url"></script>
注意 ：如果想使用jQuery语法操作JS，必须将jQuery
引入放在JS代码之前
2. jQuery 使用
1. jQuery 对象 - jQuery/$
jQuery对象是对DOM对象封装之后产生的对象
jQuery对象只能操作jQuery提供的方法，DOM对象也
只能操作原生JS提供的方法，不能混用
2. 工厂函数 - $()
如果想要获取元素对象，必须通过工厂函数
函数中可以传递参数 ：选择器/DOM对象
3. jQuery对象与DOM对象互相转换
1. DOM 转换为 jQuery 对象
var h1 = document.getElementsByTagName('h1')[0];
var $h1 = $(h1);
2. jQuery 转换为 DOM
var h1 = $h1[0];
var h1 = $h1.get(0);
jQuery选择器
1. 作用
根据选择器获取页面中的元素，返回值都是
由jQuery对象组成的数组
2. 语法 ：
$('选择器')
3. 常用选择器
1. 基础选择器
1. ID选择器
$('#id');
返回id属性值为指定id的元素对象
2. 类选择器
$(".className");
返回指定类名对象的元素
3. 标签选择器
$('element');
返回指定标签名对应的元素
4. 群组选择器
$('selector1,selector2,...');
2. 层级选择器
1. 后代选择器
$('selector1 selector2')
2. 子代选择器
$('selector1>selector2')
3. 相邻兄弟选择器
$('selector1+selector2')
匹配紧跟在selector1后满足selector2的元素
h1+p
4. 通用兄弟选择器
$('selector1~selector2')
匹配selector1后所有满足selector2的元素
3. 基本过滤选择器
过滤选择器需要结合其他选择器一起使用
1. :first
只匹配一组元素中的第一个元素
$('p:first')
2. :last
匹配一组元素中的最后一个元素
$('p:last')
3. :not
否定筛选，将满足selector选择器的元素都排除在外
匹配剩余元素
$(':not(p,h1)')
4. :odd
匹配偶数行对应的元素 （奇数下标）
5. :even
匹配奇数行对应的元素
6. :eq(index)
匹配下标等于index的元素
7. :gt(index)
匹配下标大于index的元素
8. :lt(index)
匹配下标小于index的元素
4. 属性选择器 []
根据标签属性匹配元素
1. [attribute]
匹配包含指定属性的元素
2. [attribute=value]
匹配属性attribute=value的元素
3. [attribute!=value]
匹配attribute属性值不等于value的元素
4. [attribute^=value]
匹配属性值以value字符开头的元素
5. [attribute$=value]
匹配属性值以value字符结尾的元素
6. [attribute*=value]
匹配属性值中包含value字符的元素
5. 子元素过滤选择器
1. :first-child
匹配属于其父元素中的首个子元素
2. :last-child
匹配属于其父元素中的最后一个子元素
3. :nth-child(n)
匹配属于其父元素中的第n个子元素
注意 ：
将要匹配的子元素与筛选选择器相结合使用
jQuery操作DOM
1. 基本操作
1. html()
获取或者设置jQuery对象中的html内容
类似于DOM innerHTML，可识别标签
2. text()
获取或者设置jQuery对象中的text内容
类似于innerText
3. val()
获取或者设置jQuery对象value值（常见表单控件）
练习 ：
1. 创建文本框，定义id
2. 创建按钮，内容为“显示”
3. 创建 div,当按钮被点击时，将文本框中的内容
以一级标题的形式显示在div中
4. 使用jQuery实现
4. 属性操作
1. attr()
读取或设置jQuery对象属性值
参数为字符串形式的属性名
et :
console.log($('div').attr('id'));
$('div').attr('class','d1');
2. removeAttr()
移除指定的属性，参数为属性名
et :
$('div').removeAttr('id');
2. 样式操作
1. attr();
添加id或class属性，对应选择器，为元素添加样式
2. addClass('className')
将className作为值添加到元素的class属性上
是可以连缀调用的
$('h1').addClass('c1').addClass('c2')...
3. removeClass('className');
移除className
参数可以省略，表示清空类选择器
4. toggleClass('className')
切换样式 :
元素如果具备className对应的样式，则删除
如果没有，就添加
posted on 2018-10-22 21:19 破天荒的谎言、谈敷衍 阅读(145) 评论(0) 编辑 收藏 举报
