[关闭]
@EncyKe 2016-05-07T05:54:57.000000Z 字数 5660 阅读 3459

JavaScript【基础篇】

前端 JavaScript


1. 简介

JS在HTML的位置:



2. 基础语法

2.1. 运算符

优先级:算术>比较>逻辑>赋值

2.1.1. 算术运算符

2.1.2. 赋值运算符

2.1.3. 比较运算符

2.1.4. 逻辑运算符

2.1.5. 特殊字符

2.2. 变量

变量命名规则:

a. 变量必须使用字母、下划线(_)或者美元符($)开始;
b. 然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成;
c. 不能使用JavaScript关键词与JavaScript保留字;
此处输入图片的描述
d. 区分大小写;
f. 可以一次声明多个变量,变量之间用","逗号隔开;
g. 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用

2.3. 语句

2.3.1. 判断

单重判断:

  1. if(条件)
  2. {
  3. 条件成立时执行的代码;
  4. }

双重判断:

  1. if(条件)
  2. {
  3. 条件成立时执行的代码;
  4. }
  5. else
  6. {
  7. 条件不成立时执行的代码;
  8. }

多重判断:

  1. if(条件1)
  2. {
  3. 条件1成立时执行的代码
  4. }
  5. else if(条件2)
  6. {
  7. 条件2成立时执行的代码
  8. }
  9. ...
  10. else
  11. {
  12. 条件12n不成立时执行的代码
  13. }

2.3.2. 多重选择

当有很多种选项的时候,switch比if else使用更方便。

  1. switch(表达式/变量名)
  2. {
  3. case 0:
  4. 执行代码块 1;
  5. break;
  6. case 1:
  7. 执行代码块 2;
  8. break;
  9. ...
  10. case n:
  11. 执行代码块 n;
  12. break;
  13. default:
  14. case 0 case 1...case n不同时执行的代码
  15. }

2.3.3. 循环

for型:

  1. for(初始化变量;循环条件;循环迭代)
  2. {
  3. 循环语句;
  4. }

while型:

  1. while(判断条件)
  2. {
  3. 循环语句;
  4. 迭代语句;
  5. }

do...while型:

  1. do
  2. {
  3. 循环语句;
  4. 迭代语句;
  5. }
  6. while(判断条件)

区别:do...while型的基本原理和while型是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件,如果条件为真,继续循环。

break语句:

  1. if(特殊情况)
  2. {
  3. break;//终止循环
  4. }

continue语句:

  1. if(特殊情况)
  2. {
  3. continue;//仅仅跳过这一情况,继续循环
  4. }

2.4. 函数

创建:

  1. function 函数名()
  2. {
  3. 函数代码;
  4. }

函数定义好后,是不能自动执行的,需要调用它。

调用: JS中函数名();HTML中onclick="函数名()"

传入参数:可多个:

  1. function 函数名(x,y)
  2. {
  3. 函数代码;
  4. }

返回:return 返回值; 可将变量返回为数字或字符串等其它类型。



3. 对象

3.0. 简介

JS中的所有事物都是对象,每个对象带有属性方法
属性:
反映该对象某些特定的性质的;
语法:对象.属性
方法:
能够在对象上执行的动作;
语法:对象.方法()


3.1.1. String

3.1.2. Number

3.1.3. Boolean

3.1.4. Array

创建:

  1. var 数组名 = new Array(); //创建数组
  2. 数组名[0]=值1;
  3. 数组名[1]=值2;
  4. ...
  1. var 数组名 = new Array(值1,值2,...);
  1. var 数组名 = [值1,值2,...];

新增:数组名[新增位置]=值;
引用:数组名[引用位置];
获取长度:数组名.length;
注意:
a. 创建的新数组是空数组,没有值,如输出,则显示undefined
b. 括号中可存放数组长度,但指定的数组可以变长,即仍可以将元素存储在规定长度以外;
c. 数组存储的数据可以是任何类型(数字、字符、布尔值等);

* 二维数组:

创建:var 数组名=[[],[],[]...];
引用:数组名[位置][位置];

  1. var myarr=new Array(); //先声明一维
  2. for(var i=0;i<a;i++){ //一维长度为a
  3. myarr[i]=new Array(); //再声明二维
  4. for(var j=0;j<b;j++){ //二维长度为b
  5. myarr[i][j]=i+j; //赋i与j的运算关系
  6. }
  7. }

3.1.5. Date

3.1.6. Math

3.1.7. RegExp

3.1.8. Global


3.2.1. Window

3.2.1.1. 对话框

A 警告

