JavaScript基础

一、JavaScript

客户端脚本语言，用来实现交互效果

组成：

ECMAscript基础语法

（变量、数据类型、运算符、函数、对象、流程控制、数组）

BOM（浏览器对象模型）（window对象、地址对象、历史记录对象）

DOM（文档对象模型）

（操作内容、操作属性、添加事件）

作用：

数据验证（用户名、密码）
操作页面的内容和属性
动态的创建页面元素
模拟动画
ajax（给后台一个地址，实现动画）

特征：

基于对象和事件驱动的松散型、解释型语言

引入：

外部引入方式


<script src="index.js"></script>

嵌入式

在html页面中嵌入script标签对

事件后(鼠标单击)


<div onclick="alert(1)"></div>

注意：

外部js文件中不写script标签对
嵌入式js中不写src属性
不管以哪种方式引入的js文件都是相互关联的

二、调试工具：

警示框


alert（1）；弹出框

输出框


console.log("输出到控制台"）；

输出到页面中、识别标签对


document.write（"<h1>输出到页面</h1>"）

输入框


prompt

confirm 取消确定

注释：

单行注释：/ /
块级注释：/* */

变量：

一个容器，用来存储数据。用var声明

命名规范：

数字、字母、下划线、$

不能以数字开头，后面是数字、字母、下划线、$的拼接
区分大小写
不要以关键字（js中已经用到的）命名
不要以保留字（js中将会被用到的）命名
命名有意义
首字母大写Object Array String
驼峰命名法 getElementByld

三、声明与赋值：

先声明后赋值
声明的同时负值
一次性声明多个变量并赋值，用逗号隔开
一次性先声明多个变量，再赋值

注意事项：
- 先声明后调用
- 变量的默认值为undefined
- 新值覆盖旧值
- 能够重复声明
- 不用var关键字声明的变量，赋值了，不会报错，会成为全局变量。
- 不用var关键字声明的变量，没有赋值，会报错
- 先访问后声明输出undefined，预解析（var、function函数优先级高）、解析

四、数据类型：

按照数据在内存中的存储位置进行划分

基本数据类型：存放在栈区

undefined 声明但未定义 undefined == null
null
number


NaN（not a number）:期望返回一个数值，但无法返回，返回NaN   NaN！=NaN

string
boolean

引用数据类型：

指针存放在栈区，内容存放在堆区

object

null、Array、对象返回object，函数返回function

typeof：

检测变量数据类型

数据类型	值	typeof
undefined	undefined	undefined
number（数值型）	正数、负数、小数、二进制、八进制、十六进制、特殊值、科学计数法	number
string(字符串型)	用单双引号包裹（单双引号嵌套）	string
boolean（布尔型）	true真 false 假	boolean
null	null	object

五、运算符：

算术运算符：+ - * / % ++var var++ --var var--

四则运算，无法返回数值，返回NaN


+   -   *   /    %
+ 加法：俩个操作数都是数值型、拼接：其中一个数是字符串
++var    var++
++在前，先算++，再算其它语句，++在后，先算本行中的其他语句，再算++

关系运算符：

< > >= <= == ===全等于（比较：数值数据类型）！= ！==


>返回布尔值
如果俩个操作数都是数值，按照数值大小比较
如果俩个操作数都是字符串，按照ASCII表按位比较
如果俩个操作数是数字型字符串，按照ASCII按位比较
如果操作数一个是数字，一个字符串，努力将字符串转换成数字，转换成功正常比较，不成功返回false。
true==1    false==0   undefined==null
==数值相同；===数值相同，数据类型相同

赋值运算符：

+= -= *= /= %=var a=5;a+=4; //a=a+4

逻辑运算符：短路

测定值与变量之间的逻辑关系的

0、false、null、undefined、空字符串“”、NaN ——都是假的

&& 与

同真为真、返回第一个假值，如果没有假值，返回第二个真值

|| 或

同假为假、返回第一个真值，如果没有真值，返回第二个假值

！非

取反

真值表：

A	B	A&&B	A\|\|B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true

三元运算符：


表达式？ 结果1：结果2；

判断表达式的真假，表达式结果为真，执行结果1，为假，执行结果2

特殊运算符:


,  ()函数调用；提高优先级

一元运算符：


typeof 检测变量的数据类型
new实例化对象
delete删除对象的属性
+  -

六、流程控制：

代码的执行顺序

顺序结构
分支结构（选择结构）
循环结构

分支结构：

按照满足的条件，执行一定的代码

单分支


if(条件){
  满足条件时执行的语句
}

双分支？：


if(条件){
  满足条件时执行的语句
}
else{
  不满足条件时执行的语句
}

多分支

if(条件1){
  满足条件1时，执行的语句
}else if（条件2）{
  不满足条件1,满足条件2时执行的语句
}else{
  以上条件都不满足时执行的语句
}

嵌套分支


if(){
  if()else()
}else{
  if()else()
}

switch


switch(变量){
     /值为变量能够取到的值，数据类型要相同/
     case 值1：满足值1时执行的语句；break；
     case 值2：满足值2时执行的语句；break；
     case 值3：满足值3时执行的语句；break；
     default:以上情况都不满足时执行；
}

注意：

if中的条件不能重复
情况有限的时候用switch

循环结构

满足一定条件，重复执行一段代码

for循环：


for（初始值；条件；步进值）{
  循环体；
}
执行顺序：先判断初始值，再判断是否满足条件，执行循环体，执行步进值

while循环


while(条件){
  循环体；
}

do...while循环：


do{
  循环体
}while(条件)

跳出循环的语句：

continue 终止本次循环，后面变量满足条件，仍会执行

break 终止整个循环

七、数组：

存储一系列相关数据

声明：

var arr=[]

声明的同时赋值：


var arr=[12,24,36];

先声明后赋值：


var arr=[]
arr[0]=12;arr[1]=24;arr[2]=36;

长度：

arr.length

访问：

arr[下标] 通过下标访问数值元素范围0—arr.length-1

遍历：


for(var i=0;i<arr.length;i++){
  arr[i];
}

浅拷贝：传址


var arr1=arr;

深拷贝：传值


for(var i=0;i<arr.length;i++){
  arr1[i]=arr[i];
}

注意事项：

数组里面的数据可以是任意数据类型
数值可以越界访问
数值元素的默认值为undefined
数组下标的范围0—arr.length-1

去空：


arr.push()在数组的末尾插入一个元素

二维数组：


var arr=[[1,2,3],[1,2,3],[2,3],[1,2]];
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
       arr[i],[j]

    }

}

