js

第1部分 JavaScript简介、

Javascriot组成

Ecmascriot 核心

Bom 浏览器文档模型

Dom 文档模型 document

Window对象

Location 对象

javascrio写法分类

1.内联式

写在标签内以属性为表现形式

引号括号外面

Inclick 鼠标点击触发事件

2.内嵌式

3.外部引用

jacascrip三种弹窗

Alert()；普通（告警）弹窗，提醒弹窗

Confirm()；确定操作弹窗

判断操作内容，返回值

Primpt()；接收输入弹窗

找到标签

document.getEelementById()

document.getEelementsByTag()

Id name class

操作标签内容

标签.innerhtml;

操作标签属性
操作标签样式
创建删除标签

1、JavaScript它是个什么东西？

它是个脚本语言，需要有宿主文件，他的宿主文件是html文件。

2、它与Java有什么关系？

没有什么直接联系，java是Sun公司（已经没有了，被Oracle收购了），JavaScript是Netscape(网景公司也没有了，被美国在线收购了)，Jscript是微软的，90%像JavaScript，一些功能只能在IE上使用。

3、它的用法

在html中的位置有三块：1.head里面 2.body里面 3.</html>之后，为了保险起见一般写在</html>之后。<script language="javascript">代码必须放在这里面</script>

4、三个常用对话框

alert("") 警告对话框，作用是弹出一个警告对话框；

alert("出现错误") ：

confirm("") 确定对话框，作用是弹出一个可供选择的确定对话框，点击确定之后，它返回ture，点击取消返回flase，可用变量来接收。

confirm("确定退出么") ：

prompt("要显示的提示文字")，作用是弹出一个可以输入内容的对话框。

prompt("输个数字进来吧"，"只能是数字哦") ：

第2部分 JavaScript语法

1、基本数据类型：

字符串、小数、整数、日期时间、布尔型等。

2、变量：

都是通用类型var，可以随便存储其它类型的值，可以直接使用，不用定义，但习惯上定义。定义变量：var a；所有变量定义都用var定义，var是通用的可变类型。

3、类型转换：

分为自动转换和强制转换，一般用强制转换。

其它类型转为整数：parseint()；

其它类型转为小数：parsefloat()；

另外判断是否是一个合法的数字类型：isNaN() ；

is not a number是不是（不是一个数字）

是数字的话返回false，不是数字的话返回true，如下：

var a;

a=prompt("请输入一个数字！","只能输入数字")/*把输入对话框输入的内容赋值给a*/

var b= isNaN(a);/*判断a是不是不是一个数字，赋值给b*/

alert(b)

4、运算符：

数学运算符：+ - * / % ++ --；

关系运算符：== != > >= < <=；

逻辑运算符:&& || !；

其它运算符:+= -= *= /= %= ?:

5、语句：

一般分为顺序，分支和循环语句。

（1）分支是if语句：

If(判断条件){

满足条件要执行的语句

}else{

不满足条件要执行的语句

}

（2）循环用for语句：

for(初始条件；循环条件；状态改变){

循环体

}

（3）问题类型：穷举，迭代

（4）两个关键词：break 和continue

（5）如果要输出某一参数的值：输出的值是"+a+"和"+b

6、数组：

数组的定义：new Array()；它的长度是动态变化的，里面可以放任意类型的元素。

数组元素的赋值：a[0]=123；a[1]="hello"；

数组取值：a[i]；

数组属性：a.length；数组元素的个数，长度。

方法：a.sort();排序数组，按照第一个字符排序，a.reverse();翻转数组

7、函数：

函数的四要素：名称，输入，返回值，加工。

定义函数：function add(形参) { 函数体 }，函数名为add，输入为参数的形式，返回值可以是var类型也可以return个值；

函数不调用是不会执行的，函数的调用：add(实参)。

1、DOM的基本概念

DOM是文档对象模型，这种模型为树模型；文档是指标签文档；对象是指文档中每个元素；模型是指抽象化的东西。

