JavaScript 类型转换---数据类型的转换
1.通过使用 JavaScript 函数 例如:toString()
2.通过 JavaScript 自身自动转换 例如:var num1=100; var res=num1+”hello”;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 类型转换---数据类型的转换</title>
<script>
window.onload=function(){
//1.数字与字符串的相互转换
//将数字转换为字符串
/*
var num1=100;
//1.new String() 可以将数字转换为字符串
var str1=new String(num1);
//2.Number 方法 toString() 也是有同样的效果。
var num2=new Number(12.5);
var str2=num2.toString();
//3.toFixed(小数的位数)把数字转换为字符串，结果的小数点后有指定位数的数字。
var num3=new Number(168.5);
var str3=num3.toFixed(2);
//4.+""
var num4=200;
var str4=num4+"";
*/
//将字符串转换为数字
/*
var str="168.5";
//1.new Number() 可以将字符串转换为数字。
//var num1=new Number(str);
//alert(num1+100);
//2.包含数字值的字符串*1
var num2=str*1;
alert(typeof num2);
*/
//2.boolean与字符串的相互转换
//布尔值转换为字符串
/*
var flag=true;
//1、new String() 可以将布尔值转换为字符串。
var str1=new String(flag);
//alert(str1.length);
//2.Boolean 方法 toString() 也有相同的效果。
var boo1=new Boolean(false);
var str2=boo1.toString();
alert(typeof str2);
*/
//字符串转换为布尔值
//空字符串--false 非空字符串--true 【new Boolean(字符串)】
//3.将数字与布尔值的相互转换
//数字转换为布尔值
//0--false 非0数字--true [new Boolean(数字)]
//布尔值转换为数字
/*
//1.new Number(布尔值)
var num1=new Number(true); //1
var num2=new Number(false); //0
//2.乘1【*1】
var num3=true*1;
var num4=false*1;
*/
//3.时间日期与数字的转换
//将时间日期转换为数字
/*
//1.new Number()
var date1=new Date();
var num1=new Number(date1);
//alert(num1);
//2.时间日期对象的getTime()
var date2=new Date();
var num2=date2.getTime();
alert(typeof num2);
*/
//将数字转换为日期
/*
//1.new Date();
var num1=1000;
var date1=new Date(num1);
//alert(date1);
//2.setXXXX()方法
var num2=2100;
var date2=new Date();
date2.setFullYear(num2);
alert(date2.getFullYear());
*/
//4.日期与字符串的相互转换
//将日期转换为字符串
//1.new String();
//2.Date 方法 toString() 也有相同的效果
//将字符串转换为日期
//1.new Date()
}
</script>
</head>
<body>
</body>
</html>
DOM对象
DOM--Document Object Model[文档对象模型]
当网页被加载时，浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树
1.DOM可以完成的功能
1.JavaScript 能够改变页面中的所有 HTML 元素
2.JavaScript 能够改变页面中的所有 HTML 属性
3.JavaScript 能够改变页面中的所有 CSS 样式
4.JavaScript 能够对页面中的所有事件做出反应
2. 查找 HTML 元素
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
2.1. getElementById(id属性值);通过 id 查找 HTML 元素
2.2. getElementsByTagName(标签名)通过标签名查找 HTML 元素
2.3. getElementsByClassName(class属性值)通过类名找到 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象1</title>
<script>
//得到dom对象
//1.getElementById(id属性值);通过 id 查找 HTML 元素转换成dom对象
//2.getElementsByTagName(标签名)通过标签名查找 HTML 元素转换成dom对象--多个就是数组对象
//3.getElementsByClassName(class属性值)通过class属性值找到 HTML 元素转换成dom对象--多个就是数组对象
function testByID(){
var domp1=document.getElementById("p1"); //[object HTMLParagraphElement]
domp1.style.color="red";
var domp2=document.getElementById("p2");//[object HTMLParagraphElement]
domp2.style.color="blue";
domp2.style.fontSize="30px";
var domp3=document.getElementById("p3");//[object HTMLParagraphElement]
domp3.style.fontSize="40px";
}
function testByTagName(){
var domarray=document.getElementsByTagName("p"); //[object HTMLCollection]
var size=20;
for(var i=0;i<domarray.length;i++){
domarray[i].style.fontSize=size+"px";
size=size+10;
}
}
function testByClassName(){
var domclass1=document.getElementsByClassName("p1"); //[object HTMLCollection]
domclass1[0].style.fontSize="40px";
var domclass2=document.getElementsByClassName("p2"); //[object HTMLCollection]
alert(domclass2.length);
}
</script>
</head>
<body>
<p id="p1">p元素测试getElementById(id属性值)</p>
<p id="p2" class="p1">p元素测试getElementById(id属性值)</p>
<p id="p3" class="p2">p元素测试getElementById(id属性值)</p>
<p id="p3" class="p2">p元素测试getElementById(id属性值)</p>
<input type="button" value="测试getElementById(id属性值)"
onclick="testByID();">
<input type="button" value="测试getElementsByTagName(标记名称)"
onclick="testByTagName();">
<input type="button" value="测试getElementsByClassName(class属性值)"
onclick="testByClassName();">
</body>
</html>
3.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]
innerHTML 属性--改变页面中HTML 元素的文本内容----注意:innerHTML中设置的字符串内容中有html标记，那么这个被包含的html标记会被解释运行。
innerText 属性--改变页面中HTML 元素的文本内容----- 注意:innerText中设置的字符串内容中有html标记，那么这个被包含的html标记会被作为字符串输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]</title>
<script>
function testinnerHTML(){
var p1dom=document.getElementById("test1");
//p1dom.innerHTML="p元素中的内容被改变";
p1dom.innerHTML="<h1>p元素中的内容被改变</h1>";
}
function testinnerText(){
var p2dom=document.getElementById("test2");
//p2dom.innerText="p元素中的内容被改变";
p2dom.innerText="<h1>p元素中的内容被改变</h1>";
}
</script>
</head>
<body>
<p id="test1">测试innerHTML属性改变html标记的内容</p>
<input type="button" value="测试innerHTML" onclick="testinnerHTML();">
<p id="test2">测试innerText属性改变html标记的内容</p>
<input type="button" value="测试innerText " onclick="testinnerText();">
</body>
</html>
4.JavaScript 能够改变页面中的所有 HTML 属性
属性在html和css中都有。
Html中的属性---是给浏览器解释运行html标记时通过附加信息，往往出现在html的开始标记中，如果有多个中间使用空格分离。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5.JavaScript 能够改变页面中的所有 HTML 属性</title>
<script>
function testHtmlAtti(){
var imgdom=document.getElementById("img1");
//dom对象.具体的html属性名称=属性名称对应的属性值；
//var val=imgdom.src;
//src--具体的html属性名称
imgdom.src="imgs/close.PNG";
}
</script>
</head>
<body>
<img id="img1" src="imgs/open.PNG" />
<input type="button" value="测试控制HTML属性" onclick="testHtmlAtti();">
</body>
</html>
5.JavaScript 能够改变页面中的所有 CSS 样式
dom对象.style.具体的css属性名称=属性名称对应的属性值；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 能够改变页面中的所有 CSS 样式</title>
<style>
#div1{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script>
function testCss(){
var divdom=document.getElementById("div1");
var w=divdom.style.width;
alert(w);
divdom.style.width="200px";
divdom.style.height="200px";
}
</script>
</head>
<body>
<div id="div1" ></div>
<input type="button" value="测试控制css属性" onclick="testCss();">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
