原生js随笔

JavaScript是一种基于对象和事件驱动的客户端脚本语言

组成: ECMAScript---------------标准语法

Bom(browser Object Model) Dom(document)-------浏览器提供的扩充

API : application programming interface 应用程序接口

js引入,内部和外部,最好都放到body里的标签前;

外部:-----可维护性高,可缓存的;放在head和body中也可以,但是考虑加载顺序

document.write()方法,将html内容输出到浏览器窗口,所以在document.write()中换行就是

变量:声明一个变量用var来声明 ------var 变量名 = 初始化值;

js 是弱类型语言,定义时不声明变量类型;

js的五种基本数据类型:字符串String,整数Number,布尔型Boolean,null,undefined

从逻辑上看,null值表示一个空对象指针,所以类型是object

 

变量在定义时可以使用逗号一次性定义多个变量,变量命名也就是标识符的命名规则;

标识符包括变量,函数,属性的名字,最好见名知意,小写字母开头,不能有空格,不能是关键字,不能是保留字,区分大小写;

驼峰命名法

alert() 提示框, document提供的方法,所以换行就是"/n";alert只接收字符串作为参数,自动调用toString()方法转换;

字符串类型的变量定义可以用""也可以用'';

console.log();方法是在控制台输出结果,chrome浏览器的控制台输出,会自动提供换行;

字符串拼接:+

转型函数: 布尔型---Boolean();返回值就是true和false;

字符串返回true ,空串返回false;

数值0返回false ,其他返回true;

null型返回false;undefined返回false ;

float,型由于精度问题,计算不是精确计算,true为1,false为0;

数值型----parseFloat();返回值是浮点型数值;

解析一个字符串,返回一个浮点型数值;

数值型----parseInt();返回值是整型数值,true为1,false为0;

解析一个字符串,返回一个整形的数值;

解析时候,参数如是0开头的数值,会按照8进制转

解析时候,参数如果是0开头的字符串,0就会被忽略;

解析时候,参数如果是ox开头的数值,就会按照16进制进行转换数值;(A~F是10~15);

显示类型转换:

.toString()方法,强制类型转换,转为字符串,对于null和undefined,无法转换,要用String()函数

对象:

Object(),创建一个对象要用new关键字,它是一组数据和功能的集合;创建后可以为它添加属性和方法

算数运算符:

+:只要出现了字符串,就会变成字符串拼接;

- * / %:调用Number()转化;

赋值操作:

就是将右边的值,给 左边的 变量;

简单的赋值操作符: =

复合赋值操作符: += -= *= /= %= (i += 1; 就是 i=i+1);

布尔操作符: ! && ||

逻辑&&: 都真才为真,如果第一个为假,那么就不判断第二个元素,一定是假;

 

逻辑||:只要一个为真,就为真,第一个为真,就不判断第二个元素,一定为真;

逻辑 !:就是取反

if语句:

if(){}

if(){}else{}

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

switch case :

switch (条件):

case 0: .....(每一个case后要有break;)

case穿透;

条件可以为true,case中可以写判断式;

关系操作符: > < >= <= 比较规则:

都是字符串就比较字符串编码

一个是数值,另一就会转化为数值

布尔值转换为数值,true为1,false为0;

相等性关系: == 相等 != 不等:

如果比较类型相同:返回值为布尔值,相等返回true,不等返回false

如果比较类型不同:转换后再比较

一个布尔时,布尔转为数值;

一个数值,一个字符串,字符转为数值;

null和undefined是相等的;

null和undefined不转换;

只要有NaN就不等;

全等性关系: ==== 全等 !== 不全等 :

不仅要比较类型,还要比较值;

循环: for(var i = 0; i小于循环条件;i++){

循环体;

} //常用于知道循环次数的循环;

 

while(循环条件){

循环体;

自增条件;

}//常用于不知道循环次数的循环;

 

break:跳出整个循环

continue:跳出本次循环,继续程序

死循环: 由于编程错误,使得其自身无法控制终止的程序;

由于需要,希望程序一直执行,当达到某一特定要求才终止循环的情况下;

浏览器调试:(debug) sources 里查看,可以设置断点,想要观察的变量可以右键Add watch,刷新后,点击下一步,一步一步看执行;

函数: 可以重用的代码块(分为自定义函数,内置函数)

函数的声明:function 函数名(参数1,参数2){

函数体;

}

函数可以没有名字,我们称为匿名函数

函数可以没有参数

函数的调用------函数名(实际参数1,实际参数2);

理解参数:函数的参数不介意传进来多少个,也不介意传进来的数据类型,

