js学习笔记

来源：互联网发布：淘宝无线端短连接编辑：程序博客网时间：2024/05/29 17:42

1.BOM编程

什么是BOM编程？

BOM是（BroswerObject Model）浏览器对象模型编程

1.window对象

open(): 在一个窗口中打开页面

参数一：打开的页面

参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认）

参数三：设置窗口参数。比如窗口大小

setInterval(): 设置定时器（执行n次）

setTimeout(): 设置定时器(只执行1次)

定时器：每隔n毫秒调用指定的任务（函数）

参数一：指定的任务（函数）

参数二：毫秒数

clearInterval(): 清除定时器

clearTimeout(): 清除定时器

清除任务

参数一：需要清除的任务ID

alert(): 提示框

仅仅有确定按钮

confirm(): 确认提示框

返回值就是用户操作

true: 点击了确定

false：点击了取消

propmt(): 输入提示框

返回值就是用户操作

true: 点击了确定

false：点击了取消

注意：

因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<scripttype="text/javascript">

window对象:

1.open():打开另一个窗口

参数1:设置打开的网页连接

参数2:打开的方式

参数3:设置打开的窗口的大小

2.设置定时器:

setInterval("执行的函数","每隔多少秒执行")---执行n次

setTimeOut("执行的函数","每隔多少秒执行")-- 执行一次

3.清除定时任务

clearInterval(): 清除定时器

clearTimeout(): 清除定时器

清除任务

参数一：需要清除的任务ID

4.alert(): 提示框

仅仅有确定按钮

5.confirm有确定还有取消的提示框

确定:true

取消:false

6. propmt():输入提示框

返回值就是用户操作

true: 点击了确定

false：点击了取消

functiontestOpen(){

window.open("1.广告.html","_blank","width=200px;height=300px");

}

//开启定时任务

varintervalId;

functiontestSetInterval(){

//调用上面的testOpen()方法,在这里设置了一个定时任务,每一个定时任务其实都是有一个任务id的

intervalId= window.setInterval("testOpen()",3000);

}

//清除定时任务

functiontestClearInterval(){

window.clearInterval(intervalId);

}

//创建一个定时任务,只执行一次

vartimeoutId;

functiontestSetTimeout(){

timeoutId= window.setTimeout("testOpen()",3000);

}

//清楚定时任务,setTimeOut()设定的定时任务

functiontestClearTimeout(){

window.clearTimeout(timeoutId);

}

//alert提示框

//window.alert("hello");

//弹出一个提示框,有确定还有取消

