JavaScript

1.helloWorld

是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，将文本格式的字符代码发送给浏览器进行解释运行，用于控制网页的行为，处理一些简单的动作和功能，代码是写在方法中，方法由一个个事件调用。
原生JS开发，按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持
JavaScript框架
- jQuery：
  - 简化了DOM操作
  - DOM操作过于频繁，影响前端性能
- Angular：Google收购的前端框架
  - 特点是将MVC模式搬到了前端并增加了模块化开发的理念，采用TypeScript语法
  - 缺点是版本迭代不合理
- React：Facebook出品，高性能的JS框架
  - 特点是提出了【虚拟DOM】用于减少真实DOM的操作，在内存中模拟DOM，有效提升渲染效率
  - 缺点是使用复杂，需要额外学习【JSX】语言
- Vue：渐进式JS框架
  - 逐步实现新特性
  - 综合了Angular（模块化）和React（虚拟DOM）的优点
- Axios：因为Vue的边界很明确，就是为了处理DOM，所以不具备通信能力，需要一个额外使用的通信框架与服务器交互，或者是jQuery的AJAX通信功能
ant-design有很多好看的前端组件
引入JavaScript
- 内部标签使用
- 外部标签引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
在script标签内写js代码
-->
<!--    <script>-->
<!--        alert('hello world!') ;-->
<!--    </script>-->

<!--    外部引入-->
    <script src="js/helloWorld.js"></script>

</head>
<body>

</body>
</html>

2.浏览器控制台的使用

基本语法

//1.定义变量：   变量类型  变量名 = 变量值；
    var score = 90;
    name = "wch";
    //alert(num);
    //2.条件控制：   可以嵌套使用
    if(score>60&&score<70){
        alert("1");
    }else if (score>70&&score<80){

    }else {
        alert("other")
    }
    //3.注释和多行注释：    /*  */
    //JS严格区分大小写
    //console.log(score)在浏览器控制台打印变量，sources里有源码，可以打断点调试

3.数据类型快速浏览

数据类型：数值、文本、图形、音频、视频……
- number类型，不区分小数整数
- ·······

//变量,不能以数字开头
var $a;
var s_q;
var 王者荣耀="倔强青铜";

//number类型
123//整数
123.1//浮点数
1.123e3//科学计数法
- 99//复数
NaN//not a number
Infinity//表示无限大

//字符串类型
'abc'
"abc"

//布尔值
true
false

//  逻辑运算
//  &&
//  ||
//  !

//  比较运算符
//  ==类型不一样可以，值一样就行
//  ===完全绝对等于
//  NaN===NaN（×），与所有数值都不相等，包括自己
//  只能通过isNaN（NaN）返回true
//  （1/3）===（1-2/3）（×）不相等，存在精度损失
//  尽量避免使用浮点数进行运算

//null 空
//undefined 未定义

//数组类型
//数组下标如果越界就会报undefined错误，未定义
var arr=[1,2,3,4,5,'hello',null,true]

//对象
//数组是中括号，对象是大括号
//每个属性之间用，逗号隔开
//Person person = new Person(1,2,3,4,5);
var peron = {
		name:"wch",
		age:3,
		tags:['js','java','web','...']
}

4.严格检查模式strict

预防js随意性导致产生的问题

//严格检查模式，会报错
    'use strict'
    //默认为全局变量，没有规范即可以执行，容易造成混乱
    i = 1;
    //局部变量
    var a = 1;
    //ES6后，局部变量用let定义
    let b = 1;

5.字符串类型

正常字符串使用双引号单引号包裹都可以
注意转义字符 \
多行字符串反引号
模板字符串 $
字符串长度

'use strict'
    //  \转义
    console.log('a \n b');//换行
    console.log("a \t");//table
    console.log("a \u4e2d");//中 unicode字符
    console.log("\x41");//Asc11字符 A
    //  ` `反引号
    let msg1=`hello
    world
    你好
    呀`;

    let name='wch';
    let age=3;

    let msg2=`你好呀，${name}`;

    let student='student';
    //字符串长度student.length
    //自动转换为数组student[0]=s
    //student.toUpperCase()函数转换为大写
    //student.toLowerCase()函数转换为小写
    //student.indexOf（‘t’）获取t出现的位置：2
    //student.substring(1,3)截取1-3位置的字符串：tu   [),包含前，不包含后

6.数组类型

Array可以包含任意数据类型

var arr=[1,2,3,4,5,6]
arr[0]
arr[0=1]
//通过下标取值、赋值

.length长度

arr.length =10;
//假如给length赋值，数组大小会发生变化，多余的会变成空
arr.length=2;
//缩短，只剩下前两个元素

indexOf

arr.indexOf(2);
//通过元素获得下标索引，arr.indexOf（2）=1
//字符串的"1"和数字的1是不同的

slice()截取Array一部分，返回新数组

arr.slice(3);//从第三个开始往后所有
arr.slice(1,5);//截取2，3，4，5,包含前面不包含后面

