- Javascipt：是一门弱类型的脚本语言，需要在网页上执行。
- html负责框架结构，css负责样式修饰，js负责行为交互，动态效果。
- 前端三大件：html，css，js。
- javascript 和 java 之间没有任何关系。
js的三种引入方式
- 行内脚本
- 页内脚本
- 引入外部样式表
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
<!-- 页内样式 -->
<script type="text/javascript">
var a = '你好';
alert(a);
console.log("你好，世界！");//控制台打印输出：你好，世界！
console.log(a);//控制台打印输出：你好
</script>
<!-- 引入外部样式 -->
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 行内引入 -->
<div onclick="alert('你好，世界！')"></div>
</body>
</html>
Javascript
console.log("引入外部脚本文件");
打印输出结果
变量常量，数据类型，运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//es5，2004版。es6版本
// 1.变量常量
var a = 10;
var b = 20.5;
var c = 'aa';
var d = "你好";
var e = true;
//const a1 = 20;//常量
//a1 = 30;
//2.数据类型
//第一种：原始类型，第二种：引用类型
//原始类型：number,string,boolean,null,undefined
var f;
console.log(f);
//3.运算符
//算术运算符：+ - * / %
var c1 = 20;
var c2 = 3;
console.log(c1 / c2);
console.log(c1 % c2);
var d1 = 0.1;
var d2 = 0.2;
var d3 = 0.3;
console.log(d2 - d1);
console.log(d3 - d2);
//比较运算符：> < >= <= == != 额外的：=== 恒等于 !==
var e1 = 1;
var e2 = "1";
console.log(e1 == e2); //双等号不判断数据类型
console.log(e1 === e2); //不仅值要相等，数据类型也要相同
//逻辑运算符：&& || ! 与java完全相同
var year = 2004;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
console.log("闰年");
}
//赋值运算符：+= -= *= /= %= ++ --，与java完全相同
//示例：99乘法表
for (var i = 1; i <= 9; i++) {
var out = "";
for (var j = 1; j <= i; j++) {
out += j + "*" + i + "=" + j * i + " ";
}
console.log(out);
}
</script>
</head>
<body>
</body>
</html>
流程控制：和java完全相同
- 顺序结构
- 选择结构：if if…else switch…case
- 循环结构：while for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//输出所有三位数的素数
for (var i = 100; i <= 999; i++) {
var isSushu = true;
for (var j = 2; j < i; j++) {
if (i % j == 0) {
isSushu = false;
break;
}
}
if (isSushu) {
console.log(i + "是素数")
}
}
</script>
</head>
<body>
</body>
</html>
数组
以下内容参考自W3school在线教程
- 数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
var person = ["Bill", "Gates", 62];
var person = {firstName:"John", lastName:"Doe", age:46};
- JavaScript 变量可以是对象。数组是特殊类型的对象。可以在相同数组中存放不同类型的变量。
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
- 关联数组：很多编程元素支持命名索引的数组。具有命名索引的数组被称为关联数组（或散列）。JavaScript 不支持命名索引的数组。在 JavaScript 中，数组只能使用数字索引。
var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length; // person.length 返回 3
var y = person[0]; // person[0] 返回 "Bill"
- 假如使用命名索引，JavaScript 会把数组重定义为标准对象。之后，所有数组的方法和属性将产生非正确结果。
var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length; // person.length 将返回 0
var y = person[0]; // person[0] 将返回 undefined
- 数组和对象的区别
- 在 JavaScript 中，数组使用数字索引。在 JavaScript 中，对象使用命名索引。数组是特殊类型的对象，具有数字索引。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 数组可以理解为对象
var a = [];//定义空数组，语法糖
a[0] = 10;
a[1] = "hello";
a[3] = 4.5;
a[20] = "你好";
// 从尾部添加一个数据，pop即从尾部取出并移除
a.push("push一个数据")
//从头部压入一个数据，shift即从头部取出并移除
a.unshift("unshift一个数据");
console.log(a.length);
console.log(a);
//冒泡排序
var b = [10,2,3,48,33,20,1,49,30];
console.log("b数组排序前的结果为："+b);
for(var i = 0;i<b.length;i++){
for(var j = 0;j<b.length;j++){
if(b[j]>b[j+1]){
var t = b[j];
b[j] = b[j+1];
b[j+1] = t;
}
}
}
console.log("b数组排序后的结果为："+b);
//裁切数组，从2~4，被裁切的原数组不变
console.log(b.slice(2,4));
console.log(b);
//裁切后原数组改变
console.log(b.splice(2,4));
console.log(b);
var c = new Array();//定义空数组
</script>
</head>
<body>
</body>
</html>
函数
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//定义函数参数无需写类型，都是var
function jieCheng(n) {
var result = 1;
for (var i = 1; i <= n; i++) {
result *= i;
}
return result;
}
console.log(jieCheng(5));
</script>
</head>
<body>
</body>
</html>
对象
示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//js的面向对象
//js中的对象，就是键值对的集合
var a = {}; //对象，空对象，语法糖
//var a = new Object();//等同的
//自由对象
var a1 = {
name: "张三",
sex: "男"
};
console.log(a1);
//添加一个新的键值对
a1.age = 30;
a1["birthday"] = "2002-1-1";
a1[2] = 100;
console.log(a1);
</script>
</head>
<body>
</body>
</html>
示例 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//在js中，函数就是一个对象
function Student(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.sayHello = function() {
console.log(this.name + " says hello");
};
}
var stu1 = new Student("张三", "男", 20);
console.log(stu1.name);//张三
console.log(stu1["sex"]);//男
stu1.sayHello();//张三 says hello
stu1.birthday = "2000-1-1";
console.log(stu1);//添加birthday属性
//移除一个属性
delete stu1.birthday;
console.log(stu1);
//js继承机制
MidSchoolStudent.prototype = new Student();
function MidSchoolStudent(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
}
//js的面向对象（封装、继承、多态）是通过原型机制来实现的，和java完全不同
var stu2 = new MidSchoolStudent("李四", "女", 35);
stu2.sayHello();//李四 says hello
</script>
</head>
<body>
</body>
</html>
DOM
- 文档对象模型。Doucment Object Model。
在 js 中，将每一个元素理解成一个对象。- document是内置的一个对象，表示整个html文档
- 常用dom对象的属性和方法：
- tagName：
- innerText：返回元素的内容文本，不包括html。
- innerHTML：返回元素的html内容。
- style：就是获取元素的行内样式。
- className:类名称
- classList:类名称集合
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mydiv" class="outer" style="color: blue;"><span>初始值</span></div>
<script type="text/javascript">
// DOM:Document Object Model，被译为文档对象模型。
// DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。
// 浏览器加载并运行HTML页面后，会创建DOM结构。由于DOM中的内容被封装成了JavaScript语言中的对象，所以我们可以使用JavaScript语言通过DOM结构来访问和操作HTML页面中的内容。
// Document对象提供实现定位页面元素的方法具有如下几种:
// getElementById()方法:通过页面元素的id属性值定位元素。
// getElementsByName()方法:通过页面元素的name属性值定位元素。
// getElementsByTagName()方法:通过页面元素的元素名定位元素。
// getElementsByClassName()方法:通过页面元素的class属性值定位元素。
// querySelector()方法:通过CSS选择器定位第一个匹配的元素。
// querySelectocAll()方法:通过CSS选择器定位所有匹配的元素。
var mydiv = document.getElementById("mydiv");
console.log(mydiv.tagName.toLowerCase());//div
console.log(mydiv.innerText);//初始值
console.log(mydiv.innerHTML);//<span>初始值</span>
console.log(mydiv.id);//mydiv
mydiv.innerText = "修改初始值";
mydiv.style.color = "red";
console.log(mydiv.style);//输出所有的style样式：CSSStyleDeclaration
mydiv.style.backgroundColor = "pink";
mydiv.style["background-color"] = "skyblue";
mydiv.style.width = "100px"
console.log(mydiv.className);//outer
mydiv.className = "inner";
mydiv.classList.add("a");
mydiv.classList.add("b");
mydiv.classList.add("c");
mydiv.classList.remove("b");
</script>
</body>
</html>
- dom的增删改查
- dom对象.querySelector: 查询第一个满足指定选择器的元素。
- dom对象|querySelectorAll: 查询所有满足指定选择器的元素，返回类数组。
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="outer"></div>
<div class="inner">
<span>
<div class="inner" id="aaa"></div>
</span>
</div>
<script type="text/javascript">
//推荐使用
//
var md = document.querySelector(".inner");
var mds = md.querySelectorAll("div");
console.log(mds);
</script>
</body>
</html>
示例 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="wrapper"></div>
<script type="text/javascript">
var d = document.querySelector(".outer");
//创建一个span元素对象
var dom = document.createElement("span");
dom.innerText = "新增元素";
dom.style.color = "green";
dom.style.padding = "5px 10px";
dom.style.backgroundColor = "rgba(255,255,255,0.5)";
//表示添加一个子元素
d.appendChild(dom);
var wrapper = document.querySelector(".wrapper");
wrapper.appendChild(d);
</script>
</body>
</html>
示例 3
- 父dom.appendChild(子dom): 添加一个子元素。
- document.createElement() :可以创建一个全新的dom对象。
- 父dom.insertBefore(新增元素， 子dom):父dom元素插入一个子元素到"子dom"的前面。
- dom元素。remove()：移除自身
- 父daom元素.removeChild(子dom)：父元素移除一个子元素
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#tbl {
margin: 0 auto;
border-collapse: collapse;
}
#tbl tr>td {
border: 1px solid #ccc;
padding: 30px 30px;
text-align: center;
}
</style>
</head>
<body>
<table id="tbl">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script type="text/javascript">
var tr = document.createElement("tr");
for (var i = 0; i < 3; i++) {
var td = document.createElement("td");
td.innerText = i + 4;
tr.appendChild(td);
}
var tr1 = document.querySelector("#tbl tr");
//获取tr1的父元素
var tbl = tr1.parentElement;
tbl.appendChild(tr);
var td1 = document.querySelector("#tbl td");
var a = document.createElement("a");
a.innerText = "去百度";
td1.appendChild(a);
</script>
</body>
</html>
- DOM的四向遍历（父，子，兄，第）
- 获取父元索: parentElement, 可以获取父元素。
- children：返回所有的子元素，返回值是类数组
- previonsElementSibling：返回前一个兄元素，如果没，则返回null
- nextElementSibling:后一个弟元素，如果没有，则返回null
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var lis = document.querySelectorAll("ul>li");
var li3;
for (var i = 0; i < lis.length; i++) {
if (lis[i].innerText === "3") {
li3 = lis[i];
break;
}
}
var li25 = document.createElement("li");
li25.innerText = "2.5";
var ul = li3.parentElement;
//插入一个子元素到某个子元素的前面
ul.insertBefore(li25, li3);
var li5 = document.querySelector("ul>li:last-child");
//移除自身
//li5.remove();
//父元素移除一个子元素
ul.removeChild(li5);
console.log(ul.childElementCount);
//返回一个类数组，返回其所有子元素
var lis = ul.children;
console.log(lis);
//返回前一个兄元素
var li2 = li3.previousElementSibling;
console.log(li2.innerText);
//返回后一个弟元素
var li4 = li3.nextElementSibling;
console.log(li4.innerText);
</script>
</body>
</html>
- dom事件处理
- js和人进行行为交互
- 添加事件有三种方式
- 直接在标记内，定义onXXX事件
- 给dom元素添加onXXX属性，与第一种指定方式效果完全相同
- 推荐：dom元素.addEvenListener(“事件名称”，事件处理函数)，可以给一个事件添加多个属性。dom元素.removeEvenListner（“事件名称”，事件处理函数名）。
- 事件类型
- click事件，单击事件，频率最高的事件，可以占到90%以上。
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
div {
width: 300px;
height: 200px;
background-color: pink;
/* 过渡 */
transition: all .5s;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<button id="btn" type="button" onclick="changeColor()">点我</button>
<div></div>
<script type="text/javascript">
var div = document.querySelector("div");
/* div.onclick = function(){
div.style.width = "400px";
div.style.height = "300px";
div.style.backgroundColor = "green";
}; */
//把事件取消
// div.onclick = null;
var timer;
//添加事件监听器
div.addEventListener("click", function() {
var sw = document.body.offsetWidth;
var sh = document.body.offsetHeight;
//每隔一定的时间执行一个操作
timer = setInterval(function() {
//左偏移
var offsetLeft = parseInt((Math.random() * sw));
var offsetTop = parseInt(Math.random() * sh);
div.style.top = offsetTop + "px";
div.style.left = offsetLeft + "px";
}, 1000);
});
div.addEventListener("click", function(){
console.log("移动开始");
});
//移除事件
div.removeEventListener("click",func1);
function func1() {
console.log("移动开始");
}
function changeColor() {
var btn = document.querySelector("#btn");
btn.style.backgroundColor = "red";
//停止定时器
clearInterval(timer);
}
</script>
</body>
</html>
- dblclick:双击事件
- onload：window对象和img对象，可以触发
- keypress:按下一个键。字符
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//页面载入结束之后
window.onload = function() {
var mydiv = document.querySelector("#mydiv");
console.log(mydiv);
var ipt = document.querySelector("#username");
ipt.addEventListener("keypress", function(e) {
console.log(e.key + ":" + e.keyCode);
});
}
</script>
</head>
<body>
<div id="mydiv"></div>
<input type="text" id="username">
</body>
</html>
- keydown/键按下事件，可以持续触发，谈起事件只触发一次
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#chrome {
width: 60px;
height: 60px;
background: url(img/091.png) no-repeat center center/cover;
position: absolute;
bottom: 0;
left: calc(50% - 30px);
}
</style>
<script type="text/javascript">
window.onload = function() {
var chrome = document.querySelector("#chrome");
//键按下
document.addEventListener("keydown", function(e) {
//当前元素的上偏移
var currentTop = chrome.offsetTop;
//当前元素的左偏移
var currentLeft = chrome.offsetLeft;
switch (e.key) {
case 'w':
chrome.style.top = currentTop - 5 + "px";
break;
case 'a':
chrome.style.left = currentLeft - 5 + "px";
break;
case 's':
chrome.style.top = currentTop + 5 + "px";
break;
case 'd':
chrome.style.left = currentLeft + 5 + "px";
break;
}
});
}
</script>
</head>
<body>
<div id="chrome"></div>
</body>
</html>
- 定时任务
- setTimeout：在指定的时间后，执行一个操作。 只执行一次。
- setInterval: 每隔指定的时间后，执行一个操作。
- 键盘相关事件：onPress，onKeyDown，onKeyUp
示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.mydiv {
width: 300px;
height: 200px;
background-color: pink;
/* margin-left: 100px;
margin-top: 100px; */
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
var mydiv = document.querySelector(".mydiv");
mydiv.addEventListener("mousedown", function(e) {
console.log("鼠标按下");
console.log(event.button);
});
mydiv.addEventListener("mouseup", function(e) {
console.log("鼠标弹起");
});
mydiv.addEventListener("mousemove", function(e) {
console.log("鼠标移动");
console.log(e.pageX + ":" + e.pageY);
});
mydiv.addEventListener("mouseenter", function(e) {
console.log("鼠标进入");
//console.log(e.pageX + ":" + e.pageY);
mydiv.style.backgroundColor = "green";
var currentLft = mydiv.offsetLeft;
var currentTop = mydiv.offsetTop;
mydiv.style.left = currentLft + 5 + "px";
mydiv.style.top = currentTop + 5 + "px";
});
mydiv.addEventListener("mouseleave", function(e) {
console.log("鼠标离开");
//console.log(e.pageX + ":" + e.pageY);
mydiv.style.backgroundColor = "pink";
var currentLft = mydiv.offsetLeft;
var currentTop = mydiv.offsetTop;
mydiv.style.left = currentLft - 5 + "px";
mydiv.style.top = currentTop - 5 + "px";
});
}
</script>
</head>
<body>
<!-- 鼠标相关事件 -->
<div class="mydiv" onm></div>
</body>
</html>
扫一扫
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
