JavaScript
Posted 被褐怀玉888988
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。
C1-3网站界面开发
一、与html的链接方式
javascript应放于body结束前。
1.script
1.用于在其中写javaScript的代码
<body>
<script>
</script>
</body>
2.可以用src引入相关文件
<body>
<script src="">
</script>
</body>
二、数据类型
基础类型
1、String
字符串
2、Number
数字，可以带小数点，可以不带
3、Boolean
布尔值，true或false
4、Undefined
Undefined 这个值表示变量不含有值。
5、Null
null 空变量。
复合类型
1、Array
数组，可以多种数据类型混合,用[ ]定义
2、Object
对象，大部分情况下要有成对的属性和值，或是函数，用{ }定义
var Lihua = {"Name":"Lihua","Age":"28",};
3、function
函数
三、关键字
1.alert
在弹窗中显示字
alert('hello world');
结果如下：
2.console.log()
可以看到在页面中输入的内容
console.log('hello world');
打开浏览器点击f12可以看到
3.声明变量
var
全局作用域
let
可以重赋值的局部变量
const
不可以重赋值的局部变量
4…toUpperCase()和.toLowerCase()
将字符串全部变大写或小写
s.toUpperCase()
s.toLowerCase()
5…indexOf()
获取括号内字符的位置标签
var s=['w','a','z'];
console.log(s.indexOf('w'));
6…subString()
切割，类似于java中subString()
console.log('hello world'.substring(0,5));
7…split()
将字符串按括号中内容切割
console.log('|hello|world|'.split("|"));
8…push()
往数组后添加
var s=['w','a','z'];
s.push('z');
console.log(s);
9…unshift()
往数组前添加
var s=['w','a','z'];
s.unshift('w');
console.log(s);
10…pop()
去掉数组最后一个元素
var s=['w','a','z'];
console.log(s.pop());
console.log(s);
四、JSON
可以用JSON.stringify()，将括号内的内容变为JSON格式
var s1=JSON.stringify(['w','a','z']);
console.log(s1);
五、循环结构
类似于C语言，但可以用for(…of…)结构
var s1=(['w','a','z']);
for(let s of s1)
console.log(s);
六、分支结构
相比于C语言，这里重点是== 与 === 的区别， == 前后数值相等即为相等如‘10’ == 10的结果为true， === 是绝对相等，即‘10’ === 10的结果为false。
七、函数
值得注意的是，命名函数需要关键字function
function functionName(){
}
也可以用如下结构
var functionName=()=>{
}
八、对象
与java类似class为关键词
class objectName{
constructor(){
}(类似于构造方法)
constructorName(){
}(类似于普通方法)
九、DOM
1、单元素选择器
document.getElementById()选单个id
document.querySelector()用于选该类和该标签的第一个元素
const img = document.getElementById("img" + i);
const img = document.querySelector(.img);
2、多元素选择器
document.querySelectorAll()用于选该类和该标签所有的元素
const img = document.querySelectorAll(.img);
3、操控和修改DOM
1…remove
去除元素
a.remove();
2…textContent
修改内容
a.textContent="";
3…innerHTML
修改html内容
a.innerHTML='';
4.style
i.style.所要修改属性=’ ’
i.style.background-color='red';
4、监听
i.addEventListener(event,fn,useCaption );
十、实现简单交互
1、轮播自动播放
1.1、需求分析
有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换
1.2、所需函数
- 读取id document.getElementById
- 定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval
- clearTimeout
- 显示图片 img.style.display = “block”
- 隐藏图片 img.style.display = “none”
1.3、步骤分析
- 事件要触发 : init()
- 函数里面要做一些事情:(通常会去操作元素,提供交互)
- 开启定时器: 执行切换图片的函数 changeImg()
- changeImg()
- 获得要切换图片的那个元素
1.4、JS代码
var i=0;
function init(){
const img = document.getElementById("img" + i);
img.style.display = "block";
setTimeout("changeImg()",300);
}
function changeImg(){
const img = document.getElementById("img" + i);
img.style.display = "none";
if (i == 3)
i = 0;
else
i++;
init();
}
init();
2、省市联动效果
1.1、需求分析
1.2、所需函数
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
1.3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="c3.css">
<meta charset="UTF-8">
<title>联动</title>
</head>
<body>
<div>
<select class="pig_select" id="province" onchange="change_city()" >
<option>请选择省</option>
</select>
<select class="pig_select" id="city" onchange="change_area()">
<option>请选择市</option>
</select>
<select class="pig_select" id="area">
<option>请选择区</option>
</select>
</div>
<script type="text/javascript" href="yu.js">
</script>
</body>
</html>
以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章