push、pop

arr.push('a','b')//在尾部压入
app.pop()//弹出尾部的一个元素

unshift、shift

arr.unshift('a','b')//在首部压入
arr.shift()//去掉首部的元素

sort()排序

arr.sort()

reverse元素反转

arr.reverse()//倒序

concat()拼接

(3)[a,b,c]
arr.concat(1,2,3)//拼接输出
(6)[a,b,c,1,2,3]
arr
(3)[a,b,c]
//concat没有修改数组，只是返回了一个新的数组

join连接符

//打印拼接数组，使用特定的字符串链接
(3)[a,b,c]
arr.join('-')
a-b-c

多维数组

arr[][]={[1,2],[3,4]}
arr[1][1]
1

7.对象类型

若干个键值对,JavaScript中所有键都是字符串，值是任意多项

var 对象名 = {

			属性名:属性值,
			属性名:属性值,
			属性名:属性值,
			属性名:属性值,

}

可以动态删减属性

delete person.name//删除person的name属性

可以动态添加属性

person.haha='haha'//直接赋值添加属性haha

判断属性是否在对象中

'age' in person//判断age是否在person中
true
//继承
'toString' in person
true

8.分支和循环

if else

if(age>3){
	alert('haha');
}else if(age>20){
	alert('555')
}else{
	alert('haihaihai')
}

while

while(age<100){
		age=age+1;
		console.log(age);
}

for(let i=0;i<100;i++){
		console.log(i);
}

do while

do{
		age=age+1;
		console.log(age);
}while(age<100)

forEach循环(函数)

age.forEach(function (value)){
		console.log(value)
}//遍历数组输出

for in循环

for(var num in age){
		console.log(age[num])//遍历数组，num是索引、下标
}

9.Map和Set集合

ES6才出现的
Map

var map=new Map([['tom',99],['jerry',80],['jack',90]]);
var name=map.get('tom');
console.log(name);
//通过名字就可以获得分数
map.set('admin',123456)
map.delete('tom')//删除

3.Set:无序不重复的集合

var set = new Set([3,1,1,1,1,1])
//set可以去重
console.log(set.has(3))//判断是否包含某个元素

10.iterable迭代

ES6新特性
通过for of迭代数组

var arr=[3,4,5];
for(var x of arr){
		console.log(x);
}

迭代遍历map，只能用for of

var map=new Map([['tom',99],['jerry',80],['jack',90]]);
for(let x of map){
		console.log(x);
}

遍历迭代set，也可以用for of

var set = new Set([3,1,1,1,1,1])
for(let x of set){
		console.log(x);
}

11.函数的定义和参数的获取

function定义一个函数
JavaScript在浏览器中每一行自动加分号

function abs(x){
		if(x>=0) return x; 
		else return -x;
}

参数问题：可以传任意参数也可以不传递参数
异常判断,可以手动抛出异常

if(typeof x!='number'){
		throw "not a number"
}

arguments是一个Js免费赠送的关键词，代表传递进来的所有参数，是一个数组

arguments.length//自动获取数组的大小
//问题：arguments包含所有参数，有时想要使用多于参数操作需要排除已有参数

…rest，ES6引入新特新，获取除了已定义的参数之外的所有参数

function aaa(a,b,...rest){
		console.log("a=>"+a)
		console.log("b=>"+b)
		console.log(rest)
}
//rest参数只能在最后，用...标识

12.变量的作用域、let、const

变量的定义是有作用域的，想要在函数体外使用函数内局部变量，需要闭包

'use strict'

    function myFunc() {
        let x = 1;
        x = x + 1;
    }

函数变量具有独立性
内部函数的变量可以访问外部函数变量
内外函数中两者局部变量重名，内部函数屏蔽外部函数变量，自己只关注于自身函数的操作
提升变量的作用域，先声明，后赋值

function qj(){

		var x='x'+y;
		console.log(x);
		var y ='y';
}
//结果：xundefined
//说明：js执行了引擎，自动提升了y的声明，但不会提升变量y的赋值
//结论：先定义变量，再赋值
var a,b,c,d,r,f.....

全局变量
全局对象windows

var x='xxx';
alert(x);
alert(windows.x);
windows.alert（x）;
//所有全局变量都会绑定在windows下
//alert本身也绑定在windows下的成员函数

JS只有一个全局作用域，任何全局变量、函数，都是windows的成员
所有全局变量都会绑定到windows中，所以在多个js文件中可能会有相同名字的全局变量，为了避免冲突，我们采用唯一全局变量

//唯一全局变量
var kuangAPP={};
//定义全局变量
kuangAPP.name='狂神'
//把自己的代码放进唯一命名空间中，降低命名冲突

局部作用域let，ES6新引出，解决局部作用域冲突的问题
常量const，ES6引出

const PI='3.14';//只读变量

13.方法的定义、调用、apply

函数放到对象中，就可以称之为方法

var kuangshen={
		
		birth:2020;
		//方法
		age:function(){
				//今年-出生的年
				let now=new Date().getFullYear();//当前日期
				return now-this.birth;	
		}

}

