JS篇

作者: 冰溪bx | 来源:发表于2019-02-03 16:20 被阅读0次

打开网页让网页显示某个内容:

alert("hello world");

打开网页显示对话框可以输入内容:

prompt("请输入内容:");

打开网页显示一个确认的对话框:

confirm("你好吗?");

在HTML网页中写入某个内容:

document.write("hello world2");

在控制台显示内容:

console.log("hello world3");

console.error("错误信息");

console.warn("警告信息");

定义变量名称

var num;

var num1, num2, num3;

定义函数

function 函数名(形参1,形参2...){

return 返回值;

}

获取元素函数;

document.getElementById(id) 用id去获取

document.querySelector(css3选择器) 用CSS3选择器去获取

document.querySelectorAll(CSS3选择器) 用CSS3选择器去获取

document.querySelectorAll 如果想要取多个元素中的某个元素,就写值[n]

n为多少,就取那个值,这个值从0开始。

备注:id和CSS3选择器都需要加引号

在控制台输出内容,主要用来调试代码

console.log()

事件函数;

onclick() 点击元素时候触发

onmouseover 鼠标移到元素上触发

onmouseout 鼠标从元素移走触发

事件函数的格式

元素.onclick=function(){

这里写处理代码

};

页面加载完后的函数:

window.onload 页面里所有内容加载完成就触发这个事件

格式

window.onload = function(){

这里写处理代码

};

验证值类型的函数:

typeof(数据);

instanceof(数据);

把其他类型数据转化成数字(整数):

parseInt(数据);

或者Number(数据);

parseFloat(数据);(浮点型数字)

检测值是不是NaN:

isNaN()

转布尔值:

Boolean(数据)

转字符串:

String(数据)

备注:alert,document.write会把数据强行转化成string

取非行间样式

IE7 低版本方法 obj.currentStyle[attr] attr就是要取的某个对象的具体样式值

高版本方法 getComputedStyle(obj,false)[attr]

JS数组添加删除函数

push(元素) 从尾部添加

unshift(元素) 从头部添加

pop() 从尾部弹出

shift() 从头部弹出

从中间添加删除函数

splice(开始,长度,元素...)

先删除,后插入

删除

splice(开始,长度)

插入

splice(开始,0,元素..)

JS中sort只能认识字符串,数字排序方法:

obj.sort(function(n1,n2){ return n1-n2;};

JS定时器函数

开启定时器

setInterval(函数,时间单位是毫秒) 间隔型 无限执行

setTimeout(函数,时间单位是毫秒)  延时型 只执行一次

停止定时器

clearInterval()

clearTimeout()

备注:关闭定时器方法

timer=serInterval()

clearInterval(timer)

JS获取系统时间

Date对象

getHours getMinutes gerSeconds

字符串的解决低版本浏览器兼容问题

charAt()

获取系统的年月日星期等元素函数

getFullYear() 年

getMonth() 月

getDate() 日

getDay() 星期

DOM基础

childNodes DOM寻找子节点函数 可用children代替

nodeType DOM中判断节点的类型 1是元素节点 3是文本节点

parentNode DOM中寻找父节点

offsetParent DOM寻找实际位置定位的父节点

DOM方式操作元素属性

获取 getAttribute(名称)

设置 setAttribute(名称,值)

删除 removerAttribute(名称)

DOM创建标签

document.createElement('标签名')

给某个标签添加子节点

标签名.appendChild(值)

插入元素

insertBefore(值,在哪个标签前插入)

文档碎片(低版本浏览器提高DOM操作性能)

document.createDocumentFragment()

转换成小写字母

toLowerCase()

模糊搜索函数

search(值)备注:判断值是否等于-1就可以做到模糊搜索

JS取绝对值

Math.abs()

向上取整

Math.cell()

向下取整

Math.floor()

JS中取代offsetLeft的函数:

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}

else{

return getComputedStyle(obj,false)[name];

}

};

四舍五入取整函数

Math.round()

事件绑定(避免企业开发中代码覆盖造成BUG)

IE

attachEvent(事件名称,函数) 绑定事件

detachEvent(事件名称,函数) 解除绑定

备注:attachEvent事件名称要带on

DOM方式(针对chrome和FF)

addEventListener(事件名称,函数,false)

removeEventListener(事件名称,函数,false)

备注:addEventListener事件名称不要带on,用jQuery写法。

事件捕获

SetCapture()让网页中其他元素的所有事件变成你设置的那个事件

cookie使用方法

设置cookie

function setCookie(name,value,Day){

var oDate=new Date();

oDate.setDate(oDate.getDate()+Day);

document.cookie=name+"="+value+";expires="+oDate;

}

获得cookie

function getCookie(name){

var arr=document.cookie.split("; ");

for(var i=0;i<arr.length;i++)

{ var arr2=arr[i].split("=");

if(arr2=name){

return arr2[1]

}

}else{

return "";

}

}

删除cookie

function removeCookie(name){

document.cookie(name,1,-1);

}

正则表达式

search

字符串搜索

i-忽略大小写

match

\d 找一个数字 /d/d找两个数字 /d+找多个数字

g-全部找出

replace

\d 数字 = [0-9]

\w 英文,数字,下划线 = [a-z0-9_]

\s 空白字符

\D 非数字 = [^0-9]

\W 非英文,数字,下划线 = [^a-z0-9_]

\S 非空白字符

{n} 正好出现n次

{n,m} 最少n次,最多m次

{n,} 最少n次,最多不限制

+ = {1,} 相当于最少1次,最多不限制

? = {0,1} 表示可有可无

* = {0,} 相当于最少0次,最多不限制

^ 字符串行首

$ 字符串行尾

/^\w+@[a-z0-9]+\.[a-z]+$/i 邮箱正则表达式

JS这块可以说是前端开发的重中之重了,反正前端能力怎么样就是看你的JS能力,JS这方面也是最难学的,内容多,需要理解,不适用死记硬背,特别的其中的原型,继承,this等等,都是需要理解而不是去背的东西。

相关文章

  • 最新web前端相关课程学习链接

    js基础篇 js进阶篇 js高级篇 vue基础篇 vue高级篇 react基础 react高级 Nodejs基础 ...

  • JS零碎知识总结

    =============================================== JS篇 ①JS 垃...

  • 遇到文字和数字字母截取长度不一致问题

    js篇 css篇

  • JS优雅写法记录

    1、ES6语法篇 2、js简洁写法 3、js数组篇

  • JS------数组 reduce() 方法详解及高级技巧

    JS进阶篇--JS数组reduce()方法详解及高级技巧

  • JS篇

    时间戳转换为年月日核心代码 input标签只输入数字 JS运算浮点数运算会有计算bug精确两位用toFixed(2...

  • JS篇

    1、js继承的几种方式 优缺点特别清楚https://www.cnblogs.com/cjr001/p/7241...

  • JS篇

    打开网页让网页显示某个内容: alert("hello world"); 打开网页显示对话框可以输入内容: pro...

  • JS篇

    1、深复制的实现。深复制和浅复制的区别 2、实现一个once函数,传入函数参数只执行一次 3、将原生的ajax封装...

  • js篇

    请配合 简书侧边栏文章导航[https://www.jianshu.com/p/9c8ff62b1f86] 食用,...

网友评论

      本文标题:JS篇

      本文链接:https://www.haomeiwen.com/subject/vdnysqtx.html