Bom和Dom编程以及js中prototype的详解
2016-10-30 15:03
260 查看
一.Bom编程：
1.事件练习：
2.循环打开窗口以及浏览器的大小位置设置练习：
二. Dom编程：
1.几种找dom树节点方法的简单练习：
getElementById();
getElementsByName();
getElementsByTagName();
2.通过复选框求商品价格的小练习：
3.通过关系找标签，创建添加删除标签的练习以及实现在表格中添加删除多个文件，实现一个日期选择的联动框：
4.通过css的操作，实现一个验证码；以及正则表达式判定一个表单
三. prototype：
1.js中的简单练习以及完成查询对应月份的日期、通过prorotype完成字符串翻转，显示系统时间：
reverse.js:
欢迎访问handsomecui的blog地址：
http://www.cnblogs.com/handsomecui/
网站：handsomecui.top
1.事件练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function getCurrentTime(){
var date = new Date();
var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
//alert(timeInfo);
var spanobj = document.getElementById("time");
spanobj.innerHTML = timeInfo.fontcolor("red");
}
function showTime(){
getCurrentTime();
//window.setInterval("getCurrentTime()",1000);
}
function hideTime(){
var spanobj = document.getElementById("time");
spanobj.innerHTML = "";
}
function clickTest(){
alert("单击");
}
function dblclick(){
alert("双击");
}
function showInfo(){
var usename=document.getElementById("username");
usename.innerHTML="请输入账号".fontcolor("red");
}
function hideInfo(){
var usename=document.getElementById("username");
usename.innerHTML="";
}
//onchange
function showURL(){
alert(location.href);
}
function download(){
location.href="http://handsomecui.top";
}
function refresh(){
location.reload();
}
//setInterval("refresh()",1000);
document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");
document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");
document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");
document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");
</script>
</head>
<body onload="showTime()">
<span onmousemove="showTime()" onmouseout="hideTime()">显示当前系统时间。。。</span><span id="time"></span>
<input type="button" onclick="clickTest()" ondblclick="dblclick()" value="点击" />
<br/>
username:<input type="text" onfocus="showInfo()" onblur="hideInfo()" /><span id="username"></span>
<input type="button" onclick="showURL()" value="显示地址栏" />
<span onclick="download()">下载电影</span>
</body>
</html>2.循环打开窗口以及浏览器的大小位置设置练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>BOM练习</title>
<script>
function showAd(){
window.open("http://baidu.com","_blank","height=400px,width=400px,toobar=no,location=no,top=200px");
}
function small(){
window.resizeTo(300,200);
}
var id = setInterval("showAd()", 2000);
function clearTask(){
clearInterval(id);
}
//setTimeout
</script>
</head>
<body>
<input type="Button" onclick="showAd()" value="下载电影"/>
<input type="Button" onclick="small()" value="变小">
<input type="Button" onclick="clearTask()", value="取消任务"/>
</body>
</html>二. Dom编程：
1.几种找dom树节点方法的简单练习：
getElementById();
getElementsByName();
getElementsByTagName();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function showText(){
var input=document.getElementById("inputtest");
input.value="设置好了";
}
function showImg(){
var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++){
images[i].src="../data/1.jpg";
images[i].width=200;
images[i].height=200;
}
}
function showdiv(){
var mydivs=document.getElementsByName("mydiv");
//alert(mydivs.length);
for(var i=0;i<mydivs.length;i++){
mydivs[i].innerHTML="哈哈哈哈".fontcolor("red");
}
}
</script>
</head>
<body>
<input type="text" value="请输入内容" id="inputtest" />
<input type="button" value="显示内容" id="button" onclick="showText()" />
<img src=""/>
<img src=""/>
<img src=""/>
<input type="button" value="显示图像" onclick="showImg()" />
<div name="mydiv"></div>
<div name="mydiv"></div>
<div name="mydiv"></div>
<input type="button" value="显示div" onclick="showdiv()" />
</body>
</html>2.通过复选框求商品价格的小练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>求商品价格</title>
<script>
function allSelect(ap){
var p=document.getElementsByName("product");
for(var i = 0; i < p.length; i++){
if(ap.checked == 1)
p[i].checked = 1;
else
p[i].checked = 0;
}
}
function count(bt){
var p=document.getElementsByName("product");
var sum=0;
for(var i = 0; i < p.length;i++){
if(p[i].checked)
sum += parseInt(p[i].value);
}
bt.value="总金额为";
var money=document.getElementsByTagName("span")[0];
money.innerHTML=(" ¥"+sum).fontcolor("green");
}
</script>
</head>
<body>
商品列表：<br/>
<input type="checkBox" name="product" value="2800" id="product1"/>笔记本电脑2800元<br/>
<input type="checkBox" name="product" value="2600" id="product2"/>笔记本电脑2600元<br/>
<input type="checkBox" name="product" value="3800" id="product3"/>笔记本电脑3800元<br/>
<input type="checkBox" name="product" value="3600" id="product4"/>笔记本电脑3600元<br/>
<input type="checkBox" name="product" value="2700" id="product5"/>笔记本电脑2700元<br/>
<input type="checkBox" name="product" value="2900" id="product6"/>笔记本电脑2900元<br/>
<input type="checkBox" name="product" value="3700" id="product7"/>笔记本电脑3700元<br/>
<input type="checkBox" name="product" value="3900" id="product8"/>笔记本电脑3900元<br/>
<input type="checkBox" id="allproduct" onclick="allSelect(this)" />全选<br/>
<input type="button" onclick="count(this)" value="总金额：" />
<span></span>
</body>
</html>3.通过关系找标签，创建添加删除标签的练习以及实现在表格中添加删除多个文件，实现一个日期选择的联动框：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过关系找标签</title>
<script>
/*
通过关系(父子关系、兄弟关系)找标签。
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
------------------------------------------------------------
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点)
我们可以通过标签的类型进行判断筛选：
文本节点的类型： 3
注释的节点类型： 8
标签节点的类型： 1
创建字节入插入节点、设置节点的属性。
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(newNode,oldNode);
*/
function isRun(y){
if(y%400==0 || (y%4==0&&y%100!=0))
return 1;
else
return 0;
}
function start(){
var s="";
var bodyNode = document.getElementsByTagName("body")[0];
s = s + "body的父节点：" + bodyNode.parentNode.nodeName + "<br/>";
var showText = document.getElementsByTagName("span")[0];
var children = bodyNode.childNodes;
s = s + "body子节点是：" + "<br/>";
for(var i = 0; i < children.length; i++){
s = s + children[i].nodeName + " 对象类型是: " + children[i].nodeType +"<br/>";
}
s = s + "span的下一个兄弟节点是：" + showText.nextSibling.nodeName + "<br/>";
s = s + "span的上一个兄弟节点是：" + showText.previousSibling.nodeName + "<br/>";
showText.innerHTML = s.fontcolor("red");
var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];
var selectNodeYear = document.getElementsByTagName("select")[0];
var selectNodeMonth = document.getElementsByTagName("select")[1];
var selectNodeDay = document.getElementsByTagName("select")[2];
var curDate = new Date();
//alert(curDate.getYear());
//初始化年
for(var i=1900; i<=curDate.getFullYear(); i++){
var newOption = document.createElement("option");
newOption.innerHTML = i;
if(i == curDate.getFullYear()){
newOption.setAttribute("selected","selected");
}
selectNodeYear.appendChild(newOption);
}
//初始化月
for(var i=1; i<=12; i++){
var newOption = document.createElement("option");
newOption.innerHTML = i;
if(i == curDate.getMonth()+1){
newOption.setAttribute("selected","selected");
}
selectNodeMonth.appendChild(newOption);
}
//初始化日
if(isRun(curDate.getFullYear()))
m[2] = 29;
else
m[2] = 28;
//alert(m[2]);
//alert(curDate.getDay());注意getDay是获取星期几的；
for(var i = 1; i <= m[curDate.getMonth()+1]; i++){
var newOption = document.createElement("option");
newOption.innerHTML = i;
if(i == curDate.getDate()){
newOption.setAttribute("selected","selected");
}
selectNodeDay.appendChild(newOption);
}
}
var num=1;
function add(){
var inputNode = document.createElement("input");
inputNode.setAttribute("type", "button");
inputNode.setAttribute("value", "新按钮"+(num++));
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode);
}
function addfile(inputNode){
var tbodyNode=document.getElementsByTagName("tbody")[0];
var newtr = document.createElement("tr");
var newtd1 = document.createElement("td");
var newtd2 = document.createElement("td");
newtd1.innerHTML = "<input type='file'/>";
newtd2.innerHTML = "<a href='#' onclick='deletefile(this)'>删除附件</a>";
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
//tableNode.appendChild(newtr);
//alert(inputNode.parentNode.nodeName);
tbodyNode.insertBefore(newtr,inputNode.parentNode.parentNode);//注意必须是tr的直接父节点，所以是tbody
}
function deletefile(deleteNode){
var tbodyNode=document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(deleteNode.parentNode.parentNode);
}
//月改变对应修改日的范围
function addDay(){
var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];
var selectNodeYear = document.getElementsByTagName("select")[0];
var selectNodeMonth = document.getElementsByTagName("select")[1];
var selectNodeDay = document.getElementsByTagName("select")[2];
selectNodeDay.length = 0;
/*
if(selectNodeMonth[i].getAttribute("selected") == "selected"){
alert(i);
}
这样只会找到默认显示的位置假设今天是10月那么只会找到9
可以直接用selectedIndex属性来得到选中的月份
*/
if(isRun(selectNodeYear.selectedIndex + 1900))
m[2] = 29;
else
m[2] = 28;
//alert(m[2]);
//alert(curDate.getDay());注意getDay是获取星期几的；
for(var i = 1; i <= m[selectNodeMonth.selectedIndex + 1]; i++){
var newOption = document.createElement("option");
newOption.innerHTML = i;
selectNodeDay.appendChild(newOption);
}
}
</script>
</head>
<body onload="start()">
<!-- gasfa -->
<span></span>
<input type="button" onclick="add()" value="点我" />
<table>
<tr>
<td><input type="file"/></td> <td><a href="#" onclick="deletefile(this)">删除附件</a></td>
</tr>
<tr>
<td><input type="button" value="添加附件" onclick="addfile(this)"/></td>
</tr>
</table>
年<select onchange="addDay()"></select>
月<select onchange="addDay()"></select>
日<select></select>
</body>
</html>4.通过css的操作，实现一个验证码；以及正则表达式判定一个表单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
/*
正则表达式的创建方式：
""
方式1：
/正则表达式/模式
方式2：
new RegExp("正则表达式",模式);
正则表达式对象常用的方法：
test() 使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。
模式：
g （全文查找出现的所有 pattern）
i （忽略大小写）
*/
function createCode(){
var d = ['1', '2', '你', '好', 'A', 'B'];
var str="";
for(var i = 0; i < 4; i++){
//alert(Math.random()*6);
str += d[Math.floor(Math.random()*d.length)];
}
var spanNode = document.getElementById("code");
spanNode.innerHTML = str;
spanNode.style.fontSize = '16pt';
spanNode.style.fontStyle = 'italic';
spanNode.style.backgroundColor = 'gray';
spanNode.style.textDecoration = 'line-through';
spanNode.style.color = 'green';
}
function searchStr(){
var strNode = document.getElementsByTagName("input")[0];
var str = strNode.value;
var reg = /^[A-Z0-9]+$/i;
var spanNode = document.getElementById("test");
spanNode.innerHTML = '匹配吗？' + reg.test(str) + '<br/>';
reg = /\b[a-z]{3}\b/gi;
var line="";
spanNode.innerHTML = '';
while((line=reg.exec(str)) != null){
spanNode.innerHTML = spanNode.innerHTML + line + '<br/>';
}
}
function checkName(){
var inputNode = document.getElementById("userName");
var spanNode = document.getElementById("userId");
var content = inputNode.value;
var reg = /^[a-z][a-z0-9]{5}$/i;
if(reg.test(content)){
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}
else{
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}
function checkPass(){
}
function ensurepass(){
var pwd1Node = document.getElementById("pwd");
var pwd2Node = document.getElementById("ensurepwd");
var pwd1 = pwd1Node.value, pwd2 = pwd2Node.value;
var spanNode = document.getElementById("ensure");
if(pwd1 == pwd2){
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}
else{
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}
function checkEmail(){
var email = document.getElementById("email").value;
var spanNode = document.getElementById("emailspan");
var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;
if(reg.test(email)){
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}
else{
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}
function checkAll(){
var userName = checkName();
var email = checkEmail();
var ensure = ensurepass();
if(userName&&email&&ensure){
return true;
}else{
return false;
}
}
</script>
<body>
<span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>
<br/>
<input type="text" /><input type="button" value='查询' onclick='searchStr()'/>
<br/>
<span id='test'></span>
<form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->
<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
<tr>
<td width="25%">姓名:</td>
<td>
<input type="text" name="userName" id="userName" onblur="checkName()"/>
<span id="userId"></span>
</td>
</tr>
<tr>
<td >密码:</td><td>
<input type="password" name="pwd" id="pwd" onblur="checkPass()"/>
<span id="passId"></span>
</td>
</tr>
<tr>
<td>确认密码:</td><td>
<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" /> <span id="ensure"></span>
</td>
</tr>
<tr>
<td>邮箱</td><td>
<input type="text" name="email" id="email" onblur="checkEmail()"/>
<span id="emailspan"></span>
</td>
</tr>
<tr>
<td>性别</td><td>
<input type="radio" checked="ture" name="gender" id="male" value="male"/>
男
<input type="radio" name="gender" value="female"/>
女</td>
</tr>
<tr>
<td>爱好:</td><td>
<input type="checkbox" name="like" />
eat
<input type="checkbox" name="like" />
sleep
<input type="checkbox" name="like"/>
play
<span id="hobbySpan"></span>
</td>
</tr>
<tr>
<td>城市</td><td>
<select name="city" id="city">
<option value=""> 请选择</option>
<option value="bj"> 北京 </option>
<option value="gz"> 广州 </option>
<option value="sh"> 上海 </option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><!--提交按钮-->
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>三. prototype：
1.js中的简单练习以及完成查询对应月份的日期、通过prorotype完成字符串翻转，显示系统时间：
<html>
<head>
<meta charset="gb2312"/>
<title>JavaScript Exercise</title>
<script>
function add(a, b){
with(document){
write("a + b = " + (a+b) + "<br/>");
for(var index in arguments){
write("第" + index + "个元素是：" + arguments[index] + "<br/>");
}
}
}
add(1, 2);
function showday(){
var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];
var inputobj = document.getElementById("month");
alert(inputobj.value + "月的天数是：" + m[parseInt(inputobj.value)]);//这里不要parseint也可以，会自动转
}
</script>
</head>
<body>
<script>
var arr=new Array(17,25,10,18,1,110);
arr.reverse();
arr.sort(cmp);
arr = arr.join(",");
for(var i=0; i <arr.length; i++){
document.write(arr[i]);
}
function cmp(num1,num2){
return num1-num2;
}
</script>
<script>
function Person(id, name){
this.id = id;
this.name = name;
this.say = function(){
alert(name + "呵呵");
}
}
var p = new Person(110,"张三");
p.say();
var tool = new ArrayTool();
function ArrayTool(){
this.Max = function(arr){
var max = arr[0];
for(var i = 1; i < arr.length; i++){
if(arr[i] > max){
max = arr[i];
}
}
return max;
}
this.searchEle = function(arr, Ele){
for(var i = 0; i < arr.length; i++){
if(arr[i] == Ele)
return i;
}
return -1;
}
}
Max = function(){
var max = this[0];
for(var i = 1; i < this.length; i++){
if(this[i] > max){
max = this[i];
}
}
return max;
}
//prototype
Array.prototype.getMax = Max;
Array.prototype.getindex = function(Ele){
for(var i = 0; i < this.length; i++){
if(this[i] == Ele)
return i;
}
return -1;
}
var arr = [25,12,110,26,21];
document.write("最大值是：" + tool.Max(arr) + " 26的索引是：" + tool.searchEle(arr,26) + "<br/>");
document.write("哈哈最大值： " + arr.getMax() + " 哈哈12的索引是：" + arr.getindex(12) + "<br/>");
</script>
月份：<input id="month" type="text" /><input type="button" value="查询" onClick="showday()"/>
<br/>
当前系统时间：<span id="time"></span>
<script src="reverse.js" type="text/javascript"></script>
</body>
<script>
function getCurrentTime(){
var date = new Date();
var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
var spanobj = document.getElementById("time");
spanobj.innerHTML = timeInfo.fontcolor("red");
}
getCurrentTime();
window.setInterval("getCurrentTime()",1000);
</script>
</html>reverse.js:
String.prototype.tocharArray = function(){
var arr = new Array();
for(var i = 0; i < this.length; i++){
arr[i] = this.charAt(i);
}
return arr;
}
var str = "你们好屌啊";
var arr = str.tocharArray();
document.write("<br/>转化成字符数组后：" + arr.join(","));
/*
for(i in arr){
document.write(arr[i]);
}
*/
String.prototype.reverse = function(){
var arr = this.tocharArray();
arr.reverse();
return arr.join("");
}
arr = str.reverse();
document.write("<br/> 翻转后：" + arr);欢迎访问handsomecui的blog地址：
http://www.cnblogs.com/handsomecui/
网站：handsomecui.top
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 详解js中prototype、constructor以及__proto__的关系
- JAVA-25.2-js提高篇、BOM编程、事件编程、DOM编程、js正则表达式、表单验证案例
- javascript中apply方法和call方法的作用以及prototype.js中的应用
- Javascript入门学习第六篇 js DOM编程第1/2页
- 详解android解析Xml的三种方式——DOM、SAX以及XMLpull
- js变量以及其作用域详解
- 详解Android解析Xml的三种方式——DOM、SAX以及XMLpull
- Prototype使用指南之dom.js
- 【OpenGL】游戏编程常用TGA图像格式详解以及加载纹理编程实现
- js变量以及其作用域详解
- js中prototype详解
- JS , CSS ,image HTML DOM的加载过程 以及 总结JS的基本用法
- prototype.js开发详解【老外的网站】
- javascript中apply方法和call方法的作用以及prototype.js中的应用
- 【转】js变量以及其作用域详解
- Javascript入门学习第六篇 js DOM编程第1/2页
- Js DOM编程（1）
- javascript dom 操作详解 js加强
- js基础学习第一天（关于DOM和BOM）一