方法调用必须带（）
this：默认指向调用它的对象
apply：在js中控制this的指向

function()getAge{
				//今年-出生的年
				let now=new Date().getFullYear();//当前日期
				return now-this.birth;	
		}
var kuangshen={
		name:'qj'
		birth:2000
}
getAge.apply(kuangshen,[]);
//代表this指向kuangshen这个对象，参数为空

14.Date日期对象

内部对象，日期和时间

var now=new Date();//当前时间
now.getFullYear()//当前年份
now.getMonth()//当前月份0-11月
now.getDate()//日
now.getDay()//星期
now.getHours()//时
now.getMinutes()//分
now.getSecond()//秒

now.getTime()//时间戳  1970.1.1.0：00：00到现在的毫秒数
now.toLocaleString()//本地实际

15.JSON对象

json是主流，代替xml，javascript object notion，轻量级数据交换格式，简洁和清晰的层次结构使其易于阅读和理解，有效提高网络传输效率
在js中一切皆为对象，任何js支持的类型都可以用json来表示
格式
- 对象都用{}
- 数组都用[]
- 所有的键值对都使用key:value

var user(){
		name:"wch"
		age:"3"
		sex:"男"
}
//对象转换成json字符串
var jsonUser= JSON.stringify(user)//转换方法

//字符串转换成对象
var obj=JSON.parse({'"name":"wch","age":"3","sex":"男"'})

json和js对象的区别

//对象
var user={name:"wch"，age:"3"，sex:"男"}
var json='{"name":"wch","age":"3","sex":"男"}'//字符串类型，单引号