八、函数

作用：把功能封装成一个代码块，能够重复调用。所有的普通函数this都指向window

定义函数：

1、利用function关键字 可以先调用后定义


function  函数名（[形参1][形参2]...）{
  函数体；
  [return  返回值；]
}

2、利用变量的方式（字面量） 先调用后声明会报错


var Variable=function([形参1]，[形参2]...字符串){
       函数体；
     [return  返回值；]
}
let aa=new function=("a","b","alert(a+b)")
aa(123,456);

3、对象方式

this指针：


箭头函数（）=>{}       this指向  从上下文获取
function函数中this指向window
方法中的this指向调用对象

调用函数：

函数名（）
变量名（）
自调用

(function(num){

alert(num)

})(123)

参数：

作用：使函数更加灵活

形参：

定义函数时，写在括号中的叫形参，作用接收实参

实参：

调用函数时，写在括号中的叫实参，作用给形参传值

参数传递：

从左到右一一传递
参数可以是任意数据类型
形参=实参，一一对应
形参>实参，多余形参的默认值为undefined
形参<实参，全部实参由arguments对象接收

arguments:

用来接收全部实参的详细信息
在函数创建时，内部会自动创建arguments对象，只能在函数内部访问
arguments.length arguments[i] 遍历for

剩余参数：es6

声明：...rest
arguments类似数组，rest是一个数组
arguments接收全部实参，rest接收剩余实参

返回值：

return 终止函数，剩余的语句不执行
返回值可以是任意数据类型
函数内部可以写多个return分支，但最终只执行一个

参数默认值：

分支结构
三元运算符
逻辑或
形参默认值 es6

