JavaScript

kevin

发表：2019-06-11 17:04:00

修改：2024-10-09 17:04:01

JavaScript

以ES6为例

JavaScript的引入

使用script标签

在head标签中使用script标签

<script type="text/javascript">
    alert("hello javascript")
</script>

单独写一个JavaScript文件

用script标签引入

<script type="text/javascript" src="js文件地址">
 
</script>

script只能选一个功能,引用文件或者直接写js代码
- 要想实现两个功能,可以写第二个script标签

JavaScript变量

值类型
- 数值类型 number--------------五种数据类型
- 字符串类型 Stringr--------------五种数据类型
- 布尔类型 booleanr--------------五种数据类型
- 特殊的值
  - undefined 未定义,变量未初始化默认是undefinedr--------------五种数据类型
    - let test = null 也是object类型,只是这个对象没有值
    - 不给赋值才是未定义
  - null 空值
  - NAN not a number 非数值
引用类型
- 函数类型 function 变量可以指向一个函数
- 对象类型 objectr--------------五种数据类型
typeof(变量名) 方法可以返回变量的类型------------返回的结果是String类型
关系运算符
- == 等于
  - 字面值比较
- === 全等于
  - 除了字面值,还会比较两个变量的数据类型
逻辑运算
- && 且运算
  - a && b &&c ,都为真的情况,返回最后一个变量的值
  - a && b &&c,有一个为假的情况,返回第一个假
- || 或运算
  - a|| b||c 都为假时,返回最后一个变量的值
  - a|| b||c 一个为真,返回第一个真
- ! 取反
所有的变量,都可以作为boolean类型的变量使用
- 0,null,undefined,""空的字符串,都认为是false;
var 是全局变量
- var 可以声明多次
- 默认提升变量声明
let 是局部变量
- let 只能声明一次
const 常量
- 一但声明必须初始化，否则会报错

解构赋值

数组解构:

// 传统
let a = 1, b = 2, c = 3

// ES6
let [x, y, z] = [1, 2, 3]

对象解构

let user = {name: 'Helen', age: 18}

// 传统
let name1 = user.name
let age1 = user.age

// ES6
let { name, age } = user//注意：结构的变量必须是user中的属性

模板字符串

加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，

还可以在字符串中加入变量和表达式

多行字符串

// 多行字符串
let string1 = Hey, can you stop angry now?

字符串插入变量和表达式

// 变量名写在 ${} 中，$ {} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = My Name is ${name},I am ${age+1} years old next year.

字符串中调用函数

function f(){
return "have fun!"
}
let string2 = Game start,${f()}

声明对象简写

对象的属性引入外部的简写

const age = 12
const name = "Amy"

// 传统
const person1 = {age: age, name: name}

// ES6
const person2 = {age, name}

定义方法简写

在对象里面的才叫方法,外面的叫函数

// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"

// ES6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"

对象拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

不能直接=另一个对象,否则同指针,以前拷贝对象需要数组循环,现在只需要扩展运算符三个点

// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }

// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}

箭头函数

箭头函数多用于匿名函数的定义

当箭头函数没有参数或者有多个参数，要用 () 括起来

有多行语句，用 {} 包裹起来，表示代码块

只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

// 传统
var f1 = function(a){
return a
}

// ES6
var f2 = a => a

//箭头函数

var f3 = (a,b) => {
let result = a+b
return result
}

// 前面代码相当于：
var f4 = (a,b) => a+b

数组

let 数组名 = []; 空数组
- length
let 数组名 = [1,"abc",true]; 定义数组并同时赋值
- 类型可以不一样----------理解为动态
arr[9] = “abc”;
- 只要通过数组下标赋值,最大的下标值,会自动的给数组扩容
- ---------赋值的时候才会,理解为动态
- 跳过其他下标赋值的时候,其他下标没有定义的值为undefined
- 数组可以遍历
数组的函数
- concat(数组)数组拼接
  reverse()->数组反转
  join(规则):将一个数组通过分隔符拼接成一个字符串,与字符串中的split功能相反
  sort()排序
  pop():删除数组中最后一个元素,返回的是被删除的元素
  push():往数组最后添加一个或者多个元素,返回的是被添加的元素
for in 便历出来的是属性

for of 遍历的是value

函数

使用function关键字定义

function  函数名(形参列表){
    
    函数体
    
}
形参列表不需要写var声明,直接写变量名即可
function  函数名(a,b){
   let result = 0;
    if(typeof(a) =="number"){
        result = a+b;
       }
   
    return result;
}