也就是说定义的时候是要传进来两个参数,但是在调用的时候也未必一定要传进来两个参数,

可以是一个,也可以是三个;参数的内部是直接存在一个数组中的,所以,

我们在访问时,可以通过arguments对象取得传递给函数的每一个参数;

局部变量 和 全局变量:

优先级:局部 大于 全局 ;

如果一个函数内定义一个变量,没有添加var来声明,那么系统自认为这个变量是全局变量;

随机数: function randomNum(min, max){

return Math.floor(Math.random()*(max-min+1)+ min);

}

事件驱动:1获取元素,2绑定事件

事件:onclick 鼠标点击事件

ondblclick 鼠标双击事件

onmouseover 鼠标移入

onmouseout 鼠标移出

onmouseenter

onmouseleave

递归函数:函数通过名字调用自己的情况;

数组: 一组数组的有序列表,每一项可以保存任何类型的数据;

数组的长度是可以动态调整;

数组长度:数组名.length;

创建:var 数组名 = new Array[];

var 数组名 = [];

添加:数组名[位置下标]= "";

数组名.push(a"");从数组的最后一个位置添加元素"a";

数组名.unshift("a");从数组的第一个位置添加元素"a";

数组名.concat(参数1,参数2....)方法;基于当前数组创建一个新数组;

作用是合并,可以合并两个或多个数组,如果是一个值,就会添加到新数组

如果是一个或者多个数组,那么参数数组中的 每一项都会添加到新数组中

删除:数组名.pop(a"");从数组的最后一个位置删除元素"a";

数组名.shift("a");从数组的第一个位置删除元素"a";

转串:数组名.join("")方法就是将数组里的每一项按照字符连接组成一个新的字符串;

排序:数组名.sort()方法;就是数组的排序:

升序:数组名.sort(function(a,b){return a-b;});

降序:数组名.sort(function(a,b){return b-a;});

反序:数组名.reverse()方法;数组反序

查找:数组名.indexOf("a")方法;从数组第一个元素开始查找a,并返回下标值;找不到返回-1;

数组名.indexOf(a,b)方法;从数组的地a+1个元素开始查找b,并返回找到的元素的下小标

数组名.lastIndexOf("a")方法;从数组的最后一个元素查找a,并返回下标值;找不到返回-1;

截取:数组名.slice()方法;截取数组得到一个字数组,接受一个或者两个参数

一个参数就是从参数的位置到最后截取,

两个参数就是从参数1取到参数2,不含参数2;

接受负数参数,负数就是从数组的最后项找位置截取;

 

 

数组名.splice()方法;可以实现数组的添加删除和截取;参数接受两个,三个或者多个,接受负数参数;

String对象:是字符串的对象类型,可以用构造函数来创建;

创建:var str = new String("内容");

var str1= "内容"; //基本都这么创建,因为基本类型的字符串也可以用String的方法;

方法:

查找: 字符串.charAt() 方法;返回给定位置的字符;

字符串.charCodeAt()方法;返回给定位置的字符的编码;//与String.fromCharCode()相反的方法;

String.fromCharCode()方法;静态方法,接收字符编码,转成字符串;

 

字符串.indexOf("a")方法;返回a在字符串中第一次出现的位置下标;如果找不到返回-1;

字符串.lastIndexOf("a")方法;返回a在字符串中最后一次出现的位置下标;如果找不到返回-1;

添加: 字符串.concat("a","b","c".....)方法;不改变原串,生成在原有串上添加的新串;多用于多个字符串的拼接;

加号 + 字符串的拼接 //最长用;

取子串:

字符串.substring(x)方法;截取下标x开始到字符串结尾的子串,不改变原串;

字符串.substring(x,y)方法;截取字符串下标x到y的子串,含x不含y,不改变原串;

字符串.slice(x);截取下标x开始到字符串结尾的子串,不改变原串;

字符串.slice(x,y);截取字符串下标x到y的子串,含x不含y,不改变原串;

字符串.substr(x);截取下标x开始到字符串结尾的子串,不改变原串;

字符串.substr(x,y);截取字符串下标x开始,后面的y个;不改变原串;

 

去空格:字符串.trim()方法;去掉字符串头和尾的空格;

字符串.trimLeft()方法;去掉字符串最左边的空格;

字符串.trimRight()方法;去掉字符串最右边的空格;

分割:根据分割符将字符串拆分成数组;不改变原串;

字符串.solid("原字符串中有规律的字符"); //找不到 原字符串中有规律的字符 返回1;

大小写转换:

