1.JavaScript概述
1.什么时JavaScript
JavaScript 简称“JS”，是哟中运行于JS解释器或执行引擎中的解释性脚本语言
2.JS发展史
1.1992年Nonbas公司开发了一款脚本语言，能够运行在网页中，名称CMM(C--)，更名为ScriptEase
2.1995年Netscape（网景）为自己的浏览器Navigator2.0开发了另一款脚本语言 - LiveScript，后更名为JavaScript
3.1996年Microsoft，为自己的浏览器IE3.0开发了一款JavaScript的克隆版本JScript
4.1997年Netscript找到了ECM（欧洲计算机制造商联合会）。Netscape将JS的核心交给了ECMA，从此JS的核心被更名为
ECMA Script，简称ES
完整的JS组成：
1.核心： - ECMAScript
包含了JS中最基本的语法规范
2.浏览器对象模型 - BOM模型
Browser Object Model 浏览器 对象 模型
提供了一系列的可操作方法和属性用于和浏览器进行交互
3.文档对象模型 - DOM模型
Document Object Model
提供了一系列的可操作方法和属性用于和文档进行交互
2.JS的使用方式
1.在元素事件中编写JS代码
事件：用户在元素上所激发的行为操作
onclick：当用户单击元素时激发的操作
语法：
<标记 οnclick="JS执行代码">
JS可执行代码：
console.log("向控制台中输出一句话");
2.将代码嵌入在网页的<script></script>里
语法：
在网页的任意位置处，均可以嵌入<script></script>
<script>
可执行的JS代码
</script>
特点：
网页加载时执行
document.write("向网页中输出一句话！")
注意：将document.write编写在按钮中的话，在执行时，会刷新网页中的内容
3.将JS代码编写在外部的JS文件中
1.创建一个JS文件（xxx.js），编写JS代码
2.在使用的网页中对JS文件进行引入
<script src="JS文件的路径"></script>
注意：在引入的JS标记中时不能编写JS脚本的
3.JS的基础语法
1.JS都是由语句来组成的
1.由运算符，关键字和表达式构成的
2.JS中严格区分大小写
console.log("...");正确
Console.log("...");错误
3.每条语句必须以;表示结束
4.所有的标识符，符号必须都是英文的
2.JS中的注释
单行：// 自动换行算一行
多行：/**/
3.JS中的变量 和 常量
1.变量
1.声明变量
声明：var 变量名;
赋值：变量名 = 值;
声明并赋值：var 变量名=值;
2.注意
1.在声明变量时，尽量使用 var 关键字，如过省略var的话，也可以，但容易出问题。
2.声明变量如果未赋值的话，默认值为undefined
3.变量名的命名规范
1.不能是JS中的关键字和保留关键字
2.有字母，数字，下划线(_)和$
3.数字不能开头
4.尽量不要重复，重复的话后面的会覆盖前面的
5.尽量要见名知意
6.入伍特殊要求，尽量使用小驼峰命名法
4.变量的使用方式
1.为变量赋值
只要变量出现在赋值（=）符号的左边，一律都是赋值操作
2.获取变量的值
只要变量没出现在赋值符号的左边，一律都是取值操作
赋值操作
1.先运算赋值符号右面表达式或值，再赋值给左边的变量
2.赋值符号的左边只能说变量
2.常量
1.什么是常量
已经声明后就不允许被修改的数据就是常量
2.语法
const 常量名=值;
注意：
1.常量声明好之后是不允许被修改的，所以一定要赋值；
2.常量名一般采用全大写形式
l.toFixed(n)取几位小数
4.数据类型
JS中的数据类型分为以下两大类：
1.基本数据类型
1.number类型
数字类型，可以表示32为的整数以及64为的浮点数
整数：
表示十进制，八进制，十六进制
十进制：var num = 10;
八进制：var num = 010; 0开头的数字都是八进制
十六进制：var num = 0x10; 0x开头的数字是
小数：
小数点计数法：var num = 123.456;
指数计数法：var num = 1.8e2;
2.string类型
字符串类型
有Unicode字符，数字，标点组成
注意：字符串在使用时必须用""或''引起来
1.查看字符的Unicode码
var str = "张";
str.charCodeAt().toString(16);
2.如何将Unicode码转换成对应的字符？
一直Unicode码：5f20
var str = "\u5f20";
3.中文范围
"\u4e00"~"\u9fa5"
4.转义字符
\n:换行
\t:一个制表符
\":"
\':'
\\:\
3.boolean类型
布尔类型，只用于表示真（true）或假（false）
通常会表示条件的结果
注意：
boolean类型可以参与数字运算的，true当成1去运算，false当成0去运算
4.查看数据类型
使用 typeof() 或 typeof 查看变量的数据类型
2.引用数据类型
5.数据类型转换
1.隐式转换
大部分加法运算时，如果数据类型不一致的话可以进行隐式转换
1.数字 + 字符串：将数字转换为字符串，进行拼接操作
2.数字 + 布尔：布尔类型转换为数字，做加法运算
3.字符串 + 布尔：将布尔类型转换为字符串，进行拼接操作
4.布尔 + 布尔：将布尔转换成数字，做加法运算
注意：
任何数据类型与字符串做"+"运算时，都是先转换为字符串再做拼接
2.强制转换（显式转换/转换函数）
1.toString()
将任意类型的数据转换成字符串，并返回转换后的结果
var num = 15;
var r = num.toString();
var num = 15;
var r = num + "";
2.parseInt()
作用：将任意类型的数据尽量转换成整数，如果实在是无法转换的话，则返回NaN(Not a Number)
1.var r = parseInt("13") r:13
2.var r = parseInt("13.5") r:13
3.var r = parseInt("13你好") r:13
4.var r = parseInt("你好13") r:NuN
3.parseFloat()
作用：尽量将任意类型的数据转换为小数
4.Number()
作用：将指定的数据转换成数字，只要包含非法字符的话，结果就为NaN
1.var r = Number("13") r:13
2.var r = Number("13.5") r:13.5
3.var r = Number("13.5你好") r:NaN
var salary = prompt("请输入本月工资:") 在网页中弹出窗口来输入，相当于input
注意：
只要从网页中获取到的数据，永远都是string类型的
流程结构
1.顺序结构
2.分支结构（选择结构）
3.循环结构
1.分支结构
1.作用
根据条件，选择某一段代码去执行
2.if 结构
1.if(条件){
满足条件要执行的代码块
}
注意：
1.if后的{}是可以省略的，如果省略的话，则只控制该结构下的第一条语句
2.条件尽量使boolean类型的，如果不是，一下条件当成假运算：
1.if(0){}
2.if(0.0){}
3.if(""){}
4.if(NaN){}
5.if(underfined){}
6.if(null){}
2.if(){
语句块1
}else{
语句块2
}
3.if(条件1){
语句块1
}else if(条件2){
语句块2
}else if(条件3){
语句块3
}else{
语句块4
}
3.switch 结构
场合：只有在等职判断时使用
语法：
switch(变量){
case 值1:
语句块1
break;
case 值2:
语句块2
break;
}
注意：
1.变量和各个case快后面的值时使用===的方式来判断的
2.如果case后不增加break的话，则从匹配的case开始，向下一次执行（不判断），直到结束或碰到break为止
2.循环结构
1.循环的作用
重复的执行相同或相似的代码
2.循环二要素
1.循环条件
2.循环操作（循环体）
3.while 循环
1.语法
while(条件){
循环体
}
4.do ... while 循环
1.语法
do{
循环体
}while(条件);
2.流程
1.先执行循环体
2.判断循环条件
3.如果条件为真，则继续执行循环操作，否则推出循环
5.循环的流程控制
1.break
用在循环体内，哟美好与跳出整个循环结构
2.continue
用在循环体内，用于跳出本次循环，继续执行下次循环
6.for循环
1.while
var i=1;//循环条件的声明
while(i <= 100)//循环条件的判断{
console.log(i);//循环操作
i++;//更新循环变量
}
2.for语法
for(表达式1;表达式2;表达式3){
循环操作
}
表达式1：循环条件的声明
表达式2：循环条件的判断
表达式3：更新循环变量
流程：
1.限制性表达式1，声明循环条件（执行1次）
2.判断表达式2的值，true 或 false
3.如果为true，则执行循环操作
如果为false，则推出循环
4.执行完循环操作之后，在执行表达式3
5.再判断表达式2的值，同步走2
3.for VS while
1.相同点
先判断循环条件，再执行循环操作的结构
2.不同点
while：优先用在不确定循环次数的场合下
for：优先用在确定循环此时的场合下
===========================================================================
1.循环的嵌套
允许在一个循环的内部再出现循环
2.函数
1.什么是函数
函数，即func，是一段预定义好，可以独立执行并包含多条执行语句的代码块
优点：
1.多条执行语句的封装
2.实现了代码的复用
2.在JS中创建函数
function 函数名称(参数列表){
函数体
[返回值]
}
参数列表：
如果没有参数，可以为空
如果有参数，就编写参数列表。如果参数是多个的话，各个参数之间使用","隔开
有参数的函数，在调用时就要传参，如果为传参的话，参数的值就是undefined
返回值：
在函数体内，经过运算后，需要传递给函数调用者的一个值，就是返回值。
返回值时可选的，有返回值的话，需要使用return进行返回，最多只能返回一个值
3.函数的调用：
在任意的JS合法的位置处，都允许做函数的调用
var ret = 函数名(参数列表);
有参数，则传参，否则，为空
有返回值，可以接收，否则不接收
4.变量的作用域
1.什么是变量的作用域
变量的作用域指的时变量的可访问范围
2.作用域的分类
1.局部变量
使用var关键字声明在某个函数内的变量，都是局部变量
局部变量只能在声明的函数中使用，除了函数则无法使用
2.全局变量
1.在function之外声明的变量都是全局变量
2.声明变量不适用var关键字的时候，都是全局变量
全局变量可以应用在各个函数中以及各个位置处
注意：全局变量，推荐放在所有的function之外，使用var关键字去声明
3.数组 - Array
1.什么是数组
数组（Array）是一个用于保存批量数据的数据结构
数组是按照线性结构来保存数据的
2.创建数组
1.创建一个空数组
var 数组名 = [];
2.创建数组并初始化元素
var 数组名 = [元素1，元素2,... ...];
3.创建一个空数组
var 数组名 = new Array();
4.创建数组并初始化元素
var 数组名 = new Array(length);
length 表示是初始化的长度，length为number类型
3.数组的使用
获取 或 设置数组的元素值，一律使用下标
下标从0开始，到数组元素个数-1结束
4.获取数组的长度
属性：length
用法：数组名.length
1.使用场合
1.能够找到数组中，最新要插入元素的位置（即向数组尾部增加元素时使用）
2.清空数组
江湖组的length属性设置为0，即表示清空数组中所有的元素
3.配合循环，遍历数组中的每一个元素
//从头遍历到尾
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//从尾遍历到头
for(var i=arr.length-1;i>=0;i--){
console.log(arr[i]);
}
5.常用API
1.toString()
作用：将数组转换成字符串
2.join(seperator)
作用：返回一个由seperator连接的数组元素的字符串
3.reverse()
作用：反转
注意：该函数会改变现有数组的结构
4.sort()
1.作用
对现有数组的内容进行排序
默认是按照元素的unicode码升序排序
2.注意
该函数会改变现有数组的结构
3.允许通过自定义的排序规则来指定数字的排序方式
语法：arr.sort()排序函数;
1.升序的排序函数
func sortAsc(a,b){
return a-b;
}
1.将sortAsc指定为排序函数
2.数组会自动的将相邻的两个数字传递到参数的位置处
3.如果返回值是>0的数字的话，则交换两个数字的位置，否则不变
指定排序函数：
arr.sort(sortAsc);
2.使用匿名函数指定排序规则
匿名函数：是一个没有名称的函数，只为某一个功能而用
arr.sort(function(a,b){return a-b;})
===================================================================
1.数组
1.进出栈操作
栈式操作：提供了快速操作数组头部和尾部元素的方法
1.push()
入栈，压栈，向数组尾部增加新元素，并返回新数组的长度
arr[arr.length] = "张三丰";
arr.push("张三丰")
2.pop()
出栈，弹栈，删除并返回数组尾部的元素
3.unshfit()
向数组的头部添加新元素并返回数组的长度
4.shift()
删除并返回数组头部的元素
2.二维数组
1.什么是二维数组
数组中的每个元素又是一个数组
2.字符串 - string
1.声明字符串
var str1 = "";
var str2 = String("");
var str3 = new String("");
2.length属性
作用：返回当前字符串中字符的个数
3.常用函数 - String API
1.大小写转换函数
1.toUpperCase()
返回当前字符串的完全大写形式
2.toLowerCase()
返回当前字符串的完全小写形式
2.获取指定位置的字符 或 字符的 Unicode码
1.获取指定位置的字符
函数：charAt(index)
2.获取指定位置的字符的Unicode码
函数：str.charCodeAt(index)
3.检索字符串
1.indexOf(value,fromIndex)
value:要查找的子字符串
fromIndex：从哪个下标位置处开始查找，二u过省略，则从第一个字符出开始查找
返回值：返回value第一次出现的下标，如果没有查询到字符出的话，则返回-1
2.lastIndexOf(value,fromIndex)
作用：查找value最后一次出现的下标
4.截取子字符串
函数:substring(start,end)
作用：返回从start到end-1之间的字符串，如果省略end的话，则截取到整个字符串的尾部
5.分割字符串
作用：将一个有指定连接符的字符串，按照连接符给拆开，拆分成一个字符串数组
函数：split(seperator)
6.模式匹配
1.作用
配合着正则表达式完成字符串的查找和替换
2.正则表达式
语法： /正则格式/修饰符
修饰符：
i:ignorcase(忽略大小写)
g:global(全局匹配)
m:multiple(允许多行匹配)
3.函数
1.replace(substr/regexp,replacement)
作用：在一个字符串中，将substr或满足regexp格式的字符串替换成replacement
2.match(subtr/regexp)
按照指定的子字符串或正则表达式进行匹配，并返回满足格式的子字符串（数组）
3.其他内置对象
1.JS中对象分类
1.内置对象 - ES提供
2.外部对象
1.window(BOM)
2.document(DOM)
3.自定义对象 - function
对象：包含属性 和 方法（函数）
2.RegExp对象
RegExp - Regular Expression
1.创建RegExp对象
1.var regExp = /匹配模式/修饰符；
2.var regExp = new RegExp("匹配模式","修饰符");
2.RegExp对象的方法
1.test(string)
string:要验证的字符串
作用：验证string是否满足当前正则表达式对象的格式。如果string满足正则表达式的话，则返回true，否则返回false
3.Math 对象
1.作用
执行与数学相关的运算和数据
2.属性
Math.PI:表示Π
Math.E:表示自然对数
3.方法
1.三角函数
Math.sin()
Math.cos()
Math.tan()
2.计算函数
Math.sqrt(x):开方
Math.log(x):求对数
Math.pow(x,y): 求x的y次方
3.数值函数
Math.abs(x):求x的绝对值
Math.max(a,b,c,d):求一组数据中的最大值
Math.min(a,b,c,d):求一组数据中的最小值
Math.random():生成0-1之间的随机数
Math.round(x):将x四舍五入到整数
4.Date对象
1.作用
获取客户端的时间日期
2.创建Date对象
1.获取当前日期时间
var now = new Date();
2.初始化自定义日期时间对象
var date = new Date("2018/06/13 17:20:20")
3.方法
1.读取或设置当前时间的毫秒数
1.getTime()
返回自1970-1-1 00：00：00到date 对象所经过的毫秒数
2.setTime(毫秒数)
根据给定的毫秒数，结合1970-1-1 计算日期
2.读取时间分量
1.getFullYear()
获取当前日期对象的思维年份数
2.getYear()
返回自1900年以来，到目前日期对象所经过的年数
3.getMonth()
返回0-11的数字来表示1-12月
需要得到当前月份的值，需+1
4.getDate()
返回当前日期对象的日
5.getDay()
返回当前日期对象的星期几
返回0-6表示星期日-星期六
6.获取时间
getHours():获取小时
getMinutes():获取分
getSeconds():获取秒
getMilliseconds():获取毫秒
7.转换为字符串
1.toString()
2.toLocalString() 按照中国日期显示时间
3.toLocalTimeString() 只有日期
4.toLocalDateString() 只有时间
=====================================================================================
1.外部对象
1.BOM 和 DOM
BOM：Browser Object Model
浏览器对象模型
将浏览器比喻成一个对象 - window（网页初始化时会自动创建），可以通过该对象灵活的操作浏览器
DOM:Document Object Model
文档对象模型
将HTML文档比喻成一个对象 - document，可以灵活的操作网页上的内容，该对象属于window的属性之一，使用时不用声明
2.window对象（BOM模型）
1.作用：
在JS中表示浏览器窗口
window下的属性和方法在使用的过程中，可以省略window.而直接使用属性和方法
window.alert() -> alert()
window.document -> document
window.history -> history
2.window中的对话框
1.警告框
window.alert() / alert()
2.输入框
window.prompt() / prompt()
3.确认框
window.confirm("想要询问的话") / confirm("想要询问的话")
点击"确定"按钮的话，返回 true
其余的所有的操作，返回false
3.window中的定时器
1.周期性定时器
1.特点
每间隔一段时间后，就执行一边程序，反复执行
2.生命定时器
var set = setInterval(function,duration)
fun:要周期性执行的操作，可以说匿名函数
duration：要建个的时间周期，以ms为单位
ret：返回已经创建好的定时器对象 （清除定时器时使用）
3.清除定时器
clearInterval(timer)
timer:要清楚的定时器对象
2.一次性定时器
1.特点
在指定的时间间隔后，只执行一次操作
2.声明一次性定时器
var ret = setTimeout(fun,time)
fun:等待一定时间后执行的操作
time:要等待的时长
ret:已启动的定时器对象
3.清除定时器
clearTimeout(timer);
4.window中的属性
1.screen属性
作用：获取客户端显示器的相关信息
属性：
1.width / height
2.availWidth / availHeight（可用的宽/高）
2.history属性
1.作用
包含当前窗口所访问过的url地址们
2.属性 & 方法
1.属性
length：所访问过的url的数量
2.方法
1.back():回退
2.forward():前进
3.go(num):在当前网页的基础上前进或后退几步
num：取值为整数，前进
num：取值为负数，后退
3.localtion属性
1.作用
表示浏览器地址栏的信息
2.属性 & 方法
1.属性：href
表示当前窗口中挣扎浏览的网页的地址
如果为href复制，相当于实现网页跳转功能
2.方法：reload()
重新加载当前网页，相当于刷新
4.navigator属性
1.作用
包含浏览器的相关信息
2.属性
userAgent：显示信息
3.document对象（DOM模型）
1.document的概述
document对象，时DOM模型中的顶层对象，封装了所有和HTML元素相关的属性，方法以及事件
网页在加载的时候，会在内存中生成一颗节点树（DOM树）。DOM数会封装网页上所有的内容网页上的每一个元素，每一个属性
，每一段文字（包括注释），都会被封装成DOM树上的一个单独的节点。
节点分为以下几个类型：
1.元素节点 - 表示网页中的一个元素
2.属性节点 - 表示元素中的一个街道
3.文本节点 - 表示元素中的文本内容
4.注释节点 - 表示网页中的注释内容
5.文档阶段 - 表示整个HTML文档
DOM中所提供的操作：
1.查找结点
2.读取节点信息
3.修改节点信息
4.删除节点
5.创建节点
2.查找结点
1.通过元素id查找节点
前提：元素一定要具备id属性，否则无法查找
document.getElementById("元素ID");
DOM属性：
1.innerHTML
修改/获取/设置当前DOM对象的HTML文本
2.innerText
修改/获取/设置当前DOM对象的普通文本
3.value
该属性只针对表单控件，允许获取或设置表单控件的值
3.读取节点的信息
1.节点的类型
属性：nodeType
值：
返回1：元素节点
返回2：属性节点
返回3：文本节点
返回8：注释节点
返回9：文档节点
2.节点的名称
属性：nodeName
元素节点 & 属性节点： 元素名 或 属性名
文本节点：返回 #text
文档节点：返回 #document
4.获取 或 设置 元素节点的 属性值
1.getAttribute(attrName)
作用：获取指定属性的值
返回值： attrName属性对应的值
2.setAttribute(attrName,attrValue)
作用：修改或设置指定属性的值
attrName：要修改或设置指定属性的值
attrValue：要修改或设置的值
3.removeAttribute(attrName)
作用：将attrName属性从节点中移除出去
4.通过DOM对象.属性名 获取或设置属性值
注意：class属性不适用与该方式
5.元素的样式（CSS）
1.使用 setAttribute 设置 class 属性的值elem.setAttribute("class","类选择器")；
2.使用元素的className属性修改class值
var div = $("container");
div.className = "red";
注意：
不能使用 elem.class = "类选择器名称"
3.使用内联方式设置属性值
elem.style.css属性名=值;
elem.style.color="red";
注意：
如果CSS属性中包含“-”，那么“-”要取消，并且后面单词的第一个字符要变大写
1.font-size
elem.style.fontSize="12px";
2.border-right-color
elem.style.borderRightColr="red";
2.DOM - 查询节点
1.根据ID查询节点
document.getElementById()
2.根据层级节点结构查询
1.parentNode
根据当前的节点的层级结构，返回父元素节点
2.chileNodes
根据当前的节点的层级结构，返回当前元素的所有子元素数组
注意：能够获取所有的文本节点和元素节点
3.children
根据当前节点的层级结构，返回当前元素的所有子元素节点数组（只返回元素节点）
4.nextSibling
获取当前节点的下一个兄弟节点
5.nextElmentSibling
获取当前节点的下一个元素兄弟节点
6.previousSibling
获取当前节点的上一个兄弟节点
7.previousElementSibling
获取当前节点的上一个元素兄弟节点
3.通过标签名称获取页面元素
语法：document|elem.getElementsByTagName("标签名") 前方时限制查找的范围document时查找整个网页
返回值：返回包含指定标记的元素数组们
4.通过元素的name属性值获取元素
语法：documen.getElementsByName("name");
返回值：包含指定name属性值的元素的数组
5.通过元素的class属性值获取元素
语法：document|elem.getElenmentsByClassName("class")
返回值：返回包含class属性值的所有元素
==============================================================================
1.DOM
1.增加节点
1.创建节点
语法：
var elem=document.createElement("元素名");
2.增加节点
将创建好的元素增加到网页中
1.document.body.appendChild(elem)
向body中追加elem新元素
2.parentNode.appenpChild(elem)
向parentNode的内部醉驾elem新元素
parentNode可以表示页面上的任意节点一个节点
3.parentNode.insertBefore(newElem,oldElem)
将newElm插入到parentElement中oldElem之前
2.删除节点
在DOM中，删除节点的行为操作只能由父元素发起
1.删除body中的子元素
document.body.removeChild(elem);
2.删除其他元素的子元素
parentNode.removeChild(elem);
删除parentNode中的elem子元素
2.时间
1.什么是事件
通常由用户的行为来激发的操作
2.触发事件的行为
所有的事件在绑定的时候，前面要加 on
1.鼠标事件
click：鼠标单击事件
mouseover：鼠标移入进元素激发的事件
mouseout：鼠标移出元素时激发的事件
mousemove：鼠标在元素内移动时的事件
2.键盘事件
keydown：键位按下时事件
keypress：键位按下时事件
keyup：键位抬起时事件
3.状态改变事件
load：当元素加载完成时激发的事件
change：元素发生改变时激发的事件（select）
focus：当元素获取焦点时处罚的事件
blur：当语速失去焦点时处罚的事件
submit：当表单被提交时处罚的事件
3.绑定事件的方式
1.在元素中绑定事件
语法：<标记 on时间名="执行函数()">
ex：
1.为div元素绑定鼠标移入事件
<div οnmοuseοver=""></div>
2.为body绑定load事件
<body οnlοad=""></body>
2.在js中动态的为元素绑定事件
var div = document.getElenmentById("d1");
div.on事件名=function(){
事件操作
}
注意：
在动态绑定事件中，在事件处理函数内，允许通过this关键字，来表示当前的元素（DOM元素）
4.事件行为
1.load 事件
常用：为body绑定load事件，目的时为了在所有内容都加载完成之后再执行的操作要放在此处
1.<body οnlοad=""></body>
2.JS中动态绑定
window.onload = function(){
}
2.submit 事件
只有在表单被提交时才会触发
注意：该事件需要一个布尔类型的返回值来通知表单是否要提交。返回为true，可以提交表单，返回为false则
阻止表单提交
5.事件对象（事件参数对象，event对象）
1.什么是事件对象
任何一个事件在触发后，都会自动产生一个event对象。
event对象中包含与当前事件相关的一些属性和方法
2.获取 event 对象
1.在html元素中绑定事件
<标记 on事件名="btn()">
2.在js中动态为元素绑定事件
var d1 = $("d1");
3.事件对象的常用属性
1.事件源
1.什么是事件源
触发当前事件的元素是谁
2.获取事件源
通过 event.target 获取事件源
事件源是一个DOM对象
2.鼠标事件（事件对象的常用属性）
鼠标事件：
click,mouseover,mouserout,mousemove
1.offsetX,offsetY
获取鼠标在元素上的坐标点
以元素的左上角为（0，0）
2.clientX,clientY
获取鼠标在网页上的坐标点
3.screenX,screenY
获取鼠标在屏幕上的坐标点
3.键盘事件（事件对象的常用属性）
键盘事件：keypress,keydown,keyup
1.keypress
1.which
当前按下的字符的ASCII
2.key
当前按下的字符
注意：该事件允许通过一个返回值，通知元素是否要处理该事件。返回值为true，则正常显示输入的字符，
返回值为false，则终止显示
2.keydown
只要按下键盘键位时就会被触发，无论是否由字符的输入
1.which
当前按下键位的键位码
只区分按键，并不区分大小写
大小写字符，时同一键位，所以键位码相同
返回值 同keypress
======================================================================================
1.事件
1.事件冒泡
1.什么是事件冒泡
当激发子元素事件时，同时把父元素对应的事件也给执行了
场合：
1.必须是父子结构或具备层级关系的元素
2.必须同时设置了相同的事件
2.阻止事件冒泡
让该事件在当前元素中执行，不向上冒泡
event.stopPropagation();
2.jQuery
1.jQuery介绍
jQuery时一个轻量级的JS库 - 是一个被封装好的JS文件，提供了更为简便的元素操作方式
jQuery封装了DOM
jQuery核心理念：Weite Less Do More
2.使用jQuery文件
1.引入jQuery文件
<script src=""></script>
注意：该文件的引入操作必须要放在jQuery操作之前
3.jQuery对象
1.什么时jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的所有操作都只针对jQuery对象其他对象（DOM对象）无法使用
2.工厂函数 - $()
想要获取jQuery对象的话，则必须使用工厂函数$()
在$()中允许传递一个选择器/DOM对象作为参数，$()能够将选择器 和 DOM对象全部封装成jQuery对象再进行返回
$()等同于getElement
3.DOM对象 和 jQuery对象之间的转换
DOM对象：不能使用jQuery提供的操作
jQuery对象：不能使用DOM提供的操作
1.将DOM对象转换为jQuery对象
语法：var 变量=$(DOM对象);
注意：所有的jQuery对象在起名的时候，最好在变量前加$，主要用于和DOM对象的区分
2.将jQuery对象转换为DOM对象
1.var dom对象=jQuery对象[0];
2.var dom对象=jQuery对象.get(0);
3.jQuery选择器
1.作用
获取页面上的元素们，返回值都是由jQuery对象所组成的数组
语法：$("选择器")
2.常用选择器
1.基本选择器
1.ID选择器
$("#id");
返回：返回页面中指定ID值的元素
2.类选择器
$(".className")
返回：页面中指定className的所有元素
3.元素选择器
$("element")
返回：页面中指定标记的所有元素
4.群组选择器 / 符合选择器
$("selector1,selector2,..")
返回：返回满足函数内所有选择器的函数们
2.层级选择器
1.$("selector1 selector2")
后代选择器
2.$("selector1>selector2")
子代选择器
3.$("selector1+selector2")
名称：相邻兄弟选择器
作用：匹配紧紧更在selector1后面且满足selector2选择器的元素
4.$("selector1~selector2")
名称：通用兄弟选择器
作用：匹配selector1后面所有满足selector2选择器的元素
3.基本过滤选择器
过滤选择器通常都会配合着其他的选择器一起使用
1.:first
只匹配一组元素中的第一个元素
$("p:first")
2.:last
只匹配一组元素中的最后一个元素
3.:not("selector")
在一组元素中，将满足selector选择器的元素排除出去
4.:odd
匹配 偶数行 元素（奇数下标）
5.:even
匹配 奇数行 元素（偶数下标）
6.:eq(index) -- equals
匹配 下标等于 index 的元素
7.:gt(index)
匹配 下标大于 index 的元素
8.:lt(index)
匹配 下标小于 index 的元素
4.属性过滤选择器
依托于html元素的属性来进行元素过滤的
1.[attribute]
作用：匹配包含指定属性的元素
ex：
div[id]:匹配具备id属性的div元素
2.[attribute=value]
作用：匹配attribute属性值为value的元素
ex：
input[type=text]
3.[attribute!=value]
作用：匹配attribute属性值不是value的元素
4.[attribute^=value]
作用：匹配attribute属性值是以value字符开头的元素
ex:
p[class^=col]
6.[attribute*=value]
作用：匹配attribute属性值中包含value字符结尾的元素
5.子元素过滤选择器
1.:first-child
匹配属于其父元素中的首个子元素
2.:last-chiled
匹配属于其父元素中的最后一个子元素
3.:nth-child(n)
匹配属于其父元素中第n个子元素
4.jQuery操作DOM
1.基本操作
1.html()
作用：获取 或 设置jQuery对象中的html内容，传参数是设置值不传参是获取
2.text()
作用：获取 或 设置 jQuery对象的text内容
3.val()
作用：获取 或 设置 jQuery对象中的value值（表单控件）
4.属性操作
1.attr()
作用：读取 或 设置jQuery对象的属性值
ex：
1.$obj.attr("id");
获取$obj的id属性值
2.$obj.attr("id","main");
设置$obj对象的id属性值为main
2.removeAttr("attrName")
删除jQuery对象的attrName属性
ex:
$obj.removeAttr("class");
2.样式操作
1.attr()
$obj.attr("class","redBack")
2.addClass("className")
作用：将className 添加到元素的class值之后
ex：
$obj = $obj.addClass("c1");
$obj = $obj.addClass("c2");
连缀调用：
$obj.addClass("c1").addClass("c2");
3.removeClass("className")
如果无参的话，则清空类选择器
如果有参数的话，则删除对应的类选择器
4.toggleClass("className")
切换样式：
元素如果具备className选择器，则删除
元素如果没有className选择器，则添加
5.css("属性名")
$obj.css("width")
获取$obj对象的width属性值
6.css("属性名","属性值")
$obj.css("background-color","yellow")
设置$obj对象的background-color的属性值为yellow
7.css(JSON对象)
JSON对象：
是一种约束了格式的对象表现形式
JSON:JavaScript Object Notation
JSON对象的表现方式：
1.JSON对象必须使用{}括起来
2.使用键值对的方式来声明数据（表示属性和值）
3.所有的属性在使用时必须使用""括起来，值如果时字符串的话，也必须使用""括起来
4.属性和值之间使用:连接
5.多对属性和值之间使用，隔开
3.遍历节点
1.children() / children("selector")
获取某jquery对象的所有子元素 或 带有指定选择器的子元素
注意：只考虑子代元素，不考虑后代元素
2.next() / next("selector")
获取某jquery对象的下一个兄弟元素
3.prev() / prev("selector")
获取某jquery对象的上一个兄弟元素
4.siblings() / siblings("selector")
获取某jquery对象的所有兄弟元素 / 满足selecor的所有兄弟元素
5.find("selector")
查找满足elector选择器的所有后代元素
4.创建对象
语法：$("创建的标记")
ex:
1.创建一对div
var $div = $("<div></div>")
$div.html("动态创建的div")
$div.attr("id","container")
2.创建一堆div
var %div = $("<div id='container'></div>")
5.插入元素
作用：将创建好的元素插入到网页中
1.内部插入
作为元素的子元素插入到网页中
1.$obj.append($new);
将$new元素插入到$obj元素中的最后一个子元素位置处（追加）
2.$obj.prepend($new);
将$new元素插入到$obj元素中的第一个子元素位置处
2.外部插入
作为元素的兄弟元素插入到玩也中
1.$obj.after($new);
将new元素作为$obj的下一个兄弟元素插入进来
2.$obj.before($new);
$new元素作为$obj的上一个兄弟元素插入进来
6.删除元素
$obj.remove();
将$obj元素删除出去
5.jQuery中的事件处理
1.页面加载后的执行
类似与window.onload 但不同于 window.onload
jQuery加载后执行的特点：
在dom树加载完毕的时候就开始执行
1.$(document).ready(funcation(){
//页面的初始化操作
//DOM树加载完成后就开始运行
});
2.$().ready(funcation(){
//页面的初始化操作
//DOM树加载完成后就开始运行
});
3.$( funcation(){
//页面的初始化操作
//DOM树加载完成后就开始运行
});
2.jQuery的事件绑定
1.方式1
$obj.bind("");
ex:
$obj.bind("click",function(){
//事件的行为操作
console.log(".....");
});
2.方式2
$obj.事件名称(function(){
//事件处理函数
});
ex:$obj.click(function(){});
3.事件对象 - event
再绑定事件的时候，允许传递 event 参数来表示事件对象
1.obj.bind("click",function(event)());
2.$obj.click(function(event){});
event的使用方式与原生JS事件中的event使用方法一直；
event.stopPropagation():组织事件冒泡
JS和jQuery学习笔记
最新推荐文章于 2022-01-06 20:06:24 发布
扫一扫
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
