初见JavaScript
2018-06-11 本文已影响0人
Python野路子
初识JavaScript
- JavaScript 一种脚本语言，是一种动态类型、弱类型（弱类型可以自动转换，不需要手工。动态类型python可以做任何类型的变量）
- JavaScript通常用来操作HTML页面的
- html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)
js代码位置
JavaScript代码可以写在页面的script标签里面，或者单独的js文件里面，或者标签属性里面（不推荐）
- 写在页面的script标签里面
<script>
alert(2);//弹窗 用来调试代码
console.log(888);//打印到控制台 用来调试代码
</script>
- 写在外部.js后缀文件里面，通过script标签引入
<script src="5-js02.js">/*引入外部js文件*/</script>
# 注意：在引入js文件的script标签里面，一定不能再写js代码
#外部js文件5-js02.js
alert("我是外部6-js02.js文件");
script标签的位置：
- 一般script标签会被放在头部或尾部。头部就是<head>里面，尾部一般指<body>里。不同位置要注意加载顺序，如果没有什么特殊要求，通常放在body 结束之前。
- 如果script里面涉及到操作后面的元素，而script又非得放在前面的话，需要加上window.onload（一个页面中只能出现一次window.onload）
<head>
<meta charset="UTF-8">
<title>初识JavaScript</title>
<script>
alert("script写在head里面");
//如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上window.onload：
window.onload = function(){
alert("我是加上window.onload里面的"); //这里再写代码（意思是：当整个页面加载完成之后，再执行这里的代码）
}//一个页面中只能出现一次window.onload
</script>
</head>
html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。
写js代码需要注意什么？
- 注释里面是没有要求的
- 严格区分大小写
- 语句字符都是半角字符（字符串里面可以使用任意字符）
- 某些完整语句后面要写分号
- 代码要缩进，缩进要对齐
- 引号里面代表字符串，字符串是没有代码的功能的，所以不需要满足上述要求。
注释
- 多行注释 /* */
- 单行注释 //
js里的系统弹窗代码
alert("内容");
js里的打印
console.log(1);
js获取元素及修改内容
其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签
独有标签的获取：
document.title document.title
document.body document.body.innerHTML(会解析标签)
document.body.innerText(不会会解析标签)
document.head document.head.innerHTML
其他标签的获取
- 通过id获取元素，document.getElementById("box");
//获取的是确切的某个元素，可以直接操作这个元素
var oBox = document.getElementById('box');
console.log(oBox)
oBox.innerHTML +="我是通过id获取来改变的"
- 通过class获取getElementsByClassName()（不兼容IE8及以下）
#获取的是一堆元素的集合，设置操作的时候要通过下标（索引、序号）拿到对应的某一个
var oBox = document.getElementsByClassName("box");
console.log(oBox);
console.log(oBox.length);//长度
oBox[0].innerHTML += "我是通过ClassName获取来改变的"; //即便长度为1也要用索引
- 通过标签名获取，getElementsByTagName()
var oP = document.getElementsByTagName("p");
console.log(oP.length);
oP[1].innerHTML += "我我我";
- 通过选择器的写法获取元素：（不兼容IE7及以下）
.querySelector();
.querySelectorAll();
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
//获取第一个对应的元素
var oI = document.querySelector("#box1");
oI.innerHTML +="ahhh"; //获取是第一个元素，只是一个而已，不需要用索引引用
var oI2 = document.querySelectorAll("#box1");
console.log(oI2.length); //2;
oI2[1].innerHTML +="哈哈";
- 通过name获取
.getElementsByName(); #可返回带有指定名称的对象的集合。
注意： 除了ID获取前面必须是document之外，其他的方式，前面可以是某个元素，但不能是集合。
<script>
//注意： 除了ID获取前面必须是document之外，其他的方式，前面可以是某个元素（不能是集合)
var oP = document.getElementsByTagName("p");
console.log(oP);
var oBox = document.getElementById("box");
console.log(oBox);
var oP1 = oBox.getElementsByTagName("p");//获取box下的元素
console.log(oP1);
</script>
元素内容修改
- 修改页面title信息
document.title = "我要把标题改成666";
- 修改别的标签的内容，得用innerHTML或者innerText
innerHTML 可以识别标签
innerText 不能识别标签
- 获取某个确切的元素,可以直接操作这个元素
document.getElementById("box").innerHTML = "吃惊！";
- 获取的是一堆元素的集合，设置操作时要通过下标（索引、序号）拿到对应的某一个再用
document.getElementsByClassName("box")[0].innerHTML = "美女";
- 对于form元素获取值
var text = document.getElementsByTagName("textarea");
console.log(text.value);
- document.write()
在文档流关闭之前，给body部分新增内容,在文档流关闭之后，修改整个HTML的内容。
<script>
/*
document.write()
在文档流关闭之前，给body部分新增内容
在文档流关闭之后，修改整个html的内容
*/
document.write("<em>在文档流关闭之前，给body部分新增内容</em>");
window.onload = function () {
document.write("<em>在文档流关闭之后，修改整个html的内容</em>"); //文档流关闭可以理解为body结束
}
</script>
事件
- 用户的操作 元素.事件 = 函数；
- 鼠标事件
onclick 左键单击
ondblclick 左键双击
onmouseenter 鼠标移入
onmouseleave 鼠标移出
<body>
<div>hahah</div>
<script>
/*
所谓事件，是指 JavaScript 捕获到用户的操作，并做出正确的响应。
在事件函数里面，有一个关键字this，代表当前触发事件的这个元素
事件：用户的操作
元素.事件 = 函数；
鼠标事件：
左键单击 onclick
左键双击 ondblclick
鼠标移入 onmouseover/ onmouseenter ***
鼠标移出 onmouseout/ onmouseleave ***
*/
var oBox = document.getElementsByTagName("div");
oBox[0].onclick = function () {
console.log("我被点击了");
this.innerHTML = "我被点击了";
};
oBox[0].onmouseenter = function(){
console.log("我被移入了");
this.innerHTML = "我被移入了";
};
oBox[0].onmouseleave = function() {
console.log("我被移出了");
this.innerHTML = "我被移出了";
};
</script>
</body>
js操作元素的标签属性
- 规范的标签属性：
. 符号直接操作(可读可写) - 不规范（自定义）的标签属性：
- 获取 getAttribute
- 设置 setAttribute
- 移除 removeAttribute
<body>
<a href="5-js事件05.html" id="box" class="box" target="_blank" tz="llp182">百度下</a>
<script>
/*
js操作元素的标签属性：
规范的标签属性：
. 符号直接操作（可读可写）
不规范（自定义）的标签属性：
获取：.getAttribute
设置：.setAttribute
移除：.removeAttribute
注意：
所有的 路径、颜色 获取的结果不一定是你写的内容
通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
自定义标签属性的操作方式，同样可以操作符合规范的标签属性
*/
var oA = document.getElementById("box");
// alert(oA.id); //可读
// alert(oA.target);
// alert(oA.className); //class属性 要用className
// alert(oA.tz); //undefined 自定义标签直接.获取不到
oA.id = "wrap";
oA.target = "_self"; //可写
oA.className = "";
alert(oA.getAttribute("id"));
alert(oA.getAttribute("tz"));
oA.setAttribute("tz","py");
oA.setAttribute("web","pc");
oA.removeAttribute("target"); //自定义标签属性的操作方式，同样可以操作符合规范的标签属性
oA.removeAttribute("class");
alert(oA.href);
/*添加，删除类名，也可一次性添加多个*/
sliderLi[index].classList.add("show");
sliderLi[index].classList.add("show","show1","show2");
cycleLi[index].classList.remove("on");
cycleLi[index].classList.remove("on","on1","on2");
</script>
</body>
注意：所有的 路径/颜色 获取的结果不一定就是你写的内容
通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素
自定义标签属性的操作方式，同样可以操作符合规范的标签属性
控制元素的样式
- 行内样式标签属性：大部分情况下，js都是通过操作行内样式达到修改样式的目的， 当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式
- 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）
<body>
<div id="box" class="box"></div>
<script>
//行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的
// <div id="box" class="box" style="width: 100px;height: 100px;background: red;"> 类似用js操作这种形式；
//当我们需要修改单个属性的时候，我们一般都是直接.操作去修改元素的行内样式
var oBox = document.getElementById("box")
// oBox.style.width = "300px";
// oBox.style.height = "300px"
// oBox.style.background = "red";
//样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。
oBox.style.cssText = "width:200px;height:200px;background:red"; //cssText 的本质就是设置 HTML 元素的 style 属性值。这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
//可以利用累加，在前面添加一个分号（同样属性利用后来居上覆盖）来解决这个问题
oBox.style.cssText += ";width:200px;height:200px;background:red";
// 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）
oBox.style.marginLeft = "10px"; //margin-left
oBox.style["margin-top"] = "50px";
</script>
</body>
案例
-
需求：
①打开时
image.png
②点击时
image.png
image.png
-
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业6</title>
<style>
div{
width: 200px;
height: 50px;
background: yellow;
border-radius:20px 20px 20px 20px;/*左上角，右上角，右下角，左下角*/
margin: 50px auto; /*上下50px 左右auto*/
text-align: center; /*水平居中*/
line-height: 50px; /*行高使字垂直居中*/
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script>
var oDiv = document.getElementsByTagName("div");
oDiv[0].onclick = function(){
this.innerHTML = "我被点击了";
this.style.color = "red";
oDiv[1].innerHTML = "老大被点击了";
oDiv[1].style.color = "blue";
oDiv[2].innerHTML = "老大被点击了+1";
oDiv[2].style.color = "blue";
};
oDiv[2].onclick = function(){
this.innerHTML = "我被点击了";
this.style.color = "red";
oDiv[0].innerHTML = "小弟被点击了";
oDiv[0].style.color = "blue";
oDiv[1].innerHTML = "小弟被点击了+1";
oDiv[1].style.color = "blue";
oDiv[3].innerHTML = "<a href='http://www.baidu.com'>百度下</a>";
};
</script>
</body>
</html>