字符串.toLowerCase()方法;转换为小写;

字符串.toUpperCase()方法;转换为大写;

替换:字符串.replace();接受一个或两个参数,一个参数是从下标参数到最后,两个参数是参数2替换参数1字符串;

保留小数位:字符串.toFixed(s);保留小数后s位;

 

Math对象:该对象的方法都是静态方法,数学公式和信息,与自己编写的方法相比较,Math提供的方法效率更加高;

属性: .PI 就是数学里的圆周率π

方法:Math.random() 随机数0~1

Math.min(x,y);x y 返回最小值;

Math.max(x,y);x y 返回最大值;

Math.ceil(a) ;a向上取整,取最大整数;

Math.round(a);a数学四舍五入取整;

Math.floor(a);a向下取整,取最小整数;//通常考虑到效率问题,用该方法代替parseInt()取整方法;

Math.ads(a);返回a的绝对值;

Math.sqrt(a);a开平方;

Math.pow(a,n);a的n次方;

Date()对象:ECMAScript中的日期是在1970年1月1日午夜零时开始经过的毫秒数保存时间的;

创建:

var 变量名 = new Date(); Date()系统当前时间,在传参时,会自动调用Date类型的toString()方法;

var d = new Date(年,月,日); d Date类型

方法:在方法使用前,都要new一个Date对象,才能使用;

Date对象.getFullYear(); 获得年份;

Date对象.getMonth(); 获得月份;

Date对象.getDate(); 获得日期;

Date对象.getHours(); 获得小时数;

Date对象.getMinutes(); 获得分钟数;

Date对象.getSeconds(); 获得秒数;//一秒 = 1000毫秒;

 

Date对象.setFullYear();设置年份;

Date对象.setMonth();设置月份;

Date对象.setDay();设置日期;

Date对象.setHours();设置小时数;

Date对象.setMinutes();设置分钟;

Date对象.setSeconds();设置秒数;

 

Date.now() //当前时间的毫秒数;

Date对象.parse(2016,8,23)//将日期20160823转成距离1970年1月1日的毫秒数;

getTime();获取指定日期的毫秒数

setTime();根据指定毫秒数,设置或者修改日期;

串和数组的转换:

将数组转成字符串:arr.join("符号");//每个字符串之间用符号分隔

将字符串转成数组:str.split("符号");//字符串中以字符规律,分隔成数组元素;

DOM:(document object model)文档对象类型;

 

注意: 标签.innerHTML =" " ; :写入内容到输出标签内,可以直接写入html标签;

顶层对象:window:

window.screen 屏幕对象

window.location 地址栏对象

window.history 历史记录对象

window.navigator 浏览器对象

方法:

window.alert();//alert();//只接收字符串参数;不是会调用toString()方法;

window.document.write();//输出内容;

window.promet("");//提示输入框

window.confirm();//确认信息框,返回值是布尔类型

if(window.confirm()){

alert("您点击了确定");

}else{

alert("您点击了取消");

}

window.onload = function(){

 

} //网页加载完成之后执行;

//一般当有要求将js写在head中的时候,就要写这个,避免因加载顺序取不到元素;

 

 

定时器:

一次性定时器:

setTimeout(参数1,参数2);//参数1一般是函数,参数2 一般是时间单位毫秒;

setTimeout(function(){

 

},时间(毫秒));

循环定时器:

setIterval(参数1,参数2);//参数1一般是函数,参数2 一般是间隔执行参1的时间,单位毫秒;

var temer = setInterval(function(){

 

},间隔时间(毫秒));

为了能够关闭定时器,一般在写定时器的时候都要给定时器的返回值 付给一变量;

定时器的关闭:

cleatInterval(参数);//参数一定是一个定时器的返回值;

焦点事件:

onfocus //得到焦点

onblur //失去焦点

//焦点事件一般就是表单用的比较多:表单元素.onfocus = function(){}

this关键字:触发事件的本身就是this;

 

//以下对新窗口的操作都要让新窗口获取焦点( onfocus )

window.open(参数1,参数2,参数3);//该方法可以在当前的窗口再打开一个指定大小和位置的新窗口;

//参数1:url 参数2:"窗口名" 参数3:窗口设置的字符串(值对之间逗号分开) ;

window.close() //关闭新窗口;

window.moveTo();//设置新窗口位置;

window.resizeTo(width,height);//设置新窗口宽高;

Location对象:

主机域名:window.location.hostname

当前页面路径:window.location.pathname

完整URL:window.location

 

方法:assign("url");//传递一个地址,根据地址跳转;

 

