第一个JavaScript程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- script标签内，写Javascript代码 -->
<!-- <script>
alert('hello world!');
</script> -->
<!-- 外部引入 -->
<!-- 注意： script 标签必须成对出现 -->
<script src="js/qj.js"></script>
<!-- 不用定义type,默认就是javascript -->
<script type="text/javascript">
</script>
</head>
<body>
<!-- 这里也可以存放 -->
</body>
</html>
基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 严格区分大小写 -->
<script>
// 1. 定义变量 变量类型 变量名 = 变量值
var num = 1;
var name = 'lisi'
// 2.条件控制
if(2>1){
alert("true");
}
// console.log()在浏览器的后台打印变量！
// 比较运算符，
/*= 赋值
== 等于（类型不一样，值一样，会判断为true）
=== 绝对等于（类型一样，值一样）
坚持不要使用 == 比较，最好用三个等于
须知：
NaN===NaN结果为false,NAN与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题，尽量避免使用浮点数进行计算，可以使用Math.abs()<0.0000001
js数组中的类型可以不相同，取数组下标，如果越界了，就会undefined
*/
</script>
</head>
<body>
</body>
</html>
严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*'use strict'; 必须写在第一行 严格检查模式，预防JavaScript的随意性导致产生的一些问题
* 局部变量建议使用 let 去定义
* */
//全局变量
let i=1;
// ES6 let
alert(1)
</script>
</head>
<body>
</body>
</html>
字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
/*正常字符串我们使用 单引号，或者双引号包裹
* 注意转义字符\
* \n
* \t
* \u4e2d \u#### Unicode字符
* \x41 Asc11字符
* 多行字符串编写 ` `
* */
let name = 'qj';
let age = 3;
let msg = `你好呀，${name}`;
//alert(msg);
alert(name.toUpperCase());//大写 小写是 name.toLowerCase()
/*常用方法：
* indexOf()
* substring() 截取字符串
*
* */
</script>
</head>
<body>
</body>
</html>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
* slice() 截取Array的一部分，返回一个新数组 类似于String中的substring
* push,pop 压入尾部，弹出尾部
* unshift() 压入头部,shift() 弹出头部 头部操作
* sort() 排序
* reverse() 反转
* concat() 拼接 注意：并没有修改数组，只是会返回一个新的数组
* join() 打印拼接数组 ，使用特定的字符串连接
* */
</script>
</head>
<body>
</body>
</html>
对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*对象：
* 使用一个不存在的对象属性，不会报错！ undefined
* 动态的删减属性，通过delete删除对象的属性
* 动态的添加，直接给新的属性添加值即可
* 判断属性是否在这个对象中 xxx in xxx!
* 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
* */
</script>
</head>
<body>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
*age.forEach(function(value){ console.log(value) }) 遍历数组
* for(var num in age){ console.log(age[num]) }
* */
</script>
</head>
<body>
</body>
</html>
Map和Set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
/*学生的成绩，学生的名字
* var names = ["tom","jack","haha];
* var score = [100,90,80];
* for in 下标
* for of 遍历值
* */
var map = new Map([['tom',100],['jack',90],['haha',80]]);
map.get('tom');//查询
map.set('admin',123456);//修改或新增
map.delete('tom');//删除
for (var x of map)
{
console.log(x);
}
var set = new Set([3,1,1,1,1]); //set可以去重
set.add(2);
set.delete(1);
set.has(3);
</script>
</head>
<body>
</body>
</html>
定义函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*函数
* 一旦执行daoreturn代表函数结束，返回结果
* 如果没有执行return，函数执行完也会返回结果，结果就是undefined
* */
//定义方式1
function abs(x) {
if (x>=0){
return x;
}
else {}
return -x;
}
//定义方式2
var abs = function(y) {
}
/*arguments
* 是一个JS免费赠送的关键字，arguments包含所有的参数*/
//已经定义之外的参数放入rest
function aaa(a,b,...rest) {
}
</script>
</head>
<body>
</body>
</html>
函数的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 变量的作用域
* var定义变量是有作用域的，假设在函数体内声明，则在函数体外不可以使用
* 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
* 所有函数变量的定义放在函数的头部
*
*
* 全局对象window
* 所有的全局变量都会自动绑定在window对象下
*
* 常量const
* */
function qj() {
var x=1;
x=x+1;
}
x=x+2;// x is not defined
</script>
</head>
<body>
</body>
</html>
Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var now = new Date();
now.getFullYear(); //年
now.getMonth(); //月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳 全世界统一 1970 1.1 00：00：00
</script>
</head>
<body>
</body>
</html>
Json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var user = {
name:"qj",
age:'3',
sex:'男'
};
//对象转化为json字符串
var jsonUser = JSON.stringify(user);
//json字符串转化为对象
//JSON.parse()
</script>
</head>
<body>
</body>
</html>
面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var Student = {
run:function () {
console.log(this.name+"run....")
}
};
var xiaoming = {
name:"xiaoming"
};
//小明的原型时 Student
xiaoming.__proto__ = Student;
</script>
</head>
<body>
</body>
</html>
class继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//ES6之后-------
// 定义一个学生的类
class Student{
//构造器
constructor(name){
this.name = name;
}
hello(){
alert("hello");
}
}
class xiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert("我是一名小学生")
}
}
var xiaoming = new Student("xiaoming");
var xiaoxiong = new xiaoStudent("xiaoxiong",1);
/*
* 原型链
* */
</script>
</head>
<body>
</body>
</html>
BOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*操作BOM对象
* window 代表 浏览器窗口
* window.alert(1)
* window.innerHeight
* window.innerWidth
* window.outerHeight
* window.outerWidth
*
*
* Navigator 封装了浏览器的信息
*
*
* screen 代表屏幕尺寸
* screen.width
* screen.height
*
*
* location（重要）代表当前页面的URL信息
* location.reload() 刷新网页
* location.assign(url) 进入其他网站
*
*
* document 代表当前页面
* DOM文档树
* document.getElementById()
* document.cookie
*
*
*
* history 代表浏览器的历史记录
* history.back 后退
* history.forward 前进*/
</script>
</head>
<body>
</body>
</html>
DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象</title>
<script>
/*DOM：文档对象模型
* 浏览器网页就是一个DOM树形结构
* 更新：更新Dom节点
* 遍历Dom节点：得到Dom节点
* 删除：删除一个Dom节点
* 添加：添加一个新的节点
* 要操作一个Dom节点，就必须要先获得这个Dom节点*/
</script>
</head>
<body>
</body>
</html>
获得Dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var h2 = document.getElementById('p1');
var h3 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
/*father.firstChild;
father.lastChild;*/
</script>
</body>
</html>
更新Dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1">
</div>
<script>
var id1= document.getElementById('id1');
id1.innerText='456';
</script>
</body>
</html>
删除Dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
/*删除节点的步骤：
* 先获取父节点，再通过父节点删除子节点*/
var father = document.getElementById('father');
father.removeChild(p1);
</script>
</body>
</html>
创建和插入Dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
// list.appendChild(js); //追加到后面
//通过js 创建一个新的节点
var newP = document.createElement('p');//创建一个P标签
//newP.setAttribute('id','newP');
newP.id = 'newP';
newP.innerText = 'hello , hh';
list.appendChild(newP);
</script>
</body>
</html>
js表单登录判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js表单登录判断</title>
</head>
<body>
<form action="#" method="post" onsubmit="return login()">
<p>
<span>用户名：<input id="username" name="username" type="text"></span>
</p>
<p>
<span>密 码：<input id="password" name="password" type="password"></span>
</p>
<p>
<button onclick="registered()">注册</button>
<button type="submit">登录</button>
</p>
</form>
<script>
var name = 'lisi';
var pwd = '123';
// function registered() {
// var username = document.getElementById('username');
// var password = document.getElementById('password');
// name = username.value;
// pwd = password.value;
// alert("注册成功");
// }
function login() {
var username = document.getElementById('username');
var password = document.getElementById('password');
if (username.value === name&&password.value === pwd)
{
alert('登录成功！！！');
}
else
{
alert('账号或密码错误，请重新登录！！！');
}
}
</script>
</body>
</html>
初始化jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="test-jQuery">点我</a>
<script>
//document.getElementById('test-jQuery');
//选择器就是css的选择器
$('#test-jQuery').click(function () {
alert('hello jQuery');
})
</script>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 标签选择器 document.getElementsByTagName()
* id 选择器 document.getElementById()
* 类 选择器 document.getElementsByClassName()
*/
/*jQuery
* 标签选择器 $('p').click()
* id 选择器 $('#id').click()
* 类 选择器 $('.class').click()*/
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 2px solid red;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
/*鼠标事件
*
* 键盘事件
*
* 其他事件*/
//当网页元素加载完毕之后，响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
</body>
</html>
总的来说，JavaScript是用来交互的，当用户对界面进行操作，能够给与相应的反应。js很重要！！！
扫一扫
928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
