java web前端开发技术_JavaWeb前端开发知识总结(javaScript)

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事件能加在

,,,