Day27——JavaScript学习笔记
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>进行练习，实现弹窗功能：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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)
打印：33.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:"[email protected]",
score: 12
}
JavaScript中对象，{…}表示一个对象，键值对描述属性xxx:xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象
1.对象赋值
person.name="aa"
打印：aa2.使用一个不存在的对象属性，不会报错
person.haha
打印：undefined3.动态的删减属性
delete person.name
打印：true4.动态的添加属性
person.smile = "haha"
打印：haha5.判断属性值是否在这个对象中 ！
'age' in person
打印：true
‘toString’ in person//继承
打印：true6.判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false4.流程控制
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=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对象下； 输出：两次弹窗，内容为xxxalert() 这个函数本身也是一个 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()
- 继承
本质：查看对象原型
- 原型链：_ 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">p1p1><br />
<p2 class="p2">p2p2>
<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创建一个新节点：
- 创建一个标签节点
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body > <p id="js">JavaScriptp> <div id="list"> <p id="se">JavaSEp> <p id="ee">JavaEEp> <p id="me">JavaMEp> 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">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
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>
<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>
- 提交表单
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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") //所有文件域举个栗子：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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
- 鼠标事件
举个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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子节点，代表该节点的文本内容。 -
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <script src="lib/jquery-3.4.1.js">script> head> <body> <ul id="test-ul"> <li class="js">JavaScriptli> <li name="python">pythonli> ul> <script> $('#test-ul li[name=python]').text(); //获得值 $('#test-ul li[name=python]').text('设置值'); //设置值 $('#test-ul').html(); //获得值 $('#test-ul').html('123'); //设置值 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导航器对象