Java Script 基本知识点
JavaScript提供了4种基本的数据类型用来处理数字和文字
Number、String、Null、Boolean
1）.变量
语法：
var 变量名=值;
变量命名规范：
1)变量名由字母、数字、下划线和$组成
2)变量名的首字母必须是字母、$或下划线
3)不能使用JavaScript 保留字，注意区分大小写
2).类型转换
parseInt (String)
将字符串转换为整型数字
parseFloat(String)
将字符串转换为浮点型数字
3).运算符
算术运算符
+、-、 * 、 / 、%、++、--
比较运算符
==、!=、>、>=、<、<=
逻辑运算符
&&、||、！
4).注释
JavaScript 注释有两种
单行注释
语法：//注释内容
多行注释
语法：/*注释内容*/
5).流程控制语句
语法：
if条件语句
switch多分支语句
for、while、do…while循环语句
break 和 continue 语句
break 语句来中断一个循环的运行。
continue 语句用来跳过余下的代码块而直接转到下一次循环继续执行
6).函数的定义与调用
a.函数声明语法：
function 函数名 (参数列表)
{
b.函数代码块;
return 表达式;
}
c.函数调用语法：
函数名(实参1,实参2…) ;
var 变量名=函数名(实参1,实参2…);
7).变量的作用域
根据变量的作用范围，JavaScript中的变量可以分为全局变量和局部变量
8).事件处理
浏览器事件
onload、unonload、onsubmit
鼠标事件
onMouseMove、onMouseOver、onMouseOut、onMouseDown、onMouseUp
文本框事件
onchange、onselect、onfocus、onblur、
9).其他
onclick
2.浏览器对象模型
浏览器对象模型是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于
内容的、可以与浏览器窗口进行互动的对象结构
1).浏览器对象的分层结构
window对象
常用属性
常用方法
window属性和方法事例
var money=prompt("请输入取款金额",100);//接收用户录入对话框
alert(money);//输出100
var state=confirm("你取款金额为"+money);//确认和取消按钮对话框
alert(state);//返回true或false
setTimeout（“调用的函数”,”毫秒数”）
window.open("adv.html","","相关属性");
height： 窗口高度；
width： 窗口宽度；
top： 窗口距离屏幕上方的象素值；
left：窗口距离屏幕左侧的象素值；
toolbar： 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable： 是否允许改变窗口大小，yes或1为允许
location： 是否显示地址栏，yes或1为允许
status：是否显示状态栏内的信息，yes或1为允许；
history对象
作用：
history对象用来管理当前窗口最近访问过的URL
常用方法：
注意：
history.go(-1) 相当于 history.back()
history.go(1) 相当于 history.forward()
例子：
<a href="javascript：history.back()">后退</a>
相当于
<a href="javascript：history.go(-1)">后退</a>
<a href="javascript：history.forward()">前进</a>
相当于
<a href="javascript：history.go(1)">后退</a>
location对象
作用：
location对象用来管理当前打开窗口的URL信息
常用属性和方法：
例子：
window.location.href=”https://www.baidu.com”;
3.DOM概述
DOM－Document Object Model ，它是W3C国际组织的一套Web标准
DOM是一种与浏览器、平台、语言无关的接口
document对象
作用：
document对象代表浏览器窗口中加载的整个HTML文档
常用属性：
常用方法：
document对象访问页面元素的常用方式有四种
1）document.all.页面元素名称;
2）document.表单名.元素名称;
3）document.getElementById("ID名称");
4）document.getElementsByName("元素名称");
----------------------------------------------------------------------------------------
1. 属性示例：开灯关灯
<script type="text/javascript">
function setColor_()
{
var type =document.getElementById("setColor").value;
if(type=="关灯")
{
document.getElementById("setColor").value="开灯";
document.bgColor="black";
}else
{
document.getElementById("setColor").value="关灯";
document.bgColor="white";
}
}
</script>
2、
<input
type="button"
value="关灯"
id="setColor"
onclick="setColor_()"
name="setColor"/>
属性示例：图片广告随滚动条滚动而滚动
核心代码如下：
1、
<script type="text/javascript">
function move()
{
document.getElementById("adv").style.top=400+document.documentElement.scrollTop+"px";
}
window.onscroll=move;
</script>
2、
<img src="足够大的背景图片" />
<p
id="adv"
style="position:absolute;
top:400px; left:10px;"><img src="需要漂浮的小广告图片"/></p>
方法示例：全选操作
核心代码如下：
1、
<script type="text/javascript">
function isChecked(state)
{
var v=document.getElementsByName("lover");
for(var i=0;i<v.length;i++)
{
if(v[i].type=="checkbox")
{
v[i].checked=state;
}
}
}
</script>
2、
<input type="radio" name="ischeck" onclick="isChecked(true)" />全选<input type="radio" name="ischeck" onclick="isChecked(false)"/>全否<br />
<a href="javascript：isChecked(true)">全选</a>
<a href="javascript：isChecked(false)">全否</a>
<hr />
<input type="checkbox" id="lover" name="lover"/>体育
<input type="checkbox" id="lover"name="lover"/>音乐
<input type="checkbox" id="lover" name="lover"/>美术
节点信息
document文档对象可以创建、添加、删除DOM支持的任何类型的节点
1、 使用document.createElement创建节点
document.createElement的功能是创建一个指定标签名的元素节点，标签名可以是任
何名字，包括自定义的标签
2、使用appendChild(node)将节点追加到所有子节点的末尾
3、使用insertBefore(newNode,node)将节点newNode插入到节点node之前
4、使用removeChild删除节点
innerHTML属性
innerHTML是DOM节点的一个属性，它表示节点的开始标签与结标签之间的内容
表单验证
作用: 表单验证可以保证提交数据的准确性
表单验证思路:
1） 编写表单处理函数，验证数据的合法性
2） 处理表单的onsubmit事件
String对象
常用属性 ：
常用方法
示例：
var name="andy_liu";
var first1=name.substr(1,4); //从下表为1开始截取4个长度的字符
alert(first1); ///提示：ndy_
var first2=name.substring(1,4); //从下表为1开始取到下表为4的前一位结束
alert(first2); ///提示：ndy
例子：
var data = "宝马,大众,丰田";
var cars = data.split(",");//按逗号分隔进行拆分
for(var i=0;i<cars.length;i++){
alert(cars[i]);
}
正则表达式
定义：正则表达式是一种对文字进行模糊匹配的语言
正则表达式的功能：
1）实现数据格式的有效性验证
2）实现文本内容的替换和删除
3）实现文本模糊搜索
RegExp对象
RegExp是JavaScript中提供的一种用来完成有关正则表达式操作和功能的对象
两种创建方式：
1）var reg=new RegExp(“表达式”,”附加参数”);
2）var reg=/表达式/附加参数
RegExp对象的附加参数:
g：全局匹配
i：不区分大小写匹配
m：可以进行多行匹配
常用方法
test示例：
var str="CATs";
var regex=new RegExp("cat",'gi');
var result=regex.test(str);
document.write(result);
输出结果：true
exec示例：
var str="this is cat ,that is cat";
var pattern=new RegExp("cat","g");
var arr;
while((arr=pattern.exec(str))!=null){
document.write("在索引"+arr.index+"位置出现了");
document.write(arr+"<br/>");
}
注意：exec方法返回的数组有3个属性，分别是input、index和lastIndex
表达式模式
特殊字符
限定符
定位符
查找和替换
常用正则表达式
需求
表达式
匹配身份证号码
^d{15}|d{18}$
验证电子邮件格式
^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$
验证一个月的天数
^([0-2])\d$|^3(0|1)$
验证合法的标识名
^[a-zA-Z]\w{4,15}$
匹配中文字符
[u4e00-u9fa5]
总结：
u 表单是用来收集用户信息的容器，onsubmit事件为提交表单时触发的事件
u 表单验证分为两步：第一步是编写验证函数验证表单数据的合法性，第二步是处理表单onsubmit，即在表单提交事件中调用表单验证函数
u String对象用于处理字符串，如获取字符串的长度、搜索字符串中的字符、转换字符的大小写等
u 正则表达式是一种对文字进行模糊匹配的语言，常用方法有test、exec等
u 使用正则表达式可以实现：
n 测试字符串是否匹配某个模式，从而实现数据格式的有效性验证
n 修正满足某正则表达式模式的文本内容
n 搜索某一类型的文本内容
u String对象中的match、search、replace方法以RegExp为参数完成模式搜索和替换功能
上一篇： js实现图片局部放大效果
下一篇： 小程序打包代码包过大的解决方法