08 JavaScript(js)
2024-04-24 20:23:56
JavaScript(js)
一．引言
1. Javascript（js）：基于浏览器的，解释型的，面向对象的编程语言2. 编程语言的分类：编译型语言 ---- C C++ （运行效率高，不能跨平台） 源码 -- 针对特定系统的可执行的机器指令解释型语言 ---- html js （运行效率低，可以跨平台） 源码 -- 由不同的软件直接对源码进行逐行翻译解释执行先编译后解释 ---- java C# （运行效率较高，可以跨平台） 源码 -- .class -- jvm执行3. 作用 ：用来嵌入到html页面里，为“网页”添加动画效果1）html + css --- 静态网页（里面的数据不会改变）2）servlet + jsp --- 动态网页（在网页中嵌入java代码改变数据）3）js --- 添加动画效果（按钮功能的添加，表单数据的验证），在网页刷新后，所有动画效果会消失。
二. 第一个js程序
1.向html页面里嵌入js代码的方式<head><script type="text/javascript"> js 代码 </script></head>2.在js代码里输出的API1）向浏览器窗口打印输出HelloWorlddocument.write("<h1>HelloWorld</h1>");2）以警告框的形式打印输出结果window.alert("HelloWorld");注意：如果函数或者属性是window对象的，则window可以省略3）向浏览器的控制台输出结果，相当于java里的System.out.println();console.info("HelloWorld");
三.js的语法
1.js是一种弱数据类型语言java -- 是强数据类型语言（变量的类型和值的类型一致）int a = 3; String str="hehe";js -- 弱数据类型语言（只有值有类型，变量没有类型）var a = 3; a ="hehe";2.js里的变量定义1）变量可以多次重复声明定义赋值，值以最后一次有值的赋值为准2）没有块作用域的概念java --》 if(true){ int a=3; }System.out.println(a); ---errorjs ---> if(true) { var a = 3; }alert(a); ---- ok3) 只有定义在函数里的，并且用var关键字声明的变量，才叫“局部变量”，只在函数内有效4)没有用var声明的变量一定是“全局变量”，到处可见3.数据类型1）基本数据类型数字类型 -- 不分小数和整数字符串类型 -- 不分字符和字符串，用单引号或者双引号声明定义 'hehe'布尔类型 -- true|false 非0 | 0(false) 非空 | null（false）if(a!=null){} <---> if(a){} if(3)<-->if(true)2）特殊的数据类型null undefined NaN(not a number)3)复合数据类型：数组 日期 对象 函数类型4.运算符1）数学运算符： + - * / %注意：只要有可能计算出结果，js就会自动做类型切换算出结果。2) 判断相等性： == ===== 比较值是否相等var a=3; var b="3"; alert(a==b); --> true=== 比较值和类型是否完全相同var a=3; var b="3" alert(a===b) --> false3) typeof 判断变量的类型 5.流程控制 --- 与java一致
四.函数类型 【重点】
1.在js里函数被认定为一种数据类型，一个函数也可以称为“一个函数类型的值”，保存这个值的变量就是函数名2.定义函数1）使用关键字function定义函数java -- 修饰符 返回值类型 函数名(形参类型 参数名,....) { 函数体 }public int add(int a,int b){ return a+b; }js -- function 函数名(参数名，....){ 函数体 }function add(a,b){ return a+b; }2）隐式声明定义语法：var 函数名 = function(参数表){ 函数体 }用function定义一个函数，将其看做是一个值，将这个值赋值给变量。例如：var add = function(a,b){ return a+b; }使用：变量名(实参);3）函数类型值可以在变量间赋值var f1 = function(){ return "hehe" } ;var f2 = f1 ; --> 将f1里保存的“函数类型值”赋值给变量f2，成功后f2里保存的也是一个函数类型值，var f3 = f1(); --> 调用f1函数将函数的返回值赋值给f2变量，成功后f2里保存的是f1函数的结果（是一个字符串）3.注意事项：1)js里没有“方法重载”，调用函数时可以传入多于 or 少于形参数量的实参。js将所有的实参默认保存在一个叫做arguments的数组里。 // 练习： 请定义一个函数，可以计算所有实参的和并返回function sumArgs(){// 计算所有实参的和 ---- arguments数组var result = 0;for( var i=0;i<arguments.length;i++){result += arguments[i];}return result;}alert( sumArgs(1,2,"3",true));2)函数的参数可以又是一个函数，函数里面可以再次定义其他函数，称为“内联函数”
五.对象类型
1.在js里只有对象，没有类。任意两个对象都不一样2.定义一个对象语法： var obj = {属性名:属性值，属性名：属性值，......... }; obj.新属性名=值;var stu1 = {id:1,name:"张三",age:15};stu1.sex = "male";stu1.mattied = false;3.访问对象的属性1）访问一个属性： 对象名.属性名 或者 对象名["属性名"]alert(stu1.name); alert(stu1["name"]);2)遍历所有属性： for( 变量名 in 对象名){ 对象名[ 变量名] }循环每执行一次，都会从对象中获取一个属性名，赋值给指定的变量名。for(pro in stu1){alert(pro+"------"+stu1[pro]);}4.js里的对象理论上没有方法功能，只由属性组成，但是可以通过语法模拟java里的对象功能// 请定义一个对象有name和age两个属性，有getName方法，有play方法（play方法返回一个字符串值）var stu ={ name:"zhangsan" , age:18 , getName:function(){ return this.name; } ,play:function(){ return "hehe";} };// 遍历对象的所有属性，判断属性的类型：是函数则调用并打印返回值，不是函数则直接打印值。for(pro in stu){if( typeof stu[pro] == "function" ){document.write("<h1>"+stu[pro]()+"</h1>");}else{document.write("<h1>"+pro+"---"+stu[pro]+"</h1>");}}六.数组Array
1.特点：js里的数组长度不固定，可以任意扩展；数据可以是任意类型。2.创建：var 数组名 = [元素1，元素2，..... ];创建好以后可以任意扩展，添加任意元素。3.访问：1）一个元素（通过下标访问，从0开始） --- arr1[3]2）遍历( 与java一样，用for循环遍历 )for(var i=0;i<arr1.length;i++){ arr1[i] }4.数组常见函数数组对象.sort() ---> 对数组里的元素按照自然顺序升序排列数组对象.sort(排序函数名) ---> 可以再排序函数里自定义排序规则function abc(a,b){ return b-a;}arr2.sort(abc);
七.js里的常见的内置对象
1.字符串类型var str = "hehe";var str2 = new String("hehe");注意：获取字符串的长度是length属性，不是length函数2.Math ： 相当于java里的工具类，里面的函数相当于java里的静态函数，可以用Math直接调用var ran = Math.random();3.日期类型 Date 1）var d1 = new Date(); --> 得到当前浏览器时间对象var d2 = new Date("1992-04-01"); ---> 创建一个指定日期值的date对象2）常见函数：getFullYear() ---> 获得四位的年getMonth() ---> 获得日期对象里的月（0~11）。。。。。
八. js的常规执行方式
1.js代码靠事件触发运行，当网页里的标签产生浏览器能够捕获的特定事件时，触发js代码运行。事件模型： 事件源（网页里的标签） 事件对象（浏览器能够捕获的事件） 监听器代码开发步骤：1）确定事件源（需要监听的html标签），确定需要监听的事件2）为事件源注册监听器，同时提供js代码产生动态效果为html标签注册监听器方式<标签名 监听器="js代码"> ------> js代码比较少<标签名 监听器="调用js的函数"> ---》js代码多，功能复杂eg:<input type="button" onclick="函数名字（参数列表）"/>2.常见事件监听器鼠标相关onclick 单击事件*ondblclick 双击事件onmouseover 鼠标移入*onmouseout 鼠标移出*onmousemove 鼠标移动onmousedown 鼠标按下onmouseup 鼠标松开键盘相关,网页上任意标签 bodyonKeyDown 按键按下*onKeyUp 按键抬起body相关事件onload = fun //页面加载完毕后触发 *****onunload 窗口离开时触发（刷新，返回，前进，主页...）onscroll 页面滚动onresize 缩放页面form表单控件相关事件****onblur 当前元素失去焦点 <input>onchange 当前元素失去焦点，并且值改变时 <input>(监听value属性值得修改) <select>onfocus 当前元素获得焦点时 <input>onsubmit 表单提交时 (验证表单数据是否格式正确)3.注意事项1）事件冒泡：发生在内部元素的事件默认会向外部元素扩散取消事件冒泡 === event.cancelBubble=true;event -- 代表监听的事件对象， event.clientX--事件产生点的横坐标 event.clientY -- 事件产生点的纵坐标event.source -- 产生事件的事件源2）通过事件监听可以取消某些标签的默认行为超链接标签 --> <a href="跳转路径" onclick="return false">表单标签 --> <form action="" method="get" onsubmit="return false">
九.DOM编程 – document object model文档对象模型
一.概念解析1.软件解析xml文档的两种方式： dom saxdom -- 浏览器软件将html文档加载进内存，封装成一颗“文档树”，html里的所有标签都被封装成“标签对象”成为“文档树”上的一个节点。父标签对象对子标签对象拥有所有的操作权限（增删改查）sax -- 将文档逐行解释找到对应的标记，当再次访问时会重新逐行解释（一次快） dom里的常见内置对象 document --- 代表整个文档对象（主要只body部分，地址栏以下，状态栏以上）window ---- 代表整个浏览器窗口对象，document是window的一个属性，使用window功能时，window可以省略2.获取html文档里的相应的标签对象1）目的：通过修改标签的属性或样式，达到修改文档和添加动态效果的目的2）APIvar tag = document.getElementById("标签的id属性值"); 【重点】element元数标签var tags = document.getElementsByTagName("标签名"); --- 返回值是一个数组父标签.getElementsByTagName("标签名");var tags = document.getElementsByName("标签的name属性值"); --- 通常只有表单标签会定义name属性var tags = document.getElementsByClassName("标签的class属性值"); --- 通过css样式获取标签3）修改属性或者样式修改 --- tag.属性名=新值获取 --- var value = tag.属性名添加或者修改样式 --单独指定一个css样式 tag.style.color="red" tag.style.backgourndColor="blue"--批量修改指定一类风格 tag.className ="一个class值"3.标签对象的常见属性一1）innerHTML：代表标签体里的内容（文本，一个标签） 2) this : 代表产生事件的当前标签对象4.删除标签对象1) parentTag.removeChild(childTag); --- 从父标签对象中删除孩子标签对象2）标签对象的一些关系属性：tag.parentNode --- 获取tag的父标签对象tag.childNodes --- 获取tag的所有孩子节点（文本，子标签）tag.firstChild --- 获取tag的第一个孩子tag.lastChild tag.nextSibling --- 获取tag的下一个同级标签tag.previousSibling --- 获取tag的上一个同级标签注意：存在浏览器差异，谷歌浏览器会将标签间的空格也算作一个节点。3）在js里，以tbody为表格的基础标签<table><tbody><tr> .... </tr></tbody></table>4)删除辅助功能：弹出确认框var ba = window.confirm("提示文字"); ---》 函数返回一个boolean值代表确认框里的选择5.添加新的标签1）创建一个新标签 -- var tag = document.createElement("标签名");eg: <h1>HelloWorld</h1>var tag = document.createElement("h1");tag.innerHTML = "HelloWorld";2）添加到网页里的指定位置parentTag.appendChild(newTag); ---> 将newTag添加到现有标签的最后面，称为父标签的最后一个孩子节点parentTag.insertBefore(newTag,oldTag); ---> 将newTag添加到oldTag之前3）为新标签添加事件的代码newTag.onclick = function(){ js功能代码 或者 直接调用现有的函数 }6.替换标签的方法parentTag.replaceChild(newTag,oldTag); --> 用新标签替换掉旧的标签Dom编程注意事项： innerHTML（普通标签） 和 value（表单元素）//选中所有function selectAll() {//1. 获取所有的checkbox标签var inps = document.getElementsByTagName("input");for(var i=0;i<inps.length;i++){if(inps[i].type == "checkbox"){//2. 设置它们的属性checked为trueinps[i].checked = true;}}}十.下拉列表的处理
1. options -- 下拉列表标签对象的一个属性，属性值为数组类型。作用是获取下拉列表里的所有的option选项标签对象2. selectedIndex -- 下拉列表标签的一个属性，表示被选中的option的下标3. 下拉列表需要注册onchange事件（失去焦点并且值发生改变）4. 清空下拉列表： tag.options.length = 0;5. 生成下拉列表里的一个option标签： var opt = new Option(text,value);<head><meta http-equiv="content-type" content="text/html" charset="UTF-8"/><title>CITYJS</title><script type="text/javascript">var liaoning = [{text:"沈阳",value:"shengyang"},{text:"大连",value:"dalian"},{text:"铁岭",value:"tieling"}];var shanxi = [{text:"朔州",value:"shuozhou"},{text:"太原",value:"taiyuan"},{text:"运城",value:"yuncheng"}];var jiangsu = [{text:"南京",value:"nanjing"},{text:"无锡",value:"wuxi"},{text:"徐州",value:"xuzhou"}];function getCityArray(proValue) {if(proValue == "liaoning") return liaoning;if(proValue == "shanxi") return shanxi;if(proValue == "jiangsu") return jiangsu;}// 当第一个下拉列表失去焦点并且值改变时，执行该函数。 函数会初始化city下拉列表填充数据function initCity(tag) {// 此处tag参数代表 pro下拉列表//1. 获取被选中的省份名var proValue = tag.options[tag.selectedIndex].value;//2. 根据省份名获取对应的城市数组var cityArray = getCityArray(proValue);//3. 遍历数组，将数组里的每一个对象封装成option，设置给城市下拉列表var citySelect = document.getElementById("city");citySelect.options.length = 1;// 清空下拉列表for (var i=0;i<cityArray.length;i++){var obj = cityArray[i]; // 一个城市对象 （ text，value）var opt = new Option(obj.text,obj.value); // 封装一个option选项//将封装好的opt设置到城市下拉列表里 citySelectcitySelect.options[i+1] = opt;}}</script>
</head>
<body><select name="pro" onchange="initCity(this)"><option>请选择省</option><option value="liaoning">辽宁</option><option value="shanxi">山西</option><option value="jiangsu">江苏</option></select><select name="city" id="city"><option>请选择城市:</option></select>
</body>
</html>十一.BOM — browser object model 浏览器对象模型
1.bom -- 一组与浏览器相关的内置对象以及他们的函数和属性 （window）2.window的常用功能（使用window的函数时，可以省略window）1）open("url") --- 打开一个新的浏览器窗口，并在窗口里显示url指定的资源。函数有返回值，为当前打开的新窗口对象var w = window.open("url");close() --- 关闭窗口对象2）对话框警告框 -- window.alert("......");确认框 -- var ba = window.confirm("....");提示输入框 --- var str = window.prompt("....");3）定时器var id = window.setTimeout(fun,time); --- 在time毫秒后，执行一次fun函数window.clearTimeout(id); ---移除定时器var id = window.setInterval(fun,time); --- 周期定时器，每隔time毫秒，执行一次fun函数window.clearInterval(id);eg:显示系统时间<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>SYSDATE</title><style type="text/css">#d1{width: 38%;height: 50px;background: #5494F3}</style><script type="text/javascript">function fun() {var d1 = document.getElementById("d1");d1.innerHTML = new Date();}window.setInterval(fun,1000);//系统时间动态进行（1秒进行一次）function fun2() {var d2 = document.getElementById("d2");d2.innerHTML = d2.innerHTML+".";}var interval2 = window.setInterval(fun2,1000);function fun3() {window.clearInterval(interval2);location.href="/mavenweb/emp/showEmp";}window.setTimeout(fun3,5000);//5秒以后跳到showEmp(action)</script>
</head>
<body><div id="d1"></div><div id="d2">正在加载</div>
</body>
</html>4）location -- window的一个属性，而location有一个href属性，用来在js代码里向其他资源跳转（类似于超链接）location.href = "url";5）history -- 是window的一个属性history.back() -- 退回到上一个浏览的网页history.forward() -- 前进history.go(num) -- num为负数则表示后退，num为正数是前进 ， num为0表示刷新轮播图
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>LunBoTu</title><style type="text/css">#d1{width:300px;height: 420px;margin: 10px auto}</style><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><script type="text/javascript">var imageArray = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];var num = 0;function changeImageSrc() {if(num==5){num=0;}var image = document.getElementById("image");image.src="../viewjs/image/"+imageArray[num++];}var id1 = window.setInterval(changeImageSrc,1000);function stop() {window.clearInterval(id1);}function start() {id1 = window.setInterval(changeImageSrc,1000);}</script>
</head>
<body><div id="d1" onmouseout="start()" onmouseover="stop()"><img src="../viewjs/image/1.jpg" id="image"/></div>
</body>
</html>十二.代码结构的调整
1.添加事件的处理方式1）标签式事件处理 <标签名 onclick="js函数">2）编程式事件处理<script type="text/javascript">XXXXXXX ------------ 网页加载的时候运行，按照出现在html文档里的先后顺序运行，可能优于body内容先执行//等到网页全部内容加载完成后，执行function里的代码window.onload = function(){XXXXXXXXX ---- 网页全部加载完成（body加载完成）var tag = 得到需要添加事件的标签对象;tag.onclick = function(){事件处理的js代码};}</script>2.可以将js代码单独定义在一个以.js为结尾的文件中，在网页里需要使用时通过<script>标签引入<head><link rel="stylesheet" type="text/css" href="css文件路径"/><style type="text/css"> ...... </style><script type="text/javascript" src="单独的js文件路径"></script><script type="text/javascript">自己的js代码</script></head><img src="/*****/imageAction" click="fun" /> <a href="" onclick="img.onclick();"> .... </a>1. Javascript（js）：基于浏览器的，解释型的，面向对象的编程语言2. 编程语言的分类：编译型语言 ---- C C++ （运行效率高，不能跨平台） 源码 -- 针对特定系统的可执行的机器指令解释型语言 ---- html js （运行效率低，可以跨平台） 源码 -- 由不同的软件直接对源码进行逐行翻译解释执行先编译后解释 ---- java C# （运行效率较高，可以跨平台） 源码 -- .class -- jvm执行3. 作用 ：用来嵌入到html页面里，为“网页”添加动画效果1）html + css --- 静态网页（里面的数据不会改变）2）servlet + jsp --- 动态网页（在网页中嵌入java代码改变数据）3）js --- 添加动画效果（按钮功能的添加，表单数据的验证），在网页刷新后，所有动画效果会消失。
二. 第一个js程序
1.向html页面里嵌入js代码的方式<head><script type="text/javascript"> js 代码 </script></head>2.在js代码里输出的API1）向浏览器窗口打印输出HelloWorlddocument.write("<h1>HelloWorld</h1>");2）以警告框的形式打印输出结果window.alert("HelloWorld");注意：如果函数或者属性是window对象的，则window可以省略3）向浏览器的控制台输出结果，相当于java里的System.out.println();console.info("HelloWorld");
三.js的语法
1.js是一种弱数据类型语言java -- 是强数据类型语言（变量的类型和值的类型一致）int a = 3; String str="hehe";js -- 弱数据类型语言（只有值有类型，变量没有类型）var a = 3; a ="hehe";2.js里的变量定义1）变量可以多次重复声明定义赋值，值以最后一次有值的赋值为准2）没有块作用域的概念java --》 if(true){ int a=3; }System.out.println(a); ---errorjs ---> if(true) { var a = 3; }alert(a); ---- ok3) 只有定义在函数里的，并且用var关键字声明的变量，才叫“局部变量”，只在函数内有效4)没有用var声明的变量一定是“全局变量”，到处可见3.数据类型1）基本数据类型数字类型 -- 不分小数和整数字符串类型 -- 不分字符和字符串，用单引号或者双引号声明定义 'hehe'布尔类型 -- true|false 非0 | 0(false) 非空 | null（false）if(a!=null){} <---> if(a){} if(3)<-->if(true)2）特殊的数据类型null undefined NaN(not a number)3)复合数据类型：数组 日期 对象 函数类型4.运算符1）数学运算符： + - * / %注意：只要有可能计算出结果，js就会自动做类型切换算出结果。2) 判断相等性： == ===== 比较值是否相等var a=3; var b="3"; alert(a==b); --> true=== 比较值和类型是否完全相同var a=3; var b="3" alert(a===b) --> false3) typeof 判断变量的类型 5.流程控制 --- 与java一致
四.函数类型 【重点】
1.在js里函数被认定为一种数据类型，一个函数也可以称为“一个函数类型的值”，保存这个值的变量就是函数名2.定义函数1）使用关键字function定义函数java -- 修饰符 返回值类型 函数名(形参类型 参数名,....) { 函数体 }public int add(int a,int b){ return a+b; }js -- function 函数名(参数名，....){ 函数体 }function add(a,b){ return a+b; }2）隐式声明定义语法：var 函数名 = function(参数表){ 函数体 }用function定义一个函数，将其看做是一个值，将这个值赋值给变量。例如：var add = function(a,b){ return a+b; }使用：变量名(实参);3）函数类型值可以在变量间赋值var f1 = function(){ return "hehe" } ;var f2 = f1 ; --> 将f1里保存的“函数类型值”赋值给变量f2，成功后f2里保存的也是一个函数类型值，var f3 = f1(); --> 调用f1函数将函数的返回值赋值给f2变量，成功后f2里保存的是f1函数的结果（是一个字符串）3.注意事项：1)js里没有“方法重载”，调用函数时可以传入多于 or 少于形参数量的实参。js将所有的实参默认保存在一个叫做arguments的数组里。 // 练习： 请定义一个函数，可以计算所有实参的和并返回function sumArgs(){// 计算所有实参的和 ---- arguments数组var result = 0;for( var i=0;i<arguments.length;i++){result += arguments[i];}return result;}alert( sumArgs(1,2,"3",true));2)函数的参数可以又是一个函数，函数里面可以再次定义其他函数，称为“内联函数”
五.对象类型
1.在js里只有对象，没有类。任意两个对象都不一样2.定义一个对象语法： var obj = {属性名:属性值，属性名：属性值，......... }; obj.新属性名=值;var stu1 = {id:1,name:"张三",age:15};stu1.sex = "male";stu1.mattied = false;3.访问对象的属性1）访问一个属性： 对象名.属性名 或者 对象名["属性名"]alert(stu1.name); alert(stu1["name"]);2)遍历所有属性： for( 变量名 in 对象名){ 对象名[ 变量名] }循环每执行一次，都会从对象中获取一个属性名，赋值给指定的变量名。for(pro in stu1){alert(pro+"------"+stu1[pro]);}4.js里的对象理论上没有方法功能，只由属性组成，但是可以通过语法模拟java里的对象功能// 请定义一个对象有name和age两个属性，有getName方法，有play方法（play方法返回一个字符串值）var stu ={ name:"zhangsan" , age:18 , getName:function(){ return this.name; } ,play:function(){ return "hehe";} };// 遍历对象的所有属性，判断属性的类型：是函数则调用并打印返回值，不是函数则直接打印值。for(pro in stu){if( typeof stu[pro] == "function" ){document.write("<h1>"+stu[pro]()+"</h1>");}else{document.write("<h1>"+pro+"---"+stu[pro]+"</h1>");}}六.数组Array
1.特点：js里的数组长度不固定，可以任意扩展；数据可以是任意类型。2.创建：var 数组名 = [元素1，元素2，..... ];创建好以后可以任意扩展，添加任意元素。3.访问：1）一个元素（通过下标访问，从0开始） --- arr1[3]2）遍历( 与java一样，用for循环遍历 )for(var i=0;i<arr1.length;i++){ arr1[i] }4.数组常见函数数组对象.sort() ---> 对数组里的元素按照自然顺序升序排列数组对象.sort(排序函数名) ---> 可以再排序函数里自定义排序规则function abc(a,b){ return b-a;}arr2.sort(abc);
七.js里的常见的内置对象
1.字符串类型var str = "hehe";var str2 = new String("hehe");注意：获取字符串的长度是length属性，不是length函数2.Math ： 相当于java里的工具类，里面的函数相当于java里的静态函数，可以用Math直接调用var ran = Math.random();3.日期类型 Date 1）var d1 = new Date(); --> 得到当前浏览器时间对象var d2 = new Date("1992-04-01"); ---> 创建一个指定日期值的date对象2）常见函数：getFullYear() ---> 获得四位的年getMonth() ---> 获得日期对象里的月（0~11）。。。。。
八. js的常规执行方式
1.js代码靠事件触发运行，当网页里的标签产生浏览器能够捕获的特定事件时，触发js代码运行。事件模型： 事件源（网页里的标签） 事件对象（浏览器能够捕获的事件） 监听器代码开发步骤：1）确定事件源（需要监听的html标签），确定需要监听的事件2）为事件源注册监听器，同时提供js代码产生动态效果为html标签注册监听器方式<标签名 监听器="js代码"> ------> js代码比较少<标签名 监听器="调用js的函数"> ---》js代码多，功能复杂eg:<input type="button" onclick="函数名字（参数列表）"/>2.常见事件监听器鼠标相关onclick 单击事件*ondblclick 双击事件onmouseover 鼠标移入*onmouseout 鼠标移出*onmousemove 鼠标移动onmousedown 鼠标按下onmouseup 鼠标松开键盘相关,网页上任意标签 bodyonKeyDown 按键按下*onKeyUp 按键抬起body相关事件onload = fun //页面加载完毕后触发 *****onunload 窗口离开时触发（刷新，返回，前进，主页...）onscroll 页面滚动onresize 缩放页面form表单控件相关事件****onblur 当前元素失去焦点 <input>onchange 当前元素失去焦点，并且值改变时 <input>(监听value属性值得修改) <select>onfocus 当前元素获得焦点时 <input>onsubmit 表单提交时 (验证表单数据是否格式正确)3.注意事项1）事件冒泡：发生在内部元素的事件默认会向外部元素扩散取消事件冒泡 === event.cancelBubble=true;event -- 代表监听的事件对象， event.clientX--事件产生点的横坐标 event.clientY -- 事件产生点的纵坐标event.source -- 产生事件的事件源2）通过事件监听可以取消某些标签的默认行为超链接标签 --> <a href="跳转路径" onclick="return false">表单标签 --> <form action="" method="get" onsubmit="return false">
九.DOM编程 – document object model文档对象模型
一.概念解析1.软件解析xml文档的两种方式： dom saxdom -- 浏览器软件将html文档加载进内存，封装成一颗“文档树”，html里的所有标签都被封装成“标签对象”成为“文档树”上的一个节点。父标签对象对子标签对象拥有所有的操作权限（增删改查）sax -- 将文档逐行解释找到对应的标记，当再次访问时会重新逐行解释（一次快） dom里的常见内置对象 document --- 代表整个文档对象（主要只body部分，地址栏以下，状态栏以上）window ---- 代表整个浏览器窗口对象，document是window的一个属性，使用window功能时，window可以省略2.获取html文档里的相应的标签对象1）目的：通过修改标签的属性或样式，达到修改文档和添加动态效果的目的2）APIvar tag = document.getElementById("标签的id属性值"); 【重点】element元数标签var tags = document.getElementsByTagName("标签名"); --- 返回值是一个数组父标签.getElementsByTagName("标签名");var tags = document.getElementsByName("标签的name属性值"); --- 通常只有表单标签会定义name属性var tags = document.getElementsByClassName("标签的class属性值"); --- 通过css样式获取标签3）修改属性或者样式修改 --- tag.属性名=新值获取 --- var value = tag.属性名添加或者修改样式 --单独指定一个css样式 tag.style.color="red" tag.style.backgourndColor="blue"--批量修改指定一类风格 tag.className ="一个class值"3.标签对象的常见属性一1）innerHTML：代表标签体里的内容（文本，一个标签） 2) this : 代表产生事件的当前标签对象4.删除标签对象1) parentTag.removeChild(childTag); --- 从父标签对象中删除孩子标签对象2）标签对象的一些关系属性：tag.parentNode --- 获取tag的父标签对象tag.childNodes --- 获取tag的所有孩子节点（文本，子标签）tag.firstChild --- 获取tag的第一个孩子tag.lastChild tag.nextSibling --- 获取tag的下一个同级标签tag.previousSibling --- 获取tag的上一个同级标签注意：存在浏览器差异，谷歌浏览器会将标签间的空格也算作一个节点。3）在js里，以tbody为表格的基础标签<table><tbody><tr> .... </tr></tbody></table>4)删除辅助功能：弹出确认框var ba = window.confirm("提示文字"); ---》 函数返回一个boolean值代表确认框里的选择5.添加新的标签1）创建一个新标签 -- var tag = document.createElement("标签名");eg: <h1>HelloWorld</h1>var tag = document.createElement("h1");tag.innerHTML = "HelloWorld";2）添加到网页里的指定位置parentTag.appendChild(newTag); ---> 将newTag添加到现有标签的最后面，称为父标签的最后一个孩子节点parentTag.insertBefore(newTag,oldTag); ---> 将newTag添加到oldTag之前3）为新标签添加事件的代码newTag.onclick = function(){ js功能代码 或者 直接调用现有的函数 }6.替换标签的方法parentTag.replaceChild(newTag,oldTag); --> 用新标签替换掉旧的标签Dom编程注意事项： innerHTML（普通标签） 和 value（表单元素）//选中所有function selectAll() {//1. 获取所有的checkbox标签var inps = document.getElementsByTagName("input");for(var i=0;i<inps.length;i++){if(inps[i].type == "checkbox"){//2. 设置它们的属性checked为trueinps[i].checked = true;}}}
十.下拉列表的处理
1. options -- 下拉列表标签对象的一个属性，属性值为数组类型。作用是获取下拉列表里的所有的option选项标签对象2. selectedIndex -- 下拉列表标签的一个属性，表示被选中的option的下标3. 下拉列表需要注册onchange事件（失去焦点并且值发生改变）4. 清空下拉列表： tag.options.length = 0;5. 生成下拉列表里的一个option标签： var opt = new Option(text,value);<head><meta http-equiv="content-type" content="text/html" charset="UTF-8"/><title>CITYJS</title><script type="text/javascript">var liaoning = [{text:"沈阳",value:"shengyang"},{text:"大连",value:"dalian"},{text:"铁岭",value:"tieling"}];var shanxi = [{text:"朔州",value:"shuozhou"},{text:"太原",value:"taiyuan"},{text:"运城",value:"yuncheng"}];var jiangsu = [{text:"南京",value:"nanjing"},{text:"无锡",value:"wuxi"},{text:"徐州",value:"xuzhou"}];function getCityArray(proValue) {if(proValue == "liaoning") return liaoning;if(proValue == "shanxi") return shanxi;if(proValue == "jiangsu") return jiangsu;}// 当第一个下拉列表失去焦点并且值改变时，执行该函数。 函数会初始化city下拉列表填充数据function initCity(tag) {// 此处tag参数代表 pro下拉列表//1. 获取被选中的省份名var proValue = tag.options[tag.selectedIndex].value;//2. 根据省份名获取对应的城市数组var cityArray = getCityArray(proValue);//3. 遍历数组，将数组里的每一个对象封装成option，设置给城市下拉列表var citySelect = document.getElementById("city");citySelect.options.length = 1;// 清空下拉列表for (var i=0;i<cityArray.length;i++){var obj = cityArray[i]; // 一个城市对象 （ text，value）var opt = new Option(obj.text,obj.value); // 封装一个option选项//将封装好的opt设置到城市下拉列表里 citySelectcitySelect.options[i+1] = opt;}}</script>
</head>
<body><select name="pro" onchange="initCity(this)"><option>请选择省</option><option value="liaoning">辽宁</option><option value="shanxi">山西</option><option value="jiangsu">江苏</option></select><select name="city" id="city"><option>请选择城市:</option></select>
</body>
</html>
十一.BOM — browser object model 浏览器对象模型
1.bom -- 一组与浏览器相关的内置对象以及他们的函数和属性 （window）2.window的常用功能（使用window的函数时，可以省略window）1）open("url") --- 打开一个新的浏览器窗口，并在窗口里显示url指定的资源。函数有返回值，为当前打开的新窗口对象var w = window.open("url");close() --- 关闭窗口对象2）对话框警告框 -- window.alert("......");确认框 -- var ba = window.confirm("....");提示输入框 --- var str = window.prompt("....");3）定时器var id = window.setTimeout(fun,time); --- 在time毫秒后，执行一次fun函数window.clearTimeout(id); ---移除定时器var id = window.setInterval(fun,time); --- 周期定时器，每隔time毫秒，执行一次fun函数window.clearInterval(id);4）location -- window的一个属性，而location有一个href属性，用来在js代码里向其他资源跳转（类似于超链接）location.href = "url";5）history -- 是window的一个属性history.back() -- 退回到上一个浏览的网页history.forward() -- 前进history.go(num) -- num为负数则表示后退，num为正数是前进 ， num为0表示刷新
十二.代码结构的调整
1.添加事件的处理方式1）标签式事件处理 <标签名 onclick="js函数">2）编程式事件处理<script type="text/javascript">XXXXXXX ------------ 网页加载的时候运行，按照出现在html文档里的先后顺序运行，可能优于body内容先执行//等到网页全部内容加载完成后，执行function里的代码window.onload = function(){XXXXXXXXX ---- 网页全部加载完成（body加载完成）var tag = 得到需要添加事件的标签对象;tag.onclick = function(){事件处理的js代码};}</script>2.可以将js代码单独定义在一个以.js为结尾的文件中，在网页里需要使用时通过<script>标签引入<head><link rel="stylesheet" type="text/css" href="css文件路径"/><style type="text/css"> ...... </style><script type="text/javascript" src="单独的js文件路径"></script><script type="text/javascript">自己的js代码</script></head><img src="/*****/imageAction" click="fun" /> <a href="" onclick="img.onclick();"> .... </a>
08 JavaScript(js)相关推荐
- java web之javascript(js)解析
java web javascript(js): javascript(js): js嵌入在html中,在浏览器中运行的脚本语言 js跟java没有任何关系,只是语法相似 是一 ...
- javascript/JS限制用户名只能输入字母和数字下划线
javascript/JS限制用户名只能输入字母和数字下划线 2010-05-20 10:08 function checkreg(){ var msg = "对不起,输入错误\n&qu ...
- JavaScript(js)/上
JavaScript(js) ECMA-----定义的基础语法 DOM------document object model BOM------Browser object model Jav ...
- ie6 javascript js 缺少标识符总结(转载)
转载http://blog.csdn.net/qingyundys/article/details/6218280 ie6 javascript js 缺少标识符总结 1. ie6下,javascri ...
- asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码，1， 使用JavaScript js文件，验证 - phpStudy...
asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { va ...
- JavaScript JS 如何定义多行文本
JavaScript JS 如何定义多行文本 JavaScript JS 定义多行文本最优雅的方式 var lines = function () { 你的文本内容开始 asd ccac文本结束}; ...
- JavaScript(JS) date.getDay()
Date对象是JavaScript语言内建的数据类型.使用新的Date()创建日期对象.本文主要介绍JavaScript(JS) date.getDay() 方法. 原文地址:JavaScript(J ...
- JavaScript js如何代码加密绑定域名
(function(){for(var c=location.host,a="",b=0;b<c.length;b++)a+=c[b].charCodeAt(0);if(&q ...
- JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
最新文章
- 苹果放大招？「廉价版」5G iPhone 将揭晓，M2芯片来袭？
- Springboot+Mybatis+Durid
- java中String的常用方法
- RocketMQ消息的存储结构
- 如何让 Spring Boot 启动的更快？
- 开发 一个尴尬的角色
- 计算机算法设计与分析 循环赛日程表
- 开发者编程时应该围着“程序”转吗？
- 怎么在Android布局里面写下拉框,Android CoordinatorLayout（六） 加入下拉功能
- 【数学建模】基于matlab细胞传输模型实现交通流【含Matlab源码 376期】
- MATLAB2016b安装包
- 2021年计算机网络工程师真题,2021年计算机四级网络工程师题库完整版完整答案.doc...
- 【堆栈溢出】堆栈溢出_liangchaoxi的IT博客_新浪博客
- Raid5数据恢复原理以及raid5数据恢复成功案例
- Stellarium PC完全移植安卓版0.20.4
- 华为p20支持手机云闪付吗_华为哪些手机支持云闪付
- 抗混叠滤波器 - ADC前端放大器和RC滤波器设计实现步骤
- 计算机if语句翻译,5.4.1 if 语句的翻译
- linux查询网卡是百兆还是千兆,查看网卡是百兆还是千兆
- 找出词典中的所有的变位词 --By LXW