JS笔记

最新推荐文章于 2018-09-06 16:19:45 发布

Quietw

最新推荐文章于 2018-09-06 16:19:45 发布

阅读量191

点赞数

分类专栏：前端 Javascript HTML/CSS

本文链接：https://blog.csdn.net/Mr_Quiet/article/details/82080520

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML/CSS

6 篇文章 0 订阅

订阅专栏

Javascript

5 篇文章 0 订阅

订阅专栏

字符串操作语法都是：str.方法名(参数1，参数2...)

本名叫ECMAScript，正式场合用ES；
大小写敏感，常用驼峰发命名；
语句以分好结尾；
共有5五种基本数据类型，一种所谓的对象类型（number，string，boolean，Array（不是基本数据类型），undefined&null，object）；
字符串可以是任意的字符，除了定义时的引号外。在json解析中，引号必须是单引号，所以js中推荐字符串的引号也是单引号；
undefined类型，当变量类型未知或发生类型错误时，变量类型为undefined类型，相当于充当占位符；
null代表对象值为null，不占内存；
object对象类型，由大括号括起来，内部由键值对构成，由逗号分隔；不准给变量名取name，name是关键字；

注释：

/**
 * 文档注释，写在外部脚本函数之前
 * 求和函数，参数num1，num2
 */
function getnum(num1,num2){
	return num1 + num2;
    var a = 1;//单行注释，写在当前语句末尾
    /*多行注释，写在一段代码之前*/
    var b = 1;
    var c = 1;
}

除加号外的基本数字运算，在运算过程中，如果运算符两段存在一个非数字类型数据，则现将这个数据转换成数据类型，在进行计算，如果无法转换，返回计算结果NaN；
自增自减运算符，在运算子之前，先给本身运算，再参与当前语句的执行；在运算子之后，则先执行当前语句，再给本身运算；
三目运算符：a?b:c，a为真返回b，a为假返回c；
if语句大括号后不加分号；
在JS中字符串的转义字符是指反斜杠（\），反斜杠+某些特殊字符构成的结构能实现一些特殊功能；
js中通过函数来模拟类，通过new+函数调用来构成一个对象，称对象实例化；

字符串

字符串需要在一行内定义，如需要多行，在末尾加个反斜杠，或者通过加号连接；
charAt(i)，charCodeAt(i)，返回指定位置字符串和Unicode编码，等同于[i]；
String.fromCharCode(i)，返回指定Unicode编码的字符，第33～126号(共94个)是字符，其中第48～57号为0～9十个阿拉伯数字；65～90号为26个大写英文字母，97～122号为26个小写英文字母；
concat()，将两个字符串拼接在一起，语法str1.concat(str2,str3...)；
str.substring（a,b）包括a，不包括b，允许参数颠倒，不会对原来字符串造成影响；
str.substr(pos,length)，不允许参数颠倒，不会对原来的字符串造成影响；
str.slice相当于简化版的substring，不允许参数颠倒，如果前面的参数大于后面的参数则返回空；
字符串三个方法只写一个参数，则截取全部，标准方法中不允许存在负数；
indexOf(‘str’,startIndex)，查找指定字符串第一次出现的下标，失败返回-1；
lastIndexOf()，查找指定字符串最后一次出现的下标；
str.strim()，去除字符串首尾空格，不会对原来字符串造成影响；

str.replace(oldstr,newstr)，对原字符串不会造成影响，一次只能替换一个，替换多个依赖循环或正则表达式；

var str = 'xiaohong,xiaolv'
console.log(str.replace('xiao','wang'))

while(str.indexOf('xiao') != -1){
	tr = str.replace('xiao','wang')
}
console.log(str)

数组

数组本质是object对象类型；
数组里的数据在内存中存储的位置不连续的，但是下标是连续的；
可用for in 对数组中的元素进行遍历，index代表每次遍历时数组的下标，而不是元素；
```
var arr = [1,3,'a','b','d'];
for(var index in arr){
	console.log(arr[index]);
}
```
数组的length值可读可写，小于本身的长度，多余的会被删除；大于本身的长度，新增数据，以undefined表示；
数组方法：
Array.isArray(arr)，判断是否是数组，视为typeof的补充；
valueOf返回数组本身；
toString，能够将数组装换成字符串，默认以逗号隔开；
str.split(item)，以给定的符号item对字符串进行分割，不会改变原数组。如果切割失败，则将整个数组返回；
arr.join(item)，用给定的符号item，将数组合并为一个字符串；
arr.push(item1，item2……)，在数组末端添加一个或者多个元素，返回最终的数组长度；
arr.pop()，删除数组最后一个元素，并返回删除的这个元素；
arr.unshift()，arr.shift()，功能和push和pop一样，只是起始点是数组开头；
arr.reverse，反序排列数组，会改变元素；
arr.slice(start,finish)，截取区间数据，不包括结束点，返回一个数组，下标可以为负数，表示倒数第n个；
arr.splice(start,length,addItem1,addItem2)，会对元素进行修改；
indexOf和lastIndexOf用来查找数组中第一次和最后一次出现的下标，没有则返回-1；

