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>
JavaScript初探三的更多相关文章
- JavaScript初探 三 （学习js数组）
JavaScript初探 (三) JavaScript数组 定义 创建数组 var 数组名 = [元素0,元素1,元素2,--] ; var arr = ["Huawei",&qu ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- JavaScript初探 二 （了解数据）
JavaScript初探 (二) JavaScript 事件 HTML事件 HTML事件是可以在浏览器或用户做的某些事情 HTML事件的例子: HTML网页完成加载 HTML输入字段被修改 HTML按 ...
- 学习javascript数据结构(三)——集合
前言 总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合 知乎专栏&&简书专题:前端进击者 ...
- JavaScript的三种工业化调试方法
JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...
- 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- Emscripten教程之连接C++和JavaScript（三）
本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏.也可以去作者的博客阅读文章.欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522. E ...
- JavaScript中有三个可以对字符串编码的函数，分别是： escape(),encodeURI(),encodeURIComponent()
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
随机推荐
- python-Django-01基础配置
参考资料地址 http://www.ziqiangxuetang.com/django/django-install.html 官方文档 一: 1先下载Django源码包,下载地址https://ww ...
- (spfa) Highway Project (zoj 3946 )
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5718 Highway Project Time Limit: 2 Seco ...
- Linux 快捷键使用
命令运行时使用CTRL+Z,强制当前进程转为后台,并使之停止. 1. 使进程恢复运行(后台) (1)使用命令bg Example: zuii@zuii-desktop:~/unp/tcpcliserv ...
- noip第7课资料
- 《mysql必知必会》学习_第四章_20180724_欢
P27: select prod_name from products; # select 列 from 表 # 从表products 中检索 名为 prod_name 的列 P28 多个语句一起必须 ...
- Scala_数据结构
数据结构 容器(Collection) Scala提供了一套丰富的容器(collection)库,包括列表 (List).数组(Array).集合(Set).映射(Map)等 根据容器中元素的组织方式 ...
- chrome常用小插件
1.广告终结者 (去广告) 2.adsafe2.0.1 (去广告) 3.Infinity New Tab ( ...
- activemq生产者和消费者的双向通信
http://websystique.com/spring/spring-4-jms-activemq-example-with-jmslistener-enablejms/
- poj 2046&&poj1961KMP 前缀数组
Power Strings Time Limit: 3000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Jav ...
- 搭建一台deeplearning的服务器
在计算机时代的早期,一名极客的满足感很大程度上来源于能DIY一台机器.到了深度学习的时代,前面那句话仍然是对的. 缘起在2013年,MIT科技评论将深度学习列为当年十大科技突破之首.其原因在于,模型有 ...