Ajax
- 原生js写法：xhr异步请求
- jQuery封装好的：$(”#name”).ajax(””)
- axios请求

16.面向对象原型继承

js的面向对象
- 类：模板
- 对象：具体实例
- 类是对象的抽象，对象是类实例化后的具体表现
- 原型：类似于父类

//小明的原型是小刚，可以调用小刚里的成员方法，实际上就是继承
xiaoming._proto_=xiaogang;

17.面向对象class继承

class关键字ES6才开始引用

//1.以前，定义一个类，给student新增一个方法
    function Student(name){
        this.name=name;
    }
    Student.prototype.hello=function (){
        alert('hello')
    };
    //2.ES6之后利用class关键字
    class Student{
      constructor(name) {
          this.name=name;
      }  
      hello(){
          alert('hello');
      }
    }

继承

//2.ES6之后利用class关键字
    class Student{
        //构造器为constructor
      constructor(name) {
          this.name=name;
      }
      hello(){
          alert('hello');
      }
    }
    var xiaoming=new Student("xiaoming");
    var xiaohong=new Student("xiaohong");
    xiaoming.name;//xiaoming
    xiaoming.hello();//hello
    //3.class继承，extends
    class xiaoStudent extends Student{
        constructor(name,grade) {
            super(name);
        }
        myGrade(){
            alert('我是小学生')
        }
    }
    var xiaogang=new xiaoStudent("xiaogang",1);
    //4.本质仍然是原型继承_proto_:Student

原型链：最终都会指向Object类，Object的构造器又是Object，形成一个原型环链
js中每个函数都有一个prototype属性，指向函数原型对象

18.操作BOM对象

B Of Model:浏览器对象模型
js与浏览器的关系
- 设计js就是为了在浏览器中运行
- IE 6-11 已退役
- Chrome -Windows
- Safari -Apple
- FireFox -Linux
- 第三方浏览器
  - QQ浏览器
  - 360浏览器
  - ······
  - 内核仍然是三大浏览器
window对象：代表浏览器窗口，可以得到一些浏览器的属性，width、height······
navigator对象：封装了浏览器的信息，appname、appVersion、userAgent、platform······检测浏览器与主机是否适配、兼容，会被人为修改，很少使用
screen对象代表全屏幕属性：width、height屏幕分辨率
location对象代表当前页面的URL信息：host主机、href当前网页地址、protocol协议、reload()重新加载刷新（方法，前面的都是属性）、assign(新的url)跳转页面到新的url页面
document文档对象代表当前页面文档信息，html dom文档树：title标题、getElementById(’app’)获取具体的文档树的节点（id=app的）、cookie
劫持cookie的原理：通过js文件get document.cookie上传到别的服务器，实例：网页登录淘宝，网页的天猫也会自动登录，通过服务器端设置cookie：httpOnly属性来增加安全性，设置为只读
history对象：back返回上一个页面、forward下一个页面

19.获得DOM节点

document of model：文档对象模型
操作DOM的核心：浏览器网页就是一个DOM树形结构
- 更新：更新DOM节点
- 遍历：得到DOM节点
  - 通过id
  - ······
- 删除：删除一个节点
- 添加一个新的节点
- 要操作dom节点，就必须先获得

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

</body>

<script>
    //对应css的选择器，标签、id、类名
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');

    let father = document.getElementById('father');
    //获得父节点下的所有子节点
    let children = father.children;
    // father.firstChild
    // father.lastChild
</script>

</html>

20.更新DOM节点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="id1"></div>

</body>

<script>
    //1.操作文本
    let id1 = document.getElementById('id1');
    id1.innerTxet = '123';//修改文本的内容
    id1.innerHTML = '<strong>123</strong>'//可以解析HTML文本标签
    //2.可以修改CSS属性
    id1.style.color='red';//修改颜色
    id1.style.fontSize='200px';//修改字体大小
    id1.style.padding='2em';//内边框
</script>
</html>

21.删除DOM节点

删除节点的步骤：
- 获取父节点
- 再通过父节点删除自己

<body>

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

</body>
<script>
//1.方法1：删除节点
    let self = document.getElementById('p1');//p1的节点
    let father = self.parentElement;//获取p1的父节点
    father.removeChild(self);//利用父节点删除自己
//2.方法2：根据指定下标来移除
    father.removeChild(father.children[0]);//注意动态删除，下标时刻在变化
</script>

22.创建和插入DOM节点

我们获得了某个DOM节点，假设这个节点为空，可以用innerHTML增加元素，若已经有元素，不可以使用，不然会覆盖

<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>

    let
        js = document.getElementById('js');
        list = document.getElementById('list');

    //1.append追加子元素,将已存在标签移到别的标签中
    list.appendChild(js);

    //2.create创建新节点
    let newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';//赋一个id
    newP.innerText = 'hello,newP';//添加内容

    //3.创建一些特殊的标签节点：script、link······
    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');//设置节点里的所有属性

    //4.创建style标签来更改css属性
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type', 'text/css');//创建style标签
    myStyle.innerHTML = 'body{background-color:green;}';//设置css属性
    document.getElementsByTagName('head')[0].appendChild(myStyle);//把style标签追加到head后才能实现

    //5.insertBefore新建节点插到前面
    let
        ee = document.getElementsByTagNameNS('ee');
        js = document.getElementsByTagNameNS('js');
    ee.insertBefore(js,ee);//把js插到ee前
    
</script>

</body>

23.获得和设置表单的值

操作表单涉及一个验证的问题
表单
- form
- 本是也是DOM树的一部分
- 文本框 text
- 密码框 password
- 下拉框 select
- 单选框 radio
- 复选框 checkbox
- 隐藏域 hidden
- ······
- 目的：提交信息
获得要提交的信息

<body>

<form action="post">
    <span>用户名</span><input id="userName" type="text"><br>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="woman" id="girl">女
</form>

<script>
    let input_text = document.getElementById('userName')
    //1.得到用户名输入的数据
    input_text.value;
    //2.修改用户名的数据
    input_text.value='123';
    //3.获得单选框、多选框当前的值
    let    
        boy_radio=document.getElementById('boy');
        girl_radio=document.getElementById('girl');
    boy_radio.checked//为true则被选中
    girl_radio.Checked=true//赋值，强行选择
</script>

</body>

24.表单提交验证及前端密码MD5加密

MD5工具类：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--    
1.表单绑定提交事件
onsubmit绑定一个提交检测的函数，true、false
将这个结果返回表单，用onsubmit、接受 
-->
<form action="" method="post" onsubmit="aaa()">

    <p>
        <span>用户名</span><input id="userName" type="text">
    </p>
    <p>
        <span>密码</span><input id="password" type="password">
    </p>
    
<!--    隐藏域加密-->
    <input id="md5-password" name="password" type="hidden">

    <!--   
     2.按钮绑定提交事件，绑定一些事件，
     onclick，被点击时会发生  
     -->
    <button onclick="aaa()" type="submit">提交</button>

</form>

<script>
    function aaa() {
        let pwd = document.getElementById('password');
        let uname = document.getElementById('userName');
        console.log(uname.value);
        console.log(pwd.value);
        
        //1.直接使用MD5加密算法
        pwd.value = md5(pwd.value);//输入后将密码加密成字符串
        console.log(pwd.value);
        
        //2.hidden通过隐藏域加密
        let md5pwd=document.getElementById('md5-password');
        pwd.value=md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        
        return true;//true通过提交、false阻止提交
    }
</script>

</body>

25.jQuery公式

js和jQuery的关系
- jQuery是一个库，存在大量的js函数和方法
获取jQuery
- jQuery.cuishifeng.cn
- jQuery.com
引入jQuery利用在线的cdn https://www.jq22.com/cdn/

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

公式：$(seleector).action()

<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="text-jQuery">点我</a>

<script>
    document.getElementById('text-jQuery');
    //选择器就是css的选择器
    $('#text-jQuery').click(function (){
        alert('hello,jQuery');
    })

</script>

</body>

26.jQuery选择器

文档工具站：http://jquery.cuishifeng.cn

<script>
    //原生js选择器
    //标签选择器
    document.getElementsByTagName()
    //id选择器
    document.getElementById()
    //类选择器
    document.getElementsByClassName()

    //jQuery 包含所有css中的选择器
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $(".class1").click();//类选择器
</script>

27.jQuery事件

分类：
- 鼠标事件
- 键盘事件
- ······
鼠标事件：down按下、move移动常用

28.jQuery操作DOM元素

<script>
    //操作dom获得值，到参数则设置值
    $('#test li[name=py]').text();
    $('#test').html();
</script>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>

<ul id="test">
    <li class="js">js</li>
    <li name="py">python</li>
</ul>

<script>
    //改css属性，传键值对
    $('#test li[name=py]').css("color","red");
    //元素隐藏和显示
    $('#test li[name=py]').hide();//隐藏，本质display=none
    $('#test li[name=py]').show();//显示

</script>

</body>
</html>

29.调试

笨方法：通过每一行输出一个0来一行行找错误
利用浏览器对源代码的预览界面，通过sources进行调试

30.案例

1. 点击即删除

	// 点谁删谁
			window.onload = function() {
				var lis = document.getElementsByTagName("li");
				for (var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						this.parentNode.removeChild(this);
					}
				}
			}

