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为参数完成模式搜索和替换功能