JavaScript基础视频教程总结（101-110章）
程序员文章站
2022-04-14 17:08:42
101-110章总结 101. dom查询的剩余方法 我是第一个box1我是box1中的div 我是box1中的div 我是box1中的div 我是box1中的div 102. dom增删改 你喜欢哪个城市? 北... ......
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>101-110章总结</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
<pre>
101. dom查询的剩余方法
</pre>
<div id="box2"></div>
<div class="box1">我是第一个box1<div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div></div>
<script type="text/javascript">
console.log("--第101--")
function fun101(){
//body
console.log("--body--")
var body1 = document.getelementsbytagname("body")[0]
var body2 = document.body
console.log(body1)
console.log(body2)
// html
console.log("--html--")
var html = document.documentelement
console.log(html)
// all
console.log("--all--")
var all = document.all
console.log(all.length)
for ( var i=0 , alll = all.length ; i<alll; i++) {
console.log(all[i])
}
/*
* 根据元素的class属性值查询一组元素节点对象
* getelementsbyclassname()可以根据class属性值获取一组元素节点对象，
* 但是该方法不支持ie8及以下的浏览器
*/
// class
console.log("--getelementsbyclassname--")
var box1 = document.getelementsbyclassname("box1")
console.log(box1.length)
//获取页面中的所有的div
console.log("--div--")
var divs = document.getelementsbytagname("div")
console.log(divs.length)
/*
* document.queryselector()
* - 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
* - 虽然ie8中没有 getelementsbyclassname()但是可以使用queryselector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
console.log("--queryselector--")
var qbox1 = document.queryselector(".box1")
console.log(qbox1)
/*
* document.queryselectorall()
* - 该方法和queryselector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
*/
console.log("--queryselectorall--")
var qabox1 = document.queryselectorall(".box1")
console.log(qabox1.length)
}
fun101()
</script>
<pre>
102. dom增删改
</pre>
<div class="clearfix">
<div id="total">
<div class="inner">
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnlist">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj#sh节点</button></div>
<div><button id="btn05">读取#city内的html代码</button></div>
<div><button id="btn06">设置#bj内的html代码</button></div>
<div><button id="btn07">创建一个"广州""合肥"节点,添加到#city下</button></div>
</div>
</div>
<script type="text/javascript">
console.log("--第102--");
myclick("btn01",function(){
var newli = document.createelement("li")
var nlitext = document.createtextnode("广州")
newli.appendchild(nlitext)
var city = document.getelementbyid("city")
city.appendchild(newli)
})
myclick("btn02",function(){
var newli = document.createelement("li")
var nlitext = document.createtextnode("广州")
newli.appendchild(nlitext)
var city = document.getelementbyid("city")
var bj = document.getelementbyid("bj")
/*
* insertbefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertbefore(新节点,旧节点);
*/
city.insertbefore(newli,bj)
})
myclick("btn03",function(){
var newli = document.createelement("li")
var nlitext = document.createtextnode("广州")
newli.appendchild(nlitext)
var city = document.getelementbyid("city")
var bj = document.getelementbyid("bj")
/*
* replacechild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replacechild(新节点,旧节点);
*/
city.replacechild(newli,bj)
})
myclick("btn04",function(){
var city = document.getelementbyid("city")
var bj = document.getelementbyid("bj")
var sh = document.getelementbyid("sh")
/*
* removechild()
* - 可以删除一个子节点
* - 语法：父节点.removechild(子节点);
* 子节点.parentnode.removechild(子节点);
*/
city.removechild(bj)
sh.parentnode.removechild(sh)
})
myclick("btn05",function(){
var city = document.getelementbyid("city")
alert(city.innerhtml)
})
myclick("btn06",function(){
var bj = document.getelementbyid("bj")
bj.innerhtml = "合肥"
})
myclick("btn07",function(){
var city = document.getelementbyid("city")
// 使用innerhtml也可以完成dom的增删改的相关操作,一般我们会两种方式结合使用
//01
city.innerhtml += "<li>广州</li>"
//02
var li =document.createelement("li")
li.innerhtml = "合肥"
city.appendchild(li)
})
function myclick(btn,fun){
var btn = document.getelementbyid(btn)
btn.onclick = fun
}
</script>
<pre>
103. 添加删除记录-删除
</pre>
<pre>
104. 添加删除记录-添加
</pre>
<pre>
105. 添加删除记录-修改
</pre>
<table id="employeetable">
<tr>
<th>name</th>
<th>email</th>
<th>salary</th>
<th> </th>
</tr>
<tr>
<td>tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">delete</a></td>
</tr>
<tr>
<td>jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="javascript:;">delete</a></td>
</tr>
<tr>
<td>bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="javascript:;">delete</a></td>
</tr>
</table>
<div id="formdiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empname" id="empname" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addempbutton1" value="abc">submit1</button>
<button id="addempbutton2" value="abc">submit2</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
console.log("--第103,104,105--");
function deletea(){
console.log(this)
var tr = this.parentnode.parentnode;
var name = tr.children[0].innerhtml
var flag = confirm("你确定删除"+ name +"吗？")
if(flag){
tr.parentnode.removechild(tr)
}
}
// 删除
function deletefun(){
var alla = document.queryselectorall("td a")
for(var i=0,l=alla.length; i<l; i++) {
alla[i].onclick = deletea
}
}
deletefun()
// 添加
function addfun(){
var employeetable = document.getelementbyid("employeetable")
var addempbutton1 = document.getelementbyid("addempbutton1")
var addempbutton2 = document.getelementbyid("addempbutton2")
addempbutton1.onclick = function(){
var empname = document.getelementbyid("empname").value
var email = document.getelementbyid("email").value
var salary = document.getelementbyid("salary").value
var tr = document.createelement("tr")
var tdname = document.createelement("td")
var tdemail = document.createelement("td")
var tdsalary = document.createelement("td")
var tda = document.createelement("td")
var a = document.createelement("a")
var nametext = document.createtextnode(empname)
var emailtext = document.createtextnode(email)
var salarytext = document.createtextnode(salary)
var atext = document.createtextnode("delete")
tdname.appendchild(nametext)
tdemail.appendchild(emailtext)
tdsalary.appendchild(salarytext)
tda.appendchild(a)
a.href = "javascript:;"
a.onclick = deletea
a.appendchild(atext)
tr.appendchild(tdname)
tr.appendchild(tdemail)
tr.appendchild(tdsalary)
tr.appendchild(tda)
employeetable.appendchild(tr)
}
// 修改
addempbutton2.onclick = function(){
var empname = document.getelementbyid("empname").value
var email = document.getelementbyid("email").value
var salary = document.getelementbyid("salary").value
var tr2 = document.createelement("tr")
tr2.innerhtml = "<td>" + empname + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href='javascript:;'>delete</a></td>"
var a = tr2.getelementsbytagname("a")[0]
a.onclick = deletea
employeetable.appendchild(tr2)
}
}
addfun()
</script>
<pre>
106. a的索引问题
</pre>
<ul id="ul_id">
<li><a href="javascript:;">a的索引问题1</a></li>
<li><a href="javascript:;">a的索引问题2</a></li>
<li><a href="javascript:;">a的索引问题3</a></li>
<li><a href="javascript:;">a的索引问题4</a></li>
</ul>
<script type="text/javascript">
console.log("--第106--");
var ul = document.getelementbyid("ul_id")
var lia = ul_id.getelementsbytagname("a")
//console.log(lia.length)
for (var i=0,l=lia.length; i<l; i++) {
console.log("for循环正在执行"+i);
lia[i].onclick = function(){
console.log("响应函数正在执行"+i);
}
}
</script>
<pre>
107. 操作内联样式
通过js修改元素的样式：语法：元素.style.样式名 = 样式值
注意：如果css的样式名中含有-，这种名称在js中是不合法的比如background-color
需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写
我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式往往会立即显示
但是如果在样式中写了!important，则此时样式会有最高的优先级，
即使通过js也不能覆盖该样式，此时将会导致js修改样式失效
所以尽量不要为样式添加 !important
</pre>
<style type="text/css">
#p2{color: blue !important;}
</style>
<div class="">
<p id="p1">段落01</p>
<p id="p2">段落02</p>
</div>
<div class="">
<button id="btncss01">点我一下</button>
<button id="btncss02">点我一下2</button>
</div>
<script type="text/javascript">
console.log("--第107--");
var btncss01 = document.getelementbyid("btncss01")
var btncss02 = document.getelementbyid("btncss02")
var p1 = document.getelementbyid("p1")
var p2 = document.getelementbyid("p2")
btncss01.onclick = function(){
p1.style.color = "red"
p1.style.backgroundcolor = "yellow"
p2.style.color = "red"
}
//点击按钮2以后，读取元素的样式
// 通过style属性设置和读取的都是内联样式, 无法读取样式表中的样式
btncss02.onclick = function(){
alert(p1.style.color)
}
</script>
<pre>
108. 获取元素的样式
获取元素的当前显示的样式
语法：元素.currentstyle.样式名
它可以用来读取当前元素正在显示的样式
如果当前元素没有设置该样式，则获取它的默认值
currentstyle只有ie浏览器支持，其他的浏览器都不支持
在其他浏览器中可以使用
getcomputedstyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象.样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如：没有设置width，它不会获取到auto，而是一个长度
但是该方法不支持ie8及以下的浏览器
通过currentstyle和getcomputedstyle()读取到的样式都是只读的，
不能修改，如果要修改必须通过style属性
</pre>
<style type="text/css">
#p3{color: #5197ff;height: 30px;font-size: 20px;}
#p4{color: #112233;height: 60px;font-size: 30px;}
</style>
<div class="">
<p id="p3">段落01</p>
<p id="p4">段落02</p>
</div>
<div class="">
<button id="btncss03">点我一下</button>
<button id="btncss04">点我一下</button>
<button id="btncss05">点我一下</button>
</div>
<script type="text/javascript">
console.log("--第108--");
var btncss03 = document.getelementbyid("btncss03")
var btncss04 = document.getelementbyid("btncss04")
var btncss05 = document.getelementbyid("btncss05")
var p3 = document.getelementbyid("p3")
var p4 = document.getelementbyid("p4")
btncss03.onclick = function(){
var p3color = p3.currentstyle.color
console.log( p3color)
}
btncss04.onclick = function(){
var obj = getcomputedstyle(p4,null)
console.log("p4= " + obj.color)
console.log("p4= " + obj.fontsize)
}
</script>
<pre>
109. getstyle()方法
</pre>
<script type="text/javascript">
console.log("--第109--");
function getstyle(obj,name){
if(window.getcomputedstyle){
//正常浏览器的方式，具有getcomputedstyle()方法
return getcomputedstyle(obj,null)[name]
}else{
//ie8的方式，没有getcomputedstyle()方法
return obj.currentstyle[name]
}
}
btncss05.onclick = function(){
var gs = getstyle(p3,"color")
alert("p3color= " + gs )
}
</script>
<pre>
110. 其他样式相关属性
clientwidth
clientheight
- 这两个属性可以获取元素的可见宽度和高度
- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
- 会获取元素宽度和高度，包括内容区和内边距
- 这些属性都是只读的，不能修改
offsetwidth
offsetheight
- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
offsetparent
- 可以用来获取当前元素的定位父元素
- 会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则返回body
offsetleft
- 当前元素相对于其定位父元素的水平偏移量
offsettop
- 当前元素相对于其定位父元素的垂直偏移量
scrollwidth
scrollheight
- 可以获取元素整个滚动区域的宽度和高度
scrollleft
- 可以获取水平滚动条滚动的距离
scrolltop
- 可以获取垂直滚动条滚动的距离
</pre>
<style type="text/css">
#other05{
width: 200px;
height: 300px;
background-color: #bfa;
overflow: auto;
}
#other06{
width: 400px;
height: 600px;
background-color: yellow;
}
</style>
<div id="other_box" style="position: relative;padding: 50px;border: 1px solid red;">
<p id="other01" style="padding: 10px;border: 5px solid;">clientwidth,clientheight</p>
<p id="other02" style="padding: 10px;border: 5px solid;">offsetwidth,offsetheight</p>
<p id="other03">offsetparent</p>
<p id="other04">offsetleft,offsettop</p>
<div id="other05">
<div id="other06">scrollwidth,scrollheight- 可以获取元素整个滚动区域的宽度和高度,scrollleft- 可以获取水平滚动条滚动的距离scrolltop- 可以获取垂直滚动条滚动的距离</div>
</div>
<button id="other_btn01">client-wh</button>
<button id="other_btn02">offset-wh</button>
<button id="other_btn03">offsetparent</button>
<button id="other_btn04">offset-lt</button>
<button id="other_btn05">scroll</button>
<button id="other_btn06">offsettop</button>
</div>
<script type="text/javascript">
console.log("--第110--");
var other01 = document.getelementbyid("other01")
var other02 = document.getelementbyid("other02")
var other03 = document.getelementbyid("other03")
var other04 = document.getelementbyid("other04")
var other05 = document.getelementbyid("other05")
var other06 = document.getelementbyid("other06")
var other_btn01 = document.getelementbyid("other_btn01")
var other_btn02 = document.getelementbyid("other_btn02")
var other_btn03 = document.getelementbyid("other_btn03")
var other_btn04 = document.getelementbyid("other_btn04")
var other_btn05 = document.getelementbyid("other_btn05")
var other_btn06 = document.getelementbyid("other_btn06")
function myclick(btn,fun){
var btn = document.getelementbyid(btn)
btn.onclick = fun
}
myclick("other_btn01",function(){
var clientwidth = other01.clientwidth
var clientheight = other01.clientheight
alert("clientwidth=" + clientwidth +",clientheight=" + clientheight)
})
myclick("other_btn02",function(){
var offsetwidth = other02.offsetwidth
var offsetheight = other02.offsetheight
alert("offsetwidth=" + offsetwidth +",offsetheight=" + offsetheight)
})
myclick("other_btn03",function(){
var offsetparent = other03.offsetparent
alert( offsetparent.id)
})
myclick("other_btn04",function(){
var offsetleft = other04.offsetleft
var offsettop = other04.offsettop
alert("offsetleft=" + offsetleft +",offsettop=" + offsettop)
})
myclick("other_btn05",function(){
var clientwidth = other05.clientwidth
var clientheight = other05.clientheight
var scrollwidth = other05.scrollwidth
var scrollheight = other05.scrollheight
var scrollleft = other05.scrollleft
var scrolltop = other05.scrolltop
alert("clientwidth=" + clientwidth +"\n" +
"scrollleft=" + scrollleft +"\n" +
"scrollwidth=" + scrollwidth +"\n" +
"clientheight=" + clientheight +"\n" +
"scrolltop=" + scrolltop +"\n" +
"scrollheight=" + scrollheight
)
//当满足scrollheight - scrolltop == clientheight
//说明垂直滚动条滚动到底了
//当满足scrollwidth - scrollleft == clientwidth
//说明水平滚动条滚动到底
})
</script>
</body>
</html>
下一篇： 我的Python分析成长之路10