2、Windows对象操作

一、属性和方法：

属性（值或者子对象）：

opener:打开当前窗口的源窗口，如果当前窗口是首次启动浏览器打开的，则opener是null。

dialogArgument：对话框返回值。

子对象：history,location,document,status,menubar,toolbar等。

方法（函数）：事件（事先设置好的程序，被触发）。

二、Window.open（"第一部分"，"第二部分"，"第三部分"，"第四部分"）

Window.open的特征参数：

第一部分：写页面地址。

第二部分：_blank 打开的方式，在新窗口还是自身的窗口。

第三部分：控制打开的窗口格式，可以写多个，用空格隔开如下：

toolbar=no新打开的窗口无工具条；

menubar=no无菜单栏 status=no无状态栏；

width=100 height=100 宽度高度；

left=100 打开的窗口距离左边多少距离；

resizable=no窗口大小不可调；

scrollbars=yes 出现滚动条；

location=yes 有地址栏；

Window.open也有返回值，它的返回值是：新打开的窗口对象。

例如：

最简单的打开窗口：window.open("Untitled-6.html");

打开一个窗口并保存在变量中：var w= window.open()；

可以将打开的多个窗口保存在数组w里：

function openW()

{

w[i++]=window.open();

}

三、window.close()：关闭当前窗口；

w.close()：关闭保存在变量w中的那个窗口；

关闭多个子窗口：先将打开的窗口存入数组内，利用循环将其挨个关闭；

关闭打开当前窗口的源窗口： window.opener.close()；

四、间隔与延迟

间隔执行一段代码（函数）：window.setInterval("要执行的代码"，间隔的毫秒数)

清除间隔执行：window.clearInterval(间隔的id); 循环一次之后用来清除间隔执行的代码

延迟一段时间执行某一段代码（函数）：window.setTimeout("要执行的代码"，延迟的毫秒数)

清除延迟：window.clearTimeout(延迟的id)；清除setTimeout

五、调整页面

window.navigate("url") 跳转至目标页面，在谷歌浏览器下有bug；

window.moveTo(x,y) 移动页面至某一位置，位置由x和y决定；

window.resizeTo(宽，高) 调整页面的宽度和高度；

window.scrollTo（x,y）滚动页面至哪里，y代表纵向滚动。

六、模态对话框和非模态对话框

模态对话框（Modal Dialogue Box），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭，它和非模态对话框都是永远置顶的，它们的区别在于当对话框打开时，是否允许用户进行其他对象的操作。

打开模态对话框：window.showModalDialog("url"，"向目标对话框传的值"，"窗口特征参数")；

特征参数：用分号隔开，像素大小用px。dialogHeight,dialogWidth,center,等

打开非模态对话框：window.showModelessDialog("url"，"向目标对话框传的值"，"窗口特征参数")

var a = window.dialogArgument；可以用一个参数来获取模态或非模态对话框传递的值。

3、Window.history对象

window.history.back();页面进行后退；

window.history.forward();页面前进；

window.history.go(n); n如果是正数则代表前进n个页面，n如果是负数则代表后退n个页面，一般常用这一种。

4、Window.location对象

location地址栏

var s = window.location.href;获取当前页面的地址

window.location.href="http://www.baidu.com";修改页面地址，会跳转页面

window.location.hostname: 主机名，域名，网站名，可用变量接收

window.location.pathname: 路径名，可用变量接收

5、Window.status对象

status状态栏，可以给状态栏添加要显示的文字

window.status="要在状态栏显示的内容"；设置状态栏文字

例如：

function s(){ window.status = "向前走就这么走";}

6、Window.document对象

一、找到元素：

    docunment.getElementById("id")；根据id找，最多找一个；
    var a =docunment.getElementById("id");将找到的元素放在变量中；
    docunment.getElementByName("name")；根据name找，找出来的是数组；
    docunment.getElementByTagName("name")；根据标签名找，找出来的是数组；
    docunment.getElementByClassName("name") 根据classname找，找出来的是数组；

