JavaWeb前端开发知识总结(javaScript)
2017-05-03 10:35
891 查看
JavaWeb前端开发知识总结(JavaScript)
1. JavaScript技术
1.1 JavaScript概述
1.一个轻量级的脚本语言; 2.嵌入到HTML去执行; 3.执行顺序由上往下; 一定注意:在使用DOM操作HTML标签,要保证HTML标签已经加载到内存中. window.onload = function(){ } // 入口函数,当页面加载完成后会调用该函数
JavaScript组成:
JavaScript有三部分组成: ECMAScript:是javascript的基础,定义了基本的语法; BOM(浏览器对象模型):browser object model,BOM主要处理浏览器窗口和框架; DOM(文档对象模型):document Object model,DOM将把整个页面规划成由节点层级构成的文档.
1.2 ECMAScript基本语法
变量:声明变量使用var关键字: 如:var a; 如:var b=字符串/数字/boolean/undefined/null; 注意:变量声明可以不使用var关键字如a = ""; 但是直接使用就会报错(is not defined); 使用函数:alert(变量),可以输出变量的值(以弹窗的形式).
数据类型:
原始类型: 字符串:var str = "字符串"; var str1='字符串';typeof(str)---返回string; number:var num = 99;var num=99.999;typeof(num)---返回number; boolean类型:true/false undefined:未定义,var a; alert(a)---返回undefined; null:占位,typeof(null) --- 返回object; 引用类型(object): 数组:new Array(); 字符串对象:new String();
运算符:
基本运算符:+,-,*,/,%,可以进行扩展 逻辑运算符:>,<,>=,<=,!=,==,=== 与java区别:===判断值和数据类型都是一致的才返回true; javaScript没有&和|;
自定义函数:
格式:function 函数名(参数列表){js代码} 注意事项: 1.参数列表没有var关键字; 2.函数调用根据方法名进行调用,不存在重载方法,所以后面的方法会覆盖前面定义方法; 3.一定有return返回值,如果函数不写return那么返回undefined,如果写了就直接返回指定的数据.
1.3 BOM浏览器对象模型
window对象:消息弹出框: alert():弹出框,可以有参数,显示参数的值; confirm():确认框,返回true/false; prompt输入框:返回输入的内容; 定时器: 循环定时器: 1.setInterval("执行函数",毫秒值)--每隔多少毫米执行一次指定函数; 2.格式: setInterval("fun()",5000); setInterval(function(){},5000); 3.循环定时器返回值 var id = setInterval("fun()",5000); 4.清除定时就要使用定时器返回的id—— clearInterval(id); 一次性定时器:用法和循环定时器相同 setTimeout(),设置定时; clearTimeout(),取消定时.
location对象:
href属性:表示当前地址栏的网址 获取当前地址栏网址:location.href; 设置当前地址栏的网址:location.href="网址"; 刷新页面: 1.location.reload(); 2.location.href=location.href;
1.4 DOM文档对象模型
概述:DOM对象时根据HTML网页生成一个DOM树形结构,它由浏览器自动生成.
获取DOM元素:
1.通过id——document.getElementById("对应HTML标签的id属性值"); 2.通过name——document.getElementsByName("对应表单元素的name属性值"); 3.通过标签名称——document.getElementsByTagName("标签名称"); 注意事项: 1.当form表单中存在相同的id时,通过documen.getElementById()获取的是第一个id的对象,后面相同id的对象获取不到.
操作DOM元素属性:
表单value属性: 获得value属性:document.getElementBy(id).value; 设置value属性:document.getElementBy(id).value="值"; 选中radio/checkbox: 操作checked属性,checked="checked"; 选中下拉框: 操作selected属性,selected="selected"; 操作HTML标签的内容: 操作innerHTML,innerHTML="javascript". 注意事项: 1.使用DOM对象设置标签的style属性时,需先获取标签的style属性,然后再进行style属性值的设置; 2.获取表单中radio单选框的值,需要将同一组中的所有的radio遍历,获取checked属性为true的value值; 3.获取表单中checkbox复选框的值,需将同组的所有checkbox遍历,获取checked属性值为true的value值; 4.获取表单中下拉框(select)的值,直接获取select的id,然后获取其属性值value; 5.隐藏表格中某一行:tab.rows[x].hidden = "hidden"; 6.使用数组的length属性,将其长度设为0,可以将数组清空; 7.使用Ajax传递参数含有中文时,使用编码(encodeURI),后台使用解码(decodeURI);
添加DOM元素:
添加DOM元素的步骤: 1.首先获取父节点:parentObj; 2.创建一个节点对象:var childObj=document.createElement(); 3.创建一个文本对象:var textNode= document.createTextNode(); 4.讲文本对象添加到节点对象中:childObj.appendChild(textNode); 5.讲节点对象添加到父节点对象中:parentObj.appendChild(childObj).
删除DOM元素:
方式一:父元素对象.removeChild(子元素对象); 方式二:对象.remove().
1.5 JavaScript事件绑定
1.加载完毕事件绑定:window.onload = function(){js代码}; 2.DOM对象绑定事件: 绑定事件步骤: 1.获得绑定对象:obj 2.确定绑定什么事件--onclick/onfocus/onblur/ onsubmit/onchange.... 3.绑定事件:obj.onclick = function(){js功能代码}; 注意事项: 1.onload事件能加在<body>,<img>,<link>,<script>标签上; 2.onsubmit事件使用在form表单中,需要有返回值,当返回true时,表单提交,返回false时表单不提交,默认是true; 3.标签进行DOM方式绑定事件时,需要保证要绑定的标签已经加载进内存中,一般绑定写在window.onload=function() {}内,再绑定时调用具体的时间函数; 4.form表单中的<input type="button">默认是submit,会提交表单;
相关文章推荐
- JavaWeb前端开发知识总结(jQuery)
- JavaWeb前端开发知识总结(jQuery)
- JavaWeb前端开发知识总结(CSS)
- JavaWeb前端开发知识总结(mysql)
- JavaWeb开发知识总结(一)-(oracle_基础)
- JavaWeb开发中3大必会知识总结(程序员必读)
- JavaWeb开发知识总结(filter)
- Java web 开发中的servlet知识总结
- JavaWeb开发知识总结(二)-(oracle_查询)
- JavaWeb开发知识总结(六)-(struts2_ognl_valuestack_interceptor)
- JavaWeb开发知识总结(七)-(struts2_文件上传_Ajax)
- JavaWeb开发知识总结(Ajax,JSON)
- Java笔记--Web前端知识汇总之三 JavaScript
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- JavaWeb开发知识总结(Cookie,Session)
- JavaWeb开发知识总结(内省,MVC,事务)
- JavaWeb开发知识总结(HTTP,servlet)
- VisualStudio环境下的Web前端开发经验总结(css,javascript)
- JavaWeb开发知识总结(tomcat)
- 黑马程序员--Java学习笔记之Web开发—JavaScript常用触发事件总结