高阶函数：

参数或返回值是另外一个函数

内置顶层函数：

作用：进行数据类型转换

俩类：隐式数据类型转换：运算符、if（）、while（）

强制数据类型转换

1、escape（“ 编码”）对字符进行编码

2、 unescape（“编码”）对字符进行解码

3、Number：将任意数据类型转换成数值型；

console.log（Number（undefined））；返回NaN

console.log（Number（true））； 1

console.log（Number（false））； 0

console.log（Number（null））； 0

console.log（Number（“ ”））； 0

console.log（Number（"111"））；数值

console.log（Number（”1.20000“））；数值

console.log（Number（“abc”））；返回NaN

console.log（Number（“113ABC”））；返回NaN

console.log（Number（111））； 111

console.log（Number（0x111））；十六进制

4、String：将任意数据类型转换成字符串

5、Boolean （0、false、null、undefined、空字符串“”、NaN）是假的，其余都是真的

6、parseInt：将字符串转换为整形

console.log(parseInt("123"));

console.log(parseInt("abc")); NaN

console.log(parseInt("123ab345")); 第一个数值到非数值

console.log(parseInt("-123ab345")); + - 空格都可以

7、parseFloat:将字符串转换为浮点型；

console.log(parseFloat(12.300000)); 12.3

console.log(parseFloat(12.3.4)); 12.3

console.log(parseFloat("abc")); NaN

console.log(parseFloat("12.4add")); 12.4

8、isNaN（）：是否是非数值型，是非数值型true，不是非数值型false

console.log(isNaN（true）); false

递归函数：

自己调用自己

什么时候用：当你发现你接下来要做的事情是在正在做的事情的时候

回调函数：

将函数的指针作为参数传递给另一个函数，当指针调用函数时，叫做回调函数。

作用域：

变量起作用的范围

全局作用域
局部作用域
块级作用域

全局作用域

在代码的任意位置都能访问到的变量拥有全局作用域

定义在函数外面的变量
变量声明不用var关键字，但是赋值，变量为全局变量

局部作用域：（局部变量会优先于全局变量）

在函数内部用var关键字声明的变量拥有局部作用域

形参具有局部作用域

块级作用域： es6 {}

{} let const 写在花括号内

let：

声明变量，与var一样，识别块级作用域
不存在变量提升（先访问后声明）
不能重复声明变量

const：

声明常量，声明的同时赋值，识别块级作用域 es6里面
不存在变量提升，不能重复声明

作用域链

调用的时候：自己—一级一级往上找

闭包：

function aa(){
  let num=123
  function bb(){
    console.log(num)
  }
  return bb
}
bb=aa()
bb()

当两个函数发生嵌套关系，内层函数使用外层函数变量，在外部调用内层函数时，此刻就发生了闭包

对象：

类：具有相同特征对象的抽象的集合
对象：具体的某个对象个体，属性与方法的集合
属性：用来描述对象的特征
方法：用来描述对象的功能

声明对象：

利用构造函数声明对象；

function Computer(size,color,price){
  this.size=size;
  this.color=color;
  this.price=price;
  this.code=function(){
    console.log("敲代码")；
  }
  this.play=function(){
    console.log("打游戏")；
  }
  
}
实例化对象  let apple=new Computer（）
es6  console(`${this.name}玩`)  模板字符串  `${ }`  可以格式化

json对象

let apple={
  price:1000,
  size:15,
  code:function(){
    console.log("敲代码")
  }
}
console.log((apple.size));

class 类

class  Computer{
  // 构造函数
  constructor(){
    this.size=15;
    this.price=1000;
  }
  play(){
    console.log(输出内容)
  }
}
let obj=new Computer();

增删改访问：

增加：对象.属性名=属性值
删除：delete 对象.属性名
修改：对象.属性名
访问：对象.属性名|| 对象.方法名（）

遍历；

for(let i in obj){
  i;  //属性名
  obj[i]； //属性值    console.log((obj[i]));
}

constructor:

对象的属性，返回该对象的构造函数。 apple（函数名）.constructor 访问

instanceof:

