搜索
首页web前端js教程JavaScript用法分享
JavaScript用法分享Jul 18, 2017 pm 03:51 PM
javascriptjs总结

 

一 概述

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):删除指定位置的列,不指定位置,删除最后一列。

 

以上是JavaScript用法分享的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器