2. confirm(提示信息)

确认框，用户点击控件上的确定或者取消按钮，返回一个Boolean值，确定为true，取消为false

window.onload = function() {
				var lis = document.getElementsByTagName("li");
				for (var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						// 确定框
						if (confirm("确定删除吗？")) {
							this.parentNode.removeChild(this);
						}
					}
				}
			}

确定删除xx吗

window.onload = function() {
				var lis = document.getElementsByTagName("li");
				for (var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						// 确定框
						//确定删除的内容
						var text = this.firstChild.nodeValue;
						if (confirm("确定删除" + text + "吗？")) {
							this.parentNode.removeChild(this);
						}
					}
				}
			}

3. 员工管理系统添加和删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				text-align: center;
			}

			table {
				border-collapse: collapse;
				margin: 0px auto;
			}

			table,
			td,
			th {
				border: 1px solid black;
				padding: 10px;
			}
		</style>
		<script type="text/javascript">
			function removeTr(aNode) {
				var trNode = aNode.parentNode.parentNode;
				var nameText = trNode.getElementsByTagName("td")[1].firstChild.nodeValue;
				if (confirm("确定删除" + nameText + "的信息吗?")) {
					trNode.parentNode.removeChild(trNode);
				}
			}

			window.onload = function() {
				var tab = document.getElementById("tab");
				var aNodes = tab.getElementsByTagName("a");
				for (var i = 0; i < aNodes.length; i++) {
					aNodes[i].onclick = function() {
						removeTr(this);
					}
				}

				document.getElementById("add").onclick = function() {
					var empnoText = document.getElementById("empno").value;
					var empnameText = document.getElementById("empname").value;
					var empemailText = document.getElementById("empemail").value;

					var empnoTextNode = document.createTextNode(empnoText);
					var empnameTextNode = document.createTextNode(empnameText);
					var empemailTextNode = document.createTextNode(empemailText);

					var deleteText = document.createTextNode("删除");
					var deleteaNode = document.createElement("a");
					deleteaNode.appendChild(deleteText);
					deleteaNode.href = "#";
					deleteaNode.onclick = function() {
						removeTr(this);
					}

					var empnoTdNode = document.createElement("td");
					var empnameTdNode = document.createElement("td");
					var empemailTdNode = document.createElement("td");
					var deleteTdNode = document.createElement("td");

					empnoTdNode.appendChild(empnoTextNode);
					empnameTdNode.appendChild(empnameTextNode);
					empemailTdNode.appendChild(empemailTextNode);
					deleteTdNode.appendChild(deleteaNode);


					var trNode = document.createElement("tr");
					trNode.appendChild(empnoTdNode);
					trNode.appendChild(empnameTdNode);
					trNode.appendChild(empemailTdNode);
					trNode.appendChild(deleteTdNode);

					tab.appendChild(trNode);

				}
			}
		</script>
	</head>
	<body>
		<h3>员工管理系统</h3>
		编号:<input type="text" id="empno" />
		姓名:<input type="text" id="empname" />
		邮箱:<input type="text" id="empemail" />
		<br /><br />
		<button id="add">添加</button>
		<br /><br />
		<hr />
		<table id="tab">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>邮箱</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>张三</td>
				<td>abc@163.com</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td>1002</td>
				<td>李四</td>
				<td>lisi@163.com</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td>1003</td>
				<td>王五</td>
				<td>wangwu@163.com</td>
				<td><a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

31.隐藏和显示

元素节点.style.display可以控制该元素节点的隐藏或显示

值：none--------隐藏

list-item--------------以列表的方式显示

block----------------以块级元素的方式显示

