document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；
1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）
innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//改变H2
function changeH2(){
document.getElementById("h2Content").innerHTML="<span style='color:yellow;'>h1</span>改变后的内容";
//document.getElementById("h2Content").innerText="<span style='color:yellow;'>h2</span>改变后的内容";
}
//改变H3
function changeH3(){
document.getElementById("h3Content").style.color="blue";
document.getElementById("h3Content").style.fontSize="30px"; //font-size
}
/*验证表单输入值
姓名不能为空
*/
function validateData(){
var result = true;
var name = document.getElementById("txtName").value.trim();
debugger;
if(name == ""){
result = false;
}
if(result == false){
alert("输入项不能为空！");
}
return result;
}
</script>
<!--引入外部.js文件-->
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<h1>--Demo1--</h1>
<!--H2-->
<h2 id="h2Content">
h2默认内容。
<span>我是子内容。</span>
</h2>
<input type="button" value="改变h2" onclick="changeH2();" />
<br />
<!--H3-->
<h3 id="h3Content" style="color:red;">
h3默认内容。
</h3>
<input type="button" value="改变h3的样式" onclick="changeH3();" />
<br />
<!--表单-->
<form action="api/employee/save" method="POST" onsubmit="return validateData()">
姓名：<input type="text" id="txtName" />
<br />
<input type="submit" value="提交" />
</form>
<hr />
<!--外部方法-->
<h1>--调用外部js方法--</h1>
<input type="button" value="调用外部方法" onclick="outCode();" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="pTypeof"></p>
<p id="pInstanceof"></p>
<script>
document.getElementById("pTypeof").innerHTML =
"typeof \"test string\"->" +typeof "test string" + "<br>" +
"typeof 1234567->"+typeof 1234567 + "<br>" +
"typeof NaN->"+typeof NaN + "<br>" +
"typeof true->"+typeof true + "<br>" +
"typeof [1,2,3,4]->"+typeof [1,2,3,4] + "<br>" +
"typeof {name:'jack ma', sex:'女',age:50}->"+typeof {name:'jack ma', sex:'女',age:50} + "<br>" +
"typeof new Date()->"+typeof new Date() + "<br>" +
"typeof function () {}->"+typeof function () {} + "<br>" +
"typeof abc->"+typeof abc + "<br>" +
"typeof null->"+typeof null;
var Animal = function(){
type:"dog";
name:"旺财";
};
var animal = new Animal();
console.log((animal instanceof Animal))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
原始串：<span id="spnOriginal" style="background-color:green;"></span><br />
trim值：<span id="spnTrim" style="background-color:green;"></span><br />
indexOf("er")值：<span id="spnIndexOf"></span><br />
split(" ")后值：<span id="spnsSplit"></span><br />
replace(" ","-")值：<span id="spnReplace"></span><br />
replaceAll(" ","-")值：<span id="spnReplaceAll"></span><br />
substr(4,5)值：<span id="spnSubstr"></span><br />
substring(4,5)值：<span id="spnSubString"></span><br />
toLowerCase值：<span id="spnLowerCase"></span><br />
toUpperCase值：<span id="spnUpperCase"></span><br />
<hr />
"3"==3?<span id="spnEquals"></span><br />
"3"===3?<span id="spnFullEquals"></span><br />
"4"!=4?<span id="spnNotEquals"></span><br />
"4"!==4?<span id="spnFullNotEquals"></span><br />
</body>
<script type="text/javascript">
var originalString = " There is a flower in the \'tree\".\\ ";
var trimString = originalString.trim();
var indexOfString = originalString.indexOf("er");
var splitString = originalString.split(" ");
var replaceString = originalString.replace(" ","-");
var replaceAllString = originalString.replaceAll(" ","-");
var substrString = originalString.substr(4,5);
var substringString = originalString.substring(4,5);
var toLowerCaseString = originalString.toLowerCase();
var toUpperCaseString = originalString.toUpperCase();
console.log(originalString);
console.log(trimString);
console.log(indexOfString);
console.log(splitString);
console.log(replaceString);
console.log(replaceAllString);
console.log(substrString);
console.log(substringString);
console.log(toLowerCaseString);
console.log(toUpperCaseString);
//设置值
document.getElementById("spnOriginal").innerText = originalString + "(长度:" + originalString.length + ")";
document.getElementById("spnTrim").innerText = trimString+ "(长度:" + trimString.length + ")";
document.getElementById("spnIndexOf").innerText = indexOfString;
document.getElementById("spnsSplit").innerText = splitString;
document.getElementById("spnReplace").innerText = replaceString;
document.getElementById("spnReplaceAll").innerText = replaceAllString;
document.getElementById("spnSubstr").innerText = substrString;
document.getElementById("spnSubString").innerText = substringString;
document.getElementById("spnLowerCase").innerText = toLowerCaseString;
document.getElementById("spnUpperCase").innerText = toUpperCaseString;
document.getElementById("spnEquals").innerText = ("3"==3);
document.getElementById("spnFullEquals").innerText = ("3"===3);
document.getElementById("spnNotEquals").innerText = ("4"!=4);
document.getElementById("spnFullNotEquals").innerText = ("4"!==4);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>常用对象和函数的标题</title>
<meta charset="utf-8">
<style type="text/css">
div{
border:3px solid yellow
}
.content{
width:200px;
height:200px;
/*margin:0 auto;*/
}
</style>
</head>
<body>
<h1>--Array--</h1>
原始数组：<span id="spnOriginal"></span><br />
slice(1,3):<span id="spnSlice"></span><br />
sort后:<span id="spnSort"></span><br />
<hr />
<h1>--Date--</h1>
当前时间：<span id="spnCurrentDate"></span><br />
指定时间：<span id="spnTempDate"></span><br />
<hr />
<h1>--Math--</h1>
Math.random：<span id="spnRandom"></span><br />
Math.round(4.6)：<span id="spnRound"></span><br />
Math.ceil(4.6)：<span id="spnCeil"></span><br />
Math.floor(4.6)：<span id="spnFloor"></span><br />
Math.PI：<span id="spnPI"></span><br />
<hr />
<h1>--常用函数--</h1>
<div id="dvContent" class="content" style="background-color:blue;"></div>
<div id="dvContentTimeout" class="content" style="background-color:blue;"></div>
<div id="dvEval">eval("2+2*3"):<span id="spnEval"></span></div>
<hr />
</body>
<script type="text/javascript">
//Array
var originals = new Array();
originals[0] = "dog";
originals[1] = "cat";
originals[2] = "bird";
originals[3] = "other";
var sliceArray = originals.slice(1,3);
var sortArray = JSON.parse(JSON.stringify(originals)).sort(); //深拷贝
document.getElementById("spnOriginal").innerText = originals.toString();
document.getElementById("spnSlice").innerText = sliceArray.toString();
document.getElementById("spnSort").innerText = sortArray.toString();
//Date
var currentDate = new Date();
document.getElementById("spnCurrentDate").innerText = currentDate;
var tempDate = new Date();
tempDate.setFullYear(2008,08,08);
tempDate.setHours(08,08,08);
document.getElementById("spnTempDate").innerText = tempDate;
//Math
document.getElementById("spnRandom").innerText = Math.random();
document.getElementById("spnRound").innerText = Math.round(4.5);
document.getElementById("spnCeil").innerText = Math.ceil(4.6);
document.getElementById("spnFloor").innerText = Math.floor(4.6);
document.getElementById("spnPI").innerText = Math.PI;
//常用函数
var colors = ["red","green","blue"];
var index = 0;
setInterval(function(){ document.getElementById("dvContent").style.backgroundColor = colors[(index++)%3]; }, 1000);
setTimeout(function(){ document.getElementById("dvContentTimeout").style.backgroundColor = "black"; }, 2000);
document.getElementById("spnEval").innerHTML = eval("2+2*3");
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//页面加载
function init(){
alert("页面加载。");
/*一般要访问DOM(HTML标签)的运作都放在body的onload事件绑定的方法中，此时DOM已经渲染完成*/
/*绑定事件的常用三种方式：1、HTML标签属性绑定；2、JS对HTML标签属性赋值；3、通过事件监听方式*/
/*属性绑定*/
document.getElementById("btnPropertyValue").onclick = function(){
alert("通过HTML属性赋值处理事件");
}
/*事件监听*/
document.getElementById("btnListener").addEventListener("click",function(){
alert("通过HTML事件监听处理事件");
});
}
//姓名变化
function changeName(){
document.getElementById("spnName").innerText="你输入的姓名是："+document.getElementById("txtName").value;
}
//昵称按键
function keyNickName(event){
alert('你按下的键值是：'+event.keyCode);
}
</script>
</head>
<body onload="init();">
<!--onchange事件-->
<h1>--onchange事件--<h1>
姓名：<input type="text" id="txtName" onchange="changeName();" value="张三"/>
<span id="spnName"></span>
<br />
你喜欢的宠物：<select id="sltAnimal" onchange="alert('你喜欢的宠物是:'+this.value);">
<option value="狗">狗</option>
<option value="猫">猫</option>
<option value="鸟">鸟</option>
<option value="其他">其他</option>
</select>
<hr />
<h1>--onclick事件（属性绑定）--</h1>
<input type="button" onclick="alert('通过HTML属性绑定处理事件。');" value="属性绑定" />
<hr />
<h1>--onclick事件（属性赋值）--</h1>
<input id="btnPropertyValue" type="button" value="属性赋值" />
<hr />
<h1>--onclick事件（事件监听）--</h1>
<input id="btnListener" type="button" value="事件监听" />
<hr />
<h1>--onmouseover+onmouseout事件--</h1>
<img src="images/lemon.png" style="opacity:0.4;" onmouseover="this.style.opacity=1;" onmouseout="this.style.opacity=0.4;"></img>
<hr />
<h1>--onkeydown事件--</h1>
昵称：<input type="text" id="txtNickName" onkeydown="keyNickName(event);"/>
<hr />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>--window.history--</h1>
<input type="button" value="后退" onclick="window.history.back();" />
<br />
<h1>--window.location--</h1>
<input type="button" value="location.href" onclick="window.location.href='http://lemon.ke.qq.com';" />
<input type="button" value="window.open" onclick="window.open('http://lemon.ke.qq.com','_black');" />
<br />
<h1>--window.navigator--</h1>
<div id="dvNavigator">
</div>
<br />
<h1>--window.screen--</h1>
<div id="dvScreen">
</div>
<br />
<h1>--弹窗--</h1>
<div>
<input type="button" value="警告框" onclick="window.alert('这是一条警告！');" />
<input type="button" value="确认框" onclick="confirmResult()" />
<input type="button" value="提示框" onclick="promptResult()" />
</div>
<br />
</body>
<script type="text/javascript">
//navigator
var navigatorResult = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
navigatorResult+= "<p>浏览器名称: " + navigator.appName + "</p>";
navigatorResult+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
navigatorResult+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
navigatorResult+= "<p>硬件平台: " + navigator.platform + "</p>";
navigatorResult+= "<p>用户代理: " + navigator.userAgent + "</p>";
navigatorResult+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("dvNavigator").innerHTML = navigatorResult;
//screen
var screenResult = "<p>screen.width: " + screen.width + "</p>";
screenResult+= "<p>screen.height: " + screen.height + "</p>";
screenResult+= "<p>document.body.clientWidth: " + document.body.clientWidth + "</p>";
screenResult+= "<p>docuemnt.body.clientHeight: " + document.body.clientHeight + "</p>";
document.getElementById("dvScreen").innerHTML = screenResult;
//确认结果
function confirmResult(){
var result = window.confirm("你确认吗？");
if(result == true){
window.alert("你选择了[确定]。");
}else{
window.alert("你选择了[取消]。");
}
}
//提示结果
function promptResult(){
var result = window.prompt("请输入姓名:");
if(result){
window.alert(result + ",你好！");
}
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="window对象.html" >跳转到window对象.html</a>
<input type="button" value="前进" onclick="window.history.forward();" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>常用对象和函数的标题</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var department = {
"departmentID":1,
"departmentName":"财务部",
"employees":[
{
"employeeID":1,
"employeeName":"张三",
"sex":"男"
},
{
"employeeID":2,
"employeeName":"李四",
"sex":"男"
},
{
"employeeID":3,
"employeeName":"王五",
"sex":"女"
}
]
};
console.log(department);
console.log(department.employees[1].employeeName);
var departmentStr = JSON.stringify(department); //JavaScript对象转JSON字符串
console.log(departmentStr);
var emp = '{"empName":"jackma","age":18}'; //JSON字符串
console.log(JSON.parse(emp));
console.log("日志信息。");
console.debug("调试信息。");
console.error("错误信息。");
console.info("普通信息。");
console.warn("警告信息。");
console.assert("断言信息。");
//console.clear("清空信息。");
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Cookies的标题</title>
<meta charset="utf-8">
<script type="text/javascript">
//设置Cookie
function setCookie(cname,cvalue,exSeconds){
var d = new Date();
d.setTime(d.getTime()+(exSeconds*1000));
var expires = "expires = "+d.toGMTString();
document.cookie = cname + " = " + cvalue + "; " + expires;
}
//获取Cookie
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
//添加Cookie
function addCookie(){
var cookieName = document.getElementById("txtCookieName").value;
var cookieValue = document.getElementById("txtCookieValue").value;
var cookieEx = document.getElementById("txtCookieEx").value;
setCookie(cookieName,cookieValue,cookieEx);
}
//获取Cookie
function loadCookie(){
var cookieName = document.getElementById("txtCookieNameOfGet").value;
var cookieValue = getCookie(cookieName);
document.getElementById("spnCookies").innerText = cookieValue;
}
</script>
</head>
<body>
设置Cookies:<br />
名称:<input type="text" id="txtCookieName" />值:<input type="text" id="txtCookieValue" />过期时间:<input type="number" id="txtCookieEx" />秒
<input type="button" value="添加Cookie" onclick="addCookie()" /><br>
获取Cookies:<br />
名称:<input type="text" id="txtCookieNameOfGet" /><span id="spnCookies"></span><input type="button" value="获取Cookie" onclick="loadCookie()" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Storages的标题</title>
<meta charset="utf-8">
<script type="text/javascript">
//添加Storage
function addSessionStorage(){
var storageName = document.getElementById("txtSessionStorageName").value;
var storageValue = document.getElementById("txtSessionStorageValue").value;
window.sessionStorage.setItem(storageName,storageValue);
}
//获取Storage
function getSessionStorage(){
var storageName = document.getElementById("txtSessionStorageNameOfGet").value;
var storageValue = sessionStorage.getItem(storageName);
document.getElementById("spnSessionStorages").innerText = storageValue;
}
//添加Storage
function addLocalStorage(){
var storageName = document.getElementById("txtLocalStorageName").value;
var storageValue = document.getElementById("txtLocalStorageValue").value;
window.localStorage.setItem(storageName,storageValue);
}
//获取Storage
function getLocalStorage(){
var storageName = document.getElementById("txtLocalStorageNameOfGet").value;
var storageValue = localStorage.getItem(storageName);
document.getElementById("spnLocalStorages").innerText = storageValue;
}
</script>
</head>
<body>
<h1>--SessionStorage--</h1>
设置SessionStorage:<br />
名称:<input type="text" id="txtSessionStorageName" />值:<input type="text" id="txtSessionStorageValue" />
<input type="button" value="添加SessionStorage" onclick="addSessionStorage()" /><br>
获取SessionStorage:<br />
名称:<input type="text" id="txtSessionStorageNameOfGet" /><span id="spnSessionStorages"></span><input type="button" value="获取SessionStorage" onclick="getSessionStorage()" />
<hr />
<h1>--LocalStorage--</h1>
设置LocalStorage:<br />
名称:<input type="text" id="txtLocalStorageName" />值:<input type="text" id="txtLocalStorageValue" />
<input type="button" value="添加SessionStorage" onclick="addLocalStorage()" /><br>
获取LocalStorage:<br />
名称:<input type="text" id="txtLocalStorageNameOfGet" /><span id="spnLocalStorages"></span><input type="button" value="获取LocalStorage" onclick="getLocalStorage()" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>AJAX的标题</title>
<meta charset="utf-8">
<script type="text/javascript">
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("h2Content").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_content.txt", true);
xhttp.send();
}
</script>
</head>
<body>
<h1>--Cookies--</h1>
<div id="demo">
原来内容：
<h2 id="h2Content">初始内容</h2>
<button type="button" onclick="changeContent()">修改</button>
</div>
<hr />
</body>
</html>
扫一扫
2140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
