1,js是一时间驱动为和核心的一门语言。
事件的三要素:事件源,事件,事件驱动程序
代码的书写步骤如下:
-
(1)获取事件源:document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
(2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
-
(3)书写事件驱动程序:关于DOM的操作
<body> //基本实现方法!! <div id="box1"></div> <script type="text/javascript"> // 1、获取事件源 var div = document.getElementById("box1"); // 2、绑定事件 div.onclick = function () { // 3、书写事件驱动程序 alert("我是弹出的内容"); } </script> </body>
以上是必须记忆的指令方法!
也就是在div.onclick时使用的指令,onclick是一个点击后效果链接方式
1.事件源的获取方式;
1,var div = doucment.getElementById(id) //最简单的获取方式之一,通过id获取事件源 2,var div = doucment.getElementByTagName(“p”)//按照标签名字获取事件源 3,var div = doucment.getElenmentByClassName(“class”)//按照类名选取事件源
2.绑定事件的方式
方式一:直接绑定匿名函数
<script> var k.onclick = function(){ console.log("呵呵") } //直接将匿名函数中的事件赋予事件源 </script>
方式二:单独定义函数后,再绑定
<div id="box1" ></div> <script type="text/javascript"> var div1 = document.getElementById("box1"); //绑定事件的第二种方式 div1.onclick = fu; function fu(){ console.log(2333) } }//此方法绑定需要注意对于函数名的区分 </script>
方法三:行内绑定:
<!--行内绑定--> <div id="box1" onclick="fn()"></div> //在行内直接增加onclick的方法进行获取函数 <script type="text/javascript"> function fn() { alert("我是弹出的内容"); } </script>
3.事件驱动程序!重点!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: pink; cursor: pointer; } </style> <script type="text/javascript"> window.onload = function(){ function $(id){ return document.getElementById(id) } $('box').onclick = function(){ this.style.width = '200px'; this.style.height = '200px'; this.style.backgroundColor = 'red'; } } </script> </head> <body> <div id="box"></div> </body> </html> 简单的点击触发事件,粉色方框点击后变为红色并且放大
需要注意的要点:
1,在js中写属性值时,需要用引号
2,属性名在js和style中表现方式不同,在js中需要使用驼峰体所有的——后面的都第一个字符需要大写
onload事件,当页面的文本和图片标签加载完毕后,触发onload事件。
js的加载是和html同步运行的,而onload也会加载,但会还是会等待html加载完毕后触发行为。
事件例子 广告栏的关闭:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 100%; height: 100px; background-color: pink; cursor: pointer; display: block; float: right; } #yc{ float: right; background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ function $(id){ return document.getElementById(id) } $('yc').onclick = function(){ $('box').style.display = "none"; } } </script> </head> <body> <div id = "box"><a id = "yc">X<a> </div> </body> </html> //控制关闭图片
2,图片的img悬停显示和关闭
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 50%; height: 400px; display:block; background : url('../第一天/timg.gif') no-repeat; } </style> <script type="text/javascript"> window.onload = function(){ function $(id){ return document.getElementById(id) } $('box').onmouseover = function(){ $('box').style.background = "url(../第一天/taidi.gif) no-repeat"; } $('box').onmouseout = function(){ $('box').style.background = "url(../第一天/timg.gif) no-repeat"; } } </script> </head> <body> <div id = "box"> </div> </body> </html> 两张背景图片的改变方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 500px; height: 333px; display:block; /*background : url('../第一天/timg.gif') no-repeat;*/ } </style> <script type="text/javascript"> window.onload = function(){ function $(id){ return document.getElementById(id) } $('box').onmouseover = function(){ $('yc').src = "../第一天/timg.gif"; } $('box').onmouseout = function(){ $('yc').src = "../第一天/taidi.gif"; } } </script> </head> <body> <div id = "box"><img id="yc" src="../第一天/taidi.gif"> </div> </body> </html> 直接修改图片的src方式!
4,重点,什么是DOM,
1,DOM就是文本对象模型,DOM为文档提供了结构化表示,为js操作html元素而制作定的一个规范。
2,在DOM的视野中所有的数据都是一个个节点中的,并且组成一熟状图
在html中,一切都是节点:
1,元素节点:html标签
2,文本节点:标签中的文字
3,属性节点:标签的属性
而DOM就是用来找到元素节点并且对元素节点进行增删改查,并且重要的是对时间的触发响应:事件源、时间、事件的驱动程序!
获取事件元的方法:
var div1 = document.getElementById("box1"); //id 获取事件源 var div2 = document.getElementByTagName("hhee"); //标签名字获取事件源 var div3 = document.getElementByClassName("34567") //按照类名获取事件源
3,父级节点的获取:
节点.parentNode 此为父级节点获取方式!
后一个元素节点:
1,nextSibling在火狐、谷歌、ie9+ :都是值得下一个节点,并且包含所有的标签和空文档和换行节点。因此下一个节点为空一样显示空,在ie678中显示下一个元素节点
2,nextElementSibling在火狐、谷歌、ie9+ :显示下一个元素节点的,标签!
经常另种获取方法利用 | |表示!
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
previous:前一个元素
(1)previousSibling:
-
-
火狐、谷歌、IE9+版本:都指的是前一个节点(包括标签、空文档和换行节点)。
-
IE678版本:指前一个元素节点(标签)。
-
(2)previousElementSibling:
-
- 火狐、谷歌、IE9+版本:都指的是前一个元素节点(标签)
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
5,获取单个字节点:
1,第一个字节点 | 第一个子元素节点:
1,firstChild:第一个子节点,节点中的第一个子节点,此节点为父级节点
ie678中使用
2,firstElementChild:第一个元素子节点,节点中的第一个子节点,此节点为父级节点
ie678以上使用
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
2,最后一个子节点 | 最后一个元素节点
1,lastChild:最后一个子节点
2,lastElementChild:最后一个元素子节点
6,获取所有的子节点:
(1)childNodes:标准属性。返回的是指定元素的子节点的集合(包括元素节点、所有属性、文本节点)。是W3C的亲儿子。
-
- 火狐 谷歌等高本版会把换行也看做是子节点。(了解)
用法:
子节点数组 = 父节点.childNodes; //获取所有节点。
(2)children:非标准属性。返回的是指定元素的子元素节点的集合。【重要】
-
- 它只返回HTML节点,甚至不返回文本节点。
- 在IE6/7/8中包含注释节点(在IE678中,注释节点不要写在里面)。
虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。
用法:(用的最多)
子节点数组 = 父节点.children; //获取所有节点。用的最多。
6,DOM节点的操作;
1,创建节点:也就是创建标签
新的标签(元素节点) = doument。cerateElement(“标签名”);
创建节点后,节点会在控制台显示,一般会配合插入节点使用,将创建的节点插入到某个子节点或者父节点的附近。
2。插入节点:
都会找到父节点,然后插入到其中,于子节点并列
1,父节点.appendchild(节点名);
2,父节点.insertBefore(新的子节名,被插的子节点)
如果被插的子节点为null,那么他将在父节点的最后插入
3,删除节点:
1,父节点.removechild(子节点);
2,自己.parentNode.removechild(自己)
4,复制节点:
格式如下:
要复制的节点.cloneNode(); //括号里不带参数和带参数false,效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数,效果是不同的。解释如下:
不带参数/带参数false:只复制节点本身,不复制子节点。
带参数true:既复制节点本身,也复制其所有的子节点。
7.。设置节点的属性:
1,元素节点.属性;元素节点[属性];
<body> <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1"> <script type="text/javascript"> var myNode = document.getElementsByTagName("img")[0]; console.log(myNode.src); console.log(myNode.className); //注意,是className,不是class console.log(myNode.title); console.log("------------"); console.log(myNode["src"]); console.log(myNode["className"]); //注意,是className,不是class console.log(myNode["title"]); </script> </body>
2,方法二,
元素节点.getAttribute("属性名称");
console.log(myNode.getAttribute("src")); console.log(myNode.getAttribute("class")); console.log(myNode.getAttribute("title"));
2,设置节点的属性值:
老方法:
$(id).src = " ******"
推荐方法:
元素节点.setAttribute(属性名,新的属性值);
$(id).setAttribute("src","******") 次方法配合循环使用,味道更佳!
3.删除节点属性值;
元素名.removeAttribute(属性名);
1,模态框案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding:0; } html,body{ height:100%; } #box{ width: 100%; height: 100%; background-color: red; } #p1{ position: relative; width: 400px; height:200px; top: 100px; line-height: 200px; text-align: center; background-color: #fff; margin: auto; } #span1{ position: absolute; width: 40px; height:30px; top: 0; right: 0; line-height: 30px; text-align:center; background-color: green; } </style> <script type="text/javascript"> window.onload = function(){ var oTT = document.getElementById("tt"); var oDiv = document.createElement("div"); var oP = document.createElement("p"); var oSpan = document.createElement("span"); //添加标签中的属性 oDiv.id = "box"; oP.id = "p1"; oSpan.id = "span1"; oP.innerHTML = "这是文本输入框"; oSpan.innerHTML = "X"; oDiv.appendChild(oP); oP.appendChild(oSpan); oTT.onclick = function(){ this.parentNode.appendChild(oDiv); } oSpan.onclick = function(){ oTT.parentNode.removeChild(oDiv); } } </script> </head> <body> <button id="tt">弹出</button> </body> </html> 思路:创建新的标签,在点击按钮的时候,新的标签插入body中显示,当关掉时就把标签删除
2,简易写字板:
3,js模拟选择其中的hover
4,tab栏选项卡
5,购物车
暂时跳过:一回来写!