reload() //刷新当前页面;

function reloadPage(){

window.location.reload();

}

 

roSource(); //表示对象的源代码,通常由JS自动后台调用,不写在代码中(火狐不支持);

属性:location.href = "url";//根据地址跳转;

理解构造函数:

构造函数可以创建指定类型的对象,原生构造函数在运行时会自动出现在运行环境中,

可以创建自定义的构造函数,从而定义对象类型和方法;

构造函数本身也是函数,只是可以用来创造对象;

按照惯例,构造函数始终以大写字母开头;

实例化一个对象时: var 实例化对象 = new 构造函数

Navigator对象:

浏览器名称:

浏览器版本:

操作系统信息:

//以上的基本不用了,最新的浏览器都只要:

navigator.userAgent; //浏览器以及操作系统信息;

//在http协议的头中,也会传该信息;

 

screen 对象: //显示屏幕

window.screen.width //宽

window.screen.height//高

window.screen.availWidth //可用宽(除去任务栏)

window.screen.availHeight//可用高(除去任务栏)

history对象:

属性:history.length //是0就是新开的一个页面

方法:history.go();//参数是-1 和 1 代表上一页和下一页;

滚动事件 ( onscroll ) :

兼容:

var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

var sctollTop = document.body.scrollTop || document.documentElement.scrollTop;

DOM中获取元素的方法:

document.getElementById("id名");

document.getElementsByTagName("标签名");//放到数组中

document.getElementsByClassName("class名");//放到数组中

document.getElementsByName("name名");//放到数组中,元素有name属性才可以取

 

document.querySelector("css选择器");//只要第一个,IE8以下不支持;

document.querySelectorAll("css选择器");// 找到所有,放到数组中,IE8以下不支持;

表达式的优先级:

小括号可以改变优先级

算数(+) > 关系(==) > 逻辑(&&) > 赋值(=);

DOM树:

节点:是包含了标签,注释,文本,doctype等在内的多种组合;

节点的属性:nodeType 节点类型 返回值 : 1 2 3

nodeName 节点名称

nodeValue 节点值

 

nodeType nodeName nodeValue

元素节点 1 大写元素名(标签名) null或者undefined

属性节点 2 属性值

文本节点 3 #text 文本本身

 

 

节点关系:

childNodes :元素的所有子节点(包含空格,回车,tab空白);

children :　元素的所有元素子节点,不包含文本节点;

firstChild : 元素的第一个子节点

lastChild :　　元素的最后一个子节点

 

parentNode: 元素的父亲节点

 

nextSibling: 元素的下一个兄弟节点

previousSibling:元素的上一个兄弟节点

 

 

firstElementChild :元素的第一个子节点

lastElementChild : 元素的最后一个子节点

nextElementSibling:元素的下一个兄弟

previousElementsibling:元素的上一个兄弟

 

节点操作:

查 :就是获取节点(dom中获取元素的六种方法)

增加:增加分两步,先创建,在加入

创建:createElement("属性名");//创建属性节点

createTextNode("");//创建文本节点

加 :父级元素.appendChild("创");//将创添加到父中;

父级元素.insertBefore("创","节点")//添加到父级的某节点前;

修改:父级.replaceChild("新的","旧的");//父级中旧的被新的替换;

删除:父级.removeChild("节点");//删除父级中的节点

删.remove() //IE不支持;

克隆:节点.cloneNode(true);//克隆后再添加到新的节点中即可;

 

 

 

获得特定元素节点属性的值:

某元素.getAttribute("属性名");//获得末元素的某属性的值---等价:某元素.属性名

设置特定元素节点属性的值:

某元素.setAttribute("属性名","属性值");//设置某元素的某属性和对应的值---等价:某元素.某属性 = 属性值;

删除特定元素节点的属性值:

某元素.removeAttribute("属性名");//删除某元素的某属性;----等价:某元素.某属性 = "";

 

自定义属性:

自定义属性多用于懒加载图片

按照惯例:data_属性名 = 属性值;

这时只能用Attribute才能取到;

 

获取非行内样式属性和属性值:

兼容:

if(某元素.currentStyle){

某元素.currentStyle.属性名;

}else{

window.computedStyle("某元素","null").属性名; //没有伪类参数2就是null

}

偏移量:(相对于定位父级的)

offsetWidth: 元素在水平空间上占用的大小(内容+边框+内边距)

offsetHight:元素在垂直空间上占用的大小(内容+边框+内边距)

offsetTop:元素上边界到父级元素上边界

offsetLeft:元素左边界到父级元素左边界

