JavaScript初探二
//----------总结01.查找dom元素 document.getElementById();//通过id获取一个dom元素
document.getElementsByClassName();//通过class获取dom数组
document.getElementsByTagName();//通过标签名获取dom数组
//02.修改dom元素 dom.type = "text"//type属性
dom.innerHTML//双标签的文本值 这里注意innerText
dom.value//修改单标签的文本值,比如input
document.getElementById().style.height//注意样式需要通过style点出来,高度,宽度需要添加单位
1.删除dom元素
dom元素.parentNode.removeChild(dom元素)//dom元素不能自己删除自己,必须通过父元素删除自己
//删除的dom元素还在内存中,只是将他从dom树里面删除了
//04.创建dom元素 document.createElement("input");//在js中所有dom元素的创建都是通过这种方式,传入不同的标签名,返回不同的元素
dom元素.appendChild(newNode)//创建好的dom元素必须将他添加到dom树里面去才能看的到
//05.克隆dom元素
dom元素.cloneNode(true);//所有的dom元素都有这个方法,传入false 只克隆元素本身,传入 true 子元素一起克隆
//06.a标签引入js代码
<a href="javascript:这里写js代码">测试用</a>//在javascript:之后写js代码
//07.select标签的特殊
//01.通过设置select.value 可以修改被选中的option.但是设置的value值,必须有相应的option标签存在,否则没效果
//02.修改了选中的option标签会触发select标签的 onchange事件
//08.第二种绑定0级dom事件的方式
<input type='button' onclick='这里写的是js代码'>//注意这样绑定的方法体内部的this
//09.快速获取父节点
dom元素.parentNode
//10.注意
写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>
<script type="text/javascript">
//01.变量定义
//var fox = 123;
//alert(fox);
//fox = "小狐狸"; //02.对象的写法
//对象的直面两标识发里面 属性名 可以加"" 也可以不加
//加了双引号:叫做 json格式
//不加双引号:js的字面量表示法
//var fox = new Object();
//fox = {
// "name":"小二黑",age:18
//} ////03.数组,长度可变,object
//var foxArr = new Array();
//foxArr = [1, 2, 3, 4, { "name": "fox", "age": 19 }];
//foxArr[foxArr.length]//数组新增一位 ////04.判断语句
////string 对象 数组 数字(除0) true
////false 0 NaN null undefined
//function sayhi() { }
//if (sayhi) { //}
////05选择 break 可以不写 会向下执行
//switch (switch_on) {
// default: //}
//06循环语句
//while (true) { //}
//do { //} while (true);
//for (var i in o) {
// o[i]
//}
//for (var i = 0; i < length; i++) { //}
//07方法
//new Function 里面的方法体如果只有一行 不需要分号,如果多行 必须用分号隔开
//function sayHi(name, age) {
// return new Function("alert(123)");
//}
//var returnFunc = sayHi();
//returnFunc(); ////08. dom(文档对象模型) dom对象和dom树
////每一个标签都是一个dom对象,浏览器解析完毕所有html标签以后 生成dom树
//document.getElementById(); //通过id 获取单个
//document.getElementsByClassName();//通过class 获取多个
//document.getElementsByTagName();//通过标签名 获取多个 ////09bom 浏览器对象模型 可以理解为是一个类
////window对象可以理解为 是bom类new出来的对象
////在页面中定义的所有全局变量,都是window的属性
//// window
//var haha = "123"; ////方法体里面的this 看调用这个方法的时候 这个方法由谁点出来
//function sayHi() {
// alert(this);
//}
//---------------分割线问题解答
//01function(直接创建的时候使用) Function(new 方法对象的时候使用)
//除了写法不同,其他都一样,都是创建了一个方法对象 //function sayHello() { }
//new Function(); //02
//var people = sayHello();//执行sayHello方法 将方法的返回值赋给people
//var smallPeople = sayHello;//直接将方法的引用地址给smallPeople </script>
</head> <body>
<input type="button" id="btnTest" />
</body>
</html>
<script type="text/javascript">
//03匿名函数
//匿名函数 就是定义的时候不需要写名字的函数,但是他也会在内存中创建一个方法对象
//document.getElementById("btnTest").onclick = function () { alert("123"); }
//function sayHi() {
// alert("123");
//} //document.getElementById("btnTest").onclick = sayHi; //变量必须定义在方法的下面------
var haha = function () {
alert("捏哈哈");
}
document.getElementById("btnTest").onclick = haha;
//对于方法,浏览器做了优化,只有在调用这个方法的时候,才会去页面里面找
//document.getElementById("btnTest").onclick = sayHello;
//function sayHello() {
// alert("123");
//}
</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="docment绑定" id="btnDoc"/>
<input type="button" value="标签内绑定" id="btnSurprise" onclick="sayThis(this);"/>
</body>
</html>
<script type="text/javascript"> //0级dom事件绑定方法1 直接通过onclick=xxx绑定的
document.getElementById("btnDoc").onclick = function () {
alert(this);
}
alert(document.getElementById("btnDoc").onclick);
//02.直接写在标签里面的 事件属性 用=号赋值 =号后面写的是 js代码
//直接写在标签内部的onclick属性 浏览器在解析的时候 会自动生成一个方法 将这段js代码包起来
alert(document.getElementById("btnSurprise").onclick);
//全局函数
function sayThis(SomeObj) {
alert(this+"||"+SomeObj)
}
</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">
ol {
list-style: none;
} li {
text-align: center;
border: 1px solid #0094ff;
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<ol>
<li>
<label>NumA:</label><input type="text" id="numA" /></li>
<li>
<label>NumB:</label><input type="text" id="numB" /></li>
<li>
<input type="button" value="+" onclick="doCom('+')" />
<input type="button" value="-" onclick="doCom('-')" />
<input type="button" value="*" onclick="doCom('*')" />
<input type="button" value="/" onclick="doCom('/')" /></li>
<li>
<label>Result:</label><input type="text" id="Result" /></li>
</ol>
</body>
</html>
<script type="text/javascript"> function doCom(method) {
var numA = document.getElementById("numA").value.trim();
var numB = document.getElementById("numB").value.trim()
switch (method) {
case "+":
if (checkNum(numA, numB)) {
//修改结果文本框里面的value字
document.getElementById("Result").value = Number(numA) + Number(numB);
} else {
alert("请正确输入");
}
break;
case "-":
if (checkNum(numA, numB)) {
//修改结果文本框里面的value字
document.getElementById("Result").value = Number(numA) - Number(numB);
} else {
alert("请正确输入");
}
break; case "*":
if (checkNum(numA, numB)) {
//修改结果文本框里面的value字
document.getElementById("Result").value = Number(numA) * Number(numB);
} else {
alert("请正确输入");
}
break; case "/":
if (checkNum(numA, numB)) {
//修改结果文本框里面的value字
document.getElementById("Result").value = Number(numA) / Number(numB);
} else {
alert("请正确输入");
}
break;
default: }
}
//检查两个文本框里面的是否是数字
function checkNum(numA, numB) { //判断是否不是一个数字
if (window.isNaN(numA) == false && numB != "" && numA != "" && window.isNaN(numB) == false) {
return true;
} else {
return false;
}
} </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">
table {
border: 1px solid #0094ff;
border-collapse: collapse;
width: 300px;
} td {
border: 1px solid #0094ff;
} div {
border: 1px solid #0094ff;
width: 298px;
}
</style>
</head>
<body>
<table id="tbList">
<tbody id="tbListBody">
<tr>
<td>序号</td>
<td>姓名</td>
<td>技能</td>
<td>操作</td>
</tr>
</tbody>
</table>
<div>
<input type="checkbox" id="chkAll" /><label for="chkAll" style="cursor: pointer">全选</label>
<a href="javascript:void(0)" onclick="DoDelChecked()">删除选中</a>
</div>
</body>
</html>
<script type="text/javascript">
//01.table 浏览器在解析的时候,会自动生成一个tbody 然后把tr放到tbody里面去
//如果在table已经生成完毕在 table.appendChild(tr)添加tr 那么就是加到 table下面
var dataArr = [
{ "name": "柯震东", "skill": "吸毒" },
{ "name": "李代沫", "skill": "唱歌" },
{ "name": "张默", "skill": "像房祖名" },
{ "name": "房祖名", "skill": "像张默" },
{ "name": "郭美美", "skill": "吃毒大米" },
]
//02.使用代码为table添加tr
for (var i = 0; i < dataArr.length; i++) {
//02.1创建一个tr
var trCreate = document.createElement("tr");
//02.2生成td分为两种
//单元格00
var td00 = document.createElement("td");
td00.innerHTML = i + 1 + "<input type='checkbox'class='chkOne'>";
trCreate.appendChild(td00);
//单元格01
var td01 = document.createElement("td");
td01.innerHTML = dataArr[i].name;
trCreate.appendChild(td01);
//单元格02
var td02 = document.createElement("td");
td02.innerHTML = dataArr[i].skill;
trCreate.appendChild(td02);
//单元格03
var td03 = document.createElement("td");
td03.innerHTML = "<a href='javascript:void(0)' onclick='doDelTr(this)'>删除该行</a>";
trCreate.appendChild(td03);
//将tr添加到tbody里面
// document.getElementById("tbListBody").appendChild(trCreate);tbList
document.getElementById("tbList").appendChild(trCreate);
}
//02.5checked这个属性有点特殊,直接写在标签里面,不给值 就是被选中; 给任何值也是被选中
//如果使用js去修改checked属性 给true 就是选中 给false 就是不选中
//document.getElementById("chkAll").checked = false; //03.为全选框设置点击事件
document.getElementById("chkAll").onclick = function () {
//alert(this.checked);
//for循环 将所有的单选框的选中状态设置跟全选框一样就好
var chkOneObjs = document.getElementsByClassName("chkOne");
for (var i = 0; i < chkOneObjs.length; i++) {
chkOneObjs[i].checked = this.checked;
}
} //-----------------分割线 方法
//a标签的this 就是他的href属性
function doDelTr(aObj) {
if (confirm("你想好了?")) {
// alert(aObj);
//根据a标签 获取他所在的tr
// a标签 td tr
var delTr = aObj.parentNode.parentNode; //通过tr的父节点 删除tr
//tr tr的父节点
delTr.parentNode.removeChild(delTr);
} else {
alert("不要手贱啊");
}
} //删除选中的方法
function DoDelChecked() {
//获取所有的单选框
var chkOneObjs = document.getElementsByClassName("chkOne");
//循环 判断 单选框是否被选中
for (var i = chkOneObjs.length-1; i >=0; i--) {
if (chkOneObjs[i].checked==true) {
//通过单选框 获取所在tr
// 单选框 td tr
var delTr = chkOneObjs[i].parentNode.parentNode;
//通过tr获取父节点 调用父节点的删除方法
delTr.parentNode.removeChild(delTr);
}
}
//如果被选中 就删除
//否则 不干事情
} </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;
}
li {
float:left;
border:1px solid #0094ff;
height:15px;
width:25px;
text-align:center;
line-height:15px; }
ol {
list-style:none;
position:absolute;
top:168px;
left:595px; }
</style>
</head>
<body>
<div id="divImg">
<ol>
<li key="button1">1</li>
<li key="button2">2</li>
<li key="button3">3</li>
<li key="button4">4</li>
</ol>
</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; }
} ////根据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>
<style type="text/css">
/*//渲染树*/
#divBox {
height: 100px;
width: 100px;
border: 1px solid #0094ff;
}
</style>
</head>
<body>
<div id="divBox" ></div>
</body>
</html>
<script type="text/javascript">
//绑定点击事件
document.getElementById("divBox").onclick = function () {
//01.获取dom元素标签内部的样式
////获取原有样式
//var oldHeight = parseInt(this.style.height);
////累加
//oldHeight += 10;
////设置回去
//this.style.height = oldHeight + "px"; //02.获取dom元素的样式--无论在内部 还是在 style标签中
//通过这种方式拿到的样式 是只读的
alert(window.getComputedStyle(this).height);
this.style.height;
} </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">
ol {
list-style:none;
}
li {
border:1px solid #0023ff;
height:20px;
width:100px;
}
</style>
</head>
<body>
<select id="selList">
<option>鱼香肉丝</option>
<option>水煮肉片</option>
<option>鱼香茄子</option>
</select>
<ol>
<li id="liEdit">水煮肉片</li>
</ol>
<input type="button" id="edit" value="编辑"/>
<input type="button" id="saveEdit" value="保存修改"/>
</body>
</html>
<script type="text/javascript">
//为按钮添加点击事件
document.getElementById("edit").onclick = function () {
//为li标签 追加一个 子节点 select标签
//dom元素有一个clone方法 传的布尔值 表示 克隆的深浅,
var selClone = document.getElementById("selList").cloneNode(true);
//设置克隆的select标签的 option的选中状态
//如果 option标签 没有添加value值,那么 option标签的 innerHTML就是他的value 可读可写
//设置select标签的value值 为option标签有的 ,那么就相当于 选中了那个option标签
selClone.value = document.getElementById("liEdit").innerHTML;
//清空问本质
document.getElementById("liEdit").innerHTML = "";
//将克隆的select标签 追加到li标签里面
document.getElementById("liEdit").appendChild(selClone);
//修改克隆出来的select标签的id
selClone.id = "editSel";
} //为保存修改按钮添加点击事件
//id虽然唯一,但是重复也不会报错
//取值的时候 从上到下查找.找到了符合要求的一个 就不继续找了
document.getElementById("saveEdit").onclick = function () {
// alert(document.getElementById("editSel").value);
document.getElementById("liEdit").innerHTML = document.getElementById("editSel").value;
}
</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;
height:100px;
width:100px;
} </style>
</head>
<body>
<!--使用a标签引入js代码 javascript:这里写js代码-->
<a href="javascript:alert('大家下午好,不要打瞌睡了');">点击打招呼</a>
<div id="divBox">
div的id为divBox
<input type="button" id="btnTest" value="id=btnTest" />
</div>
</body>
</html>
<script type="text/javascript">
//为按钮添加点击事件
document.getElementById("btnTest").onclick = function () {
alert(this.id);
//删除自己-通过parentNode获取父节点,然后调用父节点的删除方法
//this.parentNode.removeChild(this);
//parentElement有浏览器兼容问题
this.parentElement.removeChild(this);
} </script>
JavaScript初探二的更多相关文章
- JavaScript初探 二 （了解数据）
JavaScript初探 (二) JavaScript 事件 HTML事件 HTML事件是可以在浏览器或用户做的某些事情 HTML事件的例子: HTML网页完成加载 HTML输入字段被修改 HTML按 ...
- 初探JavaScript（二）——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- JavaScript初探 一（认识JavaScript）
JavaScript 初探 JavaScript插入HTML中 内嵌的Js代码 <!DOCTYPE html> <html> <head> <meta cha ...
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- 学习javascript数据结构(二)——链表
前言 人生总是直向前行走,从不留下什么. 原文地址:学习javascript数据结构(二)--链表 博主博客地址:Damonare的个人博客 正文 链表简介 上一篇博客-学习javascript数据结 ...
- 从头开始学JavaScript (十二)——Array类型
原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...
- 同事问如何判断同花顺，我用javascript的二维数组写了个简易demo
有个前同事在群里问如何判断是否为同花顺我用javascript的二维数组写了个简易demo. <!DOCTYPE html> <html> <body> <s ...
- 2、JavaScript 基础二 （从零学习JavaScript）
11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...
随机推荐
- Java数据类型、操作符、表达式
基本与C#相同,因C#从Java学的 如操作符 对象的Equals方法,比较两个对象的内容是否相等. ==是比较是否引用同一对象.
- uva1659(最大费用循环流)
紫书上的一道题,做法见紫书P378,这篇博客用的第二种方法,关于正确性的证明,画图可以发现如果一个环是负环,跑最小费用流跑出的是环上的所有正边,再减去负边和即为跑一遍的负权,如果是正环,最小费用流即为 ...
- 【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
- linux ping命令
Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...
- POJ3045--Cow Acrobats(theory proving)
Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away and join the ...
- 跟哥走，带你玩转Surface 2
以为自己是数码控?觉得自己买了Surface就无所不能?别逗了!来看哥怎么玩平板,也让你们这些小虾米看看,什么才叫“玩转”! 新技能Get:密码不在用键盘 什么?每次开机你还要输入一长串密码?都什么年 ...
- Scala深入浅出实战经典：29,Case class和Case object代码实战解析
今天学习了王家林老师scala讲座的第29讲,case class和case object的应用实战.做下记录. 信息来源于 DT大数据梦工厂微信公众账号:DT_Spark 关注微信账号,获取更多关于 ...
- CentOS 7安装fail2ban+Firewalld防止SSH爆破与CC攻击
准备工作 1.检查Firewalld是否启用 #如果您已经安装iptables建议先关闭 service iptables stop #查看Firewalld状态 firewall-cmd --sta ...
- 等到花儿也谢了的await
async/task/await三组合是.NET Framework 4.5带给.NET开发者的大礼,合理地使用它,可以提高应用程序的吞吐能力. 但是它的使用有点绕人,如果不正确使用,会带来意想不到的 ...
- 一个docker容器中运行多个服务还是弄一堆docker容器运行？
不建议直接在单个 Docker 容器中运行多个程序. 以 2017年 10 月18 日 Docker 官方支持 Kubernetes 为分水岭计算,Kubernetes 赢得容器编排之战的最终胜利已经 ...