对象

通过大括号定义的，，键值对构成的无序数据集合，语法

var obj1 = {key1 = value1,key2 = value2...};
var obj2 = new Object;
var obj3 = Object.create(null);

键名也叫属性名，对象所有的属性都是字符串，如果属性值是函数，这个属性值就称为方法（行为）；

读写对象的属性有两种方法：一种是通过点运算符，一种是使用方括号运算符，这两种都能给对象添加并不存在的属性；

var obj = {key:value};
var str = 'key'
console.log(obj.key);
console.log(obj['key']);//可以使用字符串的值作为对象的属性，点运算符不能
console.log(obj[str]);

Object.keys()，查看对象的属性；
delete obj.key，删除对象的属性键值对（不常用）；
'key' in obj，判断属性是否存在对象中；

遍历：

var obj = {key1:'a',key2:'b',key3:'c'};
for(i in obj){
    console.log(obj[i]);
}

对象的引用，如果的过个对象指向同一个变量，那么这些对象都成为这个对象的引用，通过一个引用对对象做出修改，会反馈到所有引用的上面；

函数

分两个部分：函数声明与函数调用；

/*function命令*/
function funcname(item1,item2...){}

/*函数表达式*/
var funcname = function(item1,item2...){};

/*Function构造函数*/
var funcname = new Function();

函数是特殊对象；
通过function命令声明的函数会在调用前默认提升到页面的头部，var也可以；
```
console.log(num);
var num=10;
```

自执行函数

/*函数申明了就执行IIFE*/
(function(){console.log(123);}());
(function(){console.log(234);})();

三目运算符给参数指定初始参数：

(num !== undefined && num !== null)? num = num : num = 1;

内存

值传递和地址传递：原始数据类型（数值，字符串，布尔类型）内容传递是值传递；复合型数据类型（数组、对象、其他函数）内容传递是地址传递；
如果函数出现同名参数，则默认取后出现的参数，如果不写则出现undefined；
arguments对象：js函数内部提供的能直接读取函数运行时所有参数的对象，arguments[0]代表第一个参数，以此类推，可以像数组一样访问参数，但本质上是一个对象（集合对象）；
eval()：允许传入字符串，把字符串当做代码运行，配合IIFE可以对页面加密；
instanceof：判断复杂数据类型归属哪个类；

Math对象

Math对象属性表示只读的数学常数；
Math.round()，四舍五入，-1.5取-1；
Math.floor，向下取整；
Math.ceil，向上取整；
Math.abs()，绝对值；
Math.max()，返回最大的参数，所以不能返回数组的最大值；
Math.min()，返回最大的参数；
Math.pow()，返回以第一个参数为底数，第二个参数为幂的指数值，如Math.pow(2,3)返回8；
Math.sqrt()，返回参数的平方根，如果参数为负值，返回NaN；
Math.log()，返回以e为底的自然对数值；
Math.exp()，返回常数e的参数次方；
Math.sin~atan三角函数；
Math.random()，返回一个0-1的伪随机数，可能等于0，但一定小于1；Math.floor(Math.random()*(max-min)+min)，获取Min到Max之间的一个随机数；
```
/*返回指定范围的随机数*/
function getRandom(min,max){
    return Math.floor(Math.random()*(max-min)+min);
}
```

Date对象

本身是对象类型，但是输出的是字符串类型的；

获得当前日期：

var date1 = Date();//
var date2 = new Date('2018-1-1')//通过构造函数；
var date3 = new Date(2018,0,1)

DOM（文档对象模型）

一套用来控制管理HTML文档内部的规则，dom规定html内部所有元素都是节点，在dom规则选对象都被称为节点；
document节点是文档本身，在页面加载时会自动生成，不必手动创建；
document.documentElement表示HTML；document.URL表示文件的网址，只读；document.location.href。乐意读写页面网址；
.anchors返回页面中某种集合对象，带name属性的a标签；
document.querySelector(".classNanme|ID")，documentquerySelectorAll()，接收css选择器，属于W3C中的Selector API规范；
getElementById、getElementByClassName、getElementsByTagName('a')、getElementsByname，属于W3C中的DOM规范;
createElement('标签名')，生成html元素；通过xxx.appendChild(要添加的节点)添加到指定节点中；
createTextNode()，生成文本节点，参数为所要生成的内容，通过xxx.appendChild(要添加的节点)添加到指定节点中；
createAttribute()，生成一个新的属性节点并返回，通过.value赋值，然后通过xxx.setAttributeNode()给指定节点添加；
针对行内样式：getAttribute('属性名')，setAttribute('属性名','属性名')，removeAttribute('属性名')；
css样式style属性，style只能修改css样式，对id和class等无法修改，语法：node.style.width='100px'；