访问（对象 instanceof 构造函数）判断对象的构造函数返回值true false

prototype:

构造函数的特有属性。数据格式为json格式

解决构造函数的属性与方法不能共享，浪费内存的问题

Person.prototype 原型对象

Person.prototype={
  height:180,
  play:function(){ 
  
  }
}

`proto`:

每个对象都有__proto__属性
对象的__proto__属性指向其构造函数的prototype（原型对象）
原型链，通过原型链实现继承
继承，自己—原型对象—原型链顺序

Math对象：

属性：

Math.PI

方法：

Math.max()

Math.min()

Math.abs() 绝对值

Math.ceil() 向上取整

Math.floor() 向下取整

Math.sqrt() 开平方

Math.pow() 次幂

Math.round() 近似数，四舍五入

Math.random() 取随机数 0-1 不能等于1

数组对象：

属性：

constructor
__proto__
length 访问与修改数组长度

方法：

push（）向数组后面添加一个或多个元素返回新数组的长度，对原数组产生影响
unshift() 向数组前面添加一个或多个元素返回新数组的长度，对原数组产生影响
pop() 删除数组的最后一个元素，返回被删除的元素，对原数组产生影响
shift（）删除数组的第一个元素，返回被删除的元素，对原数组产生影响
splice（index，length，value1，value2.........）

index：下标 length：删除长度 value：增加的元素

arr.splice(2,2);    //删除
arr.splice(2,0,"a");    //增加
arr.splice(2,2,"a");     删除增加

连接：

concat（）数组连接，返回连接的数组，不会影响原数组

反转：

reverse（）会对原数组产生影响

排序：

sort（）

arr.sort();   //默认情况，按照ASCII码表
arr.sort(function(a,b){
  return a-b;     //从小到大
})

arr.sort(function(a,b){
  return b-a;     //从大到小
})

拼接：

join（）将数组转换成字符串

查找：

indexOf（）从前往后查找元素首次出现的位置，找见返回下标，找不到返回-1

lastIndexOf（）从后往前查找元素首次出现的位置，找见返回下标，找不到返回-1

includes() 查找数组中是否有指定的元素有返回true 没有返回false
filter（）一个集合到另一个更小集合的映射，回调函数

arr.filter(function(value,index){
  return value>3;
})

map() 一个集合到另一个集合的映射。回调函数

arr.map(function(element,index){
    return element*2
 })

遍历：

forEach()

forEach(function(value,index){

console.log(value);

})

截取：

slice(start,end) 从开始位置到结束位置，但不包括结束位置，

如果不写结束位置，会截取到数组最后

-1代表最后一个元素

字符串对象：

属性：

constructor
__proto__
length 访问字符串长度

方法：

查找：

charAt（i）查找指定位置的字符
charCodeAt(i) 指定位置的字符对应的ASCII码值
string.fromCharCode() 查找指定ASCII码值对应的字符
indexOf （str1）从前往后查找元素首次出现的位置，找见返回下标，找不到返回-1
lastIndexOf（str1）从后往前查找元素首次出现的位置，找见返回下标，找不到返回-1
includes（str1）包含返回true 否则false

替换：

replace(str1,str2) 用str2替换str1，只能替换首次出现位置的str1

重复：

repeat（num） num 重复的次数

转换：

split（指定的字符，length转换后的数组长度）按照指定字符串转换为数组
toUpperCase() 转换成大写
toLowerCase() 转换成小写

截取：

slice(start,end)
subString(start,end) 不支持负数
substr(start,length) 从指定位置开始截取指定长度的字符

BOM（浏览器对象模型）

负责窗口与窗口之间的通信，window对象是其核心对象

window对象：

window.history
location
dom
screen
frames
navigation

属性：

窗口大小

window.innerWidth    获取浏览器宽度     ie8级以下不识别
window.innerHeight    获取浏览器高度
document.documentElement.clientWidth      ie8级以下识别
document.documentElement.clientHeight

浏览器到窗口的距离

window.screenLeft   浏览器距窗口左边的距离
window.screenTop   浏览器距窗口上边的距离

方法：

