js
应用场景
嵌入到网页中运行，实现一些动态效果，表单验证，操作cookie，操作DOM等
使用方法
外部方式
在body内使用scipt标签
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./css/index.js"></script>
</body>
</html>
index.js
alert("123456");/*弹出内容为123456的窗口*/
js的变量与数据类型
var 变量名=值;
变量名随便写，没有辨别意义，var会根据=后的值来判断自己是什么类型的
类型：数字、字符串、布尔值、对象、数组
/*数字*/
var num1=7;
var num2=3.14;
/*字符串*/
var str1='a';/*单双引号都可以，都是字符串*/
var str2="ben";
//布尔值
var isEmpty=false;
//对象
//用键值对key:value描述
var Student={"sno":"101","name":"ljs","age":20};
//数组
var array1=[98,97,96,60,77,85];
var array2=["ben","ljs","mike"]
var array3=[//存放对象
{"sno":"101","name":"ljs","age":20},
{"sno":"102","name":"ben","age":22}
];
//调用变量
//基本数据类型
console.log(num1);//console是控制台，log是打印的意思
console.log(str1);
console.log(isEmpty);
//数组用下标显示
console.log(array1[0]);
//对象用.
console.log(Student.sno);
console.log(Student.name);
console.log(Student.age);
//嵌套数据
console.log(array3[0].sno,array3[0].name,array3[0].age);
在控制台查看
js操作DOM元素
DOM：文档对象模型，浏览器加载html的时候，会根据html的结构体形成一颗DOM树，dom树上有元素节点、属性节点。
对应的DOM树
选择DOM节点
要操作DOM，首先要选中DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http:www.baidu.com">百度</a>
<ul>
<li><a href="#">小米商城</a></li>
<li id="li-2"><a href="#">小米商城</a></li>
</ul>
<script src="./css/index.js"></script>
</body>
</html>
index.js
//选择id=li-2的元素
var li2Elem=document.getElementById("li-2");
console.log(li2Elem);
//选择所有li --标签名
var lis=document.getElementsByTagName("li");//获取的是集合
console.log(lis);
console.log(lis.length);
操作DOM节点属性
对于元素的固定的属性，可以使用点语法。 固定属性：a标签 href img标签src属性
所有的元素都有3个固有的属性 id class style
class是一个关键字，左右设置属性的时候要变化为className设置。
点语法: DOM节点.固有属性名
- 固有属性
// 给id="li-2"的元素添加一个class="li-2"
li2Elem.className = "li-2";
// 给第一个li设置一个style属性，设置font-size:20px;
// 给第一个li lis[0]
console.log(lis[0]);
// 设置属性的时候，如果里面又中线，需要转换为驼峰的形式 font-size→fontSize
lis[0].style.fontSize = "20px";
// 获取元素上的属性值
console.log(li2Elem.className);
console.log(lis[0].style.fontSize);
- 自定义属性
一般给元素设置自定义属性的时候，自定义属性的名字 data是前缀 data-+属性名
给第一个li设置data-index="0"
// 给第一个li设置data-index="0"
li2Elem.setAttribute("data-index","0");
// 获取元素身上的自定义属性
var idx = li2Elem.getAttribute("data-index");
console.log(idx);
- 总结：
选中元素：getElementById getElementsByTagName
设置属性：点语法(元素身上固有的属性)、getAttribute/setAttribute(自定义属性，data-前缀)；
js事件
onload -- 页面加载事件，一般会绑定window或者需要加载外部资源元素身上。
onlick --- 点击
onmouseenter -- 鼠标进入事件
onmouseleave -- 鼠标移出事件
首先需要选中元素绑定事件，事件触发是用户触发的，执行相应的程序。
window.onload
页面加载的时候执行
window.onlick
--选中元素，绑定事件。
选中span元素点击的时候，打印span里面的内容 1 2 3 4
- 第一种绑定方式
// 第一种绑定事件的方式：选中每一个元素，循环绑定事件
// 先固定区域，选中的是class="dots"
var dotsElem = document.getElementById("dots");
// 第一种绑定事件的方式：选择下面的span,然后依次施加事件。
// dotsElem.getElementsByTagName("span")
// dotsElem.children 子元素的所有标签
var spanElems = dotsElem.children;
// spanElems是一个集合(伪数组)，如果想绑定事件需要获取到每一个元素进行绑定。
// spanElems[0] spanElems[1] spanElems[2] spanElems[3]
// 可以使用循环 获取连续的下标，从而获取元素。
// 4 -- span的元素个数 -- spanElems.length
var i;
for(i=0;i<spanElems.length;i++)//点击任何一个span都会显示1 2 3 4
{
// spanElems[i],绑定事件 -- onlick
spanElems[i].onclick = function(){
// this -- 触发事件的对象 spanElems[i]
// h获取一个dom节点的内容，可以使用 属性 innerText innerHTML
console.log(this.innerText);
}
}
点击1和2的结果
- 第二种绑定方式
/**
* 采用事件委托的方式，为一个元素下的所有同类型元素绑定事件。
* 事件上移，即绑定到父元素身上
*
*/
// 先固定区域，选中的是class="dots"
var dotsElem = document.getElementById("dots");
dotsElem.onclick = function(e)
{
// 需要过滤目标，借助于事件触发的时候获取到的event对象 -- 命名 e event ev
//过滤的原因是父节点范围有时会超过我们所需要的，比如像点击1 2 3 4，但因为上移到父节点，所以范围扩大了
//点击那整一行都能触发事件，所以要过滤下，当我们点击的位置的类型是span时才触发
// event对象 -- 触发事件的对象
// console.log(e.target);//e.target能获取节点的标签类型
// dom节点是span nodeName属性
// console.log(e.target.nodeName);//能够打印出当前节点的标签类型
if(e.target.nodeName == "SPAN")
{
// console.log(this); // this -- 事件的绑定者，这里是父节点div，而非span，所以这里不用this
console.log(e.target.innerText);
}
}
一般采用事件委托绑定点击事件
window.onmouseenter&window.onmouseleave
dotsElem.onmouseenter = function()//鼠标移入触发
{
console.log("enter");
}
dotsElem.onmouseleave = function()////鼠标移出触发
{
console.log("leave");
}
js定时器
隔一段事件执行一次
var intval1 = setInterval(function(){
// ....
},1000);//,后面是间隔的时间，单位是毫秒
取消定时器
clearInterval(intval1 );
案例
var startBtn = document.getElementById("start");
var endBtn = document.getElementById("end");
var intval1;
startBtn.onclick = function()
{
intval1 = setInterval(function(){//点击按钮“开始”每隔1s打印111111
console.log("111111");
},1000);
}
endBtn.onclick = function()点击按钮“结束”就停止intval1
{
clearInterval(intval1);
}
