文档章节

JavaWeb前端开发知识总结(javaScript)

S
 Sunmos
发布于 2017/05/13 00:19
字数 1379
阅读 16
收藏 0

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,会提交表单;

本文转载自:http://blog.csdn.net/l631106040120/article/details/71107713

共有 人打赏支持
S
粉丝 0
博文 34
码字总数 0
作品 0
成都
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
学java还是javascript好?哪个更有前途?

  对于哪种语言好这种问题,其实并没有固定的答案,最重要的还是 兴趣!兴趣!兴趣!重要的事情说三遍。无论做什么开发,永远要以兴趣来驱动自己学习。 先大致的说一下,Java学习是一个需要...

W3Cschool小编
04/23
0
0
结合个人经历总结的前端入门方法

作者:qiu deqing 链接:https://github.com/qiu-deqing/FE-learning 结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面...

SomaLihq
06/27
0
0
JavaScript 学习资源推荐

最近 reddit 有讨论:References for JavaScript Mastery. 去年 Rey Bango 博客上也有一篇文章:What to Read to Get Up to Speed in JavaScript. 下面是我的整理,希望能对你有所帮助。 登堂...

deeper099
2011/09/29
0
1
学习前端开发,一段心路历程,这个世界根本没有速成的方法

在已经成功的为大家讲解了很多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们...

大数据大佬
06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
199
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部