window.onload = function() {
				var dd = document.getElementsByTagName("dd");
				for (var i = 0; i < dd.length; i++) {
					dd[i].style.display = "none";
				}

				var dt = document.getElementsByTagName("dt");
				for (var j = 0; j < dt.length; j++) {
					dt[j].onclick = function() {
						menu(this.parentNode);
					}
				}
			}
			
			function menu(o) {
				var dd = o.getElementsByTagName("dd");
				for (var i = 0; i < dd.length; i++) {
					if (dd[i].style.display == "none") {
						dd[i].style.display = "block";
					} else {
						dd[i].style.display = "none";
					}
				}
			}

1. 置灰

disable属性：表示置灰，取值为boolean，true表示置灰，false表示可用

2. readOnly

表示是否只读，true表示只读，false表示可写

注意：disable与readOnly的区别，如果某控件是disable状态，则数据无法提交到后端，如果是readOnly状态，表示数据可以提交到后端

3. innerHTML

表示某个元素节点下的子元素的html代码

给其赋值还可以动态改变子元素的html代码

32. 外联接Js文件

<script type="text/javascript" src="./hello.js"></script>

33. 日期插件

调用My97DatePicker中WdatePicker.js的WdatePicker方法

<script type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script>

日期：<input type="text" onclick="WdatePicker()" />

34. jQuery常用

前端框架，几乎所有的项目都离不开jQuery框架

封装了大量的js代码，是一个流行的前端框架

我们将其导入html后即可使用

1. 语法

代码全都写在$()中

窗体加载事件:$(function(){})

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				alert("hello jquery!")
			})
		</script>
	</head>
	<body>
	</body>
</html>

2. 选择器

1. 元素选择器

$("标签名")------选定所有指定标签的元素

2. id选择器

$("#id")--------选定所指定id的元素

3. 类选择器

$(".类名")-------选定所指定类名的元素

4. "*"通配符

选定所有的元素

注意：多个选择器用逗号分隔

5. 属性选择器

[属性]-------属性选择器

[属性名=属性值]-------指定属性值的选择器

注意：多个选择器中间如果没有逗号分隔，那么说明所有的条件都要满足

6. 派生选择器

选择器之间添加空格，表示在第一个选择器的子元素中按照第二个选择器的条件进行筛选

3. js转型jQuery

js对象不能调用jQuery的方法，必须要转型才能使用

注意：this也是js对象，也要转型为$(this)

				var p1=document.getElementById("p1");
				var $p1=$(p1)
				//var $p=$("p");
				alert($p1.text());

jQuery同样也可以转型成js对象---------jQuery对象.get(下标)或者jQuery对象[下标]

注意：jQuery对象是数组的形式

4. 常用方法

1. text()

获取某元素节点的文本内容

2. click()

点击事件，注意function写在（）中-------click(function{})

3. css()

改变css样式

例如：$("p").css("color","red")

4. change()

值改变事件，触发条件：值改变、失去焦点

change(function{$(this).css("background","yellow")})

5. mouseenter()

鼠标移上来事件方法

6. mouseleave()

鼠标离开

7. hide()

隐藏

8. show()

展示

9. find()

find(标签名)-----在当前标签中查找指定的子标签

10. is()

is("属性状态")---------判断当前元素节点是否处于某种属性

11. each()

循环遍历jQuery对象的数组

12. val()

获取jQuery对象的value值，如果传参，则表示修改它的value值

13. prop()

获取某个元素节点的属性值，或者是改变

传一个参数是获取值，传两个参数是改变值

<script src="./jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#checkedall").click(function() {
					$(":checkbox[name='hobby']").prop("checked", this.checked);
				})
				$(":checkbox[name='hobby']").click(function() {
						$("#checkedall").prop("checked", $(":checkbox[name='hobby']").length 
						== $(":checkbox[name='hobby']:checked").length);
				})
			})
</script>

14. empty()

清空，元素节点保留，元素节点下的子元素全部删除

$("#btn1").click(function() {
					$("#wz").empty();
				})

15. remove()

删除某元素节点，包括所有的子元素

	$("#btn2").click(function() {
					$("#wz").remove();
				})

16. 创建节点

$("html代码")---------括号中直接写html代码

appendTo(父节点)---------新节点挂在父节点下最后一个子节点
父节点.append(新节点)---------新节点挂在父节点下最后一个子节点

// 在结尾创建节点
				$("#btn3").click(function(){
					$("<li>西安</li>").appendTo("#city");
				})
// 在结尾创建节点
				$("#btn3").click(function(){
					$("#city").append("<li>西安</li>");
				})

prependTo(父节点)---------新节点挂在父节点第一个子节点
父节点.prepend(新节点)-------------新节点挂在父节点第一个子节点

//在最开头创建节点
				$("#btn4").click(function(){
					$("#city").prepend("<li>成都</li>");
				})

兄弟节点.before(新节点)--------新节点挂在兄弟节点的前面
新节点.insertbrfore(兄弟节点)----------新节点挂在兄弟节点的前面

//在任意位置兄弟节点前面插入节点
//在广州前面添加武汉节点
				$("#btn5").click(function(){
					$("#gz").brfore("<li>武汉</li>");
				})

