1 prototype原型
Object对象中的一个属性,所有对象都可以通过prototype属性扩展功能。
例如:
第一步:创建一个js文件,然后在文件中对Date对象添加一个formatDate方法。
// 给Date对象扩展了一个formatDate方法
Date.prototype.formatDate = function() {
// this代表该方法的调用者对象
var year = this.getFullYear();
var month = this.getMonth() + 1;
var date = this.getDate();
var hour = this.getHours();
var min = this.getMinutes();
var second = this.getSeconds();
var dateStr = year + "年" + month + "月" + date + "日 " + hour + "时" + min + "分" + second + "秒";
return dateStr;
}
第二步:在html文件中引入js文件。
<script type="text/javascript" src="js/date.js"></script>
第三步:测试。
var dateStr = d.formatDate()
document.write(dateStr);
2 BOM编程
2.1 Window对象
Window对象是一个顶级对象,包含其他BOM对象。它提供了获取其他BOM对象的属性。例如:
window.location:代表地址栏。
window.history:代表前进后退按钮。
window.navigator:代表浏览器。
window.screen:代表当前屏幕。
window.document:代表当前页面。
Window对象也提供一些全局函数:
函数名 | 作用 |
---|---|
alert() | 弹出提示框 |
close() | 关闭窗口 |
open() | 打开窗口 |
confirm() | 弹出一个确认框 |
setInterval() | 定时器,指定多少毫秒重复执行某个函数 |
setTimeout() | 定时器,指定多少毫秒后执行某个函数,只执行一次 |
clearInterval(id) | 取消定时器 |
clearTimeout(id) | 取消定时器 |
(1)open:打开一个窗口。
命令格式:
window.open(url, name, features, replace)
例如:
window.open("http://www.baidu.com", "测试", "width=500,height=300,left=100,top=50,scrollbars=no");
其中,features(特征)包含以下内容:
hannelmode=yes|no|1|0 | 是否使用剧院模式显示窗口。默认为 no。 |
---|---|
directories=yes|no|1|0 | 是否添加目录按钮。默认为 yes。 |
fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 |
height=pixels | 窗口文档显示区的高度。以像素计。 |
left=pixels | 窗口的 x 坐标。以像素计。 |
location=yes|no|1|0 | 是否显示地址字段。默认是 yes。 |
menubar=yes|no|1|0 | 是否显示菜单栏。默认是 yes。 |
resizable=yes|no|1|0 | 窗口是否可调节尺寸。默认是 yes。 |
scrollbars=yes|no|1|0 | 是否显示滚动条。默认是 yes。 |
status=yes|no|1|0 | 是否添加状态栏。默认是 yes。 |
titlebar=yes|no|1|0 | 是否显示标题栏。默认是 yes。 |
toolbar=yes|no|1|0 | 是否显示浏览器的工具栏。默认是 yes。 |
top=pixels | 窗口的 y 坐标。 |
width=pixels | 窗口的文档显示区的宽度。以像素计。 |
注意:某些特征并不是所有浏览器都支持。比如scrollbars。
(2)confirm:弹出一个确认框。如果点击确认,该方法返回true;如果点击取消,返回false。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function delUser() {
var b = window.confirm("确认要删除吗?");
if (b) {
alert("删除用户....");
}
}
</script>
</head>
<body>
<button onclick="delUser()">删除用户</button>
</body>
</html>
(2)定时器方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/date.js" ></script>
<script>
// 显示系统时间在页面
function showTime() {
var d = new Date();
d = d.formatDate();
// 把时间显示在aa标签。
document.getElementById("aa").innerHTML = d;
}
var taskId;
// 启动定时器
function start() {
// 每隔1s调用showTime函数一次
taskId = window.setInterval("showTime()", 1000);
}
// 关闭定时器
function stop() {
window.clearInterval(taskId);
}
</script>
</head>
<body>
<button onclick="start()">启动定时器</button>
<button onclick="stop()">关闭定时器</button>
<!-- 块标签
每一个标签都有id属性,一个html页面id属性不能够重复。
-->
<div id="aa"></div>
<script>
//showTime();
</script>
</body>
</html>
2.2 Lacation对象
location代表浏览器的地址栏。
location对象属性:
href:设置或返回地址栏中地址。
location对象的方法:
reload():刷新页面。
2.3 History对象
History代表浏览器的历史。
back():加载浏览器历史的前一个URL;
forward():加载浏览器历史的下一个URL;
go(n):加载浏览器历史的第n个URL;
比如:1代表加载下一个URL;-1代表加载上一个URL。
3 DOM编程
3.1 DOM介绍
DOM(Document Object Model) 文档对象模型。当浏览器解析html页面的时候,html解析器会对页面中每一个元素(标签、属性、文本、注释等)创建一个对象来描述,这些对象称为“DOM对象”。
Node节点:
标签节点:Element
属性节点:Attribute
文本节点:Text
注释节点:Comment
文档树:Document
文档树:浏览器在解析html的时候,html解析器会按照元素的顺序在内存中生成一颗文档树对象。我们在浏览器上看到的内容,实际上是文档树对象中元素的属性。所以,如果要访问html页面内容,可以通过元素对象的属性进行访问。所谓dom编程,就是通过文档树中元素对象的属性操作页面的内容。
3.2 节点的访问
document.getElementById():通过元素节点的id属性查询元素节点,该方法返回一个Element对象。
document.getElementsByTagName():通过元素名查询元素节点,该方法返回包含指定元素的数组。
document.getElementsByName():通过元素的name属性查找节点,该方法返回包含指定元素的数组。
document.getElementsByClassName():通过元素的class属性查找节点,该方法返回包含指定元素的数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="userName" value="jacky"/><br/>
<input type="password" id="userPass" value=""/><br/>
<input type="checkbox" name="hobby"/>吃
<input type="checkbox" name="hobby"/>喝
<input type="checkbox" name="hobby"/>玩<br/>
<script>
/*// 注意:获取元素对象之前必须要保证该元素标签被加载完。
var userNameNode = document.getElementById("userName");
//alert(userNameNode);
document.write(userNameNode.nodeName + "<br/>");
document.write(userNameNode.nodeValue + "<br/>");
document.write(userNameNode.nodeType + "<br/>");
// 根据标签名获取元素
var inputNodes = document.getElementsByTagName("input");
for (var i = 0; i < inputNodes.length; i++) {
var inputNode = inputNodes[i];
document.write(inputNode.nodeName + "<br/>");
}*/
var hobbyNodes = document.getElementsByName("hobby");
for (var i = 0; i < hobbyNodes.length; i++) {
var inputNode = hobbyNodes[i];
document.write(inputNode.nodeName + "<br/>");
}
</script>
</body>
</html>
通过关系查找节点:
父子关系:
parentNode:获取当前节点父节点;
firstChild:获取当前节点的第一个子节点;
lastChild:获取当前节点的最后一个子节点;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body><form>
<input id="userName"/>
<input type="submit"/>
</form>
<script>
var userNameNode = document.getElementById("userName");
// 获取父节点
var formNode = userNameNode.parentNode;
//document.write(formNode.nodeName + "<br/>");
var bodyNode = document.getElementsByTagName("body")[0];
// 获取第一个子节点
var formNode = bodyNode.firstChild;
document.write(formNode.nodeName + "<br/>");
// 获取最后一个子节点
var scriptNode = bodyNode.lastChild;
document.write(scriptNode.nodeName + "<br/>");
</script></body>
</html>
兄弟关系:
nextSibling:获取下一个兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);
previousSibling:获取上一个兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);
nextElementSibling:获取下一个兄弟节点;
previousElementSibling:获取上一个兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>用户注册</h3>
<form>
<input id="userName"/>
<input type="submit"/>
</form>
<script>
// ------------- 兄弟关系查找节点 ---------------
var formNode = document.getElementsByTagName("form")[0];
// 获取上一级的兄弟节点
var h3Node = formNode.previousSibling.previousSibling;
document.write(h3Node.nodeName + "<br/>");
var scriptNode = formNode.nextSibling.nextSibling;
document.write(scriptNode.nodeName + "<br/>");
</script></body>
</html>
document也提供获取一些对象的属性:
body:获取body对象;
forms:获取页面中所有的form元素,返回一个数组;
3.3 节点操作
# 创建元素节点,该方法返回一个Element对象
document.createElement("标签名")
# 追加节点
Element对象.appendChild(newElement)
# 在Element元素中,往childElement前面插入newElement
Element对象.insertBefore(newElement, childElement)
# 删除Element元素下的child元素
Element对象.removeChild(child)
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul><li>宫保鸡丁</li>
<li>海南鸡</li>
<li>东波肉</li></ul>
<script>
// 获取ul节点
var ulNode = document.getElementsByTagName("ul")[0];
// 获取最后一个li节点
var lastLiNode = ulNode.lastChild;
// 构建新的li
var newLiNode = document.createElement("li");
newLiNode.textContent = "口水鸡";
// 在最后li节点前插入新节点
ulNode.insertAfter(newLiNode, lastLiNode);
</script>
</body>
</html>
3.4 设置或获取元素节点的内容
Element对象提供一些属性:
innerHTML : 设置或获取元素节点的文本;例如:
textContext :设置或获取元素节点的文本;
value:设置或获取元素的value属性值;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>hello</p>
<input type="text" id="userName" />
</div>
<script>
var divNode = document.getElementsByTagName("div")[0];
//alert(divNode.innerHTML);
//alert(divNode.textContent);
//divNode.innerHTML = "<h1>world</h1>";
document.getElementById("userName").value = "jacky";
</script>
</body>
</html>
4 事件
所有html元素都可以绑定事件。事件以on开头。例如:onclick、onload、onSubmit等等。
事件的三要素:
- 事件源:事件发生的地方。
- 事件监听器:监听事件的发生。例如:onclick、onkeydown、onload等等。
- 处理函数:响应事件的函数。
一个html元素可以绑定多个事件监听器。
4.1 事件类型
鼠标事件:
事件名 | 说明 |
---|---|
onclick | 鼠标单击 |
ondbclick | 鼠标双击 |
onmousedown | 鼠标按下事件 |
onmouseup | 鼠标松开事件 |
onmousemove | 鼠标划过事件 |
onmouseout | 鼠标移出事件 |
焦点事件:
事件名 | 说明 |
---|---|
onfocus | 元素获得焦点后触发 |
onblur | 元素失去焦点后触发 |
onchange | 元素内容发生变化时候触发 |
其他事件:
事件名 | 说明 |
---|---|
onload | 页面加载完成后触发 |
onsubmit | 提交表单前触发,例如:客户验证 |
onload事件一般绑定在body标签中。
onsubmit事件一般绑定在form标签中。
5 正则表达式
5.1 创建正则表达式
方式一:/正则表达式/模式
方式二:new RegExp(“正则表达式”, “模式”)
i模式:如果指定了i模式,那么就忽略大小写。
g模式:如果指定了g模式,如果使用正则表达式查找字符串的内容,它会进行全文查找。
5.2 正则表达式的应用场景
5.2.1 客户端验证
test(): 匹配指定内容是否符合正则表达式。如果匹配就返回true,否则返回false。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkUserName() {
// 获取用户输入
var userName = document.getElementById("userName").value;
// 验证用户输入(非空、长度不能小于5位、必须是英文或数字组成)
var regex = /[a-z0-9]{5,}/i;
// 匹配
var isValid = regex.test(userName);
if (!isValid) {
document.getElementById("userNameMsg").textContent = "X 用户名格式不正确";
} else {
document.getElementById("userNameMsg").textContent = "√";
}
}
checkUserName();
</script>
</head>
<body>
<input type="text" id="userName" onblur="checkUserName()"/>
<span id="userNameMsg"></span>
</body>
</html>
5.2.2 查找字符串内容
exec:查找字符串符合正则表达式的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var data = "请联系我13232345232请联系我13232345243请联系我132323245232请联系我13232341232请联系我12323234523请联系我15932345232";
// 定义规则
var regex = /1\d{10}/g;
// 根据正则表达式查找指定字符串的内容
var phone = regex.exec(data)
while (phone != null) {
alert(phone);
phone = regex.exec(data)
}
</script>
</body>
</html>
5.2.3 替换字符串内容
字符串replace方法。
replace(regexp,new):把符合正则表达式的内容全部替换成new的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var blog = "请联系我13232345232请联系我13232345243请联系我132323245232请联系我13232341232请联系我12323234523请联系我15932345232";
// 定义规则
var regexp = /1\d{10}/g;
// 替换
blog = blog.replace(regexp, "##########");
alert(blog);
</script>
</head>
<body>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/81674.html