JavaScript
简介:
控制网页行为
JS是一门世界上最流行的脚本语言
java与JavaScript
一个合格的后端人员,必须要精通JavaScript
ECMAScript它可以理解为是JavaScript的一个标准,最新版本已经到了ES6
不过大部分浏览器停留在ES5上
开发环境与线上环境不一致!
快速入门
1.引入JavaScript
- 内部标签引入:
script标签可放置与< title>与< /head>之间或者在< body>下
<script>
//.....
</script>
- 外部引用(建立JavaScript文件):
注意:script标签必须成对出现
<script src="js/aa.js"></script>
进行练习,实现弹窗功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/fc.js"></script>
</head>
<body>
</body>
</html>
alert("xixihaha!!");
alert() 函数对于代码测试非常方便。
2.基本语法
JavaScript严格区分大小写!
<script>
// 1.定义变量 变量类型 变量名=变量值
var num =1;
var zzz = 2;
var score = 1;
alert(num);
// 2.条件控制
if(score>60 && score<70){
alert("60-70");
}else if(score>70 && score<80){
alert("70-80");
}else{
}
alert("other");
}
</script>
**调试JavaScript,**审查元素——>Console
Console.log(score)在浏览器的控制打印变量
审查元素——>Sources:可查看html源代码
点击在行号处就可打断点,进行刷新调试
Application存数据库,查看网站cookie
3.数据类型
变量:是用于存储信息的"容器"。
var 变量名 = 值;
变量名不能以数字开头
变量必须以字母开头
变量也能以 $ 和 _ 符号开头
数据类型有:数值、文本、图形、视频等等
JavaScript不区分小数跟整数,Number
123 //整数
123.1 //浮点数
1.12e4 //科学计数法
-99 //负数
Nan //不是一个数
Infinity //无限大
字符串
‘abx’ "abx"
布尔值
ture false
逻辑运算
&& //与
|| //或
! //非
比较运算器
= //赋值
== //等于(类型不一样,纸一样,也为真)
=== //绝对等于(类型一样,纸一样)
须知:
-
坚持不要使用 == 比较
-
NaN == NaN ,这个与所有的数值都不相等,包括自己
-
只能通过isNaN(NaN)来进行判断数值是否是NaN
浮点数问题:尽量避免使用浮点数进行运算,存在精度问题
console.log((1/3)==(1-2/3))
会打印false
null和undefined
- null——空
- undefined——未定义
数组
一系列相同对象的对象
保证代码的可读性:尽量使用[]
vararr = [1,2,4,"hello",null];
取数组下标:如果越界,会报undefined
对象
对象是大括号;数组是中括号;
var person = {
name:"xiaoming",
age:2,
tags:['js','java','web']
}
每个属性之间用逗号隔开,最后一个不需要添加
取值:
person.name
console输出:> "xiaoming"
person.age
console输出:> 2
严格检查模式
- ‘use strict’;// 严格检查模式,必须写在JavaScript的第一行
- 预防JavaScript的随意性导致产生的一些问题
- 局部变量建议使用 let定义
<script>
i=1; //全局变量,不安全
let i=2; //局部变量
</script>
数据类型
1.字符串
-
正常字符串,使用单引号或者双引号包裹
-
注意,转义字符 : \
\'——单引号
\"——双引号
\\——反斜杠
\n——换行
\r——回车
\t——tab(制表符)
\b——退格符
\f——换页符
- 多行字符串编写:使用`(键盘上esc摁键下的引号)
<script>
'use strict';
console.log()
</script>
\'—>输出’
\n—>换行
\t->
\u4e2d—>\u#### Unicode字符
长字符串:
var msg = `hello
world
nihao
你好`
- 模板字符串
<script>
'use strict';
let name="aa";
let age= 4;
let msg = `nihao,${name}`
</script>
- 字符串长度
str.length
- 字符串的可变性:不可变
<script>
var name="name";
</script>
//在控制台进行改变
console.log(name[0])
打印:undefined
n
name[0]=1 //打印 1
console.log(name)
打印:name
- 大小写转换
//注意这里是方法,不是属性
str.toUpperCase()
str.toLowercase()
//对上面name字符串进行大写转换:
name.toUpperCase()
打印:"NAME"
- 获取指定下标
str.indexOf('x')
//对上面name字符串进行获取指定下标:
name.indexOf('m')
打印:2
- 截取字符串
str.substring(1) //从第一个到最后一个
str.substring(1,3) // 包头不包尾
//对上面name字符串进行截取字符串:
name.substring(1,2)
打印:"a"
2.数组
Array可以包含任意的数据类型
var arr = [1,3,4,5,7]
arr[0]
arr[0]=1
//通过下标取值和赋值
1.长度
arr.length
注意:假如给arr.length赋值,数组大小就会发生变化;如果赋值过小,元素就会丢失。
2.indexOf,通过元素获得下标索引
//字符串的”1“与数字1是不同的
arr.indexOf(1)
打印:3
3.slice()——截取Array的一部分,返回一个新数组,类似与substring,包含头不包含尾
var arr = [1,3,4,5,7]
arr.slice(1,3)
打印:[3,4]
4.push(),pop()
var arr = [1,3,4,5,7]
arr.push("a","b")
arr.pop("a")
push :压入到尾部
pop:弹出尾部的一个元素
5.unshift(),shift()
var arr = [1,3,4,5,7]
arr.unshift("a","b")//压入到头部
arr.shift("a")// 弹出头部一个元素
6.排序sort()
var arr= ["A","C","D","B"];
arr.sort()
打印:["A", "B", "C", "D"]
7.元素反转
var arr= ["A","C","D","B"];
arr.reverse()
打印:["B", "D", "C", "A"]
8.拼接concat()
arr.concat(["c","b","a"])
//concat 并没有修改数组,只是会返回一个新数组
打印:["B", "D", "C", "A", "c", "b", "a"]
9.链接符 join
打印拼接数组,使用特定的字符串链接
arr.join('-')
var arr= ["A","C","D","B"];
arr.join('-')
打印:"A-C-D-B"
10.多维数组
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
输出:4
数组:存放数据(存取方法都可实现)
3.对象
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var person = {
name: "xiaoming",
age: 4,
email:"xx@xx.com",
score: 12
}
JavaScript中对象,{…}表示一个对象,键值对描述属性xxx:xxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
JavaScript中的所有的键都是字符串,值是任意对象
1.对象赋值
person.name="aa"
打印:aa
2.使用一个不存在的对象属性,不会报错
person.haha
打印:undefined
3.动态的删减属性
delete person.name
打印:true
4.动态的添加属性
person.smile = "haha"
打印:haha
5.判断属性值是否在这个对象中 !
'age' in person
打印:true
‘toString’ in person//继承
打印:true
6.判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false
4.流程控制
if判断:
if(score>60 && score<70){
alert("60-70");
}else if(score>70 && score<80){
alert("70-80");
}else{
}
alert("other");
}
while循环:当指定的条件为 true 时循环指定的代码块;do/while : 同样当指定的条件为 true 时循环指定的代码块
var age = 55;
while(age<100){
age= age +1;
console.log(age)
}
do{
age= age +1;
console.log(age)
}while(age<100)
for循环: 循环代码块一定的次数
var age = 3;
for(let i = 0;i<100;i++){
console.log(i)
}
foreach循环 >5.1特性
var a = [21,43,654,876,34,21];
a.forEach(function(value){
console.log(value)
})
for …in 循环:循环遍历对象的属性
var age = [2,3453,56,67,34];
for(var num in age){
console.log(age[num])
}
5.Map和Set
ES6 的新特性8
<script>
'use strict';
var map = new Map([['tom',100],['jerry',90],['jacky',80]]);
var name=map.get('tom');//通过key获得value
map.set('admin',123456);//新增元素
map.delete("tom");//删除
</script>
set:无序不重复的集合!
set.add(w);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
6.iterator
遍历Map、Set
for of >es6新特性
遍历数组
var arr = [3,4,5]
for(var x of arr){
console.log(x)
}
遍历map
let map = new Map([['tom',100],['fc',120],['jerry',80]]);
for(let x of map){
console.log(x);
}
遍历set
var set= new Set([5,6,7,8,9]);
for(let x of set){
console.log(x)
}
函数及面向对象
在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1.定义函数
public 返回值类型 方法名(){
return 返回值;
}
//绝对值函数,定义方式一:
function abs(){
if(x>=0){
return x;
}else(){
return -x;
}
}
有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
如果没有执行 return ,函数执行完也会返回结果,结果就是 undefined
//定义方式二:
var abs=function(x){
if(x>=0){
return x;
}else(){
return -x;
}
}
function(x){…}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数,方式一与方式二等价
- 调用函数:
- 在调用函数时,可以向其传递值,这些值被称为参数。
- 这些参数可以在函数中使用。
abs(10)
abs(-10)
参数问题:JavaScript可以传入任意参数,也可以不传递参数
参数进来是否存在问题?
若不存在参数?手动抛出异常
在程序中先判断:
var abs = function(x){
//手动抛出异常来判断
if (typeof x!== 'number') {
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
-
arguments:
代表传递进来的所有参数,是个数组!
var abs = function(x){
console.log("x=>"+x);
for (var i = 0; i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
输入:abs(-10,203,30,-932)
打印:
x=>-10 //x拿到了输入数字中的第一个
-10
203
30
-932 //循环打印出arguments中的值
10 //将x中的值做了绝对值运算
上面结果中的问题:arguments包含所有参数,想使用多余的参数来进行操作,需要排除已有的参数
- rest :ES6新特性:获取除了已经定义的参数之外的所有参数
rest参数只能写在最后面,必须用…标识
function f(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
f
输入:f(10,-12,30,43,-23)
打印:
a=>10
b=>-12
(3)[30,43,-23]
2.变量的作用域
作用域是可访问变量的集合。
- 在JavaScript中
- 能够定义全局作用域或者局部作用域。
- 对象和函数同样也是变量。
- 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
- 在函数中声明,在函数体外不可以使用
function f(){
var x = 1;
x = x + 1;
}
x=x+2;//会报错:Uncaught ReferenceError:x is not defined
- 如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function f1() {
var x = 1;
x = x + 1;
}
function f2() {
var x = 'A';
x = x + 1;
}
- 内部函数可以访问外部函数的成员,反之不行
function f() {
var x = 1;
// 内部函数可以访问外部函数的成员,反之则不行
function f1() {
var y = x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
- 假设内部函数变量与外部函数变量重名,在JavaScript中函数查找变量从自身函数开始,由 ‘内’ 向 ’外‘ 查找!假设外部存在这个同名的函数变量,内部函数会屏蔽外部函数的变量
function f() {
var x=1;
function f1() {
var x='A';
console.log('inner'+x);
}
console.log('outer'+x);
f1();
}
f();
打印:outer1
innerA
- 提升变量的作用域
//栗子:
function f() {
var x = "x" + y;
console.log(x);
var y = 'y';
}
打印:xundefined
-
- 说明JavaScript执行引擎,自动提升了y 的声明,但是不会提升变量y的赋值;
//上面的栗子相当于:
function f1() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
-
- 养成规范:所有的变量定义放在函数的头部,不要乱放,便于代码维护。
//例如:
function f2(){
//变量放在函数头部
var x = 1,
y = x+2,
z,a,b; //undefined
//之后调用
}
-
全局函数
- 全局变量
x = 1; //全局变量 function f() { console.log(x); } f(); console.log(x); 打印:1 1
- 全局对象 window
var x = 'xxx'; alert(x); alert(window.x); // 默认所有的全局变量,都会自动绑定在 window对象下; 输出:两次弹窗,内容为xxx
alert() 这个函数本身也是一个 window 变量;
window.alert() 方法可以不带上window对象,直接使用**alert()**方法。
var x = 'YYY'; window.alert(x); var old_alert = window.alert; //old_alert(x); window.alert = function () { }; // 发现 alert() 失效了 window.alert(123); //恢复 window.alert = old_alert; window.alert(456);
- JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错 ReferenceError。
-
规范
- 由于所有的全局变量都会绑定到window上,如果不同的js文件,使用了相同的全局变量,会产生冲突
<script> // 唯一全局变量 var Vary = {}; // 定义全局变量 Vary.name = 'xiaoming'; Vary.add = function (a,b) { return a + b; } </script> 输入:Vary.name 打印:"xiaoming" 输入:Vary.add(1,3) 打印:4
- 降低全局命名冲突的问题:将代码全部放入自己定义的唯一空间名字中
-
局部作用域:let
//举个栗子: <script> function f() { for (var i = 0; i < 100; i++) { console.log(i) } console.log(i+1); //i出了这个作用域还可以使用 } f(); </script> 打印:0-99 加上101
- ES6 let关键字:解决局部作用域冲突问题
function f() { for (let i = 0; i < 100; i++) { console.log(i) } console.log(i+1); // } f();
-
常量 const
- 在ES6 之前,怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值
var PI = '3.14'; console.log(PI); PI = '213'; //可以改变这个值 console.log(PI);
- 在 ES6 引入了常量关键字 const;只读变量,若改变会报错:typeError
const PI = '3.14'; // 只读变量 console.log(PI); PI = '123'; // TypeError: Assignment to constant variable. console.log(PI);
3.方法
-
定义方法
- 方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
<script> var xiaoming = { name: '小明', bitrh: 2000, // 方法 age: function () { // 今年 - 出生的年 var now = new Date().getFullYear(); return now-this.bitrh; } } </script>
- 方法一定要带上()
//this.代表什么? function getAge() { // 今年 - 出生的年 var now = new Date().getFullYear(); return now-this.bitrh; } var xiaoming = { name: '小明', bitrh: 2000, age: getAge }
- this是无法指向的,是默认指向调用它的那个对象
function getAge() { // 今年 - 出生的年 var now = new Date().getFullYear(); return now-this.bitrh; } var xiaohong = { name: '小红', bitrh: 1990, age: getAge }; var xiaoming = { name: '小明', bitrh: 2000, age: getAge }; 输出中getAge.apply(xiaoming,[]);//this指向xiaoming,参数为空
- apply:在JavaScript中控制this指向,所有function都有apply属性
4.内部对象
- 标准对象有:
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
- Date:
- 日期对象用于处理日期和时间。
- 基本使用:getfullyear,getMonth,getDate,getDay,getHours,getMinutes,getSeconds,gettime(时间戳-1970 1,1 00:00:00 开始的毫秒数)
- 时间戳转为时间:new Date(时间戳数值)
var now = new Date(); //Sun Jan 05 2020 14:41:06 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth(); // 月 0~11 代表月
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
console.log(new Date(1578206466883)) //时间戳转为时间:Sun Jan 05 2020 14:41:06 GMT+0800 (中国标准时间)
//转换
now.toLocaleString()
打印:"2020/1/5 下午2:43:37"
now.toGMTString()
打印:"Sun, 05 Jan 2020 06:43:37 GMT"
-
JSON
-
JSON 是用于存储和传输数据的格式。
-
JSON 通常用于服务端向网页传递数据 。
-
JSON 英文全称 JavaScript Object Notation
- 数据交换格式
- 在JavaScript中一切皆为对象,任何JavaScript支持的类型都可以用JSON表示
- 格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对,都是key:value
- JSON字符串和JSON对象的转化
<script> var user = { name: "xiaoming", age: 3, gender: '男' } //对象转化为json字符串 {"name":"qinjiang","age":3,"sex":"男"} var jsonUser = JSON.stringify(user); //json 字符串转化为对象 参数为 json 字符串 var obj = JSON.parse('{"name":"xiaoming","age":3,"gender":"男"}'); </script>
- JSON与JavaScript对象 的区别
var obj = {a:'hello',b:'world'};
var json = {"a":"hello","b":"world"};
面向对象编程
-
类:模板
-
对象:具体的实例
原型:._proto _
<script>
var Student = {
name: "dashen",
age: 23,
run: function () {
console.log(this.name + " 跑....");
}
};
var xiaoming = {
name: "xiaoming"
};
//原型对象
xiaoming.__proto__ = Student;
var Bird = {
fly: function () {
console.log(this.name + " 飞....");
}
};
// 小明的原型 是 Student
xiaoming.__proto__ = Bird;
</script>
function Student(name) {
this.name = name;
}
// 给student新增一个方法
Student.prototype.hello = function () {
alert('Hello')
};
class继承:class关键字在ES6引入的
- 定义一个类,属性,方法
class student{
constructor(name){
this.name=name;
}
hello(){
alert("hello,student");
}
}
var xiaoming = new student("xiaoming");
var xiaohong = new student("xiaohong");
xiaohong.hello()
- 继承
<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 xiaohong = new XiaoStudent("xiaohong",1);
</script>
本质:查看对象原型
- 原型链:_ proto _
操作BOM元素
JavaScript的诞生就是为了能够让它在浏览器中运行
- BOM:浏览器对象模型
- IE
- chrome
- Safari
- Firefox
- 三方浏览器:QQ ,360
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
Window 对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数。
- window对象
- 所有浏览器都支持 window 对象。它表示浏览器窗口
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
- window 代表浏览器窗口
- 获取浏览器的宽,高,一些属性
window.alert("弹出")
undefined
window.innerHeight
150
window.innerWidth
1004
window.outerHeight
624
window.outerWidth
1020
-
Navigator
- 封装了浏览器的信息
navigator.appName "Netscape" navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36" navigator.platform "Win32"
- 多数时候,不会使用navigator对象,因为会被人为修改,不建议!
-
screen
- 代表屏幕尺寸
screen.width 1440 screen.height 900
-
location(重要)
- 代表当前页面的URL信息
- host:主机
- href:跳转网页
- reload:重新加载
- assign(‘http://…’)设置新的地址
location.hostname //返回 web 主机的域名 location.pathname //返回当前页面的路径和文件名 location.port //返回 web 主机的端口 (80 或 443) location.protocol //返回所使用的 web 协议(http:// 或 https://)
-
document
- 代表当前的页面,HTML DOM文档树
//在百度首页 document.title //"百度一下,你就知道"
- 获取具体的文档树节点
<dl id="app"> <dt>Java</dt> <dd>JavaSE</dd> <dd>JavaEE</dd> </dl> <script> var dl = document.getElementById('app'); </script>
- 获取cookie
document.cookie
-
劫持cookie
-
首先先在XX网站,加载一段远程脚本,如:
-
恶意人员;获取你的cookie上传到他的服务器
-
服务器可以设置cookie:httpOnly
-
-
history
- 代表浏览器的历史记录
- history.back() 后退
- history.forward() 前进
操作DOM对象(重点)
DOM是JavaScript操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JavaScript对象,从而可以用脚本进行各种操作(比如增删内容)。
浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。所以,DOM可以理解成网页的编程接口。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,你可以访问所有的 HTML 元素,连同它们所包含的文本和属性。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
HTML DOM 模型被构造为对象的树:
一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是DOM。
最顶层的节点就是document节点,它代表了整个文档。文档里面最高一层的HTML标签,一般是< html>,它构成树结构的根节点(root node),其他HTML标签节点都是它的下级。
DOM:文档对象模型
- 核心
- 浏览器网页就是一个DOM树形结构
- 更新:更新DOM节点
- 遍历DOM节点:得到DOM节点
- 删除节点:删除一个DOM节点
- 添加:添加一个新的节点
- 要操作一个DOM节点,就必须要先获得这个DOM节点。
- 浏览器网页就是一个DOM树形结构
- 获取DOM节点
<body id="father">
<h1>标题一</h1>
<p1 id="p1">p1</p1><br />
<p2 class="p2">p2</p2>
<!--对应CSS选择器-->
<script>
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var children = father.children[0];
</script>
</body>
//father.firstChild
//father.lastChild
-
更新节点
<div id="id1"> </div> <script> var id1 = document.getElementById('id1'); </script>
- 操作文本
- id1.innerText=‘123’;修改文本的值
- id1.innerHTML=’< strong>123< /strong>’ 可以解析HTML文本标签
- 操作CSS
- id1.style.color = ‘yellow’;属性使用,字符串
- id1.style.fontSize = ‘20px’;
- 操作文本
-
删除节点
- 步骤:先获取父节点,通过父节点删除自己。
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> var self = document.getElementById('p1'); var father = p1.parentElement; father.removeChild(self)
- 删除是一个动态的过程,删除多个节点的时候,children是时刻变化的,删除节点的时候一定要注意:
// 删除是一个动态的过程; father.removeChild(father.children[0]) father.removeChild(father.children[1]) father.removeChild(father.children[2]) 这样就会报错,在删除万第一个之后,原来第二的位置会变第一的位置!
-
插入节点
- 获得了某个DOM节点,假设这个DOM节点是空的。通过innerHTML就可以增加一个元素了,但是这个节点已经存在了,会产生覆盖
<p id="js">JavaScript</p> <div id="list"> <p id="se">JavaSE</p> <p id="ee">JavaEE</p> <p id="me">JavaME</p> </div>
var js = document.getElementById('js'); var list = document.getElementById('list'); list.appendChild(js);// 追加到后面
- 追加:appendChild()
-
穿创建一个新的标签,实现插入
- 通过JavaScript创建一个新节点:
- 创建一个标签节点
<!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'); //通过JS 创建一个新的节点 var newP = document.createElement('p');// 创建一个p标签 newP.id = 'newP'; newP.innerText = 'Hello,JavaScript'; // 创建一个标签节点 var myScript = document.createElement('script'); myScript.setAttribute('type','text/javascript'); // 可以创建一个Style标签 var myStyle= document.createElement('style'); //创建了一个空style标签 myStyle.setAttribute('type','text/css'); myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容 document.getElementsByTagName('head')[0].appendChild(myStyle) </script> </body> </html>
在没有执行JavaScript之前:
开始执行:
1.
2.
-
insertbefore(新节点,目标节点)
<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 ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);
</script>
操作表单(验证)
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证.
表单数据经常需要使用 JavaScript 来验证其正确性:
- 验证表单数据是否为空
- 验证输入是否是一个正确的email地址
- 验证日期是否输入正确
- 验证表单输入内容是否为数字型
具体控件有:
- 文本框 text
- 下拉框 < select>
- 单选框 radio
- 多选框 checkBox
- 隐藏域 hidden
- 密码框 password…
表单的目的:提交信息
- 得到输入框的值
<form action="post">
<p>
<span>用户名:</span> <input type="text" id="username">
</p>
<!--多选框的值,就是定义好的value -->
<p>
<span>性别:</span>
<input type="radio" name="gender" value="man" id="boy"> 男
<input type="radio" name="gender" value="women" id="girl"> 女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
// 得到输入框的值
input_text.value
// 修改输入框的值
input_text.value = 'admin'
// 对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中~
girl_radio.checked = true; //赋值
</script>
- 提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="http://www.baidu.com/" method="post" onsubmit="return f()">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="password" name="input-password">
<button type="submit">提交</button>
</p>
<input type="hidden" id="md5-password" name="password">
</form>
<script>
function f() {
var uname= document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
return true;
}
</script>
</body>
</html>
上述程序执行,先创建一个表单,在表单中添加两个输入文本框,一个用来写用户名,一个用来写密码,再添加一个提交按钮,以及一个隐藏的输入框(用来放加密后的密码),实现的功能是将所输入密码经过MD5算法后加密。
存在一问题:password处的加密密码没有显示
jQuery
jQuery库,存在大量的JavaScript函数
公式: $(selector).action()
-
选择器
- 基本选择器
$("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(".classname,.classname1,#id1") //组合选择器
- 层次选择器
$("#id>.classname ") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id + .classname ") //紧邻下一个元素选择器 $("#id ~ .classname ") //兄弟元素选择器
- 过滤选择器
$("li:first") //第一个li $("li:last") //最后一个li $("li:even") //挑选下标为偶数的li $("li:odd") //挑选下标为奇数的li $("li:eq(4)") //下标等于 4 的li(第五个 li 元素) $("li:gt(2)") //下标大于 2 的li $("li:lt(2)") //下标小于 2 的li $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
-
- 内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素 $("td:parent") //含有子元素或者文本的元素
- 可见性过滤选择器
$("li:hidden") //匹配所有不可见元素,或type为hidden的元素 $("li:visible") //匹配所有可见元素
- 属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素 $("div[id='123']") // id属性值为123的div 元素 $("div[id!='123']") // id属性值不等于123的div 元素 $("div[id^='qq']") // id属性值以qq开头的div 元素 $("div[id$='zz']") // id属性值以zz结尾的div 元素 $("div[id*='bb']") // id属性值包含bb的div 元素 $("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素
- 状态过滤选择器
$("input:enabled") // 匹配可用的 input $("input:disabled") // 匹配不可用的 input $("input:checked") // 匹配选中的 input $("option:selected") // 匹配选中的 option
-
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域
举个栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>--> <script src="lib/jquery-3.4.1.min.js"></script> </head> <body> <a href="" id="test-jquery">点我</a> <script> //选择器就是css的选贼器 $('#test-jquery').click(function () { alert('hello,jQuery'); }) </script> </body> </html>
点击“点我”之后:
-
事件
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:在元素上移动鼠标;选取单选按钮;点击元素。
在事件中经常使用术语"触发"(或"激发")
- 常见 DOM 事件:
- 鼠标事件
- click
- dblclick
- mouseenter
- mouseleave
- mousedown
- mousemove
- hover
- 键盘事件
- keypress
- keydown
- keyup
- 表单事件
- submit
- change
- focus
- blur
- 文档/窗口事件
- load
- resize
- scroll
- unload
- 鼠标事件
举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
<style>
#divMove{
width: 200px;
height: 200px;
border: 1px 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>
-
操作DOM
-
节点文本操作
-
Text
节点代表Element
节点和Attribute
节点的文本内容。如果一个节点只包含一段文本,那么它就有一个Text
子节点,代表该节点的文本内容。 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/jquery-3.4.1.js"></script> </head> <body> <ul id="test-ul"> <li class="js">JavaScript</li> <li name="python">python</li> </ul> <script> $('#test-ul li[name=python]').text(); //获得值 $('#test-ul li[name=python]').text('设置值'); //设置值 $('#test-ul').html(); //获得值 $('#test-ul').html('<strong>123</strong>'); //设置值 </script> </body> </html>
首先:
-
-
CSS的操作
-
CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。
-
$('#test-ul li[name=py]').css("color","red")
在上述栗子中:
-
-
元素的显示和隐藏
-
本质 display:none;
-
$('#test-ul li[name=python]').show() $('#test-ul li[name=python]').hide()
-
-
其他测试:
$(window).width() $(window).height() $('#test-ul li[name=python]').toggle();
toggle() 方法切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
Javascript中的内容很多,简单做一下梳理:
-
JavaScript数组
- 创建方法
- 基本操作
- 数组属性
- ES3方法
- ES5方法
-
JavaScript DOM基本操作
- 获取节点
- document
- 节点指针
- 节点操作
- 创建节点
- 插入节点
- 替换节点
- 复制节点
- 删除节点
- 属性操作
- 获取属性
- 设置属性
- 删除属性
- 文本操作
- 获取节点
-
JavaScript变量
- 命名
- 方法
- 规则
- 声明
- 显示声明
- 先声明,后读写;先赋值,后运算
- 变量类型
- 值类型
- 引用类型
- 作用域
- 全局变量
- 局部变量
- 优先级
- 特性
- 命名
-
JavaScript函数基础
- 定义方法
- 静态方法
- 动态匿名方法
- 直接量方法
- 调用方法
- 直接调用
- 在连接中调用
- 在事件中调用
- 递归调用
- 方法
- apply
- call
- toString
- arguments对象
- 功能
- 特性
- 属性
- 函数参数
- 参数类型
- 形参
- 实参
- 特性
- 参数类型
- 指针标识
- this指向当前操作对象
- callee指向参数集合所属函数
- prototype指向函数附带的原型对象
- constructor指向创建该对象的构造函数
- 定义方法
-
JavaScript流程语句
- 循环语句
- while
- do-while
- for
- for-in
- 跳转语句
- return
- break
- continue
- 选择语句
- if
- switch
- 异常处理语句
- throw
- try
- catch
- finally
- 循环语句
-
JavaScript数据类型
- undefined
- null
- boolean
- string
- number
- object
-
JavaScript字符串函数
- 查找方法
- 字符方法
- charAt()
- charCodeAt()
- fromCharCode()
- 位置方法
- indexOf()
- lastIndexOf()
- 匹配方法
- match()
- search()
- replace()
- split()
- 字符方法
- 操作方法
- 拼接方法concat()
- 截取方法
- slice()
- substring()
- substr()
- 空格处理
- trim()
- trimLeft()
- trimRight()
- 比较方法localCompare()
- 编码方法
- 字符串常规编码与解码
- URI字符串编码与解码
- URI组件编码与解码
- 转换方法
- 大小写转换
- toUpperCase()
- toLocaleUpperCase()
- toLowerCase()
- toLocaleLowerCase()
- 大小写转换
- 查找方法
-
Window对象
- navigator导航器对象
- appCodeName
- appName
- appVersion
- cookieEnabled
- platform
- userAgent
- screen显示器对象
- availHeight
- availWidth
- height
- width
- colorDepth
- history历史对象
- back()
- forward()
- go()
- location位置对象
- 属性
- hash
- host
- hostname
- href
- pathname
- port
- protocol
- search
- 方法
- assign(URL)
- reload()
- replace(newURL)
- document文档对象
- 集合
- anchors[]
- images[]
- links[]
- forms[]
- 属性
- cookie
- domain
- referrer
- title
- URL
- 方法
- open()
- close()
- write()
- writein()
- 窗口控制
- moveBy
- moveTo
- resizeBy
- resizeTo
- scrollBy
- scrollTo
- 焦点控制
- focus
- blur
- 打开关闭窗口
- open
- close
- 定时器
- setTimeout
- clearTimeout
- setInterval
- clearInterval
- 对话框
- alert
- confirm
- prompt
- 属性
- 状态栏
- 窗口位置
- 集合
- 属性
- navigator导航器对象
-
for
- for-in
- 跳转语句
- return
- break
- continue
- 选择语句
- if
- switch
- 异常处理语句
- throw
- try
- catch
- finally
-
JavaScript数据类型
- undefined
- null
- boolean
- string
- number
- object
-
JavaScript字符串函数
- 查找方法
- 字符方法
- charAt()
- charCodeAt()
- fromCharCode()
- 位置方法
- indexOf()
- lastIndexOf()
- 匹配方法
- match()
- search()
- replace()
- split()
- 字符方法
- 操作方法
- 拼接方法concat()
- 截取方法
- slice()
- substring()
- substr()
- 空格处理
- trim()
- trimLeft()
- trimRight()
- 比较方法localCompare()
- 编码方法
- 字符串常规编码与解码
- URI字符串编码与解码
- URI组件编码与解码
- 转换方法
- 大小写转换
- toUpperCase()
- toLocaleUpperCase()
- toLowerCase()
- toLocaleLowerCase()
- 大小写转换
- 查找方法
-
Window对象
- navigator导航器对象
- appCodeName
- appName
- appVersion
- cookieEnabled
- platform
- userAgent
- screen显示器对象
- availHeight
- availWidth
- height
- width
- colorDepth
- history历史对象
- back()
- forward()
- go()
- location位置对象
- 属性
- hash
- host
- hostname
- href
- pathname
- port
- protocol
- search
- 方法
- assign(URL)
- reload()
- replace(newURL)
- document文档对象
- 集合
- anchors[]
- images[]
- links[]
- forms[]
- 属性
- cookie
- domain
- referrer
- title
- URL
- 方法
- open()
- close()
- write()
- writein()
- 窗口控制
- moveBy
- moveTo
- resizeBy
- resizeTo
- scrollBy
- scrollTo
- 焦点控制
- focus
- blur
- 打开关闭窗口
- open
- close
- 定时器
- setTimeout
- clearTimeout
- setInterval
- clearInterval
- 对话框
- alert
- confirm
- prompt
- 属性
- 状态栏
- 窗口位置
- 其他属性
- 集合
- 属性
- navigator导航器对象