22-05-15 西安 javaScript

一、综合案例：

    
    
    



    

        
学号
        
姓名
        
性别
        
 *** 作
    
    

        
1
        
张三
        
男
        

            
        
    
    

        
2
        
李四
        
男
        

            
        
    

学号：

姓名：

性别：

现在我们的html页面效果如下： 

我们要实现的效果是：

点击删除，删除当前行。删除的时候用confirm提示，防止误 *** 作。

点击添加，把input文本输入框的内容添加到表格，添加后清空输入框里的内容。

    var addBtn = document.getElementById("addBtn");
    addBtn.onclick = function () {
        //获取学生信息
        var stuId = document.getElementById("stuId").value;
        var stuName = document.getElementById("stuName").value;
        var stuGender = document.getElementById("stuGender").value;
        //创建一个tr标签
        var tr = document.createElement("tr");
        //为tr标签设置列
        tr.innerHTML = ""+stuId+""+stuName+""+stuGender+"";
        //获取table标签
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
        //清空学生信息所对应的文本框
        document.getElementById("stuId").value = "";
        document.getElementById("stuName").value = "";
        document.getElementById("stuGender").value = "";
    };

    function deleteStudent(obj) {
        if(confirm("确认删除吗？")){
            obj.parentElement.parentElement.remove();
        }
    }

---

二、ECMAScript 6/BOM/DOM

网景公司，最初是为了表单验证，层java热度,JavaScript由浏览器中的JavaScript引擎直接解释执行

js特点：
1、脚本语言
2、基于对象
3、弱类型
4、事件驱动【鼠标事件和键盘事件】
5、跨平台性【跟 *** 作系统没关系】

js数据类型

基本数据类型：字符串【没有字符和字符串之分】，数值【数字包括整形和浮点型】，布尔
引用数据类型  Object：对象，数组
特殊数据类型:  null(空对象，有类型没值),undefined(未定义，类型不确定，值也不确定)
------------
声明变量，var 变量名=值；//值可以是任意类型
var是关键字，var不代表数据类型；
查看变量的数据类型 ： typeOf 

log //tab键就出来了
//shiif+alt+上下
//ctrl+H 查看类的继承关系
js任意数据类型都可以做if条件
为true的情况：[] 
为false 的5种情况：false/“”/0/null/undefined

    //特别注意[]，控制台会打印真
    var flag = [];
    if(flag){
        //打印到浏览器的控制台
        console.log("真");
    }else{
        console.log("假");
    }

---

javascript函数创建：

方式1：函数声明
一个函数声明后，只能在当前页面访问。

//不需要设置访问修饰符，返回值类型
function 函数名（参数名1，参数名2）{
  alert();//d出警告框
}

有参数不传参数，则NAN【不是一个数值】

方式2：函数表达式

//这个变量名就相当于函数名,将匿名函数赋值给变量
var 变量名= function(){

}

---

javascript内置函数：

用的最多的：

 console.log()//打印到浏览器的控制台

三种都是遮盖层，都会阻塞后面代码的运行

alert()  //警告框
confirm() //提示确认框，
prompt("请输入","") //提示输入框,第二个参数是输入框默认值

confirm（）点击确定函数返回true，点击取消函数返回false
和if结合使用
if(confirm("")){

}

Number和ParseInt
Number（）；//将字符串转数值，转不了则是NaN.
ParseInt（）；//也是将字符串转数值

    console.log( "Number: "+Number("123abc"))
    console.log("parseInt: "+ parseInt("123abc"))