同理，insertafter和after也是如此，表示将新节点挂在兄弟节点的后面

//在任意兄弟节点后面插入节点
//在广州后面添加天津节点
				$("#btn5").click(function(){
					$("#gz").after("<li>天津</li>");
				})

例子：根据点击的是城市还是游戏，输入一个城市或者游戏，将其挂在父节点下

$(function() {
				$("#sub").click(function() {
					$("<li>" + $("#str").val() + "</li>").appendTo(
						$("#" + $(":radio[name='type']:checked").val()));
				})
})

17. parent()

parent()------向上找父节点

find(字节点).eq(0)---------向下找节点下的第0个

find(字节点).eq(1)---------向下找节点下的第1个

$(function(){
	$("#t1").parent().parent().find("tr").eq(1).css("background-color","yellow");		
})

18. $.trim()

$.trim(字符串)---------去除字符串的前后空格

var str=$.trim(  $("#str").val()  );
alert(str);

19. 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				text-align: center;
			}

			table {
				border-collapse: collapse;
				margin: 0px auto;
			}

			table,
			td,
			th {
				border: 1px solid black;
				padding: 10px;
			}
		</style>
		<script src="./jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			// jQuery实现test022602.html

			//删除方法
			function removeTr(aNode) {
				var trNode = $(aNode).parent().parent();
				var str = trNode.find("td").eq(1).text();
				if (confirm("确定删除" + str + "的信息吗？")) {
					trNode.remove();
				}
			}

			$(function() {
				//删除
				$("a").click(function() {
					removeTr(this);
				})
				//新增
				$("#add").click(function() {
					$("<tr><td>" + $("#empno").val() + "</td><td>" + $("#empname").val() + "</td><td>" + $(
							"#empemail").val() + "</td><td><a href='#'>删除</a></td></tr>")
						.appendTo($("#tab")).find("a").click(function() {
							removeTr(this);
						});
				})

			})
		</script>
	</head>
	<body>
		<h3>员工管理系统</h3>
		编号:<input type="text" id="empno" />
		姓名:<input type="text" id="empname" />
		邮箱:<input type="text" id="empemail" />
		<br /><br />
		<button id="add">添加</button>
		<br /><br />
		<hr />
		<table id="tab">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>邮箱</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>张三</td>
				<td>abc@163.com</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td>1002</td>
				<td>李四</td>
				<td>lisi@163.com</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td>1003</td>
				<td>王五</td>
				<td>wangwu@163.com</td>
				<td><a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

35. 正则表达式

1 什么是正则表达式

用来校验一个字符串是否合法的工具

校验：邮箱地址、手机号码的格式规则称为正则，每个输入框都要有正则表达式

正则表达式不一定只在jQuery中，原生态的JavaScript也可以

2 在HTML中

在html中，可以利用pattern属性规定正则表达式

//pattern 正则表达式
<!--pattern可以通过脚本之家查找正则表达式-->
<p>自定义邮箱：
 <input type="text"name="diymail"pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>

3 在jQuery和JavaScript中

在jQuery和JavaScript中，正则表达式定义格式：

①var reg = /^ 正则表达式 $/

②new RegExp = ("^ 正则表达式 $")

校验使用test(字符串)方法，返回一个bool值

$(function() {
				$("#btn1").click(function() {
					var strtext = $("#str").val();
					//定义正则
					var reg = /^ 正则表达式 $/;
                    //或者new RegExp = ("^ 正则表达式 $")`
                    //校验，用test方法，返回布尔值
					alert(reg.test(strtext));
				})
})

4 正则的语法

1 "[ ]" 多选一

表示多选一，选一个为true，选多个为false

$("#btn1").click(function() {
					var strtext = $("#str").val();
					//定义正则
					var reg = /^[ab]$/;
					alert(reg.test(strtext));
})//a:true,b:true,ab:false

2 "-" 区间

横杠"-"表示一个区间

$("#btn1").click(function() {
					var strtext = $("#str").val();
					//定义正则
					var reg = /^[a-zA-Z]$/;
					alert(reg.test(strtext));
})

3 "^" 取反

"^"在中括号"[ ]"中表示取反,表示a-z和A-Z的字母都不行

$("#btn1").click(function() {
					var strtext = $("#str").val();
					//定义正则
					var reg = /^[^a-zA-Z]$/;
					alert(reg.test(strtext));
})

4 "\" 转义字符

特殊字符在正则中需要转义字符进行转义，如果特殊字符写在"[ ]" 中，则可以省略，"[ ]"除外

$("#btn1").click(function() {
					var strtext = $("#str").val();
					//定义正则
					var reg = /^[^a-zA-Z$\[\]]$/;
					alert(reg.test(strtext));
})//"\["和"\]"都是转义字符，而"$"在[]中无需转义

5 元字符

. ---------- 可以代表任意除了换行符（回车键）以外的其他任意单个字符
\w ------- 代表任意单个字母数字下划线
\W -------代表除了任意单个字母数字下划线的其他字符
\s --------单个空格
\S --------单个非空格
\d --------单个数字
\D --------单个非数字

