转载请注明原文地址:
一:JS基本语法
1:6大字面量
1)数字(Number)字面量:可以是整数或者是小数,或者是科学计数(e)。
2)字符串(String)字面量 :使用单引号或双引号括起来的内容。
3)表达式字面量:算术表达式。
4)数组(Array)字面量:一个数组。
5)对象(Object)字面量 :同Json对象语法,一个{}一个对象,对象内容是键值对格式。
6)函数(Function)字面量:定义一个函数:function myFunction(参数) {操作 }
2:JS数据类型
在 JavaScript 中有 5 种不同的数据类型:
- string
- number
- boolean
- object
- function
3 种对象类型:
- Object
- Date
- Array
2 个不包含任何值的数据类型:
- null
- undefined
3:统一变量
JS中的变量是一个同一概念,都用 var 来定义,根据变量值来区分类型。
4:JS流程控制语句
语句 | 描述 |
break | 用于跳出循环。 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue | 跳过循环中的一个迭代。 |
do ... while | 执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数。 |
for ... in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function | 定义一个函数 |
if ... else | 用于基于不同的条件来执行不同的动作。 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作。 |
throw | 抛出(生成)错误 。 |
try | 实现错误处理,与 catch 一同使用。 |
var | 声明一个变量。 |
while | 当条件语句为 true 时,执行语句块。 |
5:JS字符串操作
属性 | 描述 |
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
Method | 描述 |
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
6:JS函数
1)函数定义
function 函数名(var1,var2){//这里变量只是一个代称,无需用var修饰,直接用。也可以不使用形参,通过JS内置的 arguments 对象获取参数数组进行参数访问。
执行代码;
return x;//JS函数返回值的话直接用return即可,函数定义时无返回值类型一说
}
变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
即:在函数中如果有函数、变量的声明语句,那么在解析时,会默认把声明语句提升到该函数的顶部。所以,在函数内可以出现先使用变量,再在后面声明的情况。
2)函数调用
通过 函数名(参数) 调用:myfunction(var1,var2);
3)函数赋值
JS中可以把函数作为一个值来赋值,注意赋值时只是 函数名 作为右操作数即可,不需()。
如:xmlhttp.onreadyStateChange=callback;
7:异常处理
try {
}catch(err) {//同函数传参,这里err也是一个代数,不需要Exception关键字修饰的
}
二:JS操作浏览器对象——BOM对象模型
1:window对象:操作浏览器窗口
浏览器内的一切内容,都可以通过 window.XX.xxx()方式来获取、操作。
如:
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
2:window.location对象:操作浏览器地址
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
3:window.history 对象:包含浏览器的历史。
- history.back() - 与在浏览器点击后退按钮相同:history.back() 方法加载历史列表中的前一个 URL。
- history.forward() - 与在浏览器中点击按钮向前相同:history forward() 方法加载历史列表中的下一个 URL。
4:弹窗
JavaScript 中有三种消息框:警告框、确认框、提示框。
警告框:alert(警告信息)
确认框:confirm(信息)
var r=confirm("按下按钮");if (r==true){ x="你按下了\"确定\"按钮!";}else{ x="你按下了\"取消\"按钮!";}
提示框:prompt(信息):提醒用户进行某个输入
var person=prompt("请输入你的名字","在此输入");//此处前面为提示信息,后面为输入框默认值。在输入框中输入信息并确认,则输入信息会返回给调用处。
三:JS表单验证
1:Html5的自动表单验证
可以在表单的输入框标签添加以下属性,这样就进行自动验证了:
属性 | 描述 |
disabled | 规定输入的元素不可用 |
max | 规定输入元素的最大值 |
min | 规定输入元素的最小值 |
pattern | 规定输入元素值的模式 |
required | 规定输入元素字段是必需的 |
type | 规则输入元素的类型 |
2:JS验证方式一:元素的onclick等事件响应函数进行表单验证
如:
<button type="button" οnclick="myFunction()">提交</button>
3:JS验证方式二:表单的onsubmit属性:注意onsubmit属性值是:return 验证函数()
如:<form name="myForm" action="" οnsubmit="return validateForm()" method="post">
四:JS操作Cookies
Cookie用于存储 web 页面的用户信息,存储于你电脑上的文本文件中。
Cookie以一组键/值对形式存储,如:username=charles。
当浏览器发出请求时, cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
1:JS创建、修改cookie(修改其实是创建新的覆盖旧的)
document.cookie = "key=val,key=val...;expires=过期时间";
2:JS删除cookie
删除是通过设置过期时间为当前来实现的。
3:JS获取cookie
var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookies,类型格式: cookie1=value; cookie2=value; cookie3=value...
因为document.cookie返回的是所有cookie键值对的字符串,如果您需要查找一个指定 cookie 值,你需要自己去遍历、选取。
function getCookie(cname){//获取cookies数组var ca = document.cookie.split(';');//遍历for(var i=0; i
五:JS操作html页面的DOM对象
1:查找元素
1)通过 id 查找 HTML 元素
var x=document.getElementById("intro");
2)通过标签名查找 HTML 元素
var y=document.getElementsByTagName("p");
3)通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
2:改变页面内容
1)改变 HTML 输出流:在某位置进行输出
document.write(内容);
2)改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
document.getElementById("id").innerHTML="新文本!";
3)改变 HTML 属性
某元素.属性=新属性值
document.getElementById("id").属性="新属性值";
3:改变页面样式
document.getElementById("id").style.样式名="新样式值"
六:JS的解析过程
放在head中的JS代码会在页面加载完成之前就读取,而放在body中的JS代码,会在整个页面加载完成之后读取。
如果我们想定义一个全局对象,而这个对象是页面中的某个按钮时,我们必须将其放入body中,道理很明显:如果放入head,那当你定义的时候,那个按钮都没有被加载,可能获得的是一个undefind。
浏览器是从上到下解析代码,解析头的时候,中、尾部的代码是不知道的,如果我们想把body中的一个对象定义为全局变量(即:在head中有 var 对象=getElementById("") 语句)的话,在head中定义它会报错,因为中部代码还没加载进来,这个对象是未知的。而body中的JS代码是等页面全部加载进来后再加载执行,所以该有的对象全部都已知了,此时在body中JS把某个对象定义、执行操作等都会合法。
有一个解决方法就是,放在window.οnlοad=function(){ <script></script>}中,这样就会在页面加载完成后才调用函数,并执行里面的script。