搜索
首页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
超越浏览器:现实世界中的JavaScript超越浏览器:现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

使用Next.js(后端集成)构建多租户SaaS应用程序使用Next.js(后端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js(前端集成)构建多租户SaaS应用程序如何使用Next.js(前端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript:探索网络语言的多功能性JavaScript:探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的演变:当前的趋势和未来前景JavaScript的演变:当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript:它的作用以及为什么重要神秘的JavaScript:它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python还是JavaScript更好?Python还是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

如何安装JavaScript?如何安装JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。

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.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

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

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

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

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具