通过cssText对整个进行修改，语法node.style.cssText='width:100px;height:100px';

h = document.createElement('h1');
htxt = document.createTextNode('123swl');
h_align = document.createAttribute('align');
h_align.value = 'center';
h.appendChild(htxt);
document.body.appendChild(h);
h.setAttributeNode(h_align);

h1 = document.querySelector("h1");
h1.setAttribute('style','background:#ccc')；
h1.style.style.height = '100px';
h1.style.cssText = 'height:100px;color:#ddd;';

DOM思想：将结构化的文档解析成一系列的节点，然后由这些节点构成树状结构（dom tree），树上的每个节点都能为外界所用；
domTree中的属性（注意换行符）：
1. parentNode：获得当前节点的父节点；
2. childNodes：获得当前节点所有子节点的列表；
3. nextSibling：获得当前节点后一个同级节点；
4. previousSibling：获得当前节点前一个同级节点；
Node方法：
1. appendChild(),hasChildNodes();
2. cloneNode(),insertBefore(),removeChild(),parentNode.replaceChild(new,old);
3. contains(),isEqualNode();

HTML event事件

事件传递
1. js中的事件不仅和事件的触发者进行交互，还能沿着dontree进行逐级传递，分两种类型：事件冒泡和事件捕获；
  1. 事件冒泡：由触发者开始，沿着domTree逐级向上传递；
  2. 事件捕获：事件由document节点开始，沿着domTree向下传递，直到触发者结束；
  3. 如非特殊情况，所有事件都是冒泡；
事件绑定
1. 绑定操作发生在HTML代码中的事件，称为HTML事件；
  1. 语法：on+事件='函数1，函数2……'；
  2. 例如：
```
<div onclick="func1(),func2()">
```
  3. 默认采用冒泡传递；
  4. 可绑定多个事件；
  5. 可以通过：元素.setAttribute(on+事件名，null)，取消绑定事件；
  6. 缺陷：耦合性太强，修改一处，另外一处也要修改，当函数没有加载成功时，则会报错；
2. DOM0级事件
  1. 语法：元素.on+事件名 = function(){...};
```
btn.onclick = function(){
    ...
}
```
  2. 以冒泡机制来处理事件，同一事件只能绑定一个，如绑定多个只执行最后一个，不存在兼容问题；
  3. 可以通过：元素.on+事件=null，取消绑定事件；
3. DOM2级事件
  1. 语法:.元素addEventListener(事件类型没有on,监听函数,是否使用捕获机制（默认false冒泡，true捕获）)；
  2. 可以绑定多个函数，按照绑定顺序执行；
  3. 例如：
```
var div = document.querySelector('div');
function func1(){
	console.log('div')
}
div.addEventListener('click',func1);
```
  4. 移除语法：node.removeEventListener(事件类型，监听函数名称，捕获机制)，如果绑定的是匿名函数则无法删除，第三参数如果是捕获则一定要写；

鼠标事件

鼠标事件默认使用冒泡；可以给一个元素添加多个不同的鼠标事件而互不影响；mouseenter和mouseleave两个事件不冒泡触发；
常用事件类型
1. 单击触发：click；
2. 双击触发：dbclick；
3. 鼠标下按、抬起：mousedown、mouseup；
4. 鼠标移动：mousemove；
5. 鼠标移入、移出时（不冒泡）：mouseenter，mouseleave；
6. 鼠标移入、移出时（冒泡）：mouseover，mouseout；

焦点事件

获得焦点focus，不支持冒泡，主动获取焦点事件：元素.focus()；
失去焦点blur，不支持冒泡，主动获取失去焦点事件：元素.blur()；

滚动事件

scrollTop、scrollLeft：表示文档滚动距离；
1. 能够被修改
2. 非IE：document.body.scrollTop\Left；
3. IE：document.documentElement.scrollTop\Left；

文档或者元素发生滚动时，自动出发，可以通过overflow:scroll、overflow:scroll-x、overflow:scroll-y属性来添加；


var oDiv = document.querySelector('div');
var oBtn = document.querySelector('button');

oBtn.onclick = function(){
	sct = oDiv.scrollTop;
	var timer = null;
	
	timer = setInterval(function(){
		console.log(sct)
		sct *=0.6;
		oDiv.scrollTop = sct;
		if(oDiv.scrollTop<=0){
			oDiv.scrollTop=0;
			clearInterval(timer);
		}
		//console.log(oDiv.scrollTop)
	},100);
	
}

键盘事件