offsetParent:参照物为父级元素

 

事件:是对用户操作的响应,用于处理表单验证等,事件通常和函数结合使用,函数不会再事件发生前执行;

例如:

用户点击:onclick ondbclick

验证用户输入合法性:onsubmit

窗口滚动:onscroll

页面大小改变:onresize

 

 

事件对象:event是事件中的一个隐含元素,可以通过arguments[0]来获取;

在触发一个DOM事件时,就会产生一个event对象,它包含着事件的所有信息,例如鼠标位置,键盘按下等

阻止默认事件(兼容): //例如右键 菜单 (oncontextmenu)

if(event.preventDefault){

event.preventDefault();

}else{

return false;

}

 

阻止事件冒泡(兼容): //例如右键 菜单 中li的点击和 点击其他地方 ul 消失;

if(event.stopPropagation){

event.stopProragation();

}else{

event.cancelBubble = true;

}

 

 

 

事件绑定:标签直接绑定------< input type="button" οnclick= "func()">

script中:onclick = function(){}

addeEventListener("click",functon(){}, false/true);

第一个参数,事件名没有on,

第二个参数多是函数,如果不是匿名函数,只写函数名,没有小括号,

第三个参数,都false冒泡(冒泡就是从子级元素向父级执行) 都true 捕获(捕获机制就是从父级元素向自己元素执行)

如果多个一个事件绑定多个函数,谁true先执行谁,都true先父级,都false就冒泡;

 

键盘事件:

获取键盘编码:event.keyCode //每次只能存一个值

onkeydown 键盘按下

onkeypress 键盘一直按着

onkeuup 键盘松开

 

键盘的组合功能键:

ctrl shift alt 是特殊的按键

按下ctrl event.ctrlKey 返回true;

按下shift event.shiftKey 返回true;

按下alt event.altKey 返回true;

所以组合键的判定:

 

if(event.keyCode == 按键编码 && event.ctrlKye){}//同事按下Ctrl和一个按键,才会执行;

 

鼠标事件:

onclick 左键单击

ondbclick 左键双击

oncontextmenu 右键单击

onmousedown 左键按下

onmouseup 左键送开

onmusemove 鼠标移动

onmouseover 鼠标移入

onmouseout 鼠标移出

 

可以通过event对象,获得鼠标坐标:

event.offsetX //相对于事件源的 对象的偏移量 就是元素相对坐标;

event.offsetY //

event.clientX //可视区的位置 ,就是浏览器坐标

event.clientY //

event.offsetWidth //内容+padding+border(除去margin)

event.offsetHeight//

event.clientWidth //内容+padding

event.clientHeight//

event.screenX //屏幕的坐标 (用的少)

even.screenY //

event.pageX //页面的坐标

event.pageY //

 

 

事件监听;addEventListener("dbclick",函数, false);//默认false (冒泡)

捕获机制/冒泡:捕获就是父向子,冒泡就是子向父;

 

事件委托; 就是利用冒泡机制,将事件添加到父级元素上,然后通过event.target();找到所对应的实际目标对象,提高效率;

 

cookie:

构成:名称; 值; 域(有默认); 失效时间(有默认); 安全标志(有默认); path(有默认);

写法:分号和空格 分隔每一段cookie;

读写不直观,所以调用cookie,js(自己写的)

工作中的cookie都是规定好后直接拿来用的JS文件;

客户端存储用户信息能力的要求，属于某个特定用户的信息应该存在该用户的机器上，例如登陆信息、偏好设置等等,简单说cookie就是在客户端存储数据的一种选项

 

 

 

兼容整理:

event||window.event(获取event对象，兼容IE老版本)

stopPropagation||cancelBubble = true(阻止事件冒泡，兼容IE老版本)

preventDefault()||return false(阻止默认事件，兼容IE)

window.getComputedStyle("","")||currentStyle(获取非行内样式，兼容IE)

document.documentElement.scrollTop()||document.body.scrollTop(onscroll,兼容的是谷歌)

addeventListener("click",function(){},false/ture)方法||attachEvent("onclick",function(){})(事件监听器的兼容IE写法,执行顺序按照绑定顺序的反序进行执行)

正则:

var reUser = /^[a-zA-Z_]\w{5,14}$/;//用户名

var rePhone = /^1[3,4,5,7,8]\d{9}$/;//手机号

var reIdcard = /^\d{17}(\d|X)$/;//身份证

var reString = /[\u4e00-\u9fa5]+/g;//找中文

var reGang = /(\/{1,})/g;//找 / 或//

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/yuejie/p/5979704.html