形参不需要var声明,直接写变量名------------理解为动态
返回值直接写return

使用变量引用
- let 函数名 = function (形参列表){ 函数体}
- 类似匿名函数
js不允许重载,会覆盖上一次的定义
有参函数也能用无参调出来的原因,或者无参,通过有参名调用
- 函数的arguments隐形参数,能在function函数内
- 不需要定义,却可以直接用来获取所有参数的变量,隐参
- 类似可变参数,类似数组,通过下标取值
- 即使写两个参数,实际上也可以传多个,通过arguments取值即可------理解为动态
typeof可以判断类型
- typeof( a) =="number"
  - typeof返回的结果是字符串!!!!!!
可以不使用变量引用匿名函数,一般用来和事件绑定
JS函数没有重载,后面重名方法会把之前的覆盖
内置函数
- 1.parseFloat(String s)->将字符串转成小数(number)
  2.parseInt(String s)->将字符串转成整数(number)
  
  3.注意:js是模糊匹配,将字符串转成number类型时,如果是数字开头,就只转数字部分

JS自定义对象

object自定义对象
- let 变量名 = new Object(); 空对象
- 变量名.属性名 = 值; 定义属性-----------理解为动态
- 变量名.函数名 = function(){} 定义一个函数-----------理解为动态
```
let test= new Object();
test.name = "华仔";
test.age = 18;
test.fun = function(){
    return "姓名:"+this.name+",年龄:"+this.age;
}
```
- 对象的访问
  - 用变量名.属性(函数) 访问函数
{} 大括号自定义对象
- let 变量名 = {}; 空对象
- 定义属性,在大括号里,属性名和值冒号隔开,逗号结尾,最后一个不用
```
let test = {
    属性名:值,             逗号结尾
    属性名:值,
    函数名:function(){}           最后一个属性不用逗号.类似mysql
};
```
- 对象的访问方式不变

JavaScript事件

常用事件--------------设备和页面交互响应

onload 加载完成事件
- 常用于js代码初始化
onclick 单击事件
- 常用于按钮的点击响应操作
onblur 失去焦点事件
- 常用于输入框失去焦点后验证输入内容是否合法
onchange 内容发生改变事件
- 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件
- 常用来表达提交前,验证所以表单项是否合法

事件的注册------------绑定,告诉浏览器事件响应后要执行的操作

静态注册
- 通过html标签的事件属性直接赋予事件响应后的代码
动态注册
- 先通过js代码得到标签的dom对象,通过dom对象.事件名=function(){}
- 基本步骤
  - 获取标签对象
  - 标签对象.事件名=function(){}

//静态写法------onload事件
function load(){
    aler("页面加载完成之后就会执行onload事件");
}
//onload事件动态注册,固定写法
window.onload = function(){
     aler("页面加载完成之后就会执行onload事件");
}

<body onload = "load();">             如果是动态写法,则什么都不用写
</body>


//onclick事件动态注册
window.onload = function(){
    //1.获取标签对象
    let btn = document.getElemenById("btn");
    //2.通过标签对象.事件名 = function(){}
    btn.onclick = function(){
        aler("onclick事件");
    }
}
<button id="btn">按钮</button>


//动态注册onblur事件
window.onload = function(){
    //1.获取标签对象
    let pass = document.getElemenById("btn");
    //2.通过标签对象.事件名 = function(){}
    pass.onblur = function(){
       console.log("动态注册失去焦点事件")
    }
}

密码:<input id="pass" type = "text">
    
    
    
    //动态注册
    window.onload = function(){
    let sel = document.getElementById("sel");
    sel.onchange = function(){
        console.log("选择已经改变")
        
    }
}
    <select id="sel">
    <option>
    选择1
    </option>
<option>
    选择2
    </option>
    </select>

//动态注册
 window.onload = function(){
    let form1 = document.getElementById("form1");
    form1.onsubmit = function(){
        console.log("如果表单项有一个不合法,则阻值提交")
        return false;
    }
}
//动态注册表单提交事件
<form action="#" method="post" id="form1">
  <input type ="submit" value="静态注册"/ >
</form>

document对象
- 文档树,表示整个页面
getElemenById解析
- get 获取
- Element 元素(标签)
- By 通过
- Id id属性
- 通过id属性获取标签对象
console.log()
- 控制台对象.向浏览器打印输出,用于测试使用

DOM模型

document object model 文档对象模型
- 把文档中的标签,属性,文本,转换成对象来管理

html标签对象化