二、操作内容：

1. 非表单元素：

1）获取内容：

alert(a.innerHTML);标签里的html代码和文字都获取了

如：body中有这么一个div：

在script中用innerHTML获取div中的内容：

var a= document.getElementById("me"); alert(a.innerHTML);

结果如下图：

alert(a.innerText);只取里面的文字
alert(a.outHTML);包括标签本身的内容（简单了解）

2）设置内容：

a.innerHTML = "<font color=red >hello world </font>";

如果用设置内容代码结果如下，div中的内容被替换了：

a.innerText会将赋的东西原样呈现

清空内容：赋值个空字符串

2. 表单元素：

1）获取内容，有两种获取方式：

var t = document.f1.t1; form表单ID为f1里面的ID为t1的input；
var t = document.getElementById("id"); 直接用ID获取。

alert(t.value); 获取input中的value值；
alert(t.innerHTML); 获取<textarea> 这里的值 </textarea>；

2）设置内容： t.value="内容改变"；

3. 一个小知识点：

<a href="www.baidu.com" onclick ="return flase">转向百度</a> ；加了return flase则不会跳转，默认是return true会跳转。按钮也一样，如果按钮中设置return flase 则不会进行提交，利用这个可以对提交跳转进行控制。

三、操作属性

首先利用元素的ID找到该元素，存于一个变量中：

var a = document.getElementById("id");

然后可以对该元素的属性进行操作：

标签.setattribute(“属性名”,”属性名”)

a.setAttribute("属性名","属性值"); 设置一个属性，添加或更改都可以；

a.getAttribute("属性名")；获取属性的值；

a.removeAttribute("属性名")；移除一个属性。

例子1：做一个问题，如果输入的答案正确则弹出正确，错误弹出错误；

这里在text里面写了一个daan属性，里面存了答案的值，点击检查答案的时候cheak输入的内容和答案是否一样：

Body中代码：

<form>中华民国成立于哪一年？<input type="text" daan="1912年" value="" id="t1" name="t1" /><input type="button" onclick="check()" id="t2" name="t2" value="检查答案" /></form>

JS中的代码：

function check(){ var a=document.getElementById("t1"); var a1=a.value; var a2=a.getAttribute("daan"); if(a1==a2) { alert("恭喜你答对了！"); } else { alert("笨蛋！"); }}

回答正确时的结果：

例子2：同意按钮，倒计时10秒，同意按钮变为可提交的，这里用了操作属性：disable，来改变按钮的状态，当disable=”disable”时按钮不可用。

body中的代码：

JS中的代码：

运行的结果：

四、操作样式

首先利用元素的ID找到该元素，存于一个变量中：

var a = document.getElementById("id")；

然后可以对该元素的属性进行操作：

a.style.样式="" ；操作此ID样式的属性。

样式为CSS中的样式，所有的样式都可以用代码进行操作。

document.body.stye.backgroundColor="颜色"；整个窗口的背景色。

操作样式的class：a.className="样式表中的classname" 操作一批样式

例子1：展示图片的自动和手动切换；

Body中的代码，做一个有背景图片的div和两侧的控制对象：

</div> <div id="tuijian" style=" background-image:url(imges/tj1.jpg);"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div> </div>

样式表中的代码：

JS中的代码，这里主要是每隔3秒中调用一下huan（）函数，来将背景图片的样式修改，在点击左右切换的时候变为手动切换，自动切换停止：

效果如下图：

五、相关元素操作：

var a = document.getElementById("id");找到a；

var b = a.nextSibling，找a的下一个同辈元素，注意包含空格；

var b = a.previousSibling，找a的上一个同辈元素，注意包含空格；

var b = a.parentNode，找a的上一级父级元素；

var b = a.childNodes，找出来的是数组，找a的下一级子元素；

var b = a.firstChild，第一个子元素，lastChild最后一个，childNodes[n]找第几个；

