一、初识JS
1.1 js的简介
-
java与js是没有联系的，是雷锋与雷峰塔之间的关系
-
是一种运行在客户端的脚本语言（Script是脚本的意思）
-
脚本语言：不需要编译，运行过程中逐行解释并执行
-
作用：密码强度检验；网页特效；APP；桌面程序；服务端开发（前后端都有涉及）
1.2浏览器的组成 -
渲染引擎：用来解析HTML和CSS，速成内核
-
JS引擎：用来解析JS
-
网页是不能执行JS代码的，是先通过JS引擎来将JS代码转为二进制，然后让浏览器执行
-
JS代码是被解释一行，浏览器执行一行，解释一行，执行一行，逐行被解释，所以被归为脚本语言
1.3 JS的三部分组成 -
ECMAScript(基础语法）
-
Dom（文档对象模型）
-
Bom（浏览器对象窗口模型）
1.4 JS的三种书写位置 -
行内式（特殊情况下使用）：写在body内；在js中一般不用双引号，而用单引号
-
内嵌式（学习中用的比较多）：写在head的script标签中
-
外部JS文件（JS代码量比较大的时候使用）：引用JS文件的script标签中间不能写代码
1.5 JS注释 -
单行注释与多行注释格式与C语言一样
1.6输入输出语句 -
prompt():弹出输入框，用户可以输入
-
alert():弹出警示框
-
console.log:在控制台显示给程序员看的
1.7变量 -
在内存中申请的用来存储数据的一块空间
-
声明变量用var
-
声明多个变量可以之间用逗号隔开
-
不声明直接赋值是可以正常显示的，但是并不提倡；不声明，不赋值会报错；声明但不赋值是undefined;
-
命名遵循驼峰原则：首字母小写，后面单词的首字母大写
-
一般不采用name作为变量名，在一些浏览器中，name有特殊含义
二、数据类型
2.1数据类型简介 -
js的数据类型是根据等号右边的数据来确定的
-
js是一种动态语言，一个变量可以变化多个数据类型
2.2数据型分类 -
简单数据类型（Number,String,Boolean,Null,Undefined）
-
复杂数据类型（object)
-
Number:八进制在数字前加0，十六进制在数字前加0x，未赋值默认为0
-
String:js中字符串建议用单引号，字符串内的引号嵌套可以使用内单外双或者内双外单来实现；比较常用的转义符（写在引号内部）：\n,\t
-
str.lenth可以测得字符串长度；字符串+任意类型数据=拼接后的新字符串
-
Boolean:布尔型参与加法运算的时候-false当0,right当1
-
Undefined:如果一个变量只声明未赋值就是这个
-
NULL:与数字做加法显示原始数值
-
typeof可以检测数据类型，prompt取过来的数值是字符型的，无法进行想要的加法运算
-转换为字符类型：利用+拼接字符串的方法，+‘’即可 -
转换为数字类型（重点）：parseInt（变量）与parseFloat（变量），前者是取整，两者都可以去掉后面的单位；Number(‘字符串’）强制转换；Js隐式转换（利用加减乘除进行转换）
-转换为布尔类型：Boolean（）
-拓展资料：编译型语言（吃炒菜）：所有的都炒完了才能吃。解释型语言（吃火锅）：边涮边吃
三、运算符
3.1 算数运算符
-浮点数精度很高，但是在计算上的准确度上并不如整数
-前置递增先自加，后返回值。后置则相反
3.2 比较运算符
3.3逻辑运算符
-逻辑与的短路中断（&&）：表达式1为真时，返回表达式2；表达式1为假时，返回表达式1
-逻辑或的短路终端（||）：表达式1为真时，返回表达式2为真。
-短路原理；当表达式1的布尔类型可以确定的时候，后面的表达式就不用再计算
四、流程控制
-三元表达式：条件表达式 ？表达式1：表达式2（条件为真则执行前者）
-switch分支语句：switch（表达式），用表达式的值和case后面的值相匹配，来有选择的执行语句
-while循环与for循环的不同之处在于for主要用来计数，while可以进行一些复杂条件的判断
-continue:跳出当前次的循环，进行下一次的循环
-写注释的时候//后面加上一个空格。if后面小括号的前后加上一个空格
五 、数组
-数组长度：数组名.length
-想要输出多个变量，用逗号分隔即可
-新增数组元素：arr[4]=’’,直接追加索引号
-冒泡排序：一次比较两个元素，如果顺序错误就交换过来；外面的for控制趟数（length-1)；里面的for控制次数（length-1-i)
六、函数
-函数就是封装了的一段可以重复使用的代码块
-关键字function,其他与c语言一致
-声明函数的小括号里的是形参，调用小括号里的是实参
-形参与实参个数不匹配问题（实参>形参，取到形参的个数）；（实参<形参，多的形参被定义为undefined,最终结果为NaN;
-在实参个数不确定的情况下，可以不写形参，用arguments,这里面存储了所有的实参。这是一种伪数组，也有长度，也可以用索引号来引出数据
七、JS作用域
-特殊情况：没有声明直接出现在函数中赋值的变量也是全局变量
-全局变量只有在浏览器关闭的时候才会销毁，比较占用内存。局部变量使用之后就会销毁，比较节省内存
-作用域链：就近原则
-js引擎运行js分为预解析和代码运行两部分：预解析会将所有的var和function提取到“当前”作用域的最前面
-变量提升：提升变量的声明，但不提升赋值
-函数提升：提升函数的声明， 但不调用函数
八、对象
8.1 自定义对象
-字面值声明对象：{大括号}，里面放属性和方法，每一个之间都用逗号隔开
-调用属性：对象名.属性名 调用方法：对象名.方法名（）
-变量与属性的区别：变量是单独存在的，属性是寄托于对象之内的，是不用声明的；函数与方法的区分点也是如此
-new Object声明对象：var obj = new Object ()
-构造函数：将对象中相同的属性和方法抽象出来封装到函数中去
-遍历对象：for(var k in Star):输出k是属性名，输出Star[k]输出的是属性值
8.2 Math对象
-绝对值：Math.abs()
-取整：Math.floor(向下取整) Math.ceil (向上取整) Math.round(四舍五入取整，.5特殊，会往大了取)
-随机数：Math.random(),返回一个[0，1)之间的随机小数，并可借此完成随机点名
8.3 Date对象
-必须用new来先创建
-getFullYear(获取当前年) getMonth(获取当年月，输出的会比真实小1） getDate(获取当前日） getDay(返回星期几，0是周日）getHours(小时）
getSeconds(秒）getMinutes(分钟）valueOf getTime(距离1970年1.1过了多少毫秒）
8.4 数组对象
-Array.isArray(参数）要求IE9版本及以上 参数名instanceof Array
-push在后面添加，unshift在前面添加，返回值是数组的长度
-pop删除最后一个，shift删除第一个，返回的被删除的元素
-reverse（反转数组） sort(冒泡排序，后面还需要多加一个方法）
-返回索引号：indexof,lastIndexof(从后面开始查找）
-将数组转换为字符串：数组名.toString 数组名.join()
8.5 字符串对象、
-字符串的不可变性：字符串的内容是不可变的，看起来是更换了 数据，但其实地址已经改变了，内存中新开辟了一块内存空间
-charAt(index)返回索引号位置的字符 charCodeAt(index)返回ASCII码值
str[index]存在兼容性问题
-substr(开始的位置，截取多长），截取字符串
-替换字符：replace(‘要替换的字符’,‘替换成为的字符’) 字符转换为字符:split('分隔符‘）
-简单数据类型直接存储在栈里面，存放的是值。复杂数据类型是在栈里面放的地址，数据放在了地址指向的堆里面
第二阶段：Web API
一、
1.1 Web API
-Web API(js独有）:DOm+Bom
-API是一个接口，大多是方法，我们无需了解内部构造，只需要知道如何使用就可以，是针对于浏览器做交互效果
1.2 Dom获取元素方式 -
getElementByid
<body>
<div id="time">2022-1-3</div>
<script>
// 文档从上往下加载，script谢到标签下面
var timer = document.getElementById('time');
console.log(typeof timer);
// console.dir更好查看里面的属性与方法
console.dir(timer);
</script>
</body>
- getElementByTagName
<body>
<li>知否知否，应是等你好久1</li>
<li>知否知否，应是等你好久2</li>
<li>知否知否，应是等你好久3</li>
<script>
// 1、返回的是 获取过来的元素对象的集合 以伪数组形式存储
var lis = document.getElementsByTagName('li');
// 2、进行遍历
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
</script>
</body>
- getElementsByClassName+Selector
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ul>
<li>首页</li>
<li>产品</li>
</ul>
<script>
var boxs = document.getElementsByClassName('box');
console.log('box');
// 1、querySelector 返回指定选择器的第一个元素对象
var firstBox = document.querySelector('.box');
console.log(firstBox);
// 2、querySelector返回选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
</script>
</body>
-获取body元素（document.body) 获取html元素（document.documentElement)
1.3 事件
- 事件三要素
<body>
<button id="btn">唐伯虎</button>
<script>
// 事件三要素：事件源(谁被触发了) 事件类型(如何触发) 事件处理程序(做什么事,函数赋值)
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
- 执行事件步骤
<body>
<div>123</div>
<script>
// 1、获取事件源
var div = document.querySelector('div');
// 2、绑定事件
// div.onclick()
// 3、添加事件处理程序
div.onclick = function() {
console.log('被点击了');
}
</script>
</body>
- innerText与innerHTML
<body>
<div>显示当前系统时间</div>
<button>某个时间</button>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
//innerText不识别Html标签，不保留格式；
//innerHTML识别，保留格式,两者都能修改内容
btn.onclick = function() {
div.innerHTML = '<strong>2022</strong>-1-3';
}
// 显示盒子内的文本内容
console.log(div.innerHTML);
</script>
</body>
- 修改表单案例
<body>
<button>按钮</button>
<input type="text" name="" id="" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
// 不能使用innerHTML来修改，这是修改普通盒子里内容德
input.value = '被点击了';
// 点击后禁用
btn.disabled = true;
// this指向的是事件函数的调用者
this, disabled = true;
}
</script>
</body>
-lable和input经常在一起搭配使用，一个按钮多次点击切换可以使用flag，根据flag值的变化来实现点击效果的切换
-js修改CSS样式
<body>
<!-- css部分省略 -->
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
/* div.style里面的属性采取驼峰命名法 */
this.style.background = 'purple';
this.style.width = '250px';
// js改的生成行内样式，CSS权重更高
}
</script>
</body>
-获得焦点与失去焦点
<body>
<input type="text" value="手机">
<script>
var input = document.querySelector('input');
// 获得焦点事件，onfocus
input.onfocus = function() {
if (this.value == '手机') {
this.value = '';
}
}
// 失去焦点事件,onblur
input.onblur = function() {
if (this.value == '') {
this.value = '手机';
}
}
</script>
</body>
- className修改样式
<body>
<div>文本</div>
<script>
var div = document.querySelector('div');
// 通过className修改样式，适用于样式较多的修改
//但会覆盖掉原来的类名
div.onclick = function() {
this.className = 'change';
}
//如果不想被覆盖，就在这边写两个
this.className = 'first change';
</script>
</body>
-排他思想
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
var btns = document.getElementsByTagName('button');
// 使用for循环的方法循环绑定
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// 排他思想：先去掉其他人，再设置自己
for (var i = 0; i < btns.length; i++) {
// 这里不可以再用this,因为这里的调用者还是btns[i]
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
-onmouseover(鼠标经过） onmouseout(鼠标离开）
-获取、设置、移除属性值
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
// 设置元素属性值的两种方法
// 1、element.属性='值'
doiv.id = 'test';
// 2、element.setatribute=setAttribute('属性','值'),主要针对自定义属性
div.setAttribute('class', 'footer');
// 3、移除属性值
div.removeAttribute('index');
// 4、自带的用原来的方法就可以，自定义再用attribute
</script>
</body>
- tab栏切换
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
// 给表头的添加index自定义属性
lis[i].setAttribute('index', i);
// 排他思想实现表头的点击变化
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
// 获取被点击盒子的index,再一次进行排他思想实现切换
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
-自定义属性统一规范以data-开头,获取方式：element.dateset.自定义属性值（智能获取date-开头的)
- 节点操作
- 获取结点
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>
- 获取第一个节点与最后一个结点
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
- 父节点(使用很少)
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// nextSibling下一个结点，包含元素结点或文本结点
console.log(div.nextSibling);
console.log(div.previousSibling);
// nextElementSibling下一个元素结点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
</body>
-创建和添加结点
<body>
<ul></ul>
<script>
// 1、创建节点
var li = document.createElement('li');
// 2、添加结点 node.appendChild(child) node-父级
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3、添加结点
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
</script>
</body>
-删除结点：node.removeChild(child)
-阻止链接跳转：herf后面不用#，改用javascript:;
-复制结点
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 如果括号内为false或者空,则为浅拷贝,不拷贝节点内容
// 写true则为深拷贝
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
二、DOM高级事件部分
2.1方法监听注册事件
<body>
<button>方法监听注册事件</button>
<script>
// 同一个事件可以添加多个侦听器,优于传统的onclick
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert(22);
})
btn.addEventListener('click', function() {
alert(33);
})
</script>
</body>
2.2删除事件（解绑事件)
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
// 传统方式解绑
divs[0].onclick = function() {
alert(22);
divs[0].onclick = null;
}
// 事件监听方式解绑,fn后面不需要加括号
divs[1].addEventListener('click', fn)
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
</script>
</body>
2.3DOM事件流
// dom 事件流 三个阶段
// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
// 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click', function() {
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click', function() {
// alert('father');
// }, true);
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
2.4事件对象
<body>
<div>123</div>
<script>
// 事件对象有了事件才会存在，是系统自动创建的，不需要传参
// 事件对象：跟事件相关的一系列相关数据的集合，鼠标坐标等
// 事件对象可以自己命名，如event、e、evt
var div = document.querySelector('div');
div.onclick = function(e) {
console.log(e);
}
</script>
</body>
2.5 事件对象的属性
e.targer与this的区别：e.target返回的是触发的元素，this返回的是被绑定的元素
e.type:获取事件类型
e.preventDefalut:让链接不跳转，点按钮不提交、无反应
e.stopPropagation:阻止事件冒泡
2.6事件委托
<body>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script>
//事件委托核心原理：给父节点添加监听器，利用事件冒泡影响每一个结点
// 点击了li,冒泡到ul,ul有监听器，弹出对话框，不用挨个绑定li了，提高了效率
var ul = document.querySelector('ul');
ul.addEventListener('click', function() {
alert('弹出对话框');
})
</script>
</body>
2.7禁止选择
<body>
我是一段不愿意分享的文字
<script>
// 1、contextmenu 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2、禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
2.8鼠标事件对象
<script>
document.addEventListener('click', function(e) {
// 返回鼠标在可视区的xy,不随页面滚动变化
console.log(e.clientX);
console.log(e.clientY);
// *****返回鼠标在页面文档的xy,随页面滚动变化
console.log(e.pageX);
console.log(e.pageY);
// *返回鼠标在电脑屏幕的xy
console.log(e.screenX);
console.log(e.screenY);
})
</script>
mouseover:鼠标移动时间(跟随手表小天使案例)
2.9常用键盘事件
<body>
<script>
//keyup按键弹起时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//keydown按键按下时候触发
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
//keypress按键按下时候触发,不识别功能键，但搭配keyCode使用识别大小写
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
// 执行顺序：down>press>keyup
</script>
</body>
e.keyCode:获得按下键的ASCII码，只有press能识别大小写
第三章：BOM
3.1BOM概述
3.2窗口事件
<script>
// 当页面所有元素加载完成后，开始执行，这样js放哪里都不影响了
window.addEventListener('load',function(){
alert(22);
})
// 当页面所有DOM元素加载完成后，开始执行，不包含图片、flash、css，
// 执行速度较快
window.addEventListener('DOMContentLoaded',function(){
alert(33);
})
</script>
3.3调整窗口大小事件
<script>
// resize:窗口大小调整事件
window.addEventListener('resize', function() {
console.log('变化了');
})
// window.innerWidth:获取当前页面的大小
</script>
3.4定时器
<script>
// setTimeout(调用函数，延迟时间),延迟可省略;
function callback() {
console.log('爆炸了')
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
</script>
clearTimeout(timeoutID):去除计时器；setInterval(回调函数，间隔时间):每隔多长时间再调用一次；clearInterval:去除定时器
3.5JS同步与异步
js是单线程的；js同步（按顺序进行);js异步(同步进行)
3.6JS执行机制
3.7locationd对象常见属性与方法
search:锚点;href:网址；input要设置name才能提交
- navigator对象
根据访问设备的不同跳转到不同的y
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "../H5/index.html"; //手机
}
第四章 PC端网页特效
4.1 offset偏移
注：要以有定位的盒子为基准；返回的数值不带单位；
4.2京东放大镜效果案例
外嵌式js要先添加缓存事件
window.addEventListener('load', function())
让遮罩层跟着鼠标移动`
// 获取鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 让鼠标位于遮罩层中心处去带着移动
mask.style.left = x - mask.offsetWidth / 2 + 'px';
mask.style.top = y - mask.offsetWidth / 2 + 'px';
4.3client系列
与offset系列的不同就是含不含边框
立即执行函数`
// 立即执行函数，无需引用，立即执行
// 创建了一个独立作用域，避免了名称冲突的问题
// 1、(function(){})()
// 2、(function(){}())
4.4元素滚动scroll系列
//如果是获得元素的被卷去元素用的element.scollTop.如果是页面的用window.pageYOffset
4.5三大系列总结
offset系列区别于另外两者是带边框；client区别于scroll是不包含超出部分的大小
4.6mouseover与mouseenter区别
相同点：都是鼠标碰上触发
第五章：动画
5.1d
扫一扫
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
