目录
一、总结
第一、12行代码，都是需要掌握的（前四个是必须要倒背如流的）
var ulObj = document.getElementById("uu");
父级节点 ulObj.parentNode
父级元素 ulObj.parentElement
子级节点 ulObj.childNodes
子级元素 ulObj.children
// 总结：以上四个是最常用，兼容所有的浏览器
// 下面是我们扩展的
第一个子节点 ulObj.firstChild ---- IE8中是元素
第一个子元素 ulObj.firstElementChild ---- IE8 不支持
最后一个子节点 ulObj.lastChild ---- IE8中是元素
最后一个子元素 ulObj.lastElementChild ---- IE8 不支持
某个元素的前一个兄弟节点 .previousSibling ---- IE8中是元素
某个元素的前一个兄弟元素 .previousElementSibling ---- IE8 不支持
某个元素的后一个兄弟节点 .nextSibling ---IE8中是元素
某个元素的后一个兄弟元素 .nextElementSibling ---IE8不支持
总结： 从第一个子节点开始，只要是节点：在IE8等低版本浏览器都叫做元素。只要是子元素：IE8等低版本浏览器都不支持
第二、获取属性(用的相对少一些) .getAttributeNode(“id”) — 到此我们把标签、属性、和文本都获取到了
二、模板-案例切换图片
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url("images/1.jpg");
}
#mask {
background-color: rgba(255, 255, 255, 0.3);
height: 200px;
text-align: center;
}
#mask img {
width: 200px;
margin-top: 35px;
cursor: pointer;
}
</style>
<body>
<div id="mask">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<script src="publick.js"></script>
<script>
// 获取子元素
var imgObjs = my$("mask").children;//获取的是一个集合---伪数组
// 循环遍历
for(var i = 0; i < imgObjs.length; i++){
// 为了给每个图片加点击事件
imgObjs[i].onclick = function(){
// 记得老师教大家的口诀:把字符串删除 "+变量+" 可以加薪的大招
document.body.style.backgroundImage = 'url("'+this.src+'")';
// document.body.style.backgroundImage = "url('"+this.src+"')";
// 是否曾经记得老师还交给大家的转义字符 第二种方法
// document.body.style.backgroundImage = "url(\""+this.src+"\")";
// 再扩展一个ES6的写法 先写 `${变量}` 这个后面会详细讲解
// document.body.style.backgroundImage = `url("${this.src}")`;
}
}
</script>
</body>
三、模板-全选和反选案例
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<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>
</div>
<script src="publick.js"></script>
<script>
// 获取全选的这个复选框
var ckAll = my$("j_cbAll");//获取到了上面的全选和反选的复选框
// 获取tbody中所有的小的复选框
var cks = my$("j_tb").getElementsByTagName("input");//集合--获取到了所有的复选框--tbody里面的复选框
// 点击全选的这个复选框，获取他的当前的状态，然后设置tbody中的所有的复选框的状态---跟他一模一样
ckAll.onclick = function(){
// alert("教大家测试");学会测试
// console.log(this.checked);
// 拿到下面tbody里面所有的复选框的状态this.checked让他跟我们的复选框一样 this.checked
for(var i = 0; i < cks.length; i++){
cks[i].checked = this.checked;
}
}
</script>
</body>
四、模板-全选和反选案例
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<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>
</div>
<script src="publick.js"></script>
<script>
// 获取全选的这个复选框
var ckAll = my$("j_cbAll");//获取到了上面的全选和反选的复选框
// 获取tbody中所有的小的复选框
var cks = my$("j_tb").getElementsByTagName("input");//集合--获取到了所有的复选框--tbody里面的复选框
// 点击全选的这个复选框，获取他的当前的状态，然后设置tbody中的所有的复选框的状态---跟他一模一样
ckAll.onclick = function () {
// alert("教大家测试");学会测试
// console.log(this.checked);
// 拿到下面tbody里面所有的复选框的状态this.checked让他跟我们的复选框一样 this.checked
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
}
// 重点
// 循环tbody中的所有的复选框，分别给他们做点击事件
for (var i = 0; i < cks.length; i++) {
// 为了给每个复选框做点击事件
cks[i].onclick = function () {
// 假设 flag 为true
var flag = true;//假设被选中
// 循环判断是否所有的复选框到底有没有被选中
for (var j = 0; j < cks.length; j++) {
// 为了判断下面的每个复选框到底有没有被选中
if (!cks[j].checked) {//cks[j].checked 表示复选框的状态-- !false---true
// 没有被选中就进来
flag = false;
break;
}
}
// 让我们全选的复选框的状态跟我们设置的假设的flag是一样的
ckAll.checked = flag;
}
}
</script>
</body>
五、模板-全选和反选案例
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<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>
</div>
<script src="publick.js"></script>
<script>
// 获取全选的这个复选框
var ckAll = my$("j_cbAll");//获取到了上面的全选和反选的复选框
// 获取tbody中所有的小的复选框
var cks = my$("j_tb").getElementsByTagName("input");//集合--获取到了所有的复选框--tbody里面的复选框
// 点击全选的这个复选框，获取他的当前的状态，然后设置tbody中的所有的复选框的状态---跟他一模一样
ckAll.onclick = function () {
// alert("教大家测试");学会测试
// console.log(this.checked);
// 拿到下面tbody里面所有的复选框的状态this.checked让他跟我们的复选框一样 this.checked
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
}
// 重点
// 循环tbody中的所有的复选框，分别给他们做点击事件
for(var i = 0; i < cks.length; i++){
// 给每个复选框做点击事件
cks[i].onclick = function(){
// 假设 flag
var flag = true;//假设被选中
// 循环判断下面的复选框是否都被选中了
for(var j = 0; j < cks.length; j++){
// 判断
if(!cks[j].checked){//cks[j].checked表示复选框的状态 !false ---true
// 没有被选中则进来
flag = false;
break;
}
}
// 让我们上面的全选的复选框跟我们的flag一样
ckAll.checked = flag;
}
}
</script>
</body>
六、第一种创建元素的方式
<body>
<input type="button" value="创建元素" id="btn">
我们继续加油,给力，也可以把问题直接发到qq群，我们是一个大家庭,互帮互助，效果更好
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
document.write("<p>我是一个段落标签,我们班有很多很多大神</p>")
}
// document.write缺陷：当页面加载完毕的时候，在执行document.write,他会把我们前面的内容都覆盖掉。
</script>
</body>
七、第二种创建元素的方式
<body>
<input type="button" value="创建一个p标签" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
my$("dv").innerHTML = "<p>一见如故</p>";
}
</script>
八、点击创建人物
<body>
<input type="button" id="btn" value="来一个美女">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
my$("dv").innerHTML = "<img src='images/liuyan.jpg' alt='这是柳岩'/>"
}
</script>
</body>
九、点击创建列表
<style>
div{
width: 300px;
height: 500px;
border:1px solid #000;
}
ul{
list-style: none;
cursor: pointer;
}
</style>
<body>
<input type="button" value="创建列表" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚","小龙女","黄蓉"];
my$("btn").onclick = function(){
var str = "<ul>";
//循环遍历
for(var i = 0; i < names.length; i++){
// 用到了我们的大招 删除固定的字符串 "+变量+",也可以用`${变量}`
str += "<li>"+names[i]+"</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
//需求：动态创建元素之后还要实现隔行换色
// 获取所有的li，循环遍历添加鼠标经过和鼠标离开
var list = my$("dv").getElementsByTagName("li");
// 循环遍历
for(var i = 0; i < list.length; i++){
// 鼠标经过
list[i].onmouseover = function(){
this.style.backgroundColor = "pink";
}
// 鼠标离开
list[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
}
</script>
</body>
十、第三种创建元素的方式
<style>
div{
width: 300px;
height: 500px;
border:1px solid #000;
}
</style>
<body>
<input type="button" value="创建元素" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
// 第一步：先创建元素
var pObj = document.createElement("p");//创建元素
pObj.innerText = "这是一个段落标签";
// 第二步：追加到父元素里面
my$("dv").appendChild(pObj);//把创建好的元素追加到父元素里面
/*
总结：我们第三种创建元素的方式：2步骤
1、先创建元素 document.createElement("标签的名字");
2、把创建好的元素追加到父元素身上，里面 appendChild()
举个大白话：就像小孩一样，先有小孩，再上户口
*/
}
</script>
</body>
1529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
