JavaScript初探 二
Posted aifuli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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初探 二的主要内容，如果未能解决你的问题，请参考以下文章