语法:alert(字符串或变量);
注意:警告弹出消息对话框默认包含确定按钮。

B 确认

语法:confirm(在消息对话框中要显示的文本);
注意:返回值是Boolean值。当用户点击"确定"按钮时,返回true;当用户点击"取消"按钮时,返回false

C 提问

语法:prompt(不可修改的对话框文本, 可修改的文本框占位符);
注意:点击确定按钮,文本框中的内容将作为函数返回值;点击取消按钮,将返回null

3.2.1.2. 窗口

A 打开新窗口

语法:window.open('url','name', '参数字符串');

  • url:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
  • name:可选参数,被打开窗口的名称。
    a. 该名称由字母、数字和下划线字符组成。
    b. _top_blank_self具有特殊意义的名称:_blank(新窗口)、_self(当前窗口)、_top(上部窗口)。
    c. 相同name的窗口只能创建一个,要想创建多个窗口则name不能相同。
    d. name不能包含有空格。
  • 参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
    此处输入图片的描述

注意:
a. 参数之间逗号及等号前后有空格,该字符串无效,只有删除空格才能正常运行;
b. 运行结果考虑浏览器兼容问题;

示例:

  1. function Wopen(){
  2. window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0,menubar=no,toolbar=no,status=no,scrollbars=yes')
  3. }
B 关闭窗口

语法:window.close(); //关闭本窗口
窗口对象.close(); //关闭指定的窗口

3.2.2. Navigator

3.2.3. Screen

3.2.4. History

3.2.5. Location


3.3.0. DOM

文档对象模型(Document Object Model, DOM):定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构,即节点树 。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:

a. 元素节点:即标签;
b. 文本节点:向用户展示的内容,可以是JavaScript、DOM、CSS等文本;
c. 属性节点:即元素属性;

3.3.1. Document

3.3.1.1. 输出内容

语法:document.write();

注意:如需多个空格,需借助&nbsp;实现,或者添加"<span style='white-space:pre;'>"+文本+"</span>"实现。

3.3.1.2. 创建元素

语法:document.createElement("标签名");
注意:要与appendChild()insertBefore()方法联合使用,将元素显示在页面中。

3.3.1.3. 创建文本节点

语法:document.createTextNode("文本");

3.3.1.4. 窗口大小

获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法

兼容性处理:

  1. var w= document.documentElement.clientWidth
  2. || document.body.clientWidth;
  3. var h= document.documentElement.clientHeight
  4. || document.body.clientHeight;

3.3.1.5. 元素大小

scrollHeight和scrollWidth可获取网页内容高度和宽度。

兼容性处理:

  1. var w=document.documentElement.scrollWidth
  2. || document.body.scrollWidth;
  3. var h=document.documentElement.scrollHeight
  4. || document.body.scrollHeight;

注意:区分大小写;scrollHeightscrollWidth还可获取DOM元素中内容实际占用的高度和宽度。

3.3.1.6. 页面大小

offsetHeightoffsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

offsetHeight = clientHeight + 滚动条 + 边框。

兼容性处理:

  1. var w= document.documentElement.offsetWidth
  2. || document.body.offsetWidth;
  3. var h= document.documentElement.offsetHeight
  4. || document.body.offsetHeight;

此处输入图片的描述
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离,即左边灰色的内容;
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容;
offsetLeft:获取指定对象相对于版面或由offsetParent:属性指定的父坐标的计算左侧位置;
offsetTop:获取指定对象相对于版面或由offsetParent:属性指定的父坐标的计算顶端位置;
注意:区分大小写;offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。
区别

3.3.2. Element

3.3.2.1. 获取/修改内容

语法:对象.innerHTML="文本";

3.3.2.2. 节点属性

A nodeName: 节点名称,只读。
B nodeValue:节点值
  1. 元素节点是undefined/null
  2. 文本节点是文本自身;
  3. 属性节点是属性的值;
C nodeType:节点类型,只读。

元素:1;
属性:2;
文本:3;
注释:8;
文档:9。

3.3.3. Attribute

3.3.4. Event

鼠标单击事件onclick
鼠标经过事件onmouseover
鼠标移开事件onmouseout
光标聚焦事件onfocus
失焦事件onblur
内容选中事件onselect
文本框内容改变事件onchange
加载事件onload(可写在<body>中)
卸载事件onunload

3.3.5. Style

3.3.5.1. 修改样式

语法:对象.style.属性值="新样式";

此处输入图片的描述
注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

3.3.5.2. 显示/隐藏元素

语法:对象.style.display = "none/block";

3.3.5.3. 修改类名

语法:对象.className = "类名";

3.3.6. HTML



添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注