<body>
    <div id="div1">
        我是内容
    </div>
</body>

//模拟对象化
class Dom{
    private String id;            id属性
    private String tagName;        标签名
    private Dom  parentNode;        父节点
    private list<Dom> children;    子节点
    private String innerHTML;      元素内容
}

document对象———–重点
- 管理所有的HTML文档内容
- 树形结构文档,有层级关系
- 标签对象化
- 可以通过document访问所有的标签对象
document对象中的方法介绍--------重点
- document.getElementById(id)---------优先
  - 通过标签的id属性查找标签dom对象,id是标签的id属性值
- document.getElementsByName(name)-----不唯一,所以有s
  - 通过标签的name属性查找标签dom对象,name是标签的name属性值
- document.getElementsByTagName(tagname)-----不唯一,所以有s
  - 通过标签名查找标签dom对象,tagname是标签名
- document.createElement(tagName)
  - 通过给定的标签名,创建一个标签对象,tagName就是要创建的标签名
- document.querySelector("css选择器“) #标签名 .类名标签名
  - 通过css选择器获取一个标签
- document.querySelectorAll("css选择器“)
  - 通过css选择器获取一组标签,返回数组

ById实例
//获取输入框的内容,验证是否合法
//必须是由字母,数字,下划线组成,长度是5-12位
 <script type="text/javascript">
        //获取输入框的内容,验证是否合法
        //必须是由字母,数字,下划线组成,长度是5-12位
        window.onload = function () {
            //获得标签对象
            let ptn = document.getElementById("pt");
            //获得按钮对象
            let pt = document.getElementById("ptn");
     //点击事件
            pt.onclick = function(){
                //获取用户输入
                let userinput = pt.value;
                //正则表达式
                let match = /^\w{5,12}$/;
                //正则方法
                if (match.test(userinput)){
                    alert("用户名合法"+userinput);
                    return true;
                }else {
                    alert("用户名不合法"+userinput);
                    return false;
                }
            }

        }
    </script>

<form action="#" method="post">
    校验:<input type="text" id="pt"><br>
    <Button id="ptn">正则校验</Button>
</form>

ByName实例
 <script type="text/javascript">
        window.onload = function () {
            //获得按钮name
            let checkAll = document.getElementById("checkAll");
            let checkNo = document.getElementById("checkNo");
            let checkReverse = document.getElementById("checkReverse");
            //返回的是一个集合.跟数组一样 ,集合的元素都是dom对象
            let hobbys = document.getElementsByName("hobby");
            //全选
            checkAll.onclick = function () {
                for(let i = 0 ;i<hobbys.length;i++){
                    hobbys[i].checked = true;
                }
            }
            checkNo.onclick = function () {
                for(let i = 0 ;i<hobbys.length;i++){
                    hobbys[i].checked = false;
                }
            }
            checkReverse.onclick = function () {
                for(let i = 0 ;i<hobbys.length;i++){
                    //取反
                    hobbys[i].checked = !hobbys[i].checked;
                }
            }

        }
    </script>

<body>
兴趣爱好
<input type="checkbox" name="hobby" value="php">php
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">js
<br>
<button  id="checkAll">全选</button>
<button id="checkNo">全不选</button>
<button id="checkReverse">反选</button>
</body>

ByTagName实例和ByName一样
//返回的是一个集合.跟数组一样 ,集合的元素都是dom对象
let inputs = document.getElementsByTagName("input");

正则表达式-----regexp
- 使用new RegExp("")创建正则
- 使用双斜杠 / /
- 使用规则
  - /e/ 是否包含这个字符,可以为任意字符
  - /[abc]/ 表示字符串是否包含方括号里任意一个字符
  - /[A-z]/ 是否包含任意一个字母
    - [a-z]-----[A-Z]---[A-z]---[0-9] 同理
  - 元字符
    - /\w/ 查找任意一个单词字符,
      - 包括 a-z,A-Z,0-9,下划线
    - \W 大写的w表示非单词字符,取反?
    - \d 查找数字大写的D是非数字
    - \s 查找空白字符大写的S非空白字符
  - 量词
    - n+ 匹配至少一个 n是任意一个字符
    - n* 零个或多个
    - n? 零个或一个
    - n{x} 连续的x个n
    - n{x,y} 至少连续的x个,最多连续的y个
    - n{x,} 至少连续的x个
    - n$ 以这个字符结尾的字符串
    - ^n 以这个字符开头的字符串
    - /^n{3,5}$/ 要求字符串从头到尾必须完全匹配,差一个都不行
节点的常用属性和方法
- 节点就是标签对象
- 方法
  - getElementByTagName()
    - 获取当前节点的指定标签名子节点
  - appendChild(ochildNode)
    - 可以添加一个子节点,ochildnode就是要添加的节点
- 属性
  - childNodes
    - 当前节点的所有子节点
  - firstChild
    - 第一个子节点
  - lastChild
    - 最后一个子节点
  - parentNode
    - 当前节点的父节点
  - nextSibling
    - 下一个节点
  - previousSibling
    - 上一个节点
  - className
    - 获取或设置标签的class值
  - innerHtml
    - 获取或设置元素内容------包括标签
  - innerText
    - 获取或设置元素的文本--------只有文本

和java的区别,java默认是精准匹配,js是弱类型语言,需要^和$精准匹配

可以添加第二个参数,常用的是i,表示忽略大小写

let test = /^123$/i

JQuery

jq的引入

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

$ 核心函数-------根据传参不同,返回内容不同
- 传入参数是函数时
  - 表示页码加载完成之后,相当于widow.onload
- 传入参数是html字符串时,根据字符串创建元素节点对象
```
 $(
 "<div><span>文本1</span></div>"
  ).appendTo("body"); 
```
- 传入参数是选择器字符串时
```
$("#id属性值");    根据id查询标签对象
$("标签名");   根据标签名查询标签对象
$(".class属性值");  根据class属性查询标签对象 
```
- 传入参数是DOM对象时
  - 把dom对象转换成jq对象

jQuery对象和dom对象

dom对象
- 通过getElementById 查询的标签对象
- 通过getElementsByName 查询的标签对象
- 通过getElementsByTagName 查询的标签对象
- 通过createElement 创建的标签对象
jQuery对象
- 通过jq的api创建的对象
- 通过jq包装的dom对象
- 通过jq的api查询的对象
- 本质是dom对象的数组+jq提供的一系列功能函数
dom对象和jQuery对象互转-------重点
- 先有dom对象
- $(dom对象) 就可以转为jQuery对象
先有jQuery对象
- jQuery对象[下标] 取出相应的dom对象

jQuery选择器----重点

基本选择器----重点
- # id选择器根据id查找标签对象
- .class 选择器根据class查找标签对象
- element 选择器根据标签名查找标签对象
- * 选择器表示任意的所有元素
- 多个选择器用逗号隔开合并选择器
- p.myclass 这种类似,p标签里面类型为myclass的标签
层级选择器----重点
- ancestor descendant 后代选择器, 给定的祖先元素下匹配所有的后代元素
  - 空格隔开 $("form input");
- parent > child 子元素选择器 ,给定的父元素下匹配所有的子元素
  - 直接后代,子孙元素不算
- prev + next 相邻元素选择器匹配所有紧接在prev元素后的next元素
- prev ~ sibings 之后的兄弟元素选择器匹配prev元素之后的所有sibings元素
  - 查找同级的兄弟元素

过滤选择器

基本过滤器
:first 获取匹配的第一个元素-----------------有点用
$("li:first");
:last 获取匹配的最后一个元素------------有点用
$("li:last");
:not 去除和选择器匹配的元素
$("input:not(:checked)");-------查找所有未选中的input元素
:even 所有为偶数的元素
$("tr:even");------索引从0开始
:odd 所有奇数的元素
$("tr:odd");------索引从0开始
:eq(index) 匹配一个给定索引值的元素
$("tr:eq(1)");
一个括号可以一直冒号下去
内容过滤器
- :contains(text) 匹配包含给定文本的元素
  - :empty 匹配所有不包含子元素或文本的空元素
  - :parent 匹配含子元素或者文本的元素--------非空元素
  - :has(selector) 匹配含义选择器所匹配的元素
属性过滤器
- [attribute] 匹配包含给定属性的元素------------有点用
- div[id]----------包含id属性的元素
- [attribute = value] 匹配给定的属性是某个特定值的元素-------------有点用
  - input[name='news']---------有name属性值是news的input标签
- [attribute != value] 不含有指定值的属性
  - 不等,取反
- [attribute ^= value] 某个值开头的属性
  - value值开头的
- [attribute $= value] 某个值结尾的属性
  - value值结尾的
- [attribute *= value]
- [attrSel1][attrSel2][attrSel1][attrSelIN] 满足多个
表单过滤器
- :input 匹配所有的input,textrarea,select和button元素
  - :text 匹配所有的文本输入框 ------------有点用
  - :password 匹配所有的密码输入框---------------有点用
  - :radio 匹配所有的单选框---------------有点用
  - :checkbox----------------所有的复选框------------有点用
  - :submit 匹配提交按钮
  - :hidden 匹配所有不可见的元素
    - display:none
- 表单属性
  - :checked 匹配所有选中的元素
  - 复选和单选,不包括select的option
    - $("input:checked")
  - :selected 匹配选中的option元素
    - $("select option:selected")

jQuery的方法

css方法,可以设置样式----貌似两个都是字符串
- $("*").css("background","red");
val方法,可以操作表单项的value属性值
- $(":text:enabled").val("我是赋值") 可以设置或者获取val值

each()方法可以遍历

$names.each(
    function(){
        console.log(this.value);
    }
)

confirm(); 确认提示方法,传什么就提示什么
- 用户点击确定返回true,反之亦然
.addClass() 方法用来给标签添加类
removeClass() 方法移除类
prop() 可以设置或获取属性值---推荐操作checked,readOnly,selected,disabled等
- 可以用其调整标签的属性,如果不存在表示false,存在则表示true
html() 设置或获取元素内容
- 和innerHtml一样在标签里添加 HTML 标签和文本
text() 获取或设置文本
- 和innerText一样不会解析html标签
remove() 完全移除 HTML 标签
appendTo() 选取 HTML 标签并将其添加到另一个标签里面
clone() 把元素从一个地方复制到另一地方
- ```
$("#target5").clone().appendTo("#left-well");
```
parent() 访问被选取标签的父标签
children() 访问被选取标签的子标签

jQuery元素的筛选

eq() 获取给定索引的元素
first() 获取第一个元素
last() 获取最后一个元素
is(exp) 判断是否匹配给定的选择器,有一个匹配就是true
has(exp) 包含匹配选择器的元素的元素
not(exp) 删除匹配选择器的元素
children(exp) 返回匹配给定选择器的子元素
- 功能和parent > child 一样
find(exp) 给定选择器的后代元素
- $("p").finde("span")

jQuery属性操作

不传参是获取,传参是设置
html() 设置或获取元素内容
- 和innerHtml一样
text() 获取或设置文本
- 和innerText一样
val() 设置或获取表单项的value值
attr() 可以设置或获取属性值-----不推荐操作checked,readOnly,selected,disabled等
- 因为操作上面的话,会出现undefined,表示错误
- 一个参数表示你要获取的属性值,两个参数表示设置属性值
  - $(":checkbox:first").attr("name"); 获取name属性的值
  - $(":checkbox:first").attr("name","abc"); 设置name属性的值为abc
  - 还可以操作非标准属性,比如自定义属性,abc啥的
prop() 可以设置或获取属性值---推荐操作checked,readOnly,selected,disabled等
- 操作上面,如果不存在表示false,存在则表示true

//全选和全不选
<script type="text/javascript">
        //相当于window.onload
        $(function () {
            //全选
            $("#checkedAllBtn").click(function () {
                //获得所有的复选框
                $(":checkbox").prop("checked", "true");
            });
            //全不选
            $("#checkedNoBtn").click(function () {

                    $(":checkbox").prop("checked", false);
                }
            );
            //反 选
            $("#checkedRevBtn").click(function () {
                //查询球类的复选框
                    $(":checkbox[name='items']").each(function () {
                            this.checked = !this.checked;
                    });

                //检查是否满选
                //获取全部球类的个数
                let len = $(":checkbox[name='items']").length;
                //获得选中的球类个数
                let count = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",len==count);
                });


            //提交按钮事件
            $("#sendBtn").click(function () {
                //获得勾选的球类
                //获得选中的球类的值
                $(":checkbox[name='items']:checked").each(function () {
                        this.value;
                });
            });

            //全选全不选按钮
            $("#checkedAllBox").click(function () {
                //获得所有的球类框
                //this.checked意思是和当前选中的状态一致
                $(":checkbox[name='items']").prop("checked", this.checked);
            });

            //给全部球类绑定单机事件
            $(":checkbox[name='items']").click(function () {
                //检查是否满选
                //获取全部球类的个数
                let len = $(":checkbox[name='items']").length;
                //获得选中的球类个数
                let count = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",len==count);
            });
        });
    </script>

<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全 选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反 选" />
    <input type="button" id="sendBtn" value="提 交" />
</form>

jQuery增删改查

内部插入
- appendTo() 当前调用的元素插到括号内的子元素末尾---最后一个子元素
- prependTo() 当前调用的元素插到括号内的子元素前面-----第一个子元素
外部插入
- insertAfter() 当前调用的元素插到括号内的元素末尾------平级
- insertBefore() 当前调用的元素插到括号内的元素前面--------平级
替换
- replaceWith() 括号内的元素替换调用者元素
- replaceAll() 用括号的元素替换所有的调用元素-----比如所有的div
删除
- remove() 删除调用者
- enpty() 清空调用标签的内容

jQuery动态删除和添加

  <script type="text/javascript">
        $(function () {

            //创建一个用于删除的可重复用的函数
            let deletefun = function(){
                //查找当前的行元素
                let trObject = $(this).parent().parent();
                let name = trObject.find("td:first").text();
                //确认提示方法,传什么就提示什么
                if (confirm("是否确认删除"+name)){
                    trObject.remove();
                }
                //防止标签跳转
                return false;
            };


            //添加按钮
            $("#addEmpButton").click(function () {
                //获得输入框姓名,工资,邮箱等
                let name = $("#empName").val();
                let email = $("#email").val();
                let salary = $("#salary").val();
                //添加数据到表格中,获取行标签对象
                let trObject = $("<tr>" +
                    "<td>"+name+"</td>" +
                    "<td>"+email+"</td>" +
                    "<td>"+salary+"</td>" +
                    "<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
                    "</tr>");
                    //添加到显示数据的表格中
                trObject.appendTo($("#employeeTable"));
                //绑定a标签
                trObject.find("a").click(deletefun);
            });
            //删除元素
            //把原本的响应函数替换为自定义函数,不能带括号,否则是调用函数
            $("a").click(deletefun);
        });
    </script>


<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>
<div id="formDiv">
<!--    <h4></h4>-->
    <table>
        <th>添加新员工</th>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>

JQuery样式操作

addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除,没有就添加样式
- 类似,点一下有,点一下没有,来回切换
offset() 获取或设置元素坐标

jQuery动画

基本动画
- show()
  - 将隐藏的元素显示
- hide()
  - 将可见的元素隐藏
- toggle()-------类似切换功能
  - 可见就隐藏,否则就显示
- 以上动画可以添加参数
  - 第一个参数是时长,毫秒单位
  - 第二个参数是动画的回调函数(动画完成后自动调用的函数)
```
$("#id").show(2000,function(){  alert("show动画已完成")})
```
淡出淡入动画
- fadeln() 淡入慢慢可见
- fadeOut() 淡出慢慢消失
- fadeTo() 指定时长内慢慢的将透明度修改到指定的值
  - 0 透明 1可见. 0.5 半透明----------第二个参数,
  - 第三个参数是回调函数
- fadeToggle() 切换
- 以上动画可以添加参数
  - 第一个参数是时长,毫秒单位
  - 第二个参数是动画的回调函数(动画完成后自动调用的函数)

jQuery其他事件处理

click() 绑定单击事件和触发单击事件
- click(function(){}) 里面传函数表示绑定事件,不传函数表示触发事件
mouseover() 鼠标移入事件
- 同样可以绑定和触发事件
mouseout() 鼠标移出事件
- 同样可以绑定和触发事件
bind() 可以给元素一次性绑定一个或多个事件
- bind("click",function(){}) bind绑定的单击事件
- 多个事件空格隔开
one() 可以给元素一次性绑定一个或多个事件
- 但是只会触发一次
unbind() 和bind方法相反,解除绑定
- unbind("click") 要解除的事件名
- 都不写则解绑全部
live() 也是绑定事件,可以绑定后面动态创建的元素

jQuery事件对象

只需在绑定事件的function添加一个参数即可,一般用event

可以动态的查找是哪个事件

$("#id").bind("mouseover mouseout",function(event){
    if(event.type == "mouseover"){
       console.log("鼠标移入");
       }
    
})

JavaScript

JavaScript

JavaScript的引入

JavaScript变量

解构赋值

模板字符串

声明对象简写

定义方法简写

对象拓展运算符

箭头函数

数组

函数

JS自定义对象

JavaScript事件

DOM模型

JQuery

jq的引入

jQuery对象和dom对象

jQuery选择器----重点

过滤选择器

jQuery的方法

jQuery元素的筛选

jQuery属性操作

jQuery增删改查

jQuery动态删除和添加

JQuery样式操作

jQuery动画

fadeln() 淡入 慢慢可见

jQuery其他事件处理

jQuery事件对象

fadeln() 淡入慢慢可见