javascript

  js
  19 分钟 读完 (大约 2790 个字) 0次访问
  1. ECMAScript：欧洲计算机协会
  2. BOM(broswer object model): 浏览器对象模型， 操作浏览器的方法
  3. DOM(document object model)：文档对象模型， 操作html,css的方法

js和html的两种结合方式

1
2
3
4
5
<!-- 方法1：在html中编写 -->
<script type="text/javascript">  js代码; </script>

<!-- 方法2：在html中引用外部js文件 -->
<script type="text/javascript" src="1.js"></script>

script标签最好放在body标签后。因为html是自上到下解析的，如果将script标签放在head中，而我们js代码需要操作body中html代码的一些数据，就不能操作成功。

变量

  • 定义变量:使用关键字var
  • 查看变量的数据类型：typeof()
  • 五个原始类型：Undefined、Null、Boolean、Number 和 String 
1
2
3
4
5
var str = "abc";        //string
var num = 123;          //number
var flag = true;        //bool
var v;                  //undifined,定义变量时没有赋值
var date = new Date();  //object, 获取对象的引用 ECMA将null设置成了object类型

运算符

  • js里面不区分整数和小数
1
2
3
var a = 123;
var b = a/1000      // b = 0.123
var c = b*1000      // c = 123
  • 字符串的相加和相减的操作
1
2
3
var s1 = '123';
var s2 = s1 + 1;    // 相加做字符串的连接, s2 = '1231'
var s3 = s1 - 1;    // 相减会做类型转换(若不能转为number型，则提示NaN，表示不是数字)，然后做减法， s3 = 122
  • == 和 === 作判断的区别
1
2
3
4
var a = '1';
var b = 1;
var c = (a == b)    // true, '=='只比较值
var d = (a == b)    // false, '==='比较值和类型
  • 直接向页面输出的语句(变量，html代码)
1
2
document.write("hello world");      //打印hello world
document.wirte("<hr/>");            //打印一条直线

函数

js在预处理阶段会将函数、变量的声明提前

  • 函数的定义
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 方法1
    function 方法名(参数列表) {
    }

    // 方法2：匿名函数
    var 方法名 = function(参数列表) {
        方法体、返回值;
    }

    // 方法3：封闭函数, 一个一开始就执行的不用命名的函数
    (function (){})();		// 可以在function前加上“~”和“!”来定义匿名函数

    // 方式4：动态函数,使用内置对象Function 用的少
    var add = new Function("参数列表","方法体和返回值");

全局函数

不属于任何一个对象，可以直接写名称使用

  • alert(str);
  • eval(str)： 执行js代码
  • encodeURI()：对字符进行编码
  • decodeURI()：对字符进行解码
  • encodeURIComponent() 和 decodeURIComponent()
  • isNaN():判断当前字符串是否不是数字
  • parseInt()：转为数字
  • splice(): 删除，并添加元素

函数的重载

  • js里面是否存在重载？(面试题目)
    答：js里面不存在重载, 但是可以通过其他方式模拟重载的效果 （通过aruguments数组来实现）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function add1() {
    // 2个参数
    if(arguments.length == 2) {
        return arguments[0]+arguments[1];
    } 
    // 3个参数
    else if (arguments.length == 3) {
        return arguments[0]+arguments[1]+arguments[2];

    } 
    // 4个参数
    else if (arguments.length == 4) {
        return arguments[0]+arguments[1]+arguments[2]+arguments[3];
    }
    // 其他
    else {
        return 0;
    }
}

常用对象

String对象

1
2
3
4
5
6
// 创建String对象
var str = "abc";
var str = new string("abc");
	
// length属性：获取串的长度
var len = str.length
  • 与字符的显示相关的方法
方法 功能
bold() 加粗
fontcolor() 设置字符串的颜色
fontsize() 设置字体的大小
link() 将字符串显示成超链接
sub()/sup() 下标和上标
  • 处理字符串的方法
方法 功能
concat() 连接字符串
charAt() 返回指定指定位置的字符串
split() 切分字符串，成数组
replace(old,new) 替换字符串
substr(index, num) 从第index位开始，截取numb个字符
substring(start, end) 从start开始，到end结束，不包括end

Array对象

