Html之JavaScript学习笔记02
2017-02-21 20:37
711 查看
1.js的常用事件 (一定知道)
onfocus(获得焦点事件)
onblur(失去焦点的事件)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/25/e5dee6031c9be0c82379291b06ec3410)
onchange事件(select控件选中值发生改变)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/25/22a5ee4cee0250a503e979a2346d6778)
鼠标事件
onmouseover(鼠标移动到指定元素上方)
onmouseout(鼠标移出指定元素)
onmousedown(鼠标按下)
onmouseup(鼠标弹起)
onload 事件
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/25/ea7e60053cf8d413975af78c0acd0db9)
阻止默认行为:(了解)
阻止事件传递:(了解)
关于隐藏和显示
设置Style.display=”none” 隐藏之后不会占位置
设置Style.visibility=”hidden”隐藏之后位置仍然存在
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/25/523ec453125465cb34634398199dd67c)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/25/7805fc6d94dd7369860ec31b58413385)
- js的自定义对象(面试非常喜欢问 掌握):
自定义对象的方式:在javascript中,所有的对象都是通过函数来创建
- 1.直接通过无参的方法来创建,这种情况下,name的信息专属于p,如果再new一个新的p,无法共享name
2.通过构造方法来创建,这种情况下,name和age是属于所有对象共有的信息
3.通过Object来创建
4.通过字面量方式来创建
js的”继承”(了解)
js中所有的对象都是从Object过来的
js中对象的分类:普通对象和函数对象
函数:拥有prototype属性
prototype:显示原型,记录着所有实例公用的属性和方法,主要是用来继承用的(被子类用的)
对象:拥有__proto__
__proto__:隐式原型,对于普通对象而言,这个记录这父类的prototype
函数对象:同时拥有prototype,__proto__两个属性
ECMAScript6开始:js就开始支持class
关于给一个函数添加方法一定要会:(掌握)
String.prototype.reverse=function(){
}
3.javascript组成
1.ECMAScript
2.BOM
3.DOM
BOM : 浏览器对象模型(了解)
alert(“提示信息”);
confirm(“确认信息”); //该方法有返回值,点击确认按钮返回值是true,取消按钮返回值false
prompt(“请输入提示信息”); //该方法有返回值,点击确认返回输入的文本,点击取消返回null
open(“网址”) //打开指定网页
定时器:(了解)
location对象:
location.href = “指定网址”; 让当前页面跳转指定url(掌握)
DOM(掌握)
DOM:文档对象模型
当我们写了一个html文本信息后,会自动将这个html文本转化为对象模型(DOM树)
在DOM树种,每一个交叉的地方都叫节点(Node)
Node节点的分类:(掌握)
文档节点 :document
元素节点 :标签
属性节点 :标签的属性值
文本节点 :标签的文本内容
常用方法:
getElementById(“”); 根据id找到符合条件的标签
getElementByName(“”); 根据标签的name找到所有符合条件的标签
getElementByTagName(“”); 根据指定的标签名找到所有符合条件的标签
hasChildNodes() 查看一个节点是否拥有子节点
childNodes 获取一个节点的子节点
nodeName查看节点名称
nodeType 查看节点类型 (1表示元素节点,2表示属性节点,3表示文本节点)
nodeValue 查看节点值
firstChild 获取某个节点下的第一个节点
getAttributeNode 获取某个节点下的属性节点
getAttribute 获取某个节点下的属性节点的值
setAttribute 设置某个节点下的属性节点
注意:nodeValue属性值对于元素节点,其值是不存在的,一般用innerHTML来访问.
对于文本节点,nodeValue的值是文本值.对于属性节点,nodeValue就是属性值
掌握:
createElement 创建一个新节点
createTextNode 创建一个文本节点
appendChild 拼接子节点
insertBefore 在指定节点前面插入目标节点
removeChild 删除节点
onfocus(获得焦点事件)
onblur(失去焦点的事件)
<body> 用户名:<input id="name" type="text" name="name" /><span id="spanname"></span> </body> <script type="text/javascript"> var txt=document.getElementById("name"); var spantxt=document.getElementById("spanname"); //获得焦点 txt.onfocus=function(){ document.getElementById("spanname").innerHTML="用户名至少6位"; } //失去焦点 txt.onblur=function(){ var s=txt.value; if(s.length<6){ spantxt.innerHTML="错误,用户名至少6位"; }else{ spantxt.innerHTML=""; } } </script>
onchange事件(select控件选中值发生改变)
<body> <select id="province"> <option value="js">江苏</option> <option value="sh">上海</option> </select> <select id="city"> <option>南京</option> <option>苏州</option> <option>无锡</option> </select> </body> <script type="text/javascript"> var p=document.getElementById("province"); var c=document.getElementById("city"); p.onchange=function(){ var selectP=p.value; if(selectP=="js"){ c.innerHTML="<option>南京</option><option>苏州</option><option>无锡</option>"; }else if(selectP=="sh"){ c.innerHTML="<option>浦东</option><option>浦西</option><option>徐汇</option>"; } } </script>
鼠标事件
onmouseover(鼠标移动到指定元素上方)
onmouseout(鼠标移出指定元素)
onmousedown(鼠标按下)
onmouseup(鼠标弹起)
onload 事件
<body> <div id="box"></div> </body> <script type="text/javascript"> var b=document.getElementById("box"); //鼠标移动到指定元素上 b.onmouseover=function(){ b.style.background="orangered"; b.innerHTML="鼠标移动到与元素上onmousedown"; } //鼠标被按下 b.onmousedown=function(){ b.style.background="greenyellow"; b.innerHTML="鼠标被按下onmousedown"; } //鼠标从指定元素移出 b.onmouseout=function(){ b.style.background="pink"; b.innerHTML="鼠标从指定元素移出onmouseout"; } // b.onmousemove=function(){ // b.style.background="palevioletred"; // } //鼠标弹起 b.onmouseup=function(){ b.style.background="#A9BBE7"; b.innerHTML="鼠标弹起onmouseup"; } </script>
阻止默认行为:(了解)
<a href="#" onclick="clickA(event)">点我</a> <script type="text/javascript"> function clickA(e) { //查看e是否存在preventDefault方法 //火狐浏览器(w3c标准) if(e && e.preventDefault) { //组织默认行为 e.preventDefault(); } //ie浏览器(后期版本的ie也遵从了w3c规范) else { window.event.returnValue = true; } } </script>
阻止事件传递:(了解)
<div id="box" onclick="boxclicked(event)"> <div id="inner" onclick="innerclicked(event)"></div> </div> <script> function boxclicked(e) { alert("box"); //该浏览器是否遵循w3c规范 if(e && e.stopPropagation) { e.stopPropagation(); } //ie else { window.event.cancelBubble = true; } } function innerclicked(e) { alert("inner"); //该浏览器是否遵循w3c规范 if(e && e.stopPropagation) { e.stopPropagation(); } //ie else { window.event.cancelBubble = true; } } </script>
关于隐藏和显示
设置Style.display=”none” 隐藏之后不会占位置
设置Style.visibility=”hidden”隐藏之后位置仍然存在
<html> <head> <meta charset="UTF-8"> <title>事件练习</title> </head> <body> <img id="pic" src="../2.17Pro/bookcover/fish.jpg" /> <span id="show">显示</span> <span id="hidden">隐藏</span> </body> <script type="text/javascript"> document.getElementById("show").onclick=function(){ document.getElementById("pic").style.visibility="visible"; } document.getElementById("hidden").onclick=function(){ document.getElementById("pic").style.visibility="hidden"; } </script> </html>
- js的自定义对象(面试非常喜欢问 掌握):
自定义对象的方式:在javascript中,所有的对象都是通过函数来创建
- 1.直接通过无参的方法来创建,这种情况下,name的信息专属于p,如果再new一个新的p,无法共享name
function Person(){}//函数 var p=new Person();//对象 p.name="小明";
2.通过构造方法来创建,这种情况下,name和age是属于所有对象共有的信息
function Person2(name,age){ this.name=name; this.age=age; this.say=function(){ alert(this.name); } } var p2=new Person2("小红","12"); p2.say();
3.通过Object来创建
var p4=new Object(); p4.name="小黄";
4.通过字面量方式来创建
var p5={ name:"小孩", age:"12", say:function(){ alert(this.name); } } p5.say();
js的”继承”(了解)
js中所有的对象都是从Object过来的
js中对象的分类:普通对象和函数对象
函数:拥有prototype属性
prototype:显示原型,记录着所有实例公用的属性和方法,主要是用来继承用的(被子类用的)
对象:拥有__proto__
__proto__:隐式原型,对于普通对象而言,这个记录这父类的prototype
函数对象:同时拥有prototype,__proto__两个属性
ECMAScript6开始:js就开始支持class
关于给一个函数添加方法一定要会:(掌握)
String.prototype.reverse=function(){
}
3.javascript组成
1.ECMAScript
2.BOM
3.DOM
BOM : 浏览器对象模型(了解)
alert(“提示信息”);
confirm(“确认信息”); //该方法有返回值,点击确认按钮返回值是true,取消按钮返回值false
prompt(“请输入提示信息”); //该方法有返回值,点击确认返回输入的文本,点击取消返回null
open(“网址”) //打开指定网页
定时器:(了解)
var timer = null; document.getElementById("start").onclick = function(){ timer = setInterval(function(){ alert("xxx"); },3000); } document.getElementById("close").onclick = function(){ clearInterval(timer); }
location对象:
location.href = “指定网址”; 让当前页面跳转指定url(掌握)
DOM(掌握)
DOM:文档对象模型
<html> <head></head> <body> <div id="aa"></div> <div></div> </body> </html> document.getElementById("aa")
当我们写了一个html文本信息后,会自动将这个html文本转化为对象模型(DOM树)
在DOM树种,每一个交叉的地方都叫节点(Node)
Node节点的分类:(掌握)
文档节点 :document
元素节点 :标签
属性节点 :标签的属性值
文本节点 :标签的文本内容
常用方法:
getElementById(“”); 根据id找到符合条件的标签
getElementByName(“”); 根据标签的name找到所有符合条件的标签
getElementByTagName(“”); 根据指定的标签名找到所有符合条件的标签
hasChildNodes() 查看一个节点是否拥有子节点
childNodes 获取一个节点的子节点
nodeName查看节点名称
nodeType 查看节点类型 (1表示元素节点,2表示属性节点,3表示文本节点)
nodeValue 查看节点值
firstChild 获取某个节点下的第一个节点
getAttributeNode 获取某个节点下的属性节点
getAttribute 获取某个节点下的属性节点的值
setAttribute 设置某个节点下的属性节点
注意:nodeValue属性值对于元素节点,其值是不存在的,一般用innerHTML来访问.
对于文本节点,nodeValue的值是文本值.对于属性节点,nodeValue就是属性值
掌握:
createElement 创建一个新节点
createTextNode 创建一个文本节点
appendChild 拼接子节点
insertBefore 在指定节点前面插入目标节点
removeChild 删除节点
相关文章推荐
- 高性能Javascript HTML集合访问的学习笔记
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第31讲_this关键字详解_学习笔记_源代码图解_PPT文档整理
- HTML学习笔记——标准网页设计+使用CSS、Javascript
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理
- 我的学习笔记005--常见web前台技术之间的关系html,css,javascript...
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- javascript学习笔记(一) (2007-12-20 11:14:19| 分类: jsp+html+js+Ajax)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第28讲_js二维数组_js冒泡排序_二分查找_学习笔记_源代码图解_PPT文档整理
- JavaScript学习笔记——jquery中html()、text()、val()的区别
- JavaScript学习笔记——事件(转自:http://www.blogjava.net/amigoxie/archive/2007/08/27/139711.html)
- Javascript学习笔记-02
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- 张孝祥javascript学习笔记1---HTML&CSS
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理
- javascript学习笔记(一) 在html中使用javascript
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理
- javascript学习笔记2之HTML DOM
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第33讲_Object类_闭包_成员函数再说明_聪明的猪小练习_学习笔记_源代码图解_PPT文档整理