JavaScript基础视频教程总结（101-110章）

最新推荐文章于 2024-05-21 19:09:41 发布

m0_67846661

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量106

点赞数

分类专栏： js 文章标签： javascript html linq

本文链接：https://blog.csdn.net/m0_67846661/article/details/125100109

版权

js 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

<!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>