什么是JavaScript?
创建JavaScript方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
//内嵌式javascript代码
var a=10;
var b=2;
var c=a+b;
console.log('a+b='+c);
</script>
<script src="js/index.js"></script>
<body>
</body>
</html>
变量定义
$
和 _
开头(但是在本教程中我们不会这么做)数据类型
var arr=[1,2,3,4,5];
console.log(typeof(arr));//输出object
运算符
var a=10;
var b=2.1;
var c=a+b;
console.log('a+b='+c);
var arr=[1,2,3,4,5];
console.log(typeof(arr));
var flag1 = 2>3;
var flag2=2<3;
var flag3=2==2;//类型一致的比较
var flag4=2===’2’;//更准确,比较两个值是不是完全一致
代码块Statement
//第一种,简单形
if (条件运算) {
//满足条件时执行
}
//第二种,两分支形
if (条件运算) {
//条件满足时执行
} else {
//条件不满足时执行
}
//第三种,多分支形
if (条件运算1) {
//条件1满足时执行
} else if (条件运算2) {
//条件2满足时执行
} else {
//条件都不满足时执行
}
for
- 多次遍历代码块for/in
- 遍历对象属性while
- 当指定条件为 true 时循环一段代码块do/while
- 当指定条件为 true 时循环一段代码块for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
//求0到100之间的偶数的和
var sum = 0;
for (var i = 0; i < 100; i++) {
if (i % 2 == 0) {
sum += i;
}
}
函数function
function
关键词进行定义,格式如下所示:function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
function getSum(start, end) {
var sum = 0;
for (var i = stasrt; i < end; i++) {
if (i % 2 == 0) {
sum += i;
}
}
return sum;
//return后面的代码将不再执行。
}
var sum1=getSum(0,100);//0,100之间的偶数和
var sum2=getSum(100,200);//100,200之间的偶数和
//条件求和
function getSumWithCondition(start, end, fn) {
var sum = 0;
for (var i = stasrt; i < end; i++) {
if (fn(i)) {
sum += i;
}
}
return sum;
}
//通过函数和条件处理相结合,可以完成一些相对复杂的逻辑的处理
var result = getSumWithCondition(1, 100, function(n) {
if (n % 2 === 0) {
return true;
} else {
return false;
}
});
数组Array
var arr = [1, 2, 3, 4, 5];
//数组的属性:
var len = arr.length //数组的长度
var a = arr[1]; //数组的索引
arr.push(6) //往数组的末尾添加元素
arr.unshift(-1) //往数组的开头添加元素。
arr.forEach(funciton(item, index) {
console.log(item);
});
对象object
var obj = {
name: ’小六’,
age: 18
};
obj.name //访问某个值
for (var k in obj) {
console.log(k, obj[k])
}
DOM(文档对象模型)
var block = document.getElementById(id);
block.textContent = ’文本内容’;
var contents = document.getElementsByName(name); //伪数组
var contents = document.querySelectorAll('p’); //标签选择器获取
var contents = document.querySelectorAll('#container p’); //id选择器
var contents = document.querySelectorAll('.text’); //类名
var content = document.querySelector('.text’); //返回首个满足条件的标签
content.previousElementSibling.textContext = ’’; //上一个兄弟节点
content.nextElementSibling.textContent = ’’; //下一个兄弟节点
var container = content.parentNode; //父节点标签
var items = container.children;
var block = document.getElementById(id);
block.style.width = ’80 px’;
block.style.height = ’80 px’;
block.style.backgroundColor = ’red’;
block.className = ’’; //通过设置类名,也可以设置样式
var block = document.getElementById(id);
block.onclick=function(){
}
block.addEventListener('click’,function(){
});
//同一类型事件,可以添加多个而不会覆盖
block.addEventListener('click’,function(){
});
综合应用【轮播图】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link href="./css/index.css" type="text/css" rel="stylesheet" />
<body>
<div class="container">
<ul>
<li><img src="imgs/one.jpg"></li>
<li><img src="imgs/two.jpg"></li>
<li><img src="imgs/three.jpg"></li>
<li><img src="imgs/four.jpg"></li>
<li><img src="imgs/five.jpg"></li>
</ul>
<div class="dot">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</div>
<div class="bottom">
<button id="prev">上一个</button>
<button id="next">下一个</button>
</div>
<script src="./js/index.js" type="text/javascript"></script>
</body>
</html>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
height: 50%;
text-align: center;
margin-bottom: 10px;
}
.container ul {
width: 50%;
height: 100%;
position: relative;
left: 25%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.container ul li {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
}
.container ul li img {
width: 100%;
height: 100%;
transition: all 2s;
opacity: 0;
}
.container ul li .active {
opacity: 1;
}
.bottom {
text-align: center;
}
.container .dot {
width: 100%;
height: 15px;
position: relative;
margin-top: -40px;
z-index: 5;
opacity: 1;
}
.container .dot .circle {
width: 10px;
height: 10px;
border-radius: 5px;
border: 1px solid greenyellow;
background-color: white;
display: inline-block;
opacity: 1;
}
联系客服