alert()
prompt
confirm
open(路径，name可不写，新窗口属性)
close（）
setInterval(fn,1000) 间隔一定的时间重复不断执行一个函数时间ms
clearInterval(变量t) 清除时间函数 let t=setInterval(fn,1000)
setTimeout(fn,1000) 间隔一定的时间只执行一次函数
clearTimeout(t) 清除时间函数

window.onload=function(){} 页面加载

document.getElementById("idname")  获取元素

time(函数名).innerHTML    获取内容

password.value   获取表单的值

history对象：

属性：

history.length 历史记录长度

方法：

history.forward() 前进
history.back() 后退
history .go(0) 刷新

location对象：（地址对象）

属性：

href：访问或设置当前页面的路径
host：主机名与端口号
hostname：主机
port：端口号
protocal：协议
pathname：路径
hash：片段标识符
search：问号后的字段

方法：

location.reload() 重新加载
location.replace(“ ”) 括号中的页面替换当前页面不会增加历史记录
location.assign(" ") 括号中的页面替换当前页面会增加历史记录

DOM(文档对象模型)

获取元素：

document.getElementById(idname);

类名 html集合，通过下标访问

document.getElementsByClassName(classname);

标签名 html集合，通过下标访问

document.getElementsByTagName(tagname);

获取选择器对应的第一个元素

document.querySelector(选择器)；

获取选择器对应的所有元素

document.querySelectorAll(选择器)；

操作样式：

设置：

obj.style.css=“ 新样式” 行内样式
obj.className=" " 批量设置样式—类名
obj.classList.add() 添加 remove()移除 toggle（）切换
obj.id=id名批量设置—添加id

获取：

obj.style.cssstyle（width）行内样式
getComputedStyle(obj,null).cssstyle 通用方式

操作属性：

标准属性

访问：obj.attr 设置：obj.attr=value;

非标准属性：

obj.setAttribute(name,value) 设置非标准属性

obj.getAttribute(name) 获取非标准属性

操作内容：

innerHTML 识别标签

forEach(function(value,index){
  	value.innerHTML=`<h1>第${index}个li</h1>`
})

innerText 不识别标签

 forEach(function(value,index){
  	value.innerText=`第${index}个li`
})

元素的尺寸和位置

尺寸：

offsetWidth 获取元素的真实宽度 width+padding+border
offsetHeight 获取元素的真实高度 height+padding+border
offsetTop 获取元素距有定位元素左上角垂直方向的距离
offsetLeft 获取元素距有定位元素左上角水平方向的距离

作为子元素找父元素，从外边框开始。 作为有定位属性的父元素到内边框。

scrollTop 获取具有滚动条的元素滚动时，垂直方向的距离
scrollLeft 获取具有滚动条的元素滚动时，水平方向的距离

位置：

节点的信息：

节点信息	名字	类型	值
元素节点	大写的标签名	1	null
属性节点	小写属性名	2	属性值
文本节点	#text	3	文本
注释节点	#comment	8	注释内容
文档节点	#document	9	null

节点分类：文档节点、元素节点、属性节点、文本节点、注释节点

节点的属性：

console.dir(box.childNodes)  box的子节点
console.dir(box.firstchild) box第一个子节点
console.dir(box.lastchild) box最后一个子节点
console.dir(box.firstElementChild) box第一个子元素节点
console.dir(box.lastElementChild)box最后一个子元素节点
console.dir(box.nextSibling) box下一个兄弟节点
console.dir(box.previousSibing) box上一个兄弟节点
console.dir(box.nextElementSibing) box下一个兄弟元素节点
console.dir(box.previousElementSibing) box上一个兄弟元素节点
console.dir(box.attributes) box的属性节点
console.dir(box.parentNode) box的父节点
console.dir(box.parentNode.parentNode) box的父节点的父节点

节点的方法：

创建属性节点:let  attr=document.createAttribute("href")
设置属性节点的值  attr.nodeValue="http://www.baidu.com"
设置属性节点   a.setAttributeNode(attr)  	
创建元素节点 
let  a=document.createElement("a")
let  text=document.createTextNode("百度")
创建文本节点：let text=document.createTextNode(`这是文本${ num}`)
创建注释节点：let comment=document.createComment(`这是注释${num}`);

