22-05-15 西安 javaScript

22-05-15 西安 javaScript,第1张

一、综合案例:




    
    综合案例
    


学号 姓名 性别 *** 作
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 醒目效果

有个专业名词:样式匹配;




    
    Title
    


充值



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

2.2 替换图片效果

简写了:



2.3获取鼠标坐标

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




    
    Title


x=0,y=0


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

3.键盘事件

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

绑定事件的方式

 



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1298802.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存