学习地址:
谷粒学院——尚硅谷哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)
JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】
目 录
P9696.尚硅谷_JS基础_DOM查询22:09
获取元素节点
获取元素节点的子节点
dom查询练习【4~6】
P9797.尚硅谷_JS基础_DOM查询21:36
获取父节点和兄弟节点
dom查询练习【7~11】
P9898.尚硅谷_JS基础_全选练习(一)12:39
Checkbox 对象
checked 属性:设置或返回 checkbox 是否应被选中。
“全选按钮”的实现
P9999.尚硅谷_JS基础_全选练习(二)19:22
“全不选按钮、反选按钮、提交按钮”的实现
P100100.尚硅谷_JS基础_全选练习(三)15:56
“全选/全不选按钮”状态同步的实现
P101101.尚硅谷_JS基础_dom查询的剩余方法21:42
document.getElementsByTagName("body")[0]; document.body;
document.documentElement;
document.all document.getElementsByTagName("*")
getElementsByClassName():根据元素的class属性值查询一组元素节点对象
document.querySelector()
document.querySelectorAll()
P102102.尚硅谷_JS基础_dom增删改33:15
DOM方法
DOM 增删改 案例
1、创建一个"广州"节点,添加到#city下
2、将"广州"节点插入到#bj前面
3、使用"广州"节点替换#bj节点
4、删除#bj节点
5、读取#city内的HTML代码
6、设置#bj内的HTML代码
7、创建一个"广州"节点,添加到#city下
P103103.尚硅谷_JS基础_添加删除记录-删除21:46
取消超链接的默认跳转行为
window 对象方法
删除dom元素
P9696.尚硅谷_JS基础_DOM查询22:09
获取元素节点
通过document对象调用getElementById():通过id属性获取一个元素节点对象。getElementsByTagName():通过标签名获取一组元素节点对象。getElementsByName():通过name属性获取一组元素节点对象。
获取元素节点的子节点
通过具体的元素节点调用
getElementsByTagName():方法,返回当前节点的指定标签名后代节点。childNodes:属性,表示当前节点的所有子节点。firstChild:属性,表示当前节点的第一个子节点。lastChild:属性,表示当前节点的最后一个子节点。
dom查询练习【4~6】
childNodes:属性,表示当前节点的所有子节点。
P9797.尚硅谷_JS基础_DOM查询21:36
获取父节点和兄弟节点
通过具体的节点调用
parentNode:属性,表示当前节点的父节点previousSibling:属性,表示当前节点的前一个兄弟节点nextSibling:属性,表示当前节点的后一个兄弟节点
dom查询练习【7~11】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> --><style type="text/css">@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;}#btnList {float: left;}#total {width: 450px;float: left;}ul {list-style-type: none;margin: 0px;padding: 0px;}.inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}</style><script type="text/javascript">/** 定义一个函数,专门用来为指定元素绑定单击响应函数* 参数:* idStr:要绑定单击响应函数的对象的id属性值* fun:事件的回调函数,当单击元素时,该函数将会被触发*/function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun; // 函数也是对象,可以作为实参}window.onload = function() {//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function() {//查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function() {//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中//即使查询到的元素只有一个,也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//变量lisfor (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}};//为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function() {//查找name=gender的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for (var i = 0; i < inputs.length; i++) {/** innerHTML用于获取元素内部的HTML代码的* 对于自结束标签,这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点属性,* 直接使用 元素.属性名* 例子:元素.id 元素.name 元素.value* 注意:class属性不能采用这种方式,* 读取class属性时需要使用 元素.className*/alert(inputs[i].className);}};//为id为btn04的按钮绑定一个单击响应函数var btn04 = document.getElementById("btn04");btn04.onclick = function() {//获取id为city的元素var city = document.getElementById("city");//查找#city下所有li节点var lis = city.getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}};//为id为btn05的按钮绑定一个单击响应函数var btn05 = document.getElementById("btn05");btn05.onclick = function() {//获取id为city的节点var city = document.getElementById("city");//返回#city的所有子节点/** childNodes属性会获取包括文本节点在内的所有节点* 根据DOM标签标签间空白也会当成文本节点* 注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个*/var cns = city.childNodes;//alert(cns.length);// for (var i = 0; i < cns.length; i++) {// alert(cns[i]);// }/** children属性可以获取当前元素的所有子元素*/var cns2 = city.children;alert(cns2.length);};//为id为btn06的按钮绑定一个单击响应函数var btn06 = document.getElementById("btn06");btn06.onclick = function() {//获取id为phone的元素var phone = document.getElementById("phone");//返回#phone的第一个子节点//phone.childNodes[0];//firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)var fir = phone.firstChild;//firstElementChild获取当前元素的第一个子元素/** firstElementChild不支持IE8及以下的浏览器,* 如果需要兼容他们尽量不要使用*///fir = phone.firstElementChild;alert(fir);};//为id为btn07的按钮绑定一个单击响应函数myClick("btn07", function() {//获取id为bj的节点var bj = document.getElementById("bj");//返回#bj的父节点var pn = bj.parentNode;alert(pn.innerHTML);/** innerText* - 该属性可以获取到元素内部的文本内容* - 它和innerHTML类似,不同的是它会自动将html去除*///alert(pn.innerText);});//为id为btn08的按钮绑定一个单击响应函数myClick("btn08", function() {//获取id为android的元素var and = document.getElementById("android");//返回#android的前一个兄弟节点(也可能获取到空白的文本)var ps = and.previousSibling;//previousElementSibling获取前一个兄弟元素,IE8及以下不支持//var pe = and.previousElementSibling;alert(ps);});//读取#username的value属性值myClick("btn09", function() {//获取id为username的元素var um = document.getElementById("username");//读取um的value属性值//文本框的value属性值,就是文本框中填写的内容alert(um.value);});//设置#username的value属性值myClick("btn10", function() {//获取id为username的元素var um = document.getElementById("username");um.value = "今天天气真不错~~~";});//返回#bj的文本值myClick("btn11", function() {//获取id为bj的元素var bj = document.getElementById("bj");//alert(bj.innerHTML);//alert(bj.innerText);//获取bj中的文本节点/*var fc = bj.firstChild;alert(fc.nodeValue);*/alert(bj.firstChild.nodeValue);});};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male" />Male<input class="hello" type="radio" name="gender" value="female" />Female<br><br>name:<input type="text" name="name" id="username" value="abcde" /></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body></html>
P9898.尚硅谷_JS基础_全选练习(一)12:39
Checkbox 对象
checked 属性:设置或返回 checkbox 是否应被选中。
“全选按钮”的实现
P9999.尚硅谷_JS基础_全选练习(二)19:22
“全不选按钮、反选按钮、提交按钮”的实现
P100100.尚硅谷_JS基础_全选练习(三)15:56
“全选/全不选按钮”状态同步的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title><script type="text/javascript">window.onload = function() {//获取四个多选框itemsvar items = document.getElementsByName("items");//获取全选/全不选的多选框var checkedAllBox = document.getElementById("checkedAllBox");/** 全选按钮* - 点击按钮以后,四个多选框全都被选中*///1.#checkedAllBtn//为id为checkedAllBtn的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function() {//遍历itemsfor (var i = 0; i < items.length; i++) {//通过多选框的checked属性可以来获取或设置多选框的选中状态//alert(items[i].checked);items[i].checked = true; //设置四个多选框变成选中状态}checkedAllBox.checked = true; //将全选/全不选设置为选中};/** 全不选按钮* - 点击按钮以后,四个多选框都变成没选中的状态*///2.#checkedNoBtn//为id为checkedNoBtn的按钮绑定一个单击响应函数var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function() {for (var i = 0; i < items.length; i++) {items[i].checked = false; //将四个多选框设置为没选中的状态}checkedAllBox.checked = false; //将全选/全不选设置为不选中};/** 反选按钮* - 点击按钮以后,选中的变成没选中,没选中的变成选中*///3.#checkedRevBtnvar checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function() {//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for (var i = 0; i < items.length; i++) {//判断多选框状态/*if(items[i].checked){//证明多选框已选中,则设置为没选中状态items[i].checked = false;}else{//证明多选框没选中,则设置为选中状态items[i].checked = true;}*/items[i].checked = !items[i].checked;//判断四个多选框是否全选//只要有一个没选中则就不是全选if (!items[i].checked) {//一旦进入判断,则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;}}//在反选时也需要判断四个多选框是否全都选中};/** 提交按钮:* - 点击按钮以后,将所有选中的多选框的value属性值弹出*///4.#sendBtn//为sendBtn绑定单击响应函数var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function() {//遍历itemsfor (var i = 0; i < items.length; i++) {//判断多选框是否选中if (items[i].checked) {alert(items[i].value);}}};//5.#checkedAllBox/** 全选/全不选 多选框* - 当它选中时,其余的也选中;当它取消时 其余的也取消* * 在事件的响应函数中,响应函数是给谁绑定的this就是谁*///为checkedAllBox绑定单击响应函数checkedAllBox.onclick = function() {// alert(this === checkedAllBox); // true//设置多选框的选中状态for (var i = 0; i < items.length; i++) {items[i].checked = this.checked;}};//6.items/** 如果四个多选框全都选中,则checkedAllBox也应该选中* 如果四个多选框没都选中,则checkedAllBox也不应该选中*///为四个多选框分别绑定点击响应函数for (var i = 0; i < items.length; i++) {items[i].onclick = function() {//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for (var j = 0; j < items.length; j++) {//判断四个多选框是否全选//只要有一个没选中则就不是全选if (!items[j].checked) {//一旦进入判断,则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;//一旦进入判断,则已经得出结果,不用再继续执行循环break;}}};}};</script></head><body><form method="post" action="">你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选<br /><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反选" /><input type="button" id="sendBtn" value="提交" /></form></body></html>
P101101.尚硅谷_JS基础_dom查询的剩余方法21:42
document.getElementsByTagName("body")[0]; document.body;
document.documentElement;
document.all document.getElementsByTagName("*")
getElementsByClassName():根据元素的class属性值查询一组元素节点对象
根据元素的class属性值查询一组元素节点对象,getElementsByClassName()可以根据class属性值获取一组元素节点对象,但是该方法不支持IE8及以下的浏览器。
document.querySelector()
document.querySelector()
需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象。虽然IE8中没有getElementsByClassName(),但是可以使用querySelector()代替。使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个。
document.querySelectorAll()
document.querySelectorAll()
该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回。即使符合条件的元素只有一个,它也会返回数组。
P102102.尚硅谷_JS基础_dom增删改33:15
DOM方法
DOM 增删改 案例
1、创建一个"广州"节点,添加到#city下
document.createElement()
可以用于创建一个元素节点对象,它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,并将创建好的对象作为返回值返回。
document.createTextNode()
可以用来创建一个文本节点对象,需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回。
appendChild()
向一个父节点中添加一个新的子节点用法:父节点.appendChild(子节点);
2、将"广州"节点插入到#bj前面
insertBefore()
可以在指定的子节点前插入新的子节点语法:父节点.insertBefore(新节点,旧节点);
3、使用"广州"节点替换#bj节点
replaceChild()
可以使用指定的子节点替换已有的子节点语法:父节点.replaceChild(新节点,旧节点);
4、删除#bj节点
removeChild()
可以删除一个子节点语法:父节点.removeChild(子节点);子节点.parentNode.removeChild(子节点); // 更方便
5、读取#city内的HTML代码
6、设置#bj内的HTML代码
7、创建一个"广州"节点,添加到#city下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> --><style type="text/css">@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;text-align: left;}#btnList {float: left;}#total {width: 450px;float: left;}ul {list-style-type: none;margin: 0px;padding: 0px;}.inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}</style><script type="text/javascript">window.onload = function() {//1、创建一个"广州"节点,添加到#city下myClick("btn01", function() {//创建广州节点 <li>广州</li>//创建li元素节点var li = document.createElement("li");//创建广州文本节点var gzText = document.createTextNode("广州");//将gzText设置li的子节点li.appendChild(gzText);//获取id为city的节点var city = document.getElementById("city");//将广州添加到city下city.appendChild(li);});//2、将"广州"节点插入到#bj前面myClick("btn02", function() {//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");//父节点.insertBefore(新节点, 旧节点);city.insertBefore(li, bj);});//3、使用"广州"节点替换#bj节点myClick("btn03", function() {//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");//父节点.replaceChild(新节点, 旧节点);city.replaceChild(li, bj)});//4、删除#bj节点myClick("btn04", function() {//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");city.removeChild(bj);//子节点.parentNode.removeChild(子节点);// bj.parentNode.removeChild(bj);});//5、读取#city内的HTML代码myClick("btn05", function() {//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//6、设置#bj内的HTML代码myClick("btn06", function() {//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});//7、创建一个"广州"节点,添加到#city下myClick("btn07", function() {//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*/// city.innerHTML += "<li>广州</li>";//创建一个livar li = document.createElement("li");//向li中设置文本li.innerHTML = "广州";//将li添加到city中city.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">1、创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">2、将"广州"节点插入到#bj前面</button></div><div><button id="btn03">3、使用"广州"节点替换#bj节点</button></div><div><button id="btn04">4、删除#bj节点</button></div><div><button id="btn05">5、读取#city内的HTML代码</button></div><div><button id="btn06">6、设置#bj内的HTML代码</button></div><div><button id="btn07">7、创建一个"广州"节点,添加到#city下</button></div></div></body></html>
P103103.尚硅谷_JS基础_添加删除记录-删除21:46
取消超链接的默认跳转行为
两种方式都可以!
window 对象方法
删除dom元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><!-- <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> --><style type="text/css">@CHARSET "UTF-8";#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;}th, td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}</style><script type="text/javascript">window.onload = function() { // 点击超链接以后,删除一个员工的信息//获取所有的超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for (var i = 0; i < allA.length; i++) {allA[i].onclick = function() {//点击超链接以后需要删除超链接所在的那行//这里我们点击哪个超链接this就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//删除之前弹出一个提示框/** confirm()用于弹出一个带有确认和取消按钮的提示框* 需要一个字符串作为参数,该字符串将会作为提示文字显示出来* 如果用户点击确认则会返回true,如果点击取消则返回false*/var flag = confirm("确认删除" + name + "吗?");//如果用户点击确认if (flag) {//删除trtr.parentNode.removeChild(tr);}/** 点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,* 但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为*/return false;};}};</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@</td><td>10000</td><td><a href="deleteEmp?id=003">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="addEmpButton" value="abc">Submit</button></td></tr></table></div></body></html>
1月22日,5:14就醒了,5:55起床~
JavaScript基础12-day14【DOM查询(获取元素节点 获取元素节点的子节点) 全选练习 DOM增删改 DOM添加删除记录 Window对象方法】