事件：

浏览器侦测到的用户的一些行为，或者是浏览器的一些行为

事件：

事件源：谁触发事件

事件处理程序：触发事件后执行的代码程序

事件的分类：

鼠标事件：onclick  单击   ondblclick  双击  onmouseenter 移入  onmouseleave移出  onmouseover移入
onmouseout移出  onmousemove 移动  oncontextmenu 右击  onmousewheel鼠标滚轮  onmousedown鼠标按下
nomouseup鼠标抬起
键盘事件：onkeydown键盘按下  onkeyup键盘抬起   onkeypress 键盘按下（shift,alt,ctrl等一些功能键不起作用）
表单事件：oninput输入事件  onblur失去焦点  onfocus 获取焦点 onchange 值发生改变并且失去焦点  
onsubmit表单提交
其他事件：onscroll 滚动事件  onresize 窗口尺寸发生改变 onload 加载事件

事件对象：用来保存事件在触发时的信息

W3c chrome firefox 事件处理程序的形参中

ie window.event中

兼容 event=event||window.event

事件对象属性：

鼠标事件
screenX   距离屏幕左上角X轴的长度
screenY   距离屏幕左上角Y轴的长度
clientX   距离浏览器左上角X轴的长度
clientY   距离浏览器左上角Y轴的长度
offsetX   距离事件源左上角X轴的长度
offsetY   距离事件源左上角Y轴的长度

键盘事件：

属性：

keyCode  键盘码
altKey  是否按下了alt
shiftKey  是否按下了shift
ctrlKey  是否按下了ctrl
code 键名
key  键名

移动端鼠标事件：

ontouchstart 按下
ontouchmove  移动
ontouchend   抬起

事件流：

当触发一个容器的事件时，这个容器以及整个文档都会相应触发。

事件相应的阶段：

冒泡事件：从具体的元素开始到不具体的元素

捕获事件：从不具体的元素开始到具体的元素

添加事件：box.addEventListener ("click"事件名,function()事件处理程序{}，事件类型false(冒泡) true（捕获) ）

阻止事件流： w3c中 event.stopPropagation() ie 中 event.cencelBubble=true 只能阻止冒泡

阻止浏览器的默认行为：

右击出现菜单栏、a链接可以跳转、表单中回车会提交表单

w3c中 event.preventDefault()

ie中 event.returnValue=false

事件委派：

event.target：事件的目标对象

日期对象：

let now=new Date() 当前日期

let date1=new Date("2018/8/8 12:00:01")

let date2=new Date("12:00:01 2018/8/8 ")

let date3=new Date(" 2018,0,5,12,1 ") 年月日时分秒

设置时间和获取时间：


获取：格林尼治时间
console.log(now.getFullYear()) 获取年
console.log(now.getMonth()) 获取月
console.log(now.getDate()) 获取日
console.log(now.getHours()) 获取时
console.log(now.getMinutes()) 获取分
console.log(now.getSeconds()) 获取秒
console.log(now.getMilliseconds()) 获取毫秒
console.log(now.getTime()) 获取从当前时间到1970.1.1凌晨    毫秒数
console.log(now.getTimezoneOffset()) 获取时区的时间差

console.log(now.getUTCFullYear()) 获取世界协调时间

jQuery:

jQuery编写宗旨：write less,do more

作用：优化DOM操作，事件，动画，重新封装了Ajax；

编程特点：隐式循环，链式调用

jQuery核心函数：jQuery() $(“ ”)

第一种用法：传入函数

作用相当于 window.onload但实际上是document添加了onready事件

第二种用法：传入选择器

第三个用法：传入DOM对象

作用：将DOM对象封装为jQuery对象

$(function(){
     alert("")
})
$().ready(function(){
      alert("")
})
$(document).ready(function(){
      alert("")
})

第四种用法：字符串形式的标签（创建元素节点）

样式：$(".box:first-child").css("background","red") 获取每一个的第一个（俩个盒子里放同样的内容）

$(".box:first").css("background","red") 只获取第一个

