打开网页让网页显示某个内容:
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等等,都是需要理解而不是去背的东西。