- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>091-100章总结</title>
- <link rel="stylesheet" type="text/css" href="css/base.css"/>
- <link rel="stylesheet" type="text/css" href="css/css.css"/>
- </head>
- <body>
- <pre>
- 091. DOM简介
- 什么是DOM
- • DOM,全称Document Object Model文档对象模型。
- • JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
- • 文档– 文档表示的就是整个的HTML网页文档
- • 对象– 对象表示将网页中的每一个部分都转换为了一个对象。
- • 模型– 使用模型来表示对象之间的关系,这样方便我们获取对象(倒树模型)。
- 节点
- • 节点Node,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
- • 比如:html标签、属性、文本、注释、整个文档等都是一个节点。
- • 虽然都是节点,但是实际上他们的具体类型是不同的。
- • 比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
- • 节点的类型不同,属性和方法也都不尽相同。
- • 常用节点分为四类
- – 文档节点:整个HTML文档
- – 元素节点:HTML文档中的HTML标签
- – 属性节点:元素的属性
- – 文本节点:HTML标签中的文本内容
- 节点的属性
- 文档节点(document)
- • 文档节点document,代表的是整个HTML文档,网页中的所有节点都是它的子节点。
- • document对象作为window对象的属性存在的,我们不用获取可以直接使用。
- • 通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
- 元素节点(Element)
- • HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
- • 浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
- • 比如:
- – document.getElementById()
- – 根据id属性值获取一个元素节点对象。
- 属性节点(Attr)
- • 属性节点表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。
- • 可以通过元素节点来获取指定的属性节点。
- • 例如:
- – 元素节点.getAttributeNode("属性名");
- • 注意:我们一般不使用属性节点。
- 文本节点(Text)
- • 文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点(包括换行和空格)。
- • 它包括可以字面解释的纯文本内容。
- • 文本节点一般是作为元素节点的子节点存在的。
- • 获取文本节点时,一般先要获取元素节点。在通过元素节点获取文本节点。
- • 例如:
- – 元素节点.firstChild;
- – 获取元素节点的第一个子节点,一般为文本节点。
- </pre>
- <button id="btn001">我是一个按钮</button>
- <script type="text/javascript">
- console.log("第091");
- /*
- * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
- * 可以在页面中直接使用,文档节点代表的是整个网页
- */
- console.log(document);
- //获取到button对象
- var btn001 = document.getElementById("btn001");
- //修改按钮的文字
- btn001.innerHTML = "I'm Button";
- </script>
- <pre>
- 092. 事件的简介
- • 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
- • JavaScript 与 HTML 之间的交互是通过事件实现的。
- • 对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键,等等。
- 事件发生以后要处理这个事件(比如你亲了某人一下,某人有什么反应)。
- </pre>
- <!--
- 我们可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码将会执行
- 这种写法我们称为结构和行为耦合,不方便维护,不推荐使用
- -->
- <button id="btn" οnclick="alert('讨厌,你点我干嘛!');">我是一个按钮点我</button>
- <button id="btn002">我是一个按钮点我</button>
- <script type="text/javascript">
- console.log("第092");
- /*
- * 事件,就是用户和浏览器之间的交互行为,
- * 比如:点击按钮,鼠标移动、关闭窗口。。。
- */
- //获取按钮对象
- var btn002 = document.getElementById("btn002");
- /*
- * 可以为按钮的对应事件绑定处理函数的形式来响应事件
- * 这样当事件被触发时,其对应的函数将会被调用
- */
- //绑定一个单击事件
- //像这种为单击事件绑定的函数,我们称为单击响应函数
- btn002.onclick = function(){
- alert("你还点~~~");
- };
- </script>
- <pre>
- 093. 文档的加载
- 浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。
- onload事件会在整个页面加载完成之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
- 注意:window.onload一个页面只能写一个,多个一起会执行最后一个,可以写个方法解决。
- </pre>
- <script type="text/javascript">
- console.log("第093");
- function btn003(){
- //获取id为btn的按钮
- var btn003 = document.getElementById("btn003");
- //为按钮绑定一个单击响应函数
- btn003.onclick = function(){
- alert("hello");
- };
- };
- </script>
- <button id="btn003">我是一个按钮</button>
- <pre>
- 094. DOM查询
- 获取元素节点
- • 通过document对象调用
- 1. getElementById()
- – 通过id属性获取一个元素节点对象
- 2. getElementsByTagName()
- – 通过标签名获取一组元素节点对象,伪数组
- 3. getElementsByName()
- – 通过name属性获取一组元素节点对象
- </pre>
- <pre>
- 095. DOM查询2
- 获取元素节点的子节点
- • 通过具体的元素节点调用
- 1. getElementsByTagName()
- – 方法,返回当前节点的指定标签名后代节点
- 2. childNodes
- – 属性,表示当前节点的所有子节点
- 3. firstChild
- – 属性,表示当前节点的第一个子节点
- 4. lastChild
- – 属性,表示当前节点的最后一个子节点
- </pre>
- <pre>
- 096. DOM查询3
- 获取父节点和兄弟节点
- • 通过具体的节点调用
- 1. parentNode
- – 属性,表示当前节点的父节点
- 2. previousSibling
- – 属性,表示当前节点的前一个兄弟节点
- 3. nextSibling
- – 属性,表示当前节点的后一个兄弟节点
- </pre>
- <div class="clearfix">
- <div id="total">
- <div class="inner">
- <p>你喜欢哪个城市?</p>
- <ul class="clearfix" id="city">
- <li id="bj">北京</li>
- <li>上海</li>
- <li>东京</li>
- <li>首尔</li>
- </ul>
- <p>你喜欢哪款单机游戏?</p>
- <ul class="clearfix" id="game">
- <li id="rl">红警</li>
- <li>实况</li>
- <li>极品飞车</li>
- <li>魔兽</li>
- </ul>
- <p>你手机的操作系统是?</p>
- <ul id="phone"> <li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
- </div>
- <div class="inner">
- <p>gender:</p>
- <p>
- <span>
- <input class="hello" id="male" type="radio" name="gender" value="male"/>
- <label for="male">male</label>
- </span>
- <span>
- <input class="hello" id="female" type="radio" name="gender" value="female"/>
- <label for="female">female</label>
- </span>
- </p>
- <p>name:<input type="text" name="name" id="username" value="abcde"/></p>
- </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>
- </div>
- <script type="text/javascript">
- console.log("第094,095,096");
- // 定义一个通用点击事件函数
- function myClick(btn,fun){
- var btn = document.getElementById(btn);
- btn.onclick = fun;
- };
- myClick("btn01",function(){
- var bj = document.getElementById('bj');
- alert(bj.innerHTML);
- });
- myClick("btn02",function(){
- var lis = document.getElementsByTagName("li"); //一组元素节点对象
- //alert(lis[0]);
- for(var i=0 , liLen = lis.length; i<lis.length; i++){
- console.log(lis[i].innerHTML);
- }
- });
- myClick("btn03",function(){
- var names = document.getElementsByName("gender");//一组元素节点对象
- /*
- * innerHTML用于获取元素内部的HTML代码的
- * 对于自结束标签,这个属性没有意义
- */
- //alert(inputs[i].innerHTML);
- /*
- * 如果需要读取元素节点属性,
- * 直接使用 元素.属性名
- * 例子:元素.id 元素.name 元素.value
- * 注意:class属性不能采用这种方式,
- * 读取class属性时需要使用 元素.className
- */
- for(var i=0;i<names.length;i++){
- alert(names[i].value);
- }
- })
- myClick("btn04",function(){
- var city = document.getElementById('city');
- var lis = city.getElementsByTagName('li'); //返回当前节点的指定标签名后代节点
- //alert(lis[0]);
- for(var i=0;i<lis.length;i++){
- alert(lis[i].innerHTML);
- }
- });
- myClick("btn05",function(){
- var city = document.getElementById('city');
- var cns = city.childNodes;
- /*
- * childNodes属性会获取包括文本节点在内的所有节点
- * 根据DOM标签标签间空白也会当成文本节点
- * 注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,
- * 所以该属性在IE8中会返回4个子元素而其他浏览器是9个
- */
- //alert(cns.length);
- for(var i=0;i<cns.length;i++){
- alert(cns[i]);
- }
- /*
- * children属性可以获取当前元素的所有子元素
- */
- var cns2 = city.children;
- alert(cns2.length);
- });
- myClick("btn06",function(){
- var phone = document.getElementById('phone');
- var fir = phone.firstChild; // 获取到当前元素的第一个子节点(包括空白文本节点)
- alert(fir);
- //firstElementChild获取当前元素的第一个子元素
- /*
- * firstElementChild不支持IE8及以下的浏览器,
- * 如果需要兼容他们尽量不要使用
- */
- fir = phone.firstElementChild;
- alert(fir);
- });
- myClick("btn07",function(){
- var bj = document.getElementById('bj');
- var pn = bj.parentNode;
- alert(pn.innerHTML);
- /*
- * innerText
- * - 该属性可以获取到元素内部的文本内容
- * - 它和innerHTML类似,不同的是它会自动将html标签去除
- */
- alert(pn.innerText);
- });
- myClick("btn08",function(){
- var android = document.getElementById('android');
- var ps = android.previousSibling; //前一个兄弟节点(也可能获取到空白的文本)
- alert(ps);
- //previousElementSibling获取前一个兄弟元素,IE8及以下不支持
- var ps = android.previousElementSibling;
- alert(ps);
- });
- myClick("btn09",function(){
- var username = document.getElementById('username');
- var um = username.value;
- alert(um);
- });
- myClick("btn10",function(){
- var username = document.getElementById('username');
- username.value = "今天天气真好。";
- });
- myClick("btn11",function(){
- var bj = document.getElementById('bj');
- alert (bj.innerHTML);
- alert (bj.innerText);
- alert(bj.firstChild.nodeValue);
- });
- </script>
- <pre>
- 097. 图片切换的练习
- </pre>
- <div class="img-exercise">
- <p id="infor"></p>
- <img src="data:images/1.jpg" alt="1" />
- <button id="prev">上一个</button>
- <button id="next">下一个</button>
- </div>
- <script type="text/javascript">
- console.log("第097");
- var prev = document.getElementById('prev');
- var next = document.getElementById('next');
- var img = document.getElementsByTagName('img')[0];
- var imgArray = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
- var imgArrayLength = imgArray.length;
- var infor = document.getElementById('infor');
- var index = 0;
- infor.innerHTML = "一共"+imgArrayLength+"张图片,当前是第"+(index+1)+"张。";
- prev.onclick = function(){
- index--;
- if(index <0 ){
- index = imgArrayLength -1;
- }
- img.src = imgArray[index];
- infor.innerHTML = "一共"+imgArrayLength+"张图片,当前是第"+(index+1)+"张。";
- }
- next.onclick = function(){
- index++;
- if(index > imgArrayLength -1 ){
- index = 0;
- }
- img.src = imgArray[index];
- infor.innerHTML = "一共"+imgArrayLength+"张图片,当前是第"+(index+1)+"张。";
- }
- </script>
- <pre>
- 098. 全选练习1
- </pre>
- <pre>
- 099. 全选练习2
- </pre>
- <pre>
- 100. 全选练习3
- </pre>
- <form method="post" action="">
- <p>你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选 </p>
- <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>
- <script type="text/javascript">
- console.log("第098,099,100");
- function inClick(inBtn,fun){
- var inBtn = document.getElementById(inBtn);
- inBtn.onclick = fun;
- };
- function moreSelect(){
- var items = document.getElementsByName('items');
- var itemsLength = items.length;
- var checkedAllBox = document.getElementById('checkedAllBox');
- // 全选
- inClick('checkedAllBtn',function(){
- for(var i=0;i<itemsLength;i++){
- items[i].checked = true;
- }
- checkedAllBox.checked = true;
- })
- // 全不选
- inClick('checkedNoBtn',function(){
- for(var i=0;i<itemsLength;i++){
- items[i].checked = false;
- }
- checkedAllBox.checked = false;
- })
- // 反选
- inClick('checkedRevBtn',function(){
- for(var i=0;i<itemsLength;i++){
- /*if(items[i].checked){
- items[i].checked = false;
- }else{
- items[i].checked = true;
- }*/
- items[i].checked = !items[i].checked;
- }
- checkedAllBox.checked = !checkedAllBox.checked;
- })
- // 提交
- inClick('sendBtn',function(){
- for(var i=0;i<itemsLength;i++){
- if(items[i].checked){
- alert(items[i].value);
- }
- }
- })
- // 全选/全不选
- inClick('checkedAllBox',function(){
- for(var i=0;i<itemsLength;i++){
- items[i].checked = this.checked;
- }
- })
- // items点击
- /*
- * 如果四个多选框全都选中,则checkedAllBox也应该选中
- * 如果四个多选框没都选中,则checkedAllBox也不应该选中
- */
- for(var i=0;i<itemsLength;i++){
- items[i].onclick = function(){
- checkedAllBox.checked = true;
- for (var j=0; j<items.length; j++) {
- if(!items[j].checked){
- checkedAllBox.checked = false;
- break;
- }
- }
- }
- }
- }
- </script>
- <pre>
- 附加:window.onload 加载多个函数的的两种方法
- </pre>
- <script type="text/javascript">
- function a(){
- console.log("a");
- }
- function b(){
- console.log("b");
- }
- function c(){
- console.log("c");
- }
- //1
- window.onload =function() {
- a();
- b();
- c();
- }
- //2
- function addLoadEvent(func) {
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = func;
- } else {
- window.onload = function() {
- oldonload();
- func();
- }
- }
- }
- addLoadEvent(a);
- addLoadEvent(b);
- addLoadEvent(c);
- addLoadEvent(btn003);
- addLoadEvent(moreSelect);
- </script>
- </body>
- </html>
JavaScript基础视频教程总结(091-100章)
最新推荐文章于 2024-05-17 13:52:13 发布