//自定义邮箱
\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

6 数量词

？----------------表示？前的字符出现0次或1次

+-----------------表示+前的字符出现1次或者多次

*----------------表示前的字符出现任意次数

{n}-------------表示出现只能n次

{n,}------------表示至少出现n次

{m,n}-----------表示至少出现m次，最多出现n次

$(function() {
				$("#btn1").click(function() {
					var strtext = $("#str").val();
					//定义正则
					var reg = /^a{2,5}$/;
					alert(reg.test(strtext));
				})
})

7 组合

( )-----------包含一个正则表达式，表示一个组合，在后面添加数量词表示组合出现的次数

//一个简易的ip地址的正则表达式
var reg = /^(\d{1,3}\.){3}\d{1,3}$/;

5 练习

编写正则，校验一个最多两位小数的正数或负数

$(function() {
				$("#btn1").click(function() {
					var strtext = $("#str").val();
					var reg = /^\-?\d+(\.\d{1,2})?$/;
					alert(reg.test(strtext));
				})
})

6 校验相关

1 字符串长度

JavaScript中字符串.length表示字符串的长度

2 阻止默认行为

return false阻止默认行为

3 案例

非空校验

$(function() {
				$("#btn1").click(function() {
					var strtext = $("#str").val();
					if ($.trim(strtext)length > 6) {
						alert("长度不能超过6");
						return false;
					}else if($.trim(strtext)==null||$.trim(strtext)==""){
						alert("字符串不能为空");
						return false;
					}
				})
})

小说阅读网站完善登陆界面非空校验

$(function(){
				$("#load").click(function(){
					var strUername=$("#username").val();
					var strPwd=$("#pwd").val();
					strUername=$.trim(strUername);
					strPwd=$.trim(strPwd);
					if(strUername==null||strUername==""){
						alert("请输入用户名！");
						return false;
					}else if(strPwd==null||strPwd==""){
						alert("请输入密码！");
						return false;
					}
				})
})

category.js

$(function() {
	$("#submit").click(function() {
		var categoryName = $("#categoryName").val();
		var description = $("#description").val();
		if ($.trim(categoryName) == null || $.trim(categoryName) == "") {
			$("#message0").empty().html("请输入类别名称");
			return false;
		} else {
			$("#message0").empty();
		}
		if ($.trim(description) == null || $.trim(description) == "") {
			$("#message1").empty().html("请输入类别描述");
			return false;
		} else {
			$("#message1").empty();
		}
	})

	$("#categoryName").change(function() {
		if ($(this).val().length > 15) {
			$("#message0").html("类别名称长度不能超过15个字符");
			$("#submit").prop("disabled", true);
		} else {
			$("#message0").empty();
			checkedSpan();
		}
	})

	$("#description").change(function() {
		if ($(this).val().length > 30) {
			$("#message1").html("类别描述长度不能超过30个字符");
			$("#submit").prop("disabled", true);
		} else {
			$("#message1").empty();
			checkedSpan();
		}
	})
})
// 统一判断是否将按钮亮起来
function checkSpan() {
	var flag = $(".message").text();
	if (flag.length == 0) {
		$("#submit").prop("disabled", true);
	}
}

fictionUser.js

// 统一判断是否将按钮亮起来
function checkSpan() {
	var flag = $(".message").text();
	if (flag.length == 0) {
		$("#submit").prop("disabled", true);
	}
}
$(function() {
	//校验手机号码是否符合规范
	$(":input[name='movephone']").change(function() {
		var reg = /^1[345789]\d{9}$/;
		if (reg.test(movephone)) {
			$("#message").empty();
			checkSpan();
		} else {
			$("#message").empty().html("d对不起，手机号输入不规范");
			$(":input[name='submit']").attr("disabled", true);
		}
	});
})

manager.js

$(function() {
	//校验两次密码是否一致
	$(":input[name='password2']").change(function() {

		var passwd2 = $(this).val();
		passwd2 = $.trim(passwd2);
		var passwd = $(":input[name='password']").val();
		passwd = $.trim(passwd);
		if (passwd != passwd2) {
			$("#message2").empty().html("对不起，两次输入密码不一致").css("color", "red");
			$(":input[name='submit']").attr("disabled", true);
		} else {
			$("#message2").empty();
			checkSpan();
		}
	});
    
    //检验邮箱地址是否符合规范
	$(":input[name='email']").change(function() {
		var email=$(this).val();
		var reg = /^\w+@\w+\.\w+$/;
		if (reg.test(email)) {
			$("#emailmessage").empty();
			checkSpan();
		} else {
			$("#emailmessage").empty().html("对不起，邮箱地址输入不规范");
			$(":input[name='submit']").attr("disabled", true);
		}
	});
    
})
// 统一判断是否将按钮亮起来
function checkSpan() {
	var flag = $(".message").text();
	if (flag.length == 0) {
		$("#submit").prop("disabled", true);
	}
}