JS常用知识点

JS(注：a代表一个的元素)

1.输出内容

document.write("内容");

2.打印

console.log('打印内容');

3.弹窗

alert("这是弹窗");		//普通弹窗
confirm('请确认跳转');	//确认弹窗,按确认返回true,按取消返回false

4.跳转

location='index.html';
注：  widow.location.href="index.html";
   location.href="index.html";
   location="index.html";
	         效果一样

5.变量的使用

定义
	var a=1;
	$a=1;
字符串里调用变量的值
	console.log("b的值为"+$b+"");
	注意：内外使用引号一定要一致

6.寻找元素

//按id，返回一个值
$res1=document.getElementById('text1').innerHTML;
//按class值，返回一个集合
$res2=document.getElementsByClassName('class')[0].innerText;
//按name值，返回一个集合
$res3=document.getElementsByName('name')[0].innerText;
//按html标签名，返回一个集合
$res4=document.getElementsByTagName('span')[0].innerText;
//获取body元素
(1)document.body
(2)document.documentElement

7.获取元素的值

/*
 *获取元素的html内容
 *innerHTML：获取双闭合标签里面的所有内容，包括html内容。
 *innerText：获取双闭合标签里面的文本内容。
 */
a.innerHTML;
a.innerText;
//获取class值
a.className;
//获取value值
a.value;
//获取name
a.name;
//获取元素宽度
a.offsetWidth
//获取滚动条距离顶部的高度，并防止一些浏览器兼容问题
$height=document.body.scrollTop+document.documentElement.scrollTop;

8.改变元素的值

更改一些属性值
	（1）a.innerHTML="内容";
		注：及把获取的值重新赋值就可以了
	（2）a.getAttribute('id','a1');//把a的id值改为1
改变css样式值
	//改变背景rgba
	a.style.background="rgba(2,1,1,"+$b+")";
	//改变背景颜色
	a.style.backgroundColor="red";
删除属性
	a.remove();

9.对属性的一些操作

添加修改属性值：
	$res.setAttribute('class','class1');	//不存在的属性会添加
	$res.setAttribute('id','a1');			//存在的属性会替换属性的值
获取属性值：
	$res.getAttribute('id'));
删除属性：
	$res.removeAttribute('id');

9.绑定点击事件

（1）<button onclick="btn_click()">点击</button>
	<script>
		function btn_click(){
			console.log('你点击了按钮');
		}
	</script>
（2）//获取元素
	$btn=document.getElementById('btn');
	//绑定事件
	$btn.onclick=function(){
		console.log('你点击了按钮');
	}

10.绑定事件

（1）绑定事件
	window.onload=function(){}			//网页加载完成事件
	window.onunload=function(){}		//关闭网页事件
	window.onscroll=function(){}		//页面滚动事件
	a.onclick=function(){}
	常见的事件
		onclick			//点击事件
		onmouseover		//鼠标移入事件，子元素也触发
		onmouseout		//鼠标移出事件，子元素也触发
		onmouserenter	//鼠标移入事件，子元素不触发
		onmouseleave	//鼠标移出事件，子元素不触发
		onchange		//文本内容改变事件
		onselect		//文本框选中事件
		onfocus			//光标选中事件
		onblur			//光标移开事件
		onmousedown		//按下事件		对应手指触摸触摸事件		touchstart
		onmouseup		//松开事件		对应手指触摸事件			touchend
		onmousemove		//滑动事件		对应手指触摸事件			touchmove
（2）绑定事件
		a.addEventListener('click',A);		//点击调用A方法
		注：常用方法和前面的方法基本一致，去掉on就行了
	移出事件
		a.removeEventListener('click',A);	//点击移除A方法

11.绑定定时器

//1秒后执行A方法，结束
setTimeout(A,1000);
//每1秒执行1次B方法
setInterval(B,1000);
//停止
clearTimeout($a);
clearInterval($a);

12.生成随机数

//生成0~1之间的随机数
Math.random()
//生成0~9的随机整数
parseInt(Math.random()*10);	
//四舍五入法，打印3
Math.round(2.5);

13.window对象

//打开新页面
window.open('index.html');
//关闭页面
window.close();

14.history对象

//返回上一页
history.back();
//今入下一页
history.forward();
//今入历史某一页
history.go();
	0	当前页
	-1	上一页
	1	下一页