分以下三种：keydown，keypress，keyup；
1. keypress：
  1. 捕获功能键除外的字符，如数字、字母、小键盘；
  2. 只能捕获单个字节；
  3. 不区分大小写；
  4. 不区分小键盘和主键盘的的数字字符；
2. keydown和keyup：
  1. 捕获除prscrn所有按键；
  2. 可以捕获组合件；
  3. 对于单个字符的keycode都是一个值，因此不能区分大小写；
  4. 区分小键盘和主键盘的的数字字符；
事件默认都采用冒泡机制；

event.keyCode获取用户按下键值的编码；

<div>请输入密码：<input type="password" name="" /><span></span></div>
<script type="text/javascript">
var oInput = document.querySelector('input');
var oSpan = document.querySelector('span');
var flag = false;
oInput.onkeydown = function(){
	keycode = event.keyCode;
	if(keycode==20){
		flag = !flag;
		if(flag==true){
			oSpan.innerHTML ='大写锁定已打开';
		}else if(flag==false){
			oSpan.innerHTML ='';
		}
		
	}
}
</script>

触摸事件

手机触摸事件：
1. touchstart：当手指触摸屏幕时触发，即是已有一个手指在屏幕上也会触发
2. touchmove：当手指在屏幕上滑动时连续的触发；
3. touchend：当手指从屏幕上移开时触发；
4. *touchcancel：当系统停止跟踪触发时触发（如电话接入或者弹出信息，一般在这个操作中来做一些暂停游戏类的操作）；
非特殊说明，事件均为冒泡事件；
手机触摸事件必须使用dom2来进行绑定；
可以给一个元素加多个触摸事件；
触摸事件中获取手指坐标：
1. event.touches[第几根手指].pageX;

event.touches[第几根手指].pageY;

<div></div>
<script type="text/javascript">
var oDiv = document.querySelector('div');
oDiv.addEventListener('touchstart',function(){
	console.log('触摸开始');
	console.log('x:'+event.touches[0].pageX);

})

</script>

类和对象

类是一种抽象的，并不实际存在的，表示对一种实物共有特征的描述；
对象是一种具体的，实际存在的，类中的某一个体；
通过构造函数定义一个类，new命令在构造函数的作用是先创建一个对象，然后再由对象调用构造函数，所以构造函数中的this，指的是new创建的这个对象；
```
function Person(name,age,height){
	this.name = name;
	this.age = age;
	this.height = height;
}
p1 =new Person('zs','15','170');
```

面向对象

思想概述：编程中以“使用对象来解决问题”为中心的思维逻辑叫面向对象（oop），和面向过程（pop）的区别有很多
1. pop：习惯分析出解决问题的所有步骤，将其构建成一个个函数，然后将这些步骤按照一定的顺序实现；（顺序，选择，循环）
```
var a=1;
var b=2;
var sum = a+b;
```
2. oop：先创建一个对象，让对象拥有做某种事情的能力，然后命令对象做某些事情。（封装（构建类），继承，多态：https://blog.csdn.net/c_w_d/article/details/52982191）
```
var a = 1;
var b = 2;
function sum(m,n){
    return a+b;
}//找到能完成1+2的对象

var sum = sum(1,2);
```
3. 公有和私有：
  1. 公有：对象的属性和方法，在对象外部能直接访问：
    1. this.属性
  2. 私有：对象的属性和方法，仅能在对象内部访问，在外部没法访问；
4. 原型prototype：
  1. 原型是js为函数提供一个自带的object类型属性，给原型添加一个属性和方法，会自动为这个类所创建的对象添加属性和方法；
  2. js提供一种机制：如果是通过类创建的类创建的对象，当访问的属性在对象中没有找到，则会去创建对象的类中的原型中查找。如果能查找到，也相当于object有这个属性；
  3. 原型的作用也就是为类（函数）提供了一个公共区域，在这个公共区域声明的属性和方法都能狗被这个类所创建的对象访问到。（在原型中声明的属性和方法也被称为共有属性和公有方法；）
  4. 原型中有两个自带的属性；
    1. constructor：构造器，属性的值指明了这个原型归哪个类所以；
    2. __proto__：原型指向，属性的值指向这个原型自己；
5. 原型链（继承）：对象的__proto__属性和对象的构造函数的原型的__proto__属性构成的链式结构称为原型链，函数的原型，设置为另外一个函数的对象；类的原型是谁的对象，这个类就是谁的子类，默认所有类的原型都是object的对象；

Quietw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS笔记

字符串操作语法都是：str.方法名(参数1，参数2...) 本名叫ECMAScript，正式场合用ES；大小写敏感，常用驼峰发命名；语句以分好结尾；共有5五种基本数据类型，一种所谓的对象类型（number，string，boolean，Array（不是基本数据类型），undefined&amp;null，object）；字符串可以是任意的字符，除了定义时的引号外。在jso...
复制链接

扫一扫

专栏目录