四.JavaScript(一)

1.JavaScript的基本使用

1.JavaScript 是什么

JavaScript原名liveScript, 是一门动态类型，弱类型基于原型的脚本语言

2.JavaScrpit 的作用

1.页面特效

2.前后交互

3.后台开发（node）

3.JavaScript 写在哪里

1.Script 标签里

2.外部的 js 文件内

例：

1.1JavaScript的注意事项

1.JavaScript是一种脚本语言，是一种动态类型、弱类型

2.JavaScript通常用来操作HTML页面的

html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)

JS代码写在哪里：

script标签里面

写在外部.js后缀文件里面，通过script标签引入

写在标签里面

注意：在引入js文件的script里面，一定不能再写js代码

标签里面写js代码一般情况下不推荐(指行内的样式)

script标签的位置：

head或者body里面

要注意是否需要加上window.onload(如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上：window.onload)

如果说没有什么特别的要求，一般script标签放在body结束之前

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}</style><script>//alert(8);//如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上：window.onloadwindow.onload=function(){alert(8);//这里再写代码（意思是：当整个页面加载完成之后，再执行这里的代码）}//一个页面中只能出现一次window.onload</script>
</head>
<body><script src="index.js"></script><script>/*1.JavaScript是一种脚本语言，是一种动态类型、弱类型2.JavaScript通常用来操作HTML页面的html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)JS代码写在哪里：script标签里面写在外部.js后缀文件里面，通过script标签引入写在标签里面注意：在引入js文件的script里面，一定不能再写js代码标签里面写js代码一般情况下不推荐(指行内的样式)script标签的位置：head或者body里面要注意是否需要加上window.onload如果说没有什么特别的要求，一般script标签放在body结束之前*/alert(55);//弹窗调试代码//Alert(5);console.log(888);//打印调试代码</script>
</body>
</html>

运行结果：

1.2 JavaScript 修改元素内容

1. 首先获取id为xxx的元素

document.getElementById(“”);

2. var 是 js 定义变量的关键字

3. innerHTML 和 innerText 可以修改/获取

1.3JavaScript获取元素

1. id ：

document.getElementById(“”); 通过id获取元素

2. class ：

document.getElementsByClassName(“”); 通过class名字获取元素

3.tagName :

document.getElementsByTagName(“”); 通过标签名获取元素

4. name :

document.getElementsByName(“”); 通过 name的属性获取元素，一般用于input

5. selector :

document.querySelector (“”); 通过CSS选择器获取一个

document.querySelectorAll(“”);通过CSS选择器获取所有

2.简单事件

onclick 单击事件

ondbclick 双击事件

onmouseenter 鼠标划入

onmouseleave 鼠标划出

onresize 窗口变化

onchange 改变下拉框

例：以cnsole打印的方式

所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应。

在事件函数里面，有一个关键字this，代表当前触发事件的这个元素

事件：用户的操作

元素.事件=函数；

鼠标事件：

左键单击onclick

左键双击ondblclick

鼠标移入onmouseover/onmouseenter***

鼠标移出onmouseout/onmouseleave***

例：以this的方式触发事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{width:300px;height:100px;line-height:100px;text-align:center;margin:50pxauto;background:#51cfff;}</style>
</head>
<body><div class="box1"></div><div class="box1"></div><div class="box1"></div><script>/*所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应。在事件函数里面，有一个关键字this，代表当前触发事件的这个元素事件：用户的操作元素.事件=函数；鼠标事件：左键单击onclick左键双击ondblclick鼠标移入onmouseover/onmouseenter***鼠标移出onmouseout/onmouseleave****/var aBox=document.querySelectorAll(".box1");/* aBox[i]代表了按顺序排列的第几号盒子 */ aBox[0].onclick=function(){this.innerHTML="我被点击了";};aBox[1].onmouseenter=function(){aBox[0].innerHTML="下面被移入了";this.innerHTML="我被移入了";};aBox[2].onmouseleave=function(){this.innerHTML="我被移出了";};</script>
</body>
</html>

运行结果：

3.修改样式

3.1操作标签

例：

js操作元素的标签属性：

规范的标签属性：

.符号直接操作（可读可写）

不规范（自定义）的标签属性：

获取：.getAttribute()

设置：.setAttribute()

移除：.removeAttribute()

注意：

所有的路径、颜色获取的结果不一定是你写的内容

通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素

自定义标签属性的操作方式，同样可以操作符合规范的标签属性

例：

<!DOCTYPE  html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}</style>
</head>
<body><a href="01-作业.html"target="_blank"id="box"class="wrap"tz="xp">去百度</a><script>/*js操作元素的标签属性：规范的标签属性：.符号直接操作（可读可写）不规范（自定义）的标签属性：获取：.getAttribute()设置：.setAttribute()移除：.removeAttribute()注意：所有的路径、颜色获取的结果不一定是你写的内容通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素自定义标签属性的操作方式，同样可以操作符合规范的标签属性*/var oA=document.getElementById("box");//alert(oA.target);//可读性oA.target="_self";alert(oA.href);//oA.href="http://jd.com";//可写性//alert(oA.className);//class属性要用classNameoA.className="www";oA.className="";//alert(oA.getAttribute("tz"));//oA.setAttribute("tz","py");//oA.removeAttribute("tz");//alert(oA.getAttribute("href"));//oA.setAttribute("target","_black");</script>
</body>
</html>