class方法：e.addClass()添加类名 e.removeClass()移除类名 e.toggleClass()动态的添加类名

过滤：

eq（1）从0开始     first    last
hasClass(class)   是否有某个类名，有true  没有false  $(".box").css("box1") 
is() 至少有一个满足条件     $(".box").css(".box1") 
filter()   过滤出一个元素
map() 
has()  内容
not()  排除
slice(start,[end]) 开始到结束下标

map:

$(".box").map(function(){
   if(this.innerText==1){
     $(this).css("background","red")
   }
})

css(样式名，样式值)
css（{
  样式名：样式值，
}）

节点的尺寸信息：

e.width()内容宽度
e.height（）
e.innerWidth()内容宽度+padding
e.innerHeight()
e.outerWidth() innerWidth+border
e.outerHeight()

节点的位置信息：

e.offset()  相对于当前视口的距离
e.position()  相对于定位元素的距离
e.scrolltop() 元素卷起来的高度（距头部滚动条的距离）
e.scrollLeft()

动画效果：

animate({},时间，linner，function) 添加动画
finish（）动画完成，立马完成全部动画
stop（true，true）动画停止
第一个参数（默认），停止当前动画队列
第二个参数（停止），并且完成当前正在进行的一个动画

节点：元素节点、属性节点、文本节点

$("<div>")
$("<div></div>")
$("<div>内容</div>")
插入节点$("<div>").css().appendChildto($("body"))  
append（）在元素中插入    appendTo插入到某个元素
删除节点
remove删除之后添加的事件不会执行
detach删除之后添加的事件仍会执行

e.attr("属性名"，"属性值")；
e.attr({
  属性名：属性值，
})
e.removeAttr("属性名")
e.prop("属性名"，"属性值");
e.prop({
  class:"box",
  id:"box1",
})
e.removeProp("属性名")
e.data("数据名"，"数据")
e.removeData("数据名")

e.html("内容")
e.html("")移除
e.text("内容")
e.text("")移除

多库共存问题：


通过jQuery自带的noConflict函数将$或者jQuery映射回给之前使用过的$和jQuery对象的js类库
$.noConflict();
(function($) { 
  $(function() {
    $(".box")
  });
})(jQuery);
let j = jQuery.noConflict();
j ($(".box")).css("")

事件：

event.offsetX 距离事件源
event.offsetY
event.pageX  距离视口
event.pageY
event.screenX 距离屏幕
event.screenY
event.isPropagationStopped 是否阻止事件流  返回布尔值
event.stopPropagation  阻止事件流
event.isDefaultprevented  是否阻止的浏览器默认行为
event.keyCode 键盘码
event.altKey 是否按下了alt

Ajax:

异步请求：页面正常运行，不刷新，另行开辟空间，发出请求，从后台拿到数据进行渲染


1、创建异步请求
2、let xhr=new XMLHttpRquest()
设置请求方式
xhr.open（"post"，"sercer.php",true）或者xhr.open（"get"）post比get容量大
请求方式，请求地址，选择异步还是同步true   false
3、发送请求
xhr.send()
4、检测请求状态
xhr.onreadystatechange=function(){
  if(xhr.readyState==4){
        if(xhr.status>=200&&xhr.status<300||xhr.status==304){
            5、处理返回数据
            console.log(xhr.response)
        }
  }
}
304（本地缓存）   400（请求错误）


$("input").change(function(){
    
})
$.ajax({
  url:"/myajax/"server.php //请求地址
  type:"get", //请求方式
  data:"username="+val或者  发送数据
  data:"username=小白&password=123456"
 json格式 data{
   username:"小白"，
   password："123456"，
 }
  success:function(e){  //请求成功之后的处理程序   
    console.log(e)
    $("button").text(e)
  }
})


同源策略
解决方式 jsonp
服务器代理
$.ajax({
  url:"https://www.toutiao.com/stream/widget/local_weather/city/",
  type:"get",
  dataType:"jsonp",  返回数据类型
  success:function (e) {
     console.log(e);
  }
})

正则表达式：

用来描述或者是匹配一系列符合某种规则的字符串的表达式