1
2
3
4
5
6
7
8
// 创建数组
var arr = [];                   
var arr1 = [1,2,3];
var arr2 = new Array(3);        
var arr3 = new Array(1,2,3);    

// length属性：记录数组的长度
var len = arr.length;

  • concat())： 数组的连接

    1
    var arr = arr1.concat(arr2)

  • join()：根据指定的字符分割数组

    1
    2
    var arr = "abc";
    document.write(arr13.join("-"));        // a-b-c

  • push():向数组末尾添加元素，返回数组的新的长度

如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去

1
2
3
4
5
6
7
var arr = new Array(3);
arr[0] = "aa";
arr[1] = "bb";
arr[2] = "cc";

document.write(arr.push("dd"));     // 4
document.write(arr);                // aabbccdd

  • pop()：删除最后一个元素，返回删除的那个元素

    1
    2
    3
    4
    5
    6
    7
    var arr = new Array(3);
    arr[0] = "aa";
    arr[1] = "bb";
    arr[2] = "cc";

    document.write(arr.pop());     // cc
    document.write(arr.length);    // 2

  • reverse():颠倒数组中的元素的顺序,返回颠倒后的数组

1
2
3
4
5
6
var arr = new Array(3);
arr[0] = "aa";
arr[1] = "bb";
arr[2] = "cc";

document.write(arr.reverse());    // ccbbaa

Date对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 获取当前时间
var date = new Date();
document.write(date.toLocaleString());

// getFullYear(): 获取当前的年方法
getFullYear()
document.write(date.toLocaleString());

// getMonth()：获取当前的月,返回的是 0-11月，如果想要得到准确的值，加1
document.write("month: "+(date.getMonth()+1)));

// getDay()：星期,返回的是 (0 ~ 6)
document.write("week: "+date.getDay());

// getDate()：得到当前的天 1-31
document.write("day: "+date.getDate());

// getHours()：获取小时
document.write("hour: "+date.getHours());

// getMinutes()：分钟
document.write("minute: "+date.getMinutes());

// getSeconds(): 秒
document.write("second: "+date.getSeconds());

// getTime(): 返回的是1970 1 1 至今的毫秒数

Math对象

Math对象里面的都是静态方法，使用可以直接使用 Math.方法()

1
2
3
4
5
6
7
8
ceil(x): 向上舍人
floor(x)：向下舍人
round(x)：四舍五入
random()：得到随机数（伪随机数）

// 得到0-9的随机数
Math.random()*10
Math.floor(Math.random()*10));

Reg正则对象

  • 创建
1
2
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
  • test(参数)方法:
    • 验证指定的字符串是否符合正则定义的规范

JSON

  • 对象转Json：JSON.stringify()
  • Json转对象：JSON.parse()

BOM

Browser Object Model 浏览器对象模型, 将浏览器的各个组成部分封装成对象。

  • navigator： 获取客户机的信息（浏览器的信息）

    • navigator.appName
    • document.write(navigator.appName);
    • screen: 获取屏幕的信息， screen.width, screen.height

  • location: 请求url地址

    • href属性: 获取/设置url地址
    • search属性：获取地址的参数部分（url中?及其以后的部分）
    • hash属性：获取页面描点/哈希值（url中#及其以后的部分）

  • history：请求的url的历史记录

    • 到访问的上一个页面
      history.back();
      history.go(-1);

    • 到访问的下一个页面
      history.forward();
      history.go(1);

  • window: 窗口对象

    • 顶层对象（所用的bom对象都是在window里面操作的）

    • window对象的方法

      • window.alert() : 页面弹出一个框，显示内容

      • confirm()： 确认框

        • var flag = window.confirm(“显示的内容”);

      • prompt()： 输入的对话框

        • window.prompt(“please input : “,”0”);
        • window.prompt(“在显示的内容”,”输入框里面的默认值”);

      • open() :　打开一个新的窗口

        • open(“打开的新窗口的地址url”,””,”窗口特征，比如窗口宽度和高度”)

        • window.open(“hello.html”,””,”width=200,height=100”);

      • close(): 关闭窗口(浏览器兼容性比较差)

        • window.close();

  • 做定时器

    • setInterval(“js代码”,毫秒数) 1秒=1000毫秒

      • 每隔指定的时间执行一次js代码
      • window.setInterval(“alert(‘123’);”,3000);

    • setTimeout(“js代码”,毫秒数)

      • 运行指定时间后，执行且仅执行一次js代码

    • clearInterval(): 清除setInterval设置的定时器

      • clearInterval(传入setInterval方法的返回值);

    • clearTimeout() : 清除setTimeout设置的定时器

      • clearTimeout(传入setTimeout方法的返回值);

DOM

  • 概念： Document Object Model 文档对象模型

    • 将标记语言文档的各个组成部分，封装为对象。

  • 可以使用这些对象，对标记语言文档进行CRUD的动态操作

  • W3C DOM 标准被分为 3 个不同的部分：

    • 核心 DOM - 针对任何结构化文档的标准模型

      • Document：文档对象

      • Element：元素对象

      • Attribute：属性对象

      • Text：文本对象

      • Comment:注释对象

      • Node：节点对象，其他5个的父对象

    • XML DOM - 针对 XML 文档的标准模型

    • HTML DOM - 针对 HTML 文档的标准模型

  • 核心DOM模型：

    • Document：文档对象
      1. 创建(获取)：在html dom模型中可以使用window对象来获取
        1. window.document
        2. document
      2. 方法：
        1. 获取Element对象：
          1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
          2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
          3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
          4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
        2. 创建其他DOM对象：
          • createAttribute(name)
          • createComment()
          • createElement()
          • createTextNode()
      3. 属性
        • referrer属性：记录上一个跳转页面的地址（需要服务器环境）
    • Element：元素对象
      1. 获取/创建：通过document来获取和创建
      2. 方法：
        1. removeAttribute()：删除属性
        2. setAttribute()：设置属性
    • Node：节点对象，其他5个的父对象
      • 特点：所有dom对象都可以被认为是一个节点
      • 方法：
        • CRUD dom树：
          • appendChild()：向节点的子节点列表的结尾添加新的子节点。
          • removeChild() ：删除（并返回）当前节点的指定子节点。
          • replaceChild()：用新节点替换一个子节点。
      • 属性：
        • parentNode 返回节点的父节点。

  • HTML DOM

    1. 标签体的设置和获取：innerHTML
    2. 使用html元素对象的属性
    3. 控制元素样式
      1. 使用元素的style属性来设置
        • 如：div1.style.fontSize = "20px";
      2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

事件监听机制

  • 概念：某些组件被执行了某些操作后，触发某些代码的执行。

    • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
    • 事件源：组件。如： 按钮 文本输入框…
    • 监听器：代码。
    • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

  • 常见的事件：

    1. 点击事件：

      1. onclick：单击事件
      2. ondblclick：双击事件

    2. 焦点事件

      1. onblur：失去焦点
      2. onfocus:元素获得焦点。

    3. 加载事件：

      1. onload：一张页面或一幅图像完成加载。

    4. 鼠标事件：

      1. onmousedown 鼠标按钮被按下。
      2. onmouseup 鼠标按键被松开。
      3. onmousemove 鼠标被移动。
      4. onmouseover 鼠标移到某元素之上。
      5. onmouseout 鼠标从某元素移开。

    5. 键盘事件：

      1. onkeydown 某个键盘按键被按下。
      2. onkeyup 某个键盘按键被松开。
      3. onkeypress 某个键盘按键被按下并松开。

    6. 选择和改变

      1. onchange 域的内容被改变。
      2. onselect 文本被选中。

    7. 表单事件：

      1. onsubmit 确认按钮被点击。
      2. onreset 重置按钮被点击。

web本地存储

html5提供了两种在客户端存储数据的新方法，以前都是用cookie。

对于不同的网站数据存储于不同的区域，并且一个网站只能访问其自身的数据

  • localStorage: 没有时间限制
  • sessionStorage: 针对一个session的数据存储

使用

js提供了localStorage、sessionStorage两个类对象，可以直接调用相关方法即可

localStorage、sessionStorage存储的数据都是key-value结构，而且value只能是字符串。

相关方法：

  • setItem
  • getItem
  • removeItem
 

喜欢这篇文章？打赏一下作者吧

使用hexo和github搭建个人博客
JQuery

评论

  关注我
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×