alert(nodes[i] instanceof Text); 判断是不是文本，是返回true，不是返回flase，用if判断它的值是不是flase，可以去除空格。

六、元素的创建、添加、删除：

var a = document.getElementById("id");找到a；

var obj = document.createElement("标签名")；创建一个元素 obj.innerHTML = "hello world";添加的时候首先需要创建出一个元素。

a.appendChild(obj);向a中添加一个子元素。

a.removeChild(obj);删除一个子元素。

列表中a.selectIndex:选中的是第几个;a.options[a.selectIndex]按下标取出第几个option对象

七、字符串的操作：

var s = new String(); 或var s ="aaaa";

var s = "hello world";

alert(s.toLowerCase());转小写 toUpperCase() 转大写

alert(s.substring(3,8));从第三个位置截取到第八个位置

alert(s.substr(3,8));从第三个位置开始截取，截取八个字符长度，不写后面的数字是截到最后.

s.split('');将字符换按照指定的字符拆开

s.length是属性

s.indexOf("world");world在字符串中第一次出现的位置，没有返回-1

s.lastIndexOf("o");o在字符串中最后一次出现的位置

八、日期时间的操作

var d = new Date();当前时间

var d = new Date(1999,3,2);定义一个时间，1999年4月2日，3要加1

d.getFullYear:取年份； d.getMonth():取月份，取出来的少1； d.getDate():取天； d.getDay():取星期几

d.getHours():取小时； d.getMinutes():取分钟；d.getSeconds():取秒

d.setFullYear():设置年份，设置月份的时候注意加1。

九、数学函数的操作

Math.ceil();大于当前小数的最小整数

Math.floor();小鱼当前小数的最大整数

Math.sqrt();开平方

Math.round();四舍五入

Math.random();随机数，0-1之间

十、小知识点

外面双引号，里面的双引号改为单引号；

在div里面行高设置和整个外面高度一样，才能用竖直居中，居中是行居中。

文本框取出来的值是字符串，需要用parseint（）转化为数字

s.match(reg); s代表一个字符串，reg代表一个字符串，两者进行匹配，如果两个字符串不匹配，返回一个null。

第4部分表单验证和事件

1、表单验证

(1).非空验证（去空格）

(2).对比验证（跟一个值对比）

(3).范围验证（根据一个范围进行判断）

(4).固定格式验证：电话号码，身份证号，邮箱，信用卡号等的验证；需要用到正则表达式来进行验证。

(5).其它验证

2、正则表达式

用符号来描述书写规则:/ 中间写正则表达式 /

^ ：匹配开头，$：匹配结尾； /^ve/以ve开头的 /ve$/以ve结尾

\d：一个任意的数字

\w：一个任意的数字或字母

\s：

{n}：把左边的表达式重复n遍

{m,n}：把左边的表达式重复至少m遍，至多n遍
{m, }：把左边的表达式重复至少m遍，,至多不限

+：左边的表达式，至少出现一次，至多不限，相当于{1，}

*：左边的表达式，至少出现0次，至多不限，相当于{0，}

?：左边的表达式，至少出现0次，至多出现1次，相当于{0，1}

[a,b,c]：只能取方括号中内容之一

[a-z]或[1-9]：在范围中取其一

|：代表或者；（）：优先级； \：转义--“”这个才是要出现的小括号，需要转义

3、事件

事件有三要素：事件源、事件数据、事件处理程序

事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发

可以加return false;是阻止默认操作

onclick: 鼠标单击触发

ondblclick: 双击触发

onmouseover: 鼠标移动上面触发

onmouseout: 鼠标离开时触发

onmousemove: 鼠标在上面移动时触发

onchange: 只要内容改变触发

onblur: 失去焦点时触发

onfocus: 获得焦点时触发

onkeydown: 按键按下的时候触发

onkeyup：按键抬起来的时候触发

onkeypress：事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。

例子：根据正则表达式验证邮箱

posted on 2017-11-08 19:50 果冻TD 阅读(200) 评论(0) 编辑收藏举报