javascript
文章平均质量分 63
HelloWorld_EE
这个作者很懒,什么都没留下…
展开
-
《JavaScript学习笔记一》鼠标提示框
《JavaScript学习笔记》:鼠标提示框在我们的许多登陆界面都会有鼠标提示框的应用,例如下面的截图就是一个比较好的例子:下面我们就实现这个比较简单的例子这个的实现原理比较简单,如下:1、当鼠标移动到checkbox上面时,提示框出现。2、当鼠标移出checkbox时,提示框就消失。鼠标移入和移出对应的事件为:onmouseover/onmouseout出现和消失在div上面的表现形式为:divN原创 2016-05-28 21:04:14 · 915 阅读 · 0 评论 -
《JavaScript学习笔记》:Ajax的应用
《JavaScript学习笔记》:Ajax的应用AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。下面先介绍 AJAX 的工作原理。1、 AJAX 的工作原理AJAX 的工作原理在http://www.w3school.com.cn/ajax/ajax_example.asp有比较详细的解释,这里就不再过多的解释。AJAX的实现需要如下的4个步骤:1、创建对象2、连接服原创 2016-06-09 21:18:17 · 787 阅读 · 0 评论 -
《JavaScript学习笔记》:第一个面向对象的程序
《JavaScript学习笔记》:第一个面向对象的程序在看blue老师的js视频的时候,再将写第一个面向对象程序的时候,被那个this给整晕了,因此,就尝试了自己整理了下。下面以选项卡这个例子为例,来实现从一个面向过程的程序到面向对象的转换。先不管面向对象,我们一般实现一个选项卡的代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran原创 2016-06-09 22:34:32 · 502 阅读 · 0 评论 -
《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现
《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现我们都知道getElementById是通过id来获取对象,但是,当我们的对象许多且这些对象都是相同的时候,如果还使用getElementById来一个一个的来获取对象就比较坑爹了,是吧,因此,就有了getElementsByTagName来通过标签来获取对象数组。例如:var aBtn=d原创 2016-05-29 20:39:10 · 2113 阅读 · 0 评论 -
《JavaScript学习笔记》:继承
《JavaScript学习笔记》:继承继承在Java中直接用关键字extends即可完成,以下就是Java中一个关于继承的例子。先有一个Person类,Person类中有两个属性:name、age;有两个方法:showName()、showAge();然后有一个Teacher类,它是继承Person的,并且另外有一个title属性和一个showTitle()方法。 class Person{原创 2016-06-11 10:55:17 · 544 阅读 · 0 评论 -
《JavaScript学习笔记》:拖拽
《JavaScript学习笔记》:拖拽拖拽在我们的生活中比较常见,原理也不难,如下:假设有一个框,我们想要这个框有拖拽行为,拖拽行为就是跟着我们的鼠标移动而移动,而获取鼠标的位置的方法为:var x = oEvent.clientX;var y = oEvent.clientY;当我们鼠标点击(鼠标点击对应onmousedown事件)时,我们记录鼠标此时的位置与框的距离(即图示中所表明的disX,原创 2016-06-11 16:51:17 · 513 阅读 · 0 评论 -
《JavaScript学习笔记》:只能输入数字的文本框
《JavaScript学习笔记》:只能输入数字的文本框这主要涉及到一个键盘事件(onkeydown)和一个键码值的范围。由于数字0~9所对应的键码为48~57,因此,我们只需要将48~57范围之外的键阻止掉就可以了。假设我们有一个文本框,id为txt1,则如下的代码就实现了只允许数字输入。 <script> window.onload=function() {原创 2016-06-11 21:08:11 · 799 阅读 · 0 评论 -
《JavaScript学习笔记》:获取鼠标的位置及应用
《JavaScript学习笔记》:获取鼠标的位置及应用获取鼠标的位置,方法如下: var x=event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft); var y=event.clientY+(document.documentElement.scrollTop||document.bo原创 2016-06-06 20:02:14 · 504 阅读 · 0 评论 -
《JavaScript学习笔记》:冒泡及取消冒泡
《JavaScript学习笔记》:冒泡及取消冒泡先看一个程序,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x原创 2016-06-06 20:45:11 · 554 阅读 · 0 评论 -
《JavaScript学习笔记》:键盘事件
《JavaScript学习笔记》:键盘事件上篇博文介绍了鼠标事件,本篇博文介绍下键盘事件,键盘事件有:键按下(onkeydown)和键弹起(onkeyup).虽然只有键盘只有两种事件,但是,在用途还是相当广的,例子,在我们的qq聊天界面中,我们写好消息好,我们一般有三种方式来进行发送,如下:1、点击”发送”按钮2、enter3、ctrl+enter后面两种就是键盘事件,前面一种是鼠标点击事件。要说明原创 2016-06-06 20:03:20 · 1118 阅读 · 0 评论 -
《JavaScript学习笔记》:表格的应用
《JavaScript学习笔记》:表格的应用在操作表格相关的节点时, 按照一般的获取节点的方法,我们可能会这么写:var tb=document.getElementById(‘tb1’);//tb1为表格的id值 tb.getElementsByTagName(‘tbody’);//这样获得了表格对象tb下面所有的tbody节点对象而如果我们想获取第一个tbody节点下的tr节点,我们可能会这原创 2016-06-01 11:18:37 · 675 阅读 · 0 评论 -
《JavaScript学习笔记》:DOM_添加节点、删除节点、文档碎片
《JavaScript学习笔记》:DOM_添加节点、删除节点、文档碎片在上篇博文中,主要介绍了关于DOM中获取子节点的相关知识点,除了获取子节点,DOM还有创建一个节点、加入节点、删除节点等知识点,本篇博文进行介绍。1、加入节点语法:obj.appendChild(obj1);//就是在对象obj尾部中加入节点obj1.看下面这个例子:往ul中添加li节点<!DOCTYPE html PUBLIC原创 2016-05-31 19:56:04 · 1356 阅读 · 0 评论 -
《JavaScript学习笔记》:DOM基础
《JavaScript学习笔记》:DOM基础DOM 节点1、childNodes 获取子节点(包括文本节点和元素节点)2、children 获取子节点(只包括元素节点)3、nodeType 判断节点类型 nodeType =3 :此节点为文本节点 nodeType =1 :此节点为元素节点 看一个例子:对上面知识点的一个练习 <!DOCTYPE htm原创 2016-05-31 17:52:04 · 586 阅读 · 0 评论 -
《JavaScript学习笔记二》:网页换肤
《JavaScript学习笔记二》:网页换肤在我们的一些网页上提供了网页换肤这一功能,网页换肤就是指:网页的颜色有几种不同的选择供我们选择。例如,如下截图所示:下面我们就来模拟实现这一功能:由于功能比较简单,这里就直接贴代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR原创 2016-05-28 21:43:03 · 795 阅读 · 0 评论 -
《JavaScript学习笔记三》if else及function的使用
《JavaScript学习笔记三》:if elseif else的使用在JavaScript中if else的使用与在其它语言使用的方法一样,例如:我们想实现这样一个功能:有一个按钮,当点击的时候,如果div是显示的,则隐藏,否则显示出来。由于比较简单,代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht原创 2016-05-28 22:50:29 · 1230 阅读 · 0 评论 -
《JavaScript学习笔记五》:选项卡和简易日历的实现
《JavaScript学习笔记五》:选项卡的实现在许多的网页中都有选项卡的身影,如下就是一个例子: 当我们点击不同的选项时,就会出现不同的信息。 下面我们就实现这样一个简单的功能,实现的思路如下: 1、当我们点击某个按钮时,由于不知道此时那个按钮处于高亮状态,因此,我们在高亮当前按钮之前,应该先清空所有按钮。 2、与1一样,由于此时我们不知道哪个div处于显示状态,因此,在显示相应的div时原创 2016-05-29 21:21:50 · 630 阅读 · 0 评论 -
《JavaScript学习笔记六》:取非行间样式
《JavaScript学习笔记六》:取非行间样式1、取行间样式如果我们在行间设置元素的样式,则我们可以直接使用obj.style.width来获取这个元素的宽度,这里的width可以换成obj的任意样式属性来获取对应的value。下面我们来看一个例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://原创 2016-05-30 20:16:21 · 454 阅读 · 0 评论 -
《JavaScript学习笔记七》:数组和可变参数arguments的介绍
《JavaScript学习笔记七》:数组和可变参数arguments的介绍1、定义数组定义数组有如下两种方式:1、var arr=[1,2,3];2、var arr=new Array(1,2,3);这两种数组定义的方法没有任何区别,但是,第一种方法的效率要高点,这是因为js是一种解释性语言,第一种代码要短点。2、使用数组数组中有如下一些常见的方法:1、push(num):在数组尾部添加一个元素2、原创 2016-05-30 20:17:47 · 790 阅读 · 0 评论 -
《JavaScript学习笔记八》:数字时钟的实现
《JavaScript学习笔记八》:数字时钟的实现在我们的生活中,数字时钟随处可见,在我们的手机上,在我们的电脑上,以及在一些时间软件上,都可以看到数字时钟,与下图类似,这篇博文我们就来模拟下数字时钟的实现。首先我们来实现时间部分,效果图如下:这个功能相对比较简单,就是根据Date对象的一些获取时间的方法来获取时间并拼接为一个字符串,然后根据字符串上每位的数字来显示0~9的图片资源即可。Date对象原创 2016-05-30 20:19:05 · 1784 阅读 · 0 评论 -
《JavaScript学习笔记九》:延时框的实现
《JavaScript学习笔记九》:延时框的实现延时框在我们的生活中也随处可见,例如,在QQ中,当我们将鼠标放在我们的头像上时,则会出现左边这个页面,当我们鼠标离开时,左边这个界面过一段时间才会隐藏,这就是延时框。下面我们就来模拟这样一个功能。这个功能由如下的小功能组成,假设有如下两个块(A、B) 1、当鼠标移入到块A上时,则块B显示2、当鼠标移出块A上且没有移入块B上时,则块B延时一会就隐藏3、原创 2016-05-30 20:20:28 · 436 阅读 · 0 评论 -
《JavaScript学习笔记十》:无缝滚动的实现
《JavaScript学习笔记十》:无缝滚动的实现无缝滚动在很多网页上面都有这样一个功能,用于动态的显示一些图片信息。 本篇博文就是模拟这样一个功能的实现,所设计的知识点为:根据offsetLeft动态的获取位置更改控件的left的值来使得控件移动。先看如下的简单的例子,一个Div控件不断向右移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr原创 2016-05-30 20:22:26 · 574 阅读 · 0 评论 -
《JavaScript学习笔记》:阻止默认行为
《JavaScript学习笔记》:阻止默认行为在一个空白html文件,当用浏览器打开后,我们单击鼠标右键,可能看到下面的结果,截图如下: 明显这不是我们html文件中产生的,而是浏览器给我们的默认行为,那么如何才能阻止掉这个默认行为呢?方法为:返回false即可阻止;看如下的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio原创 2016-06-06 21:54:09 · 597 阅读 · 0 评论