3.HTML-javascript（二）
3.10 js 数组
3.10.1 数组的三种定义方式
<html>
<head>
<script type="text/javascript">
// 数组的三种定义方式
var arr=[1,2，"a",true];
var arr=new Array(5);//定义一个长度为5的数字
var arr=new Array(1,"1",3);//定义三个长度的数组
</script>
</head>
<body>
</body>
</html>
3.10.2 数组的属性和方法
<html>
<head>
<script type="text/javascript">
//属性
//arr.length:数组的长度
//方法
//concat():连接数组
var arr1=[1,2,3];
var arr2=[4,5,6];
document.write(arr1.concat(arr2));
//join():把数组通过指定的字符分割成字符串
var arr3=["a","b","c"];
document.write(arr3.join("-"));//输出a-b-c
//push():向数组添加新的元素，并返回新的数组长度
var arr=["zhangsan","lisi","wangwu"];
document.write(arr+"-----arr.length "+arr.length);
document.write("<br/>");
var newLength=arr.push("zhaoliu");
document.write(arr+"-arr.new length "+newLength);
var arr1=["a","b","c"];
var arr2=["1","2"];
arr1.push(arr2);//返回4，数组中只有4个元素并且最后一个元素为1，2
//pop():删除数组最后一个元素，并将这个元素返回
var arr3=["qqq","wwww","eeee","rrrrr"];
document.write("old arr: "+arr3);
document.write("<br/>");
document.write(arr3.pop());
document.write("<br/>");
document.write("new arr: "+arr3);
//reverse():颠倒数组中元素的顺序
var arr4=["a","b","c","d"];
document.write("old arr: "+arr4);
document.write("<br/>");
document.write("new arr: "+arr4.reverse());
</script>
</head>
<body>
</body>
</html>
3.11 js的Date对象
<html>
<head>
<script type="text/javascript">
//获取当前时间
var date=new Date();
document.write(date);//输出Tue Nov 15 2016 21:23:34 GMT+0800 (中国标准时间)
//格式化时间
date.toLocaleString()
//获取当前的年
date.getFullYear();
//获取当前的月份
date.getMonth()//返回0-11
//获取当前的星期
date.getDay()//返回0-6
//获取当前的天
date.getDate()
//获取当前的小时
date.getHours()
//获取当前的分钟
date.getMinutes()
//获取当前的秒
date.getSeconds()
//获取1970.1.1到现在的毫秒数
date.getTime();
</script>
</head>
<body>
</body>
</html>
3.12 js的Math对象(数学运算)
ceil():向上舍入
floor():向下舍入
round():四舍五入
random():得到0-1之间的随机数(伪随机)
得到0-10之间的随机整数的方法
Math.floor(Math.random()*10)
pow(x,y):返回x的y次幂
<html>
<head>
<title>Math</title>
<script type="text/javascript">
document.write("向下取整:"+Math.floor(1.5)+"<br/>");
document.write("向上取整:"+Math.ceil(1.5)+"<br/>");
document.write("四舍五入:"+Math.round(1.4)+"<br/>");
document.write("随机数:"+Math.random()+"<br/>");
document.write("次方计算:"+Math.pow(2,64)+"<br/>");
</script>
</head>
<body>
</body>
</html>
3.13 js的全局函数
//不属于任何一个对象的方法，可以直接调用
<html>
<head>
<title>Math</title>
<script type="text/javascript">
//eval()直接执行js代码
var str="alert('aaa');";
eval(str);
//encodeURI():对字符进行编码
var c = "兆后面的单位";
alert(encodeURIComponent(c));
//decodeURI():对字符进行解码
alert(decodeURI("%E5%85%86%E5%90%8E%E9%9D%A2%E7%9A%84%E5%8D%95%E4%BD%8D"));
// encodeURIComponent():类似encodeURI
// decodeURIComponent():类似decodeURI()
//区别在于，不编码的字符数量有区别
//isNaN()判断是否是数字，如果是数字返回false，否则返回true
var str="123";
alert(isNaN(str));
// parseInt():把字符串转换成数字
var str="123";
document.write(parseInt(str)+1);
</script>
</head>
<body>
</body>
</html>
3.12 js的bom对象
23.12.1 bom : broswer object model（浏览器对象模型）
<html>
<head>
<title>bom对象</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
// navigator：获取客户机的信息(浏览器的信息)
document.write(navigator.appName);
document.write(navigator.appVersion);
//screen：屏幕的宽高(火狐显示的是浏览器缩放宽高)
document.write("<br/>"+screen.width+"*"+screen.height);
//location:请求的url地址
//href:获取或设置请求的url地址
document.write("<br/>"+location.href);
location.href="https://www.baidu.com";
//history:请求url的历史记录
//后退到上一个页面
history.back();
history.go(-1);
//前进到下一个页面
history.forward();
history.go(1);
</script>
</head>
<body>
</body>
</html>
window方法及定时器方法
<html>
<head>
<title>bom对象</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//alert():简单提示框
var str="aaa";
//alert(str);
//confirm(message):确认取消框
var str1="是否删除";
var flag=confirm(str1);
if(flag==true){
alert("删除成功");
}else{
alert("删除失败");
}
//prompt(str1,str2):输入对话框
str1:提示文字
str2:输入框的默认值
var str=prompt("请输入手机号","18000000000");//有返回值，点确定返回输入框的内容，取消返回null
alert(str);
//open(str1,str2,str3):打开一个新的窗口
str1:新窗口的url地址
str2:name，可省略
str3:新窗口的特征，比如宽高
//close():关闭窗口，兼容性特别差
//setInterval(js代码,毫秒数):隔多少毫秒执行一次js代码
返回一个ID
//setTimeout(js代码,毫秒数):在多少毫秒后执行一次js代码，且只会执行一次
返回一个ID
//clearInterval(ID):清除setInterval设置的定时器
//clearTimeout(ID):清楚setTimeout设置的定时器
function dingshiqi(){
alert("aaa");
}
//设定一个弹框方法，每隔4秒执行一次
//var inid=setInterval("dingshiqi()",4000);
//设定一个弹框方法，4秒后只执行一次
var tiid=setTimeout("dingshiqi()",4000);
function clear1(){
//清除重复调用的定时器
clearInterval(inid);
//清除一次调用的定时器
clearTimeout(tiid);
}
</script>
</head>
<body>
</body>
</html>
3.13 js的dom对象
3.13.1 document object model : 文档对象模型
文档 : 超文本文档，
对象 ： 提供了属性和方法
模型 : 使用方法和属性操作文档
想要操作这些文档，需要把这些文档封装成对象，比如标签，ID，文本；
解析过程：
根据html的层级结构，在内存中分配一个树形结构，把html的每部分都封装成对象
document对象 : 整个文档
element对象 : 标签
属性对象 : name，id
文本对象 : 文本值
Node对象 : 所有对象的父对象，若对象里面方法找不到，在node对象中找
dom模型的变迁
DOM level 1 ： 专注于 HTML 和 XML 文档模型。它含有文档导航和处理功能。
DOM level 2 ： 在DOM Level 1的基础上，添加了样式表对象模型，定义了一个事件模型，
并提供了对XML命名空间的支持。
DOM level 3 ： 在DOM Level 2的基础上，规定了内容模型 (DTD 和 Schemas)
和文档验证。同时规定了文档加载和保存、文档查看、文档格式化和关键事件
DHTML : 不是语言，是很多技术的简称
html ： 封装数据
css ： 使用属性和属性值的设置样式
dom ： 操作html文档
javascript： 专门指的是js的语法语句
3.14 document对象
<html>
<head>
<title>Math</title>
<script type="text/javascript">
// write;
//1:向页面输出内容
//2:向页面输出html代码
//getElementById()
//获取第一个拥有指定id的标签对象。
var ip1=document.getElementById("ip1");
alert(ip1.value);
//getElementsByName()
//根据name获取一个对象数组
//通过name属性获取name为li11的对象的集合
var lis=document.getElementsByName("li11");
//alert(lis.length);
//getElementsByTagName()
//根据标签名获取对象数组
//通过标签名获取li的集合
var lis1=document.getElementsByTagName("li");
alert(lis1);
// 案例:动态添加列表节点
Element.appenChild()；添加一个子元素
document.createElement(tagName) 通过标签名创建一个标签对象
document.createTextNode(content) 创建一个文本对象
</script>
</head>
<body>
</body>
</html>
3.15 标签对象(element)
<html>
<head>
<title>Math</title>
<script type="text/javascript">
//要操作element，必须先通过document.getElement...获取到对象
//获取属性的值
input1.getAttribute("value")；//获取元素的value值
//设置属性和值
input1.setAttribute("value","11111")；//设置元素value值为"11111"
//删除属性
input1.removeAttribute("name")
//注意**不能删除value的值
//获取标签下面的子标签
//(1)使用属性childeNodes，但是兼容性很差
//(2)唯一有效的办法:getElementsByTagName方法
//操作dom树
//appendChild方法需要一个新的节点(li)
//先创建一个新的li节点
//1 新建li
//2 新建文本
//3 把文本添加到li上
//找到要添加节点的父节点
//调用父节点的appendChild
//新建li
var newLi=document.createElement("li");
//找到要添加节点的父节点
var ul1=document.getElementById("ul1");
//通过父节点查找里面有多少个子节点，然后把子节点的数量加1，当做新节点的文本
var lis=ul1.getElementsByTagName("li");
var len=lis.length+1;
//新建文本节点
var newText=document.createTextNode(len);
// 把文本节点添加到新建的li上
newLi.appendChild(newText);
//调用父节点的appendChild把新建的li添加到父节点上
ul1.appendChild(newLi);
//剪切效果
// 1 获取ul节点对象
// 2 获取div2对象
// 3调用div2的appendchild方法
var ul1=document.getElementById("ul1");
var div2=document.getElementById("div2");
div2.appendChild(ul1);
//insertBefore(newNode,oldNode):在某个节点之前添加一个节点
//newNode:新节点
//old:旧节点
/*
1 新建一个节点
1） 新建节点
2） 新建文本节点
3） 把文本节点放入新建的节点中
2 找到要在哪个节点前插入
3 找到父节点
4 调用插入方法
*/
function add1(){
//新建li节点
var newLi =document.createElement("li");
//新建文本节点
var newText = document.createTextNode("苏妲己");
//把文本节点放入新建的节点中
newLi.appendChild(newText);
//找到要在哪个节点前插入语
var li4=document.getElementById("li4");
//找到父节点
var ul1=document.getElementById("ul1");
//调用父节点的插入方法
ul1.insertBefore(newLi,li4);
}
// removeChild：删除节点
//只能通过父节点删除，不能自己删除自己
/*
1 找到要删除的节点
2 找到父节点
3 调用父节点的删除方法删除
*/
var liy=document.getElementById("liy");
var ul1=document.getElementById("ul1");
ul1.removeChild(liy);
//replaceChild(newNode,oldNode):替换节点
//newNode:新节点
//old:旧节点
/*
1 新建一个节点
1 新建节点li
2 新建文本节点
3 把文本节点添加到新li节点上
2 找到要换掉的节点对象
3 获取父节点
4 父节点来调用替换方法
*/
//新建节点li
var newLi=document.createElement("li");
//新建文本节点
var newText=document.createTextNode("杨康");
//把文本节点添加到新li节点上
newLi.appendChild(newText);
// 找到要换掉的节点对象
var li1=document.getElementById("li1");
//获取父节点
var ul1=document.getElementById("ul1");
//父节点来调用替换方法
ul1.replaceChild(newLi,li1);
//cloneNode(boolean):复制节点，参数控制是否复制其中的子节点
/*
1 找到要复制的节点
2 调用cloneNode方法
3 找到要添加的div
4 添加到div里面
*/
// 找到要复制的节点
var ul1 =document.getElementById("ul1");
//调用cloneNode方法,必须接受这个新的克隆对象
var copyUl=ul1.cloneNode(true);
//找到要添加的div
var div2=document.getElementById("div2");
//添加到div里面
div2.appendChild(copyUl);
</script>
</head>
<body>
</body>
</html>
3.16 inner HTML
<html>
<head>
<title>Math</title>
<script type="text/javascript">
//不是DOM的标准属性，但是基本所有浏览器都支持
//获取标签内容
//var input = document.getElementById("span");
//var str = input.innerHTML;
//设置标签内容
//input.innerHTML="bbbbbbbbbb";
//也可以设置html代码
var div = document.getElementById("div");
div.innerHTML="<font color='red'>aaa</font>";
</script>
</head>
<body>
</body>
</html>
3.17 node对象属性
- nodeName
- nodeType
- nodeValue
使用dom解析html的时候，会把所有标签、属性、文本封装成对象，但是这些对象的node属性各不相同
<html>
<head>
<title>Math</title>
<script type="text/javascript">
var span1=document.getElementById("span1");
//alert(span1.nodeName);//span
//alert(span1.nodeType);//1
//alert(span1.nodeValue);//null
var sid=span1.getAttributeNode("value");
alert(sid.nodeName);//value
alert(sid.nodeType);//2
alert(sid.nodeValue);//aaa
var textNode=span1.firstChild;
alert(textNode.nodeName);//#text
alert(textNode.nodeType);//3
alert(textNode.nodeValue);//1111111
//父节点
//ul是li的父节点，可以通过li的parentNode属性获取
var li1=document.getElementById("li1");
var ul1=li1.parentNode;
//子节点
// li是ul的子节点
//childNodes:获取所有子节点，兼容性差
//lastChild：获取最后一个子节点
//firstChild:获取第一个子节点，不会忽略空格和换行，会导致不准确
var ul1=document.getElementById("ul1");
var li1=ul1.lastChild;
alert(li1.id);
//childNodes:获取所有的子节点，不会忽略空格和换行，会导致不准确
//唯一有效的方法是
var ul1=document.getElementById("ul1");
var lis=ul1.getElementsByTagName("li");
alert(lis.length);
//同辈节点
//nextSibling:下一个同辈节点,不会忽略空格换行
</script>
</head>
<body>
<span id="span1" name="sp1" value="aaa">1111111</span>
<ul id="ul1">
<li id="li1">1111</li>
<li id="li2">qqqq</li>
<li id="li3">aaaa</li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