isNaN(） 是不是非数值
翻译： “123” is not a number?

isNaN("123")//false
isNaN("123c")//true

---

javascript内对象的2种创建方式
对象和数组都是json

创建对象方式1：
var stuObj=new Object();
stuObj.stuId=""    //为对象设置属性
stuObj.sayHello=function(){  //为对象设置函数属性

}

创建对象方式2：字面值 { }

var stuObj={
   stuId:1001,
   sayHello:function(){  //为对象设置函数属性

   }
};

---

javascript中this关键字
this在函数外：表示window视窗对象
在函数里：调用函数的对象

window视窗对象是所打开的标签页。浏览器最顶层的对象。是可以缺省的，用的时候window可以不写。

var getName=function(){}
var obj1={
//注意这里给函数属性getName赋值的时候不是getName（）
getName:getName
}

---

javascript数组：

创建数组方式1：
var arr=new Array(5);

创建数组方式2：
var arr=[1,2,3,4,5];

js数组的特点：

1、js数组可以存放任意类型的数据
2、js数组长度可变，真实长度取决于 *** 作数组的最大下标 fori
3、若js数组某个元素没有赋值，默认undefined

js数组常用方法：

2021/10/19 北京-------js *** 作数组的7个方法，js回调函数和匿名函数,Object.assign()_￡小羽毛的博客-CSDN博客

1.push()：数组尾部添加元素，可以一次性多个
2.pop() d出尾部的最后一个
3.join():拼接字符串，不写参数默认“，”连接
   split():拆分字符串为一个数组
4.reverse():反转，将数组中元素反转
5.splice()
   splice(start,n)//从数组下标开始删除n个元素
   splice(start,n,newData)//从数组下标开始删除n个元素,再添加新元素newData

---

JSON 和XML 数据交互格式

跨平台数据传输:json、xml【json首选】

1、存储的只能是字符串
2、有固定的格式

json 对象 ：  {key:value,key:value,...}
json 数组 :     [value,value,...,value]
json解析：
    json 对象：对象.key
    json 数组： 下标

js里有一个内置对象JSON

json对象和json字符串转化：
        json对象转字符串： JSON.Stringify();
        json字符串转json对象: JSON.parse()

---

三、DOM: 文档对象模型

DOM:通过document获取页面标签并 *** 作，Document表示整个html页面

元素、标签、标记 指的是一个意思

1.最常用：获取指定的标签：

根据id属性获取页面的某一个标签
document.getElementById(“id值”)

根据name属性值获取一组标签，返回数组
document.getElementsByName(“name值”)

根据标签名获取页面标签组成的数组
document.getElementsByTagName(“标签名”)

组根据class属性获取一个数组标签，返回值固定是数组
document.getElementsByClassName("类名")

也可以用选择器获取页面标签。

注意：没有name属性选择器。

查找一个标签{查找选择器匹配的第一个}
document.querySelector("选择器")

查找多个标签{返回数组}
document.querySelectorAll("选择器")

---

获取某个标签的子标签

这里用ul指---某个标签
注意：name 和value属性只有表单项有

获取ul标签的所有子标签
ul.children  //属性
//ul.childNodes  获取所有的子节点

获取ul标签的第一个子标签
ul.firstElementChild  //属性
//firstChild  获取第一个子节点

获取ul标签的最后一个子标签
ul.lastElementChild //属性

---

获取某个标签的父标签

//父标签只能有一个
element.parentElement

---

获取某个标签的兄弟标签

上一个兄弟标签
element.previousElementSibling
//element.previousSibling//上一个兄弟节点

下一个兄弟标签
element.nextElementSibling
//element.nextSibling //下一个兄弟节点

---

2.标签属性 *** 作

以对象的方式获取标签，无非就是属性的读写 *** 作

转移：在文本框不写内容，value是空串

element.属性；//获取属性
element.属性="值";//为属性赋值

---

3. *** 作双标签中的内容

var div = document.getElementsByTagName("div")[0];
获取：
//获取div标签中的文本内容
console.log(div.innerText);
//获取div标签中的所有内容（标签和文本）
console.log(div.innerHTML);

赋值：
    div.innerText = "你好"; //原样展示
    div.innerHTML = "你好"; //会把你好加粗

4.对页面标签增删改

//创建标签
var li=document.createElement(“标签名”)//创建什么标签。现在是js变量，现在不存在页面中

//为ul添加子标签 [追加到所有子标签之后]
ul.appendChild(li)

//添加到ul标签的第一个子签
var firstLi = ul.firstElementChild;
ul.insertBefore(newEle,targetEle)//（li，firstli）

//将li替换ul中的第一个子标签
ul.replaceChild(newEle, oldEle)

//删除第一个子标签，删除指定的标签
firstli.remove()

---

四、事件驱动

事件分类：表单事件、鼠标事件、键盘事件

页面事件：
onload//页面标签加载完后触发
onunload//页面卸载事件，关闭或者刷新

1.表单事件

表单验证：
onblur  //  失去焦点，鼠标在输入框外点一下
onfocus //获取焦点，鼠标在输入框里点进去
onchange //内容改变事件，是一个过程【从获取焦点到失去焦点，表示一次输入完成】

2.鼠标事件

onclick:左键单击
ondblclick : 左键双击
onmousemove；鼠标移动事件
onmouseover: 鼠标移上事件
onmouseout:鼠标移出事件

onmousedown//鼠标上的键按下事件，不管鼠标左键右键
onmouseup //鼠标上的键抬起事件，不管鼠标左键右键

2.1 醒目效果

有个专业名词：样式匹配；

    
    
    


充值

鼠标移上去后显示变大 ,鼠标移开又变回原样

2.2 替换图片效果

简写了：

2.3获取鼠标坐标

  分析得出：事件应给body绑定，注意 body 高度是由其内容决定

    
    


x=0,y=0

鼠标在移动时，x,y在动态的变化。

3.键盘事件

onkeydown 键按下onkeyup 键d起onkeypress 键盘上的键按下并抬起事件

---

绑定事件的方式