JavaScript初探三
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<ul id="ulList">asdfdasfasdf
<li>柯震东</li>
<li>蓝翔技校</li>
<li>新东方烹饪学校</li>
<li>北大青鸟</li>
</ul>
</body>
</html>
<script type="text/javascript">
var ulObj = document.getElementById("ulList");
//dom元素.children 获取到所有的子节点(html标签)
//dom元素.childNodes获取所有的节点,包含文本节点--了解即可,用的不多
// alert(ulObj.childNodes.length+"|||"+ulObj.children.length);
//01.获取所有的子节点
//for (var i = 0; i < ulObj.children.length; i++) {
// alert(ulObj.children[i].innerHTML);
//}
//02.快速获取老大,老末
//firstChild获取到的是文本节点--lastChild
//firstElementChild获取html节点--lastElementChild
// alert(ulObj.firstChild.textContent);
// alert(ulObj.firstElementChild.innerHTML);
//03.相对定位
//nextElementSibling获取下一个html节点
ulObj.firstElementChild.nextElementSibling.style.backgroundColor = "green";
ulObj.lastElementChild.previousElementSibling.style.backgroundColor = "red";
</script>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
border: 1px solid #0094ff;
width: 400px;
margin: 10px auto;
text-align: center;
}
table {
border: 1px solid #0094ff;
border-collapse: collapse;
width: 400px;
margin: 10px auto;
text-align: center;
}
td {
border: 1px solid #0094ff;
}
</style>
<script type="text/javascript">
alert(document.getElementById("textH"));
</script>
</head>
<body>
<div>
<input type="button" value="新增菜单" id="btnAddOpt" />
菜单:
<select id="selList">
<option>水煮肉片</option>
<option>鱼香肉丝</option>
<option>番茄炒蛋</option>
</select>
数量:
<div id="divNumEdit" style="width: auto; height: auto; padding: 0px; margin: 0px; display: inline-block; border: 0px;">
<input type="button" value="+" id="btnAddTic" onclick="NumChange(this)" style="cursor: pointer;" />
<span id="ticketNums">0</span>
<input type="button" value="-" id="btnSubTic" onclick="NumChange(this)" style="cursor: pointer;" />
</div>
</div>
<div>
<input type="button" value="新增订单" id="btnAddList" />
</div>
<table id="tbList">
<tr>
<td>序号</td>
<td>菜名</td>
<td>数量</td>
<td>编辑</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chkOne" />
1 </td>
<td foodindex="0">水煮肉片</td>
<td>2</td>
<td><a href="javascript:void(0)">删除</a> <a href="javascript:void(0)" onclick="IntoEdit(this)">编辑</a></td>
<!--这里传递进去的this 是a标签-->
</tr>
</table>
<div style="text-align: left; padding-left: 2px; width: 396px">
<input type="checkbox" id="chkAll" /><label for="chkAll">全选</label>
<a href="javascript:delCheckedTr();">批量选中</a>
</div>
</body>
</html>
<script type="text/javascript">
var oldFoodName;//保存开始的菜名
var oldFoodNum;//保存开始的数量
//----------------封装的方法
//修改 数量的方法
function NumChange(inputObj) {
switch (inputObj.value) {
case "+":
//按钮 div span
var oldNum = inputObj.parentNode.children[1].innerHTML;
oldNum++;
inputObj.parentNode.children[1].innerHTML = oldNum;
break;
case "-":
//按钮 div span
var oldNum = inputObj.parentNode.children[1].innerHTML;
oldNum--;
oldNum = oldNum < 0 ? 0 : oldNum;
inputObj.parentNode.children[1].innerHTML = oldNum;
break;
}
}
//进入编辑状态
function IntoEdit(aObj) {
//根据a标签获取所在的tr
var editTr = aObj.parentNode.parentNode;
//修改第二个td 为select标签
var td01 = editTr.children[1];//获取第二个单元格 索引
var cloneSelect = document.getElementById("selList").cloneNode(true);//克隆select标签--并且设置select标签的value值
cloneSelect.value = td01.innerHTML; //获取里面的innerHTML值
//------------保存原始菜名
oldFoodName = td01.innerHTML;
//------------保存原始菜名
td01.innerHTML = ""; //清空td的innerHTML
td01.appendChild(cloneSelect); //将克隆的select标签追加到td里面去
//修改第三个td为数量编辑框
var td02 = editTr.children[2]; //获取第三个td的
var cloneNumEdit = document.getElementById("divNumEdit").cloneNode(true); //克隆数量编辑框
cloneNumEdit.children[1].innerHTML = td02.innerHTML; //修改数量编辑框里面的数量
//------------保存原始数量
oldFoodNum = td02.innerHTML;
//------------保存原始数量
td02.innerHTML = ""//清空innerHTML
td02.appendChild(cloneNumEdit); //将数量编辑框追加到td02里面去
//修改第四个td里面的a标签
var td03 = editTr.children[3]; //获取第四个td/
//修改innerHTML即可
td03.innerHTML = "<a href='javascript:void(0)' onclick='SaveEdit(this)'>保存</a> <a href='javascript:void(0)' onclick=' ExitEdit(this)'>取消</a>"
}
//保存修改的方法
function SaveEdit(aObj) {
//根据a标签获取所在的tr
var editTr = aObj.parentNode.parentNode;
//还原第二个单元格
var td01 = editTr.children[1]; //获取第二个单元格
td01.innerHTML = td01.children[0].value;//获取里面select标签的value值 //将value值设置给单元格的innerHTML
//还原第三个单元格
var td02 = editTr.children[2]; //获取第三个单元格
// td div span 当然可以用id拿
td02.innerHTML = td02.children[0].children[1].innerHTML; //获取里面的span的innerHTML将 innerHTML设置给第三个单元格
//还原第四个单元格
var td03 = editTr.children[3];//获取第四个单元格
td03.innerHTML = "<a href='javascript:void(0)' >删除</a> <a href='javascript:void(0)'onclick='IntoEdit(this)'>编辑</a>";
}
//推出编辑的方法
function ExitEdit(aObj) {
//根据a标签获取所在的tr
var editTr = aObj.parentNode.parentNode;
//还原第二个单元格
editTr.children[1].innerHTML = oldFoodName;//还原原始菜名
//还原第三个单元格
editTr.children[2].innerHTML = oldFoodNum;//还原原始
//还原第四个单元格
editTr.children[3].innerHTML = "<a href='javascript:void(0)' >删除</a> <a href='javascript:void(0)'onclick='IntoEdit(this)'>编辑</a>";
}
</script>
网页换肤
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/01.css" rel="stylesheet" id="cssLink" />
</head>
<body>
<ol>
<li class="skinChange" style="background-color: red">1</li>
<li class="skinChange" style="background-color: yellow">2</li>
<li class="skinChange" style="background-color: blue">3</li>
<li class="skinChange" style="background-color: green">4</li>
</ol>
<div id="picDiv"></div>
<input type="button" />
</body>
</html>
<script type="text/javascript">
var liObjs = document.getElementsByClassName("skinChange");
for (var i = 0; i < liObjs.length; i++) {
liObjs[i].onclick = function () {
//获取link标签cssLink
var linkObj = document.getElementById("cssLink");
switch (this.innerHTML) {
case "1":
linkObj.href = "css/0" + i + ".css";
break;
case "2":
linkObj.href = "css/02.css";
break;
case "3":
linkObj.href = "css/03.css";
break;
case "4":
linkObj.href = "css/04.css";
break;
}
}
}
alert(liObjs[0].onclick);
//li标签.onclick()
//function () {
// //获取link标签cssLink
// var linkObj = document.getElementById("cssLink");
// switch (this.innerHTML) {
// case "1":
// linkObj.href = "css/0" + i + ".css";
// break;
// case "2":
// linkObj.href = "css/0" + i + ".css";
// break;
// case "3":
// linkObj.href = "css/0" + i + ".css";
// break;
// case "4":
// linkObj.href = "css/0" + i + ".css";
// break;
// }
</script>
简单登陆页面JS特效
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input type="text" id="userName" value="请输入用户名" style="color: #c8c1c1" />
<br />
<input type="text" id="userPass" value="请输入密码" style="color: #c8c1c1" />
</body>
</html>
<script type="text/javascript">
//用户名框获得焦点事件
document.getElementById("userName").onfocus = function () {
// alert(this.style.color);
if (this.value.trim() == "请输入用户名") {
//清空自己的文本
this.value = "";
//修改自己的字体颜色
this.style.color = "black";
}
}
//用户名失去焦点事件
document.getElementById("userName").onblur = function () {
if (this.value.trim()=="") {
//还原文本,
this.value = "请输入用户名";
//还原样式
this.style.color = "#c8c1c1";
}
}
//密码框获得焦点事件
document.getElementById("userPass").onfocus = function () {
// alert(this.style.color);
if (this.value.trim() == "请输入密码") {
//清空自己的文本
this.value = "";
//修改自己的字体颜色
this.style.color = "black";
//修改type
this.type = "password";
}
}
//密码框失去焦点事件
document.getElementById("userPass").onblur = function () {
if (this.value.trim() == "") {
//还原文本,
this.value = "请输入用户名";
//还原样式
this.style.color = "#c8c1c1";
//还原type
this.type = "text";
}
}
</script>
定时器和计时器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input type="button" value="开启定时器" id="timeOpen" />
<input type="button" value="关闭定时器" id="timeClose" />
<input type="button" value="开启计时器" id="interOpen" />
<input type="button" value="关闭计时器" id="interClose" />
</body>
</html>
<script type="text/javascript">
function eatFood(foodName, bedName) {
alert("中午吃" + foodName + "在" + bedName + ",睡觉觉");
}
function sleep(){
alert("zzzZZZZZ");
}
//-------------分割线
var timeOutId;//定时器id
//定时器,延迟调用,只调用一次,延迟时间单位是毫秒
document.getElementById("timeOpen").onclick = function () {
//同时接收定时器id
timeOutId = window.setTimeout(eatFood, 2000, "鸡腿饭,叉烧双拼", "课桌上");
}
//关闭定时器的方法 通过id
document.getElementById("timeClose").onclick = function () {
window.clearTimeout(timeOutId);
}
var interId;
//计时器,延迟调用,会一直执行,传参的方式 跟定时器一样
document.getElementById("interOpen").onclick = function () {
//同时接收定时器id
interId = window.setInterval(sleep, 1000);
}
//通过id关闭计时器
document.getElementById("interClose").onclick = function () {
//同时接收定时器id
interId = window.clearInterval(interId);
}
</script>
自动切换的图片
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
border: 1px solid #0094ff;
margin: 0 auto;
}
#divImg {
width: 300px;
height: 192px;
}
#divInfo {
width: 300px;
height: 30px;
margin-top:5px;
}
li {
float: left;
height: 15px;
width: 25px;
text-align: center;
line-height: 15px;
background-color:#ffd800;
margin-left:2px;
color:#ff0000;
}
ol {
list-style: none;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div id="divImg" style="position:relative">
<div style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px">
<ol>
<li key="button1">1</li>
<li key="button2">2</li>
<li key="button3">3</li>
<li key="button4">4</li>
</ol>
</div>
</div>
<div id="divInfo"></div>
</body>
</html>
<script type="text/javascript">
//图片信息数据存储
var imgInfoArr = [
{ "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" },
{ "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" },
{ "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" },
{ "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" }
];
//为数据对象绑定方法--面向对象
//循环判断传入的key 符合哪一个,返回符合的对象
imgInfoArr.GetObjByKey = function (key) {
for (var i = 0; i < this.length; i++) {
if (this[i].key == key) {
return this[i];
}
}
}
//---------------上面是准备数据下面是绑定方法
//获取所有的li标签
var liObjs = document.getElementsByTagName("li");
//为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性
for (var i = 0; i < liObjs.length; i++) {
liObjs[i].onclick = function () {
//获取自定义属性 key
var myKey = this.getAttribute("key");
//通过key去获取对象
var imgInfoObj = imgInfoArr.GetObjByKey(myKey);
//将对象的属性设置给 图片div 还有文字div
//修改背景图片
document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")";
//修改文字
document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo;
}
}
//全局变量--li标签 索引
var liIndex = 0;
//开启计时器,自动调用图片切换方法
setInterval(autoClick, 2000);
//手动调用 自动点击方法.让第一个li标签被点击
autoClick();
//封装的方法,
function autoClick() {
//手动调用li标签的点击事件
liObjs[liIndex].onclick();
//所应增加,并且判断是否越界
liIndex++;
liIndex = liIndex > 3 ? 0 : liIndex;
}
////根据key获取 对象的方法
//function GetImgObj(key) {
// for (var i = 0; i < imgInfoArr.length; i++) {
// if (imgInfoArr[i].key == key)
// {
// return imgInfoArr[i];
// }
// }
//}
//var someObj=GetImgObj("button3");
//alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo);
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//window.onclick = function () {
// alert("你点击了页面");
//}
//页面资源加载完毕
//html+css+js解析完毕
//图片,视频,音频,加载完毕
window.onload = function () {
alert("资源加载完毕");
document.getElementById("12");
//haha = document.getElementById("123");
//给body加点击事件
//body的作用域,跟他的大小有关,
//body的本质是一个div,大小跟自己内部的元素有关
//所有要让整个页面都为时间触发区域,就添加给window对象
document.body.onclick = function () {
alert("你点击了body");
}
}
</script>
</head>
<body style="background-color:#00e0ff;border:1px solid #0094ff;">
<br />
<br />
<br />
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
alert("稍等一会");
//获取当前页面的地址--window.location可读可写
//alert(window.location);
//window.location = "http://www.baidu.com";
//关闭打开页面
//window.close();
//打开新的页面不常用.了解即可
//window.open("p04登录页面demo.html");
//为window对象添加鼠标移动事件
window.onload = function () {
//window添加鼠标移动事件
window.onmousemove = function () {
//alert("123");
//window.innerHeight 获取显示区域的尺寸
document.getElementById("showInfo").value = window.innerHeight + "|" + window.innerWidth;
}
}
</script>
</head>
<body>
<input type="text" id="showInfo" />
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//window.parent获取父窗体
//window.top获取顶级窗体
window.onload = function () {
//为按钮1添加点击事件
document.getElementById("btnFather").onclick = function () {
//自己 父窗体
window.parent.document.body.style.backgroundColor = "orange";
}
document.getElementById("btnTop").onclick = function () {
// window.top.document.body.style.backgroundColor = "pink";
window.parent.parent.document.body.style.backgroundColor = "pink";
}
}
</script>
</head>
<body style="background-color: #0094ff">
<h1>我是最底层的页面</h1>
<input type="button" value="修改父窗体颜色" id="btnFather" />
<input type="button" value="修改顶级窗体颜色" id="btnTop" />
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body style="background-color:#ffdb00">
<h1>我是parent页面
</h1>
<iframe src="p09_self.html"></iframe>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body style="background-color:#f00">
<h1>我是top页面</h1>
<iframe src="p09_parent.html" style="height:500px;width:500px;"></iframe>
</body>
</html>
创建table的快捷方式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
border:1px solid #0094ff;
border-collapse:collapse;
width:400px;
margin:0 auto;
}
td {
border:1px solid #0094ff;
text-align:center;
}
</style>
<script type="text/javascript">
var foodArr = [
{ "name": "杨枝甘露", "price": 15 },
{ "name": "天地一号", "price": 5 },
{ "name": "特仑苏", "price": 8 },
{ "name": "脉动", "price": 4 }
]
window.onload = function () {
//村代码生成table
var tbList = document.createElement("table");//创建table
//循环对象数组,生成行列
for (var i = 0; i < foodArr.length; i++) {
var trCreate = tbList.insertRow();//快速插入tr 同时放回tr的引用
for (var item in foodArr[i]) {
var tdCreate = trCreate.insertCell();//快速插入td 同时返回引用
tdCreate.innerHTML = foodArr[i][item];
}
}
document.body.appendChild(tbList); //table加到dom树里面去
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//window linux macos
//window对象里面的 navigator的 属性可以获取一些系统信息,浏览器信息等
//alert(window.navigator.platform);
//window.screen/
//availHeight浏览器可用显示区域 美工可以根据浏览器的显示大小,对页面进行优化
// alert(window.screen.availHeight + "||" + window.screen.availWidth);
//历史记录 history.length 获取历史记录的长度
alert(window.history.length);
</script>
</head>
<body>
<a href="p12historyLength.html">点击跳转</a>
</body>
</html>