运行结果：

3.2 JS 操作样式

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{width:100px;height:50px;background:#51cfff;}.box{width:300px;height:300px;background:blue;}</style>
</head>
<body><div id="box"></div><script>/*行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的*/var oBox=document.getElementById("box");oBox.onclick=function(){//oBox.style.width="300px";//oBox.style.height="300px";//oBox.style.backgroundColor="red";//oBox.style.cssText="width:300px;height:300px;background:red;"oBox.className="box";//操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）//oBox.style.marginLeft="100px";//oBox.style["margin-left"]="150px";var a="margin-top";oBox.style[a]="50px";}</script>
</body>
</html

运行结果：点击后触发事件

4.JS数据类型

js六大数据类型

number——数字在js里面的小数和整数统一都是数字-2^53--2^53超出范围之后精度就会不准确

string——字符串

boolean——布尔值true false

null

undefined——未定义一个变量声明之后没有赋值就是undefined

object——对象

在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null

例：数据js类型打印

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}</style>
</head>
<body><script>/*js六大数据类型number——数字在js里面的小数和整数统一都是数字-2^53--2^53超出范围之后精度就会不准确string——字符串boolean——布尔值truefalsenullundefined——未定义一个变量声明之后没有赋值就是undefinedobject——对象在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null*///vara=8;//number//vara="5";//string//vara=true;//boolean//vara="false";//string//vara;//undefined//vara=[1,2,3,4];//object//vara={"name":"xiaopo","age":18};//objectalert(typeof a);</script>
</body>
</html>

5.例：用JS 和表格实现属性转换

CSS文件：


@font-face {font-family: "iconfont";src: url('//at.alicdn.com/t/font_922719_nb9px1crt1s.eot?t=1542488467316'); /* IE9*/src: url('//at.alicdn.com/t/font_922719_nb9px1crt1s.eot?t=1542488467316#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),url('//at.alicdn.com/t/font_922719_nb9px1crt1s.ttf?t=1542488467316') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('//at.alicdn.com/t/font_922719_nb9px1crt1s.svg?t=1542488467316#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-jiantouyou:before { content: "\e61f"; }.icon-jiantouzuo:before { content: "\e620"; }.icon-aixin:before { content: "\e7fa"; }.icon-gouwuche:before { content: "\e606"; }.icon-sousuo:before { content: "\e670"; }

HTML文件


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href=" http://at.alicdn.com/t/font_922719_nb9px1crt1s.css"><style>* {margin: 0;padding: 0;}input{width: 300px;height: 40px;margin:10px 10px;}.box{background-color: cornflowerblue;width: 200px;height: 50px;margin-left: 125px;text-align: center;}div{width:304px;height: 200px;background-color: #51cfff;margin-left: 75px;text-align: center;line-height: 200px;font-weight:bolder;font-size: 50px;color: indigo;position: relative;font-family: 华文彩云}div #box3{font-family:华文中宋;font-size: 25px;position: absolute;left: 115px;top:40px;height: 25px;}</style>
</head>
<body>&emsp;属&emsp;性<input type="text" placeholder="输入CSS属性" value=""><br>&emsp;属性值<input  type="text" placeholder="输入CSS属性值" value=""><br><input class="box"  type="button" value="设置"><br><div id="box2" style="">风雨同舟<p id="box3">明<i class="iconfont icon-aixin "></i>玥</p></div><script>var oBox2 =document.getElementById("box2");var oInput=document.getElementsByTagName("input");/*alert(oInput.length)*/oInput[2].onclick = function () {var a = oInput[0].value;var b = oInput[1].value;oBox2.style[a]=[b];oInput[0].value = "";oInput[1].value="";}</script>
</body>
</html>

运行结果：