functiontestConfirm(){

varflag = window.confirm("确定要删除硬盘上的内容吗");

if(flag){

alert("内容正在删除中...");

}else{

}

//创建一个方法,生成内容输入提示框

functiontestPropmt(){

window.prompt("请输入你的密码");

}

</script>

</head>

<body>

</body>

</html>

2.location对象

href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符

reload方法：刷新当前页面

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

2.location对象

href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符

reload方法：刷新当前页面

需求：实现每隔一秒刷新一次页面

//获取地址栏中的url

functiongetHref(){

//获取当前的地址栏中的url

varurl = window.location.href;

alert(url);

}

//设置地址中的url

functionsetHref(){

window.location.href="1.广告.html";

}

//reload方法：刷新当前页面,需求：实现每隔一秒刷新一次页面

functionrefresh2(){

window.location.reload();

}

window.setTimeout("refresh2()",1000);

</script>

</head>

<body>

</body>

</html>

3.history对象

forward():前进到下一页

back():后退上一页

go():跳转到某页（正整数：前进负整数：后退） 1 -2

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<scripttype="text/javascript">

3.history对象

forward():前进到下一页

back():后退上一页

go():跳转到某页（正整数：前进负整数：后退） 1 -1

//前进的方法

functiontestForward(){

//window.history.forward();

window.history.go(1);

}

</script>

</head>

<body>

</body>

</html>

4.screen对象（学习四个属性）

availHeight和availWidth

是排除了任务栏之后的高度和宽度

width和height

是整个屏幕的像素值

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<scripttype="text/javascript">

4.screen对象（学习四个属性）

availHeight和availWidth

是排除了任务栏之后的高度和宽度

width和height

是整个屏幕的像素值

document.write("屏幕的实际宽度"+window.screen.width);

document.write("<br>");

document.write("屏幕的实际高度"+window.screen.height);

document.write("<br>");

document.write("屏幕的可用宽度"+window.screen.availWidth);

document.write("<br>");

document.write("屏幕的可用高度"+window.screen.availHeight);

document.write("<br>");

</script>

</head>

<body>

</body>

</html

2 事件编程

javascript事件编程的三个要素：

1）事件源：html标签

2）事件：click dblclickmouseover。。。。

3）监听器：函数

javascript事件分类：

点击相关的：

单击： onclick

双击： ondblclick

焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）

聚焦： onfocus

失去焦点： onblur

选项相关的：（select选项改变，做一个籍贯选项）

改变选项：onchange

鼠标相关的：（画一个div区块进行演示）

鼠标经过：onmouseover

鼠标移除：onmouseout

页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）

页面加载： onload

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<scripttype="text/javascript">

javascript事件分类：

点击相关的：

单击： onclick

双击： ondblclick

焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）

聚焦： onfocus

失去焦点： onblur

选项相关的：（select选项改变，做一个籍贯选项）

改变选项：onchange

鼠标相关的：（画一个div区块进行演示）

鼠标经过：onmouseover

鼠标移除：onmouseout

页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）

页面加载： onload

//写一个单击事件的监听

functiontestClick(){

alert("单击事件被触发");

}

//协议而过双击事件的监听

functiontestdbClick(){

alert("双击事件被执行");

}

//给获取焦点写一个监听,当获取焦点的时候,输入框内部的内容消失

functiontestOnfocus(){

//获取id为username的input标签对象

varusername = document.getElementById("username");

//将上面的input标签对象的values属性置为空串

username.value="";

}

//给input标签设置一个失去焦点的事件,当失去焦点的时候,给予一个提示,这个用户名到底可用不可用

functiontestBlur(){

//获取input标签对象的value值和sapn标签的对象

varusername = document.getElementById("username").value;

varusernameTip = document.getElementById("usernameTip");

//拿着用户输入的用户名,做匹配,做判断

if("jack"==username){

usernameTip.innerHTML="该用户名已经被占用".fontcolor("red");

}else{

usernameTip.innerHTML="该用户可用".fontcolor("green");

}

//改变选项：onchange 做一个监听

functiontestChange(){

//1.获取用户选择了哪个选项

varsheng = document.getElementById("sheng").value;

varshi = document.getElementById("shi");

shi.innerHTML="<option>--请选择--</option>";

//alert(sheng);

//2.根据用户的选项进行判断,动态的给市级的下拉选中天充对应的option选项

if(sheng=="shanxi"){

shi.innerHTML="<option>西安</option><option>渭南</option><option>宝鸡</option>"

}elseif(sheng=="sichuan"){

shi.innerHTML="<option>成都</option><option>雅安</option><option>广安</option>"

}elseif(sheng=="guangdong"){

shi.innerHTML="<option>广州</option><option>深圳</option><option>佛山</option>"

}

//给鼠标移入加一个监听

function testOut(){

alert("鼠标移入了")

}

//鼠标移除的事件

functiontestOver(){

alert("鼠标移出了")

}

</script>

</head>

<body>

<br />

<hr />

<spanid="usernameTip"></span>

<br />

<hr />

<selectonchange="testChange()" id="sheng">

</select>

</select>

<br />

<hr />

<divstyle="width:300px;height:300px;border:1px solid #FF0"onmouseout="testOut()"onmouseover="testOver()"></div>

</body>

</html>

3. DOM编程

3.1概念

DOM（documentObject Model）文档对象模型编程。

3.2查询标签对象

通过document对象获取，document代表一个html页面

#通过document对象的集合

作用：获取多个或者同类的标签对象

all:获取所有标签对象

forms：获取form标签对象

images:获取img标签对象

links:获取a标签对象

varnodeList = document.all; //返回标签对象数组

varnodeList = document.forms; //返回标签对象数组

varnodeList = document.images; //返回对象数组

varnodeList = document.links;//返回对象数组

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<img />

</body>

<scripttype="text/javascript">

3.2查询标签对象

通过document对象获取，document代表一个html页面

#通过document对象的集合

作用：获取多个或者同类的标签对象

all:获取所有标签对象

forms：获取form标签对象

images:获取img标签对象

links:获取a标签对象

//all:获取所有标签对象

//varnodeList = document.all;

//forms：获取form标签对象

varnodeList = document.forms;

//links:获取所有的a标签

//varnodeList = document.links;

//images:获取页面上的所有的img标签

//varnodeList = document.images;

//遍历获取到的所有的标签对象

alert(nodeList.length);

for(vari=0;i<nodeList.length;i++){

alert(nodeList[i].nodeName);

}

</script>

</html>

#通过关系查找标签对象

父节点：parentNode属性

子节点：childNodes属性

第一个子节点：firstChild属性

最后一个子节点：lastChild属性

下一个兄弟节点：nextSibling属性

上一个兄弟节点：previousSibling属性

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

</head>

<!--

#通过关系查找标签对象

父节点：parentNode属性

子节点：childNodes属性

第一个子节点：firstChild属性

最后一个子节点：lastChild属性

下一个兄弟节点：nextSibling属性

上一个兄弟节点：previousSibling属性

-->

<body>

<form><a href="#">我是一个超链接</a><inputtype="text" /><input type="text" /></form>

</body>

<scripttype="text/javascript">

//获取form标签对象中的a标签

varaNode = document.links[0];

//alert(aNode.nodeName);

//通过父节点属性parentNode这个属性获取a标签的父标签

varformNode = aNode.parentNode;

//alert(formNode.nodeName);

//通过childNodes属性获取form标签的所有的子标签

varchildNodeList = formNode.childNodes;

//alert(childNodeList.length);

//通过遍历的方式遍历我们获取到的所有的子标签对象

for(vari=0;i<childNodeList.length;i++){

if(childNodeList[i].nodeType==1){

document.write("标签对象名称:"+childNodeList[i].nodeName+childNodeList[i].nodeType+"<br>");

}

在我们获取一个父标签的所有子标签的时候,会将它我们的注释和我们的换行都看成一个标签对象一起获取:

标签对象名称:#text -- 换行 -- 3

标签对象名称:#comment-- 注释 -- 8

标签对象名称:#text

标签对象名称:A -- 1

标签对象名称:#text

标签对象名称:INPUT-- 1

标签对象名称:#text

标签对象名称:INPUT-- 1

标签对象名称:#text

//在form标签中去掉换行符之后,我们来获取一下form标签的所有的子标签对象的第一个子标签和最后一个子标签

varfirst = formNode.firstChild;

//alert(first.nodeName);

varlast = formNode.lastChild;

//alert(last.nodeName);

varnext =first.nextSibling;

//alert(next.nodeName);

varprevious = next.previousSibling;

alert(previous.nodeName);

</script>

</html>

#通过document方法查询标签对象

document.getElementById("id属性值"); 最常用

注意：

1）使用该方法获取的标签一定要有id属性

2）在同一个html页面中不要出现两个同名的id

documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表

注意：

1）使用该方法获取的标签一定要有name属性

document.getElementsByTagName("标签名") 获取相同标签名的标签列表

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<a href="#"id="aId">我是一个超链接1</a>

<a href="#"name="aName">我是一个超链接2</a>

<a href="#"name="aName">我是一个超链接3</a>

</body>

<scripttype="text/javascript">

//通过document中的方法获取标签对象

//通过标签对象的id属性获取标签对象

//1.通过id属性获取a标签对document.getElementById(标签id);

varaNode = document.getElementById("aId");

//alert(aNode.nodeName);

//2.通过name属性获取标签对象document.getElementsByName(name属性值);

varaNameNodeList = document.getElementsByName("aName");

//alert(aNameNodeList.length);

//3.通过标签名称获取标签对象数document.getElementsByTagName(标签名称)

varaNodeList = document.getElementsByTagName("a");

alert(aNodeList.length);

</script>

</html>

3.3修改标签对象属性

常用的需要修改的属性：

innerHTML属性：修改标签体内容<span>xxxxxx</span> <div></div><select></select>

innerHTML: 设置的标签内的html

value属性：修改value属性值。 inputtype="text"

src属性：修改图片的src属性。 <imgsrc=""/> 点击按钮更换图片

案例：两张图片不断自动切换

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

</body>

<scripttype="text/javascript">

functionchangePic(){

//获取img标签对象

varpic = document.getElementById("pic");

//更改pic这个标签对象的src属性

pic.src="mm.jpg";

}

//写一个方法,每隔2秒调用一下这个方法,每次调用都给我这个img标签更换src属性

//定义一个值相当大的一个变量

vari = 10000000;

functionchangePicture(){

//获取img标签对象

varpic = document.getElementById("pic");

if(i%2==0){

pic.src="mm.jpg";

}else{

pic.src="4.jpg";

}

i--;

}

//设置定时器,每隔两秒调用一次上面更改图片的方法,实现图片的轮播

window.setInterval("changePicture()",2000);

</script>

</html>

checked属性：修改单选或多项的默认值。 <inputtype="radio/checked" checked=""/> 爱好全选

（课堂练习）案例：制作一个多选反选列表，价格统计（主要练习两个属性，innerHTML,checked）

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

</body>

<scripttype="text/javascript">

functioncheckAll(){

//获取所有的电脑的input标签对象,将他们的checked属性选中变不选中,不选中变选中

varcmps = document.getElementsByName("cmp");

for(vari=0;i<cmps.length;i++){

if(cmps[i].checked){

cmps[i].checked=false;

}else{

cmps[i].checked=true;

}

};

//定义一个总价

functionsumPrice(){

varres=0;

//获取选中的input标签对象,将他们的所有的价格加起来

varcmps = document.getElementsByName("cmp");

//获取sapn标签

varallPriceSpan = document.getElementById("allPrice");

for(vari=0;i<cmps.length;i++){

if(cmps[i].checked){

//说名这个标签对象是一个选中的状态

varprice = cmps[i].value;

//将上面获取到的price转换成number类型

price= parseInt(price);

res+=price;

}

//将计算出的总价,设置到span标签中

allPriceSpan.innerHTML=res+"元";

}

</script>

</html>

4 正则表达式

4.1正则表达式的书写规则

创建正则表达式： var 变量 = /正则规则/;

[a-z]:表示匹配字母

* : 0或多个元素

+: 1个或多个元素

? : 0或1个元素

{n,m} 大于n,小于m的个数

正则方法：

test（）：用于匹配指定的字符串. true：表示匹配成功； false; 表示匹配失败

注意：

在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！

如果需要和java一样完全匹配，需要添加边界符号

开始标记： ^

结束标记： $

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

</head>

<!--

4.1正则表达式的书写规则

创建正则表达式： var 变量 = /正则规则/;

[a-zA-Z0-9]:表示匹配大小写字母和数字

* : 0或多个元素

+: 1个或多个元素

? : 0或1个元素

{n,m} 大于等于n,小于等于m的个数

正则方法：

test（）：用于匹配指定的字符串. true：表示匹配成功； false; 表示匹配失败

注意:在js的正则表达式中,只要需要匹配的字符串中出现了正则表达式中匹配成功的内容,就代表匹配成功.

这种匹配方式不是完全匹配

我们现在如果想让我们的正则表达式完全匹配我们的字符串,需要给我们的

正则表达式加上边界符号.

开始:^

结束:$

-->

<body>

</body>

<scripttype="text/javascript">

//创建一个正则表达式

varreg = /^[0-9]$/;

//创建一个字符串使用正则表达式进行匹配

varstr = "123wetrertre";

if(reg.test(str)){

alert("匹配成功");

}else{

alert("匹配不成功");

}

</script>

</html>

阅读全文

0 0