JavaScript学习笔记(续)
来源:互联网 发布:教课程财务会计软件 编辑:程序博客网 时间:2024/06/05 06:36
一、 JavaScript的组成
ECMAScript:JavaScript的语法标准
DOM:文档对象模型
BOM:浏览器对象模型
二、 BOM
全称 Browser Object Model 浏览器对象模型
window对象是JS中的顶级对象
所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window
三、window的方法
1. window.open(url,target,param)
url要打开的地址
target新窗口的位置
_blank _self _parent(父框架)
param心窗口的一些设置
2. window。close()关闭窗口
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>window-load</title> <!--js--> <script> //window方法anload,在页面加载完成之后自动执行 window.onload=function(){ var show=document.getElementById("showDiv"); alert(show); show.innerHTML="<h1>js动态写入</h1>"; } </script> </head> <body> <div id="showDiv"></div> </body></html>
四、 js获取html标签对象的方式
1. document.getElementById 通过id获取
2. document.getElementsByTagName 通过标签名获取,返回值是数组
如var div = document.get…Name(“div”);
var div1 =div[0];//获取数组中的第一个
3. documen.getElementsByClassName
通过class的值来获取,为标签添加class,
根据class的取值获取标签,返回值是数组
/*鼠标事件,获取鼠标的位置*/<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #main{ width:500px; height:500px; background-color: yellow; } </style> </head> <body> <h2 id="show_index">000:000</h2> <div id="main"> <img width:"100px" height="100px" src="img/2.jpg" id="beauty" /> </div> <script> var main = document.getElementById("main"); var showIndex=document.getElementById("show_index"); var girl=document.getElementById("beauty"); //绑定鼠标事件// main.onmousedown// main.onmouseup//匿名函数属于另一个区域,event是发生在当前DOM中的事件,需要通过形参传入匿名函数使用main.onmousemove=function(event){ var x=event.clientX; var y=event.clientY; showIndex.innerHTML=x+":"+y; main.style.position="absolute"; girl.style.position="absolute"; girl.style.left=(x-90)+"px"; girl.style.top=(y-110)+"px"; girl.style.width=(x-100)+100+"px"; girl.style.height=(y-100)+100+"px"; } </script> </body></html>
五、 动态灵活的onclick设置方式
xx.onclick = function(){
//点击事件的代码
}
六、 定时器
1. 循环执行(间隔多长时间反复执行)
setInterval(code,interval)
参数1:执行的代码,可以使function函数
参数2:间隔的时间,毫秒为单位
2. 取消循环执行定时器
clearInterval(timerId);
/*定时器反复*/<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body background="img/ice.png" > <script> setInterval(recy,2000); function recy() { alert("小样的,反不死你!"); } </script> </body></html>
七、编辑器
1. sublineText
2. atom(功能最强大的文档编辑器,html,css,js,markdown)
3. 文档编辑语言:markdown
八、 location
window.location
相当于浏览器的地址栏
通俗:在js代码中想要获取访问网址的主机,端口号,协议,搜索字段等,通过location获取
用户统计分析(产品数据统计)
九、navigator
window.navigatory
获取客户端的信息,如浏览器的型号,操作系统型号
十、 历史记录history
forward,back前进,返回等
十一、DOM文档对象模型
document
十二、DOM可以做什么
找对象(元素)
设置元素的属性,设置元素的样式
img.src a.href属性
xx.style.position样式
动态创建的删除元素
事件一触发响应
事件源(时间的触发者)
事件名称
事件响应程序
练习:
1.点击图片,更换背景图片。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box { height: 180px; padding-top: 30px; text-align: center; } body { background: url(img/10.jpg) no-repeat; } </style> </head> <body> <div class="box"> <img src="img/10.jpg" width="200px"/> <img src="img/20.jpg"width="200px" /> <img src="img/30.jpg" width="200px"/> <img src="img/40.jpg" width="200px"/> <img src="img/50.jpg" width="200px"/> </div> <script> var box=document.getElementsByTagName("div")[0]; var body=document.body; var Arr=box.children; for(var i=0;i<Arr.length;i++) { Arr[i].index=i; Arr[i].onclick=function(){ body.style.backgroundImage = "url("+this.src+")"; } } </script> </body></html>
2.隔行变色的表格(鼠标放上去行会变色)
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; text-align: center; } .wrap { width: 500px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; cursor: pointer; } .current { background-color: red!important; } </style></head><body> <div class="wrap"> <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>课程</th> <th>成绩</th> </tr> </thead> <tbody id="target"> <tr> <td> 1 </td> <td>吕不韦</td> <td>语文</td> <td>100</td> </tr> <tr> <td> 2 </td> <td>吕布</td> <td>日语</td> <td>100</td> </tr> <tr> <td> 3 </td> <td>吕蒙</td> <td>营销学</td> <td>100</td> </tr> <tr> <td> 4 </td> <td>吕尚</td> <td>数学</td> <td>100</td> </tr> <tr> <td> 5 </td> <td>吕雉</td> <td>英语</td> <td>100</td> </tr> <tr> <td> 6 </td> <td>吕超</td> <td>体育</td> <td>100</td> </tr> </tbody> </table> </div> <script> //需求:让tr各行变色,鼠标放入tr中,高亮显示。 //1.隔行变色。 var tbody = document.getElementById("target"); var trArr = tbody.children; //循环判断并各行赋值属性(背景色) for(var i=0;i<trArr.length;i++){ if(i%2!==0){ trArr[i].style.backgroundColor = "#a3a3a3"; }else{ trArr[i].style.backgroundColor = "#ccc"; } //鼠标进入高亮显示 //难点:鼠标移开的时候要回复原始颜色。 //计数器(进入tr之后,立刻记录颜色,然后移开的时候使用记录好的颜色) var color = ""; trArr[i].onmouseover = function () { //赋值颜色之前,先记录颜色 color = this.style.backgroundColor; this.style.backgroundColor = "#fff"; } trArr[i].onmouseout = function () { this.style.backgroundColor = color; } } </script></body></html>
- JavaScript学习笔记(续)
- JavaScript学习笔记(三)---JavaScript对象
- javascript学习笔记(一)--初识javascript
- JavaScript 学习笔记(一)
- JavaScript 学习笔记(二)
- JavaScript学习笔记(一)
- JavaScript 学习笔记(一)
- JavaScript 学习笔记(一)
- javascript 学习笔记(1)
- javascript 学习笔记(2)
- javascript 学习笔记(3)
- javascript 学习笔记(4)
- javascript 学习笔记(6)
- JavaScript学习笔记(二)
- JavaScript学习笔记(三)
- javaScript 学习笔记(1)
- javascript 学习笔记(3)
- javascript学习笔记(4)
- 1000行代码手写HTTP服务器
- 解析并且存入数据库
- 使用js进行时间戳与日期的相互转化
- truncate和delete的区别
- MyApplication缓存1
- JavaScript学习笔记(续)
- HDU --- 3861 The King’s Problem 【强联通缩点 + 最小路径覆盖】
- 对Linux中inode的感悟
- Android (拍照功能)
- 使用apidoc 生成Restful web Api文档
- [转]彻底解决WPS弹出热点广告、WPS购物图标的办法
- caffe跑试验遇到错误:Check failed: error == cudaSuccess (2 vs. 0) out of memory
- hdu2222 ac自动机模板
- 中断上下文不能做的事情