(1)封装节点兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<body>
<!--====================封装节点兼容代码=============-->
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script src="H1.js"></script>
<script>
//第一个节点和第一个元素的获取的代码在IE8中可能不支持
//element.firstChild--->谷歌和火狐获取的是第一个子几点
//element.firstChile--->IE8获取的是第一个子元素
//element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
//获取任意一个父级元素的第一个子级元素
function getElementChid(element) {
if (element.firstElementChild){
return element.firstElementChild;
} else{
return element.firstChild;
var node = element.firstChild; // 第一个节点
while (node && node.nodeType != 1){
node = node.nextSibling;
}
return node;
}
}
//获取任意一个父级元素的最后一个子级元素
function getElementLastChid(element) {
if (element.lastElementChild){
return element.lastElementChild;
} else{
return element.lastChild;
var node = element.lastChild; // 第一个节点
while (node && node.nodeType != 1){
node = node.previousSibling;
}
return node;
}
}
console.log(getElementChid(my$("uu")).innerText);
console.log(getElementLastChid(my$("uu")).innerText);
</script>
</body>
</html>
(2)<!--==============案例切换易烊千玺背景=================-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url("image/11.jpg") no-repeat center 300px;
}
#mask {
background-color: rgba(255,255,255,0.3);
height: 200px;
text-align: center;
}
#mask img {
width: 200px;
margin-top: 35px;
cursor: pointer;
}
</style>
</head>
<body id="bd">
<div id="mask">
<img src="image/11.jpg" alt="">
<img src="image/22.jpg" alt="">
<img src="image/33.jpg" alt="">
<img src="image/44.jpg" alt="">
</div>
<script src="H1.js"></script>
<script>
var imgObj = my$("mask").children;
for (var i=0;i<imgObj.length;i++){
imgObj[i].onclick = function () {
document.body.style.backgroundImage = "url("+this.src+")";
}
}
</script>
</body>
</html>
(3) <!--==============全选和全不选=================-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
margin: 100px auto 0;
width: 300px;
text-align: center;
}
thead {
background-color: #2288f6;
}
tbody {
background-color: #ccc;
}
</style>
</head>
<body id="bd">
<table border="1">
<thead>
<tr>
<th>
<input type="checkbox" id="id1">
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="id2">
<tr><td><input type="checkbox" ></td><td>红烧肉</td><td>田老师</td></tr>
<tr><td><input type="checkbox" ></td><td>西红柿炒鸡蛋</td><td>田老师</td></tr>
<tr><td><input type="checkbox"></td><td>油炸香蕉</td><td>田老师</td></tr>
<tr><td><input type="checkbox"></td><td>清蒸鱼</td><td>田老师</td></tr>
</tbody>
</table>
<script src="H1.js"></script>
<script>
//获取全选的这个复选框
var ckAll = my$("id1");
//获取tbody中所有的复选框
var cmObj = my$("id2").getElementsByTagName("input");
//点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
ckAll.onclick = function () {
for (var i=0;i<cmObj.length;i++){
cmObj[i].checked = this.checked;
}
};
//获取tbody中所有的复选框,分别注册点击事件
for (var i=0;i<cmObj.length;i++){
cmObj[i].onclick = function () {
var flag = true;
//判断是否所有的复选框都选中
for (var j=0;j<cmObj.length;j++){
//没选中就进来了
if (! cmObj[j].checked){
flag = false;
break;
}
}
//全选的这个复选框的状态就是flag这个变量的值
ckAll.checked = flag;
}
}
</script>
</body>
</html>
(4)动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建一个对象" id="btn">
<div id="div1"></div>
<script src="H1.js"></script>
<script>
var names = ["1","2","3","4","5","6"];
my$("btn").onclick= function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根据循环创建对应对数的li
for (var i=0;i<names.length;i++){
str += "<li>"+names[i]+"</li>";
}
str += "</ul>";
my$("div1").innerHTML = str;
//代码执行到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var liObj = my$("div1").getElementsByTagName("li");
for (var i=0;i<liObj.length;i++){
liObj[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
liObj[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>
(5)动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建元素" id="btn">
<div id="div1"></div>
<script src="H1.js"></script>
<script>
var kongfu = ["1","2","3","4","5","6","7","8"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("div1").appendChild(ulObj);
// 动态的创建li,加到ul中
for (var i=0;i<kongfu.length;i++){
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kongfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseover;
//为li添加鼠标离开事件
liObj.onmouseout = mouseout;
}
};
//此位置.按钮的点击事件的外面
function mouseover() {
this.style.backgroundColor = "red";
}
function mouseout() {
this.style.backgroundColor = "";
}
</script>
</body>
</html>
(6)动态案例创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建表格" id="btn">
<div id="div1"></div>
<script src="H1.js"></script>
<script>
var arr = [
{name: "百度", href:"http://www.baidu.com"},
{name: "京东", href:"http://www.jingdong.com"},
{name: "淘宝", href:"http://www.taobao.com"},
{name: "爱奇艺", href:"http://www.aiqiyi.com"},
{name: "土豆", href:"http://www.tudou.com"}
];
//点击按钮创建表格
my$("btn").onclick = function () {
//创建table加入到div中
var tableObj = document.createElement("table");
tableObj.border = "1";
tableObj.cellPadding ="0";
tableObj.cellSpacing = "0";
my$("dv").appendChild(tableObj);
//创建行,把行加入到table中
for (var i=0;i<arr.length;i++){
var dt = arr[i];
var trObj = document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var td1 = document.createElement("td");
td1.innerText = dt.name;
trObj.appendChild(td1);
//创建第二个列,然后加入到行中
var td2 = document.createElement("td");
td2.innerText = "<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
}
</script>
</body>
</html>
(7)只创建一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建表格" id="btn">
<div id="div1"></div>
<script src="H1.js"></script>
<script>
//有则删除,无则创建
//先判断有没有,有就删除,然后再创建
my$("btn").onclick = function () {
//判断,div中有没有这个按钮,有就删除
//判断这个按钮的子元素是否存在
if (my$("btn2")) {
my$("div1").removeChild(my$("btn2"));
iObj.value = "按钮";
iObj.id = "btn2";
my$("div1").appendChild(iObj);
}
};
// 无则创建
// my$("btn").onclick = function () {
// //判断,div中有没有这个按钮,有就删除
// //判断这个按钮的子元素是否存在
// if( !my$("btn2")){
// var iObj = document.createElement("input");
// iObj.type = "button";
// iObj.value = "按钮";
// iObj.id="btn2"
// my$("div1").appendChild(iObj);
// }
// }
</script>
</body>
</html>
(8)// 为任意元素绑定任意事件兼容代码
function addEvertListener(element,type,fn) {
if (element.addEventListener){
element.addEventListener(type,fn,false);
} else if (element.attachEvent){
element.attachEvent("on"+type,fn);
} else{
element["on"+type]=fn;
}
}