JavaScript中

let reg=new RegExp("正则表达式"，"模式")  //正则对象  模式可有可无
模式：
    i不区分大小写
    g全局
    m支持换行
正则对象常用的方法：
reg.test(str) 匹配str，如果成功返回true，否则false
reg.exec(str) 匹配str，如果成功返回拥有特定属性的数组，否则null
 let phone=["116543131","45483444545","17603514842"]
 for(item of phone){
    reg.test(item)
 }

正则表达式：

原子：最小的单元

元字符：特殊的原子

\w字母数字下划线
\W 除了字母数字下划线
\d 数字
\D 除了数字
\s 空格
\S 除了空格
. 所有字符

let reg=/\w/
console.log(reg.exec("字母数字下划线"))
let reg=/\W/
console.log(reg.exec("除了字母数字下划线"))

原子表：

[a-c]   a-c的字符
[a-zA-Z] 
[0-9]
-[0-9]  负数
[a-zA-Z0-9]
[^a-c] 除了a-c的字符

let reg=/[a-c]/
console.log(reg.exec(""))  只能匹配一位

数量：（贪婪）

+ 1个或多个
* 0个或多个
？0个或1个
{5}只能五个
{7,13}  7个到13个
{6,} 不少于6位
吝啬
+？ 1个或多个
*？ 0个或多个
？？0个或1个
{5}？只能五个
{7,13}？  7个到13个
{6,}？ 不少于6位

分组：

分组() 或| 取消分组（？：）

let str2="<div>西虹市首富</div>"
let reg2=/<(div).*<\/\1>/
console.log(reg2.exec(str2))
取消分组
let str2="<div>西虹市首富</div>"
let reg2=/？：<(div).*<\/\1>/  div可以
console.log(reg2.exec(str2))

正则边界判断：

^  以什么开始  $ 以什么结束   \b单词边界   \B非单词边界

let reg=/^[a-zA-Z]\w{6,}[a-zA-Z]$/
console.log(rec.exec("abde1232546afda"))

let reg=/s\B/ 排除以s结尾不要结尾

let reg=/\Bs/ 排除以s开头不要开头

let reg=/\Bs\B/ 排除以s开头，以s结尾取中间

正则的应用：

string.split() 截取
string.search() 查找
string.replace() 替换

let str="山西、陕西、上海、海南、河北、山西"
console.log(str.search(/河北/))
console.log(str.replace(/山西/g,"sx"))
console.log(str.replace(/山西|陕西/g,"sx"))

posted @ 2019-02-24 15:32 一个双鱼座的程序员阅读(107) 评论(0) 收藏举报

刷新页面返回顶部

JavaScript基础

一、JavaScript

组成：

作用：

特征：

引入：

二、调试工具：

注释：

变量：

命名规范：

三、声明与赋值：

注意事项：

四、数据类型：

基本数据类型：存放在栈区

引用数据类型：

typeof：

五、运算符：

算术运算符：+ - * / % ++var var++ --var var--

关系运算符：

赋值运算符：

逻辑运算符： 短路

三元运算符：

特殊运算符:

一元运算符：

六、流程控制：

分支结构：

单分支

双分支 ？：

多分支

嵌套分支

switch

注意：

循环结构

for循环：

while循环

do...while循环：

跳出循环的语句：

七、数组：

声明：

声明的同时赋值：

先声明后赋值：

长度：

访问：

遍历：

浅拷贝：传址

深拷贝：传值

注意事项：

去空：

二维数组：

八、函数

定义函数：

this指针：

调用函数：

参数：

形参：

实参：

参数传递：

arguments:

剩余参数：es6

返回值：

参数默认值：

高阶函数：

内置顶层函数：

作用：进行数据类型转换

递归函数：

回调函数：

作用域：

全局作用域

局部作用域： （局部变量会优先于全局变量）

块级作用域： es6 {}

let：

const：

作用域链

闭包：

对象：

声明对象：

增删改访问：

遍历；

constructor:

instanceof:

逻辑运算符：短路

双分支？：

局部作用域：（局部变量会优先于全局变量）

`proto`: