JavaScript总结摘要

一 概述

1.什么是JavaScript?

基于对象、由事件驱动的解释性脚本语言。

2.JavaScript语法特点

  • 区分大写小，这一点不同于HTML。
  • 结尾的分号可有可无。
  • 变量是弱类型的：变量在定义时统一采用var，类型在赋值时决定。

3.UI线程

浏览器中都有一个用于页面展示的线程，叫做UI线程，向服务器提交以后，UI线程清空页面，等待加载服务器的反馈，如果等待时间过长，页面将出现空白。

4.this

主要用在方法中，代表当前对象，即方法的直接调用者。

二 数据类型

1.JavaScript的数据类型

String、Number、Math、Array、boolean、Date、Object、RegExp、null。

2.变量定义

  • 全局变量：在函数外声明的变量为全局变量，在整个页面范围有效。为一个未声明的变量赋值，该变量转化为全局变量。
  • 局部变量：在函数内部声明的变量为局部变量，只在函数内部有效。
  • this：如果在函数内部声明变量时采用this引用，该变量在函数外部可以通过对象引用。

3.String

常用方法：

  • length：获取字符串的长度。
  • ==：在JS中通过“==”对比两个字符串是否相等。
  • indexOf(subStr)：指定字符第一次出现的索引值。
  • lastIndexOf(subStr)：指定字符最后一次出现的索引值。
  • substr(begin[len])：从指定位置开始获取指定长度的字符。
  • substring(begin[end])：获取指定索引区间的字符。
  • replace(regExp,substr)：用指定字符替换满足格式的字符。
  • concat(str01...)：连接多个字符串，返回一个新的字符串。
  • split(delim[limit])：使用指定分隔符分割字符，将分割结果以数组形式返回，limit是分割次数，可选项。

4.Number

  • toFixed(n)：保留n个小数。

5.Math

  • random()：随机返回一个0-1的数字。
  • round(x)：四舍五入。
  • max(x...)：获取最大值。
  • min(x...)：获取最小值。

6.Date

  • getTime()：获取从1970-01-01至今的毫秒数。
  • getFullYear()：获取此时的四位年份。
  • getMonth()：获取此时的月份。
  • getDate()：获取此时所属月份第几天。
  • getDay()：获取此时所属星期的第几天，范围0-6。
  • getHours()：获取此时的小时数。
  • getMinutes()：获取此时的分钟数。
  • getSeconds()：获取此时的秒数。

7.RegExp

创建：

var reg=/xxxx/;
var ret=new RegExp("");

常用方法：
test(str)：判断字符串是否满足指定的格式。

8.Array

⑴数据类型

不同与java语言，JS中的数组在创建时不需要指定长度与数据类型，可以存储多种类型数据。

⑵创建（3种方式）

var arr01=[数组中的值];//创建时赋值
var arr01=new Array(数组中的值);//创建时赋值
//先声明，后赋值
var arr01=new Array();
arr01[0]=1;
arr01[1]=2;
var arr01=new Array(6);//创建时指定数组长度

⑶常用操作

  • arr[0]：获取指定索引位置的元素，也可以为指定索引位置赋值。
  • arr.length：获取数组长度。
  • push(data)：向数组尾部添加元素并返回操作完成后的数组长度。
  • unshift(data)：向数组头部添加一个元素并返回数组长度。
  • pop()：删除数组的最后一个元素并返回删除的元素。
  • shift()：删除并返回数组的第一个元素。
  • for(index in arr)：遍历数组，arr[index]获取数组中的元素。
  • sort(function(a,b){return a-b;})：如果数组中存储的是字符，不需要指定函数，按照字母升序排序；如果数组中存储的是数字，需要设定排序函数，a-b升序排列，b-a降序排列。
  • reverse()：反转排序。
  • join(connector)：使用指定的连接符将数组连接成字符串，未指定连接符时默认采用","作为连接符。
  • toString()：等效于join()，将数组转化为一个由","连接的字符串。
  • slice(begin,end)：获取指定索引范围的元素，包含begin,不包含end。
  • splice(begin,howmany,newValue...)：从指定索引位置（包含该位置）开始删除howwmany个元素，插入新的元素。
  • concat(anotherArr...)：将参数数组的元素依次追加到该数组中并返回一个新的数组，原数组不变。

9.Object

⑴用于自定义对象，对象的创建方式：

//第一种方式,对象的声明与实例化一体
var obj={name:"张三",age:20,myFunction:function(){}};
//第二种方式,将函数当做构造方法
function person(name,age){
this.name=name;
this.age=age;
this.myfunction=function(){
alert(this.name);
     }
}
var tom=new function("tom",20);
//第三种方式
person=function(){
this.name=name;
this.age=age;
this.myfunction:function(){
      }
}
var tom=new function("tom",20);

⑵fn01:fn02的含义

将fn02赋值给fn01，fn01拥有与fn02完全相同的内容。

三 属性

用户描述对象的特征，实例化对象。
常用属性：

  • href="#"：跳到页面开头。
  • title作为元素的文本直接显示，元素无法直接显示文本时，当鼠标停留在上方时作为提示信息显示。

四 window

浏览器窗口对象，是一个全局对象，是所有对象的顶级对象，引用属性或者函数时可以省略。

1.常用属性

  • document：一个代表窗口中全部HTML元素的对象。
  • closed：boolean类型，用于判断当前窗口是否已关闭。
  • location：获取当前页面的URL；访问指定的资源，该资源可以是HTML，也可以是Servlet或者其他服务器资源，在当前页面中打开。location=url与location.href=url功能相同。
  • history：表示当前窗口浏览记录的对象。在形成了浏览记录的前提下，可以跳转到前后页面，history.go(-1)跳转到上一个页面，history.go(1)跳转到下一个页面。
  • parent：表示包含当前窗口的父窗口。
  • opener：表示打开当前窗口的父窗口，常用语父子窗口通信。

2.常用方法：

  • alert(content):弹出一个警告对话框。
  • confirm(content)：弹出一个确认对话框，返回确认结果，true或者false。
  • prompt：提示对话框，用于用户输入，返回输入结果。
  • setTimeout()：定时执行。
  • setInterval()：周期性执行。
  • open():在新窗口中加载指定的URL。
  • close():关闭当前窗口。
  • parseInt()：将字符创转化为int数字。
  • eval：将普通字符串解析成JS代码。
  • typeof:返回数据的类型。
  • isNaN：判断数据是否是数字。

五 DOM

Document Object Model是一种操作文档的技术，将文档视作按树形分层结果排列的对象，document是一个代表该文档的对象。

1.元素

文档中的标签节点。
子节点：元素节点、文本节点、注释节点，不包括属性节点。

2.创建对象

document.createElement(tagName)：根据标记名创建元素，作为参数的标记不带<>。

3.获取对象

  • document.all.id：根据id获取对象。
  • formId.tagId:通过id获取表单下的元素，也可以通过"formName.tagName"的方式获取表单下的元素。
  • document.getElementById(id):根据id获取对象。
  • document.getElementsByName(name):根据name获取对象，因为可能存在多个对象name相同，所以获取的对象是复数。
  • document.getElementsByTagName(tagName)：通过标签名称获取对象。

4.属性

  • document.location：同document.location.href作用相同，用于访问指定资源，该资源可以是HTML，也可以是Servlet以及其他服务器资源，不能获取当前页面的URL。

5.常用方法

  • document.write(content)：向页面输出。

六 函数

在JS中调用函数不必像在java中那样必须为每一个形参赋值，只需为需要的形参赋值即可，其他形参位可以空着。每一个函数都有其对应的作用范围，不同作用范围的函数定义在不同的节点上。

1.常用函数

javascript:void(0)：保留超链接样式，只执行js代码，不进行页面跳转。

2.动态添加函数

动态地向元素添加函数有两种方式：

⑴使用JS：

使用JS获取对象以后，通过对象调用函数不包含括号），将自定义的函数function赋给该函数

obj.action=function(){};

⑵使用JQuery：

$(selector).action(function(){});

两种方式不能混用，即不能这样使用：$(selector).action=function(){}。

3.插入

java输出代码块与EL表达式都可以插入JavaScript代码中，插入时将其视作字符串处理，包裹在单引号或者双引号中，如:

alert("<%=name%>");
alert("${name}");

七 事件

动作引发的行为称作事件，可以为一个事件添加多个函数，多个函数按照添加顺序依次执行。不同的元素对应的事件不同。

1.常用事件：

  • onclick：鼠标单击时触发。
  • onchange：下拉列表框的选项发生改变时触发。
  • onblur：失去焦点时触发。
  • onfocus：获得焦点时触发。
  • onmouseover：鼠标移动到元素上时触发。
  • onmousemove：鼠标在元素上移动时触发。
  • onmouseout：鼠标离开元素时触发。
  • onselect：选中文本域时触发。

八 表单提交

1.按钮提交

单击submit按钮，提交表单。

2.代码提交

执行document.forms["formName"].submit()代码，通过代码提交表单。

九 父子窗口通信

父子窗口通信指的是一个窗口向打开该窗口的窗口传递信息，即由子窗口向父窗口传递信息，而由父窗口向子窗口传递信息可以通过QueryString完成。

子窗口向父窗口传递信息的关键是在子窗口中获取父窗口对象，通过window.opener获得父窗口对象，然后可以像在父窗口中一样操作了。

十 table

1.table对象常用操作

  • table.rows：包含表格中所有行的数组对象，table.rows.length获取长度，即行数。
  • insertRow(index)：在指定位置插入行，不指定位置，在末尾插入。
  • deleteRow(index)：删除指定位置的行，不指定位置，删除最后一行。

2.tr对象常用操作

  • rowIndex:获取索引位置，即行号。
  • insertCell(index)：在指定位置插入列，不指定在，在末尾插入。
  • deleteCell(index)：删除指定位置的列，不指定位置，删除最后一列。
时间： 2024-10-26 17:45:58

JavaScript总结摘要的相关文章

JavaScript学习摘要

JavaScript的历史 1. css3在css2的基础上添加样式 可以做动画 也可以配合js操作2. h5在html4.01的基础上添加高级标签3. jQuery是JavaScript的封装4. zepto是jQuery的轻量级代码库5. node.js是用Chrome浏览器的v8引擎6. 政治是目的 经济是手段7. mosaic(马赛克)浏览器是历史上第一个获得普遍使用和能够显示图片的浏览器 93年8. 马克安德森和伊利诺伊大学合作研发出mosaic后,由于伊利诺伊大学拥有商标权,并将其技

从零开始学习jQuery(剧场版) 你必须知道的javascript

原文:从零开始学习jQuery(剧场版) 你必须知道的javascript 一.摘要 本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节.  适合希望巩固javascript理论知识和基础知识的开发人员阅读.   二.前言 最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟.  其实我们容易忽视的javascrip

JavaScript技巧手册

js小技巧 每一项都是js中的小技巧,但十分的实用! 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号&q

javascript面向对象系列第三篇——实现继承的3种形式

前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种继承方式.本文是javascript面向对象系列第三篇——实现继承的3种形式 类式继承 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,如new和instanceof.不过在后来的ES6中新增了一些元素,比如class关键字,但这并不

《JavaScript+DOM变成艺术》的摘要（二）

//DOM: //对象是一种独立的数据集合,与某个特定对象相关联的变量被称为这个对象的属性,通过某个特定对象可以为之调用的函数被称为这个对象的方法 // //4个非常实用的DOM方法: //检索特定元素节点的方法: //document.getElementById:与document相关联的函数,在脚本代码里,函数后面必须跟有一组圆括号 //document.getElementsByTagName:返回的是一个数组 //,setAttribute,getAttribute alert(doc

《JavaScript+DOM变成艺术》的摘要（一）

//保持良好的编程习惯:在同一脚本中,保持引号的一致性,都用单引 var mood = "don\"t worry"; //alert(mood); //数组:var arr=Array(), //以下这种形式为关联数组:为数组明确的给出下标方式,而不是直接为整数数字 var arr = Array(); arr['name'] = 'zouting'; arr['age'] = '24'; arr['address'] = 'hunan'; //alert(arr['age

《JavaScript+DOM编程艺术》的摘要（五）-----添加insertAfter

在JS原生里面,没有提供insertAfter这个方法,不过我们可以利用appendChild.insertBefore.parentNode这些方法创建一个insertAfter方法,代码如下: function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newEle

《JavaScript+DOM变成艺术》的摘要（三）---图片库实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片库</title> <meta name="description" content=&q

《JavaScript+DOM编程艺术》的摘要（四）

基本知识点: // 1.js里面为什么要添加window.onload=function (){} // 保证html文档都加载完了,才开始运行js代码,以防html文档没有加载完,找不到相应的元素 // 2.判断一个js的方法能否在浏览器里面执行: // if(!document.getElementById) return false; 这样就能达到判断的标准,这样的执行语句,方便判断多个条件 // 3.window.onload还有其他更通用的解决方法: function addloadE