life is wonderful

世界上并没有完美的程序，但我们并不因此而沮丧，因为写程序本来就是一个不断追求完美的过程。

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创 Web前端开发实战3：二级下拉式菜单之jQuery实现

大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。使用JQuery实现需要用到的知识有： 1)使用$(function(){...})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素。 3)

2015-12-31 19:42:11 4900 1

原创 Web前端开发实战2：二级下拉式菜单之JS实现

上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的，我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用 JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：get

2015-12-31 14:04:46 18003 1

原创 Web前端开发实战1：二级下拉式菜单之CSS实现

二级下拉式菜单在各大学校网站，电商类网站，新闻类网站等大型？网站很常见，那么它的实现原理是什么呢？学习了Web前端开发的知识后，我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的，原理和流程还是一样的，今天开始做一些简单的二级下拉式菜单。横向一级菜单我们见到的很多，如下图所示是：二级下拉菜单图：二级下拉菜单是

2015-12-30 20:47:58 35006 2

原创轻松学习JavaScript二十九：JavaScript中的this详解

这几天在看很多的JS的代码，多次出现this关键字，有时候表示不理解，就仔细看了这一方面的知识。在JavaScript语言中，this的定义是：this是包含它的函数作为方法被调用时所属的对象。说明：这句话有点咬嘴，但一个多余的字也没有，定义非常准确，我们可以分3部分来理解它：1包含它的函数。2作为方法被调用时。3所属的对象。随着函数使用场合的不同，this的值会发生变

2015-12-29 20:59:42 2122

原创轻松学习JavaScript二十八：DOM编程学习之事件处理函数

在JavaScript语言中可以处理的事件类型可以分为：鼠标事件，键盘事件和HTML事件。对于于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理就会失效。所有的事件处理函数都会有两个部分组成，on+事件名称，例如click事件的时间处理函数就是：onclick。 JavaScript事件处理函数及其使用列表一鼠标事

2015-12-29 13:34:16 1945 1

原创轻松学习JavaScript二十七：DOM编程学习之事件模型

在介绍事件模型之前，我们先来看什么是事件和什么是event对象。一事件介绍 JavaScript事件是由访问Web页面的用户引起的一系列操作，使我们有能力创建动态页面，事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个onclick事件来触发某个函数

2015-12-28 20:50:19 2204 1

原创轻松学习JavaScript二十六：DOM编程学习之动态添加JS脚本和CSS样式

先来一贯使用的HTML文档代码：DOMwindow.onload=function(){}div区域一动态加载外部JS文件要动态加载外部index.js文件的代码：alert("I am JS file!"); 动态加载外部JS文件的代码：//动态加载外部JS文件var flag=true; //设置tr

2015-12-27 20:01:31 2738 3

原创轻松学习JavaScript二十五：DOM编程学习之操作CSS样式(二)

四通过class属性操作外联式还是先来一个HTML文档的代码：DOMwindow.onload=function(){ }div区域 CSS样式表style.css文件的代码：.box1{ background-color:#00FF00; }.box2 { color:#FFFFFF;}

2015-12-23 18:48:35 2602

原创轻松学习JavaScript二十四：DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助，可以增强页面的显示效果。前面学了DOM操作HTML，因此也要学DOM操作CSS样式的方法。在学习CSS的时候，已经知道了CSS插入到HTML文档有三种情况，分别为：行内式，内嵌式和外联式(这是我们最常用的)。下面就来看怎么操作这三种情况：一操作行内式先来写一个HTML文档：<!DOCTYPE html PUBLIC "-

2015-12-22 21:26:15 3130 6

原创轻松学习JavaScript二十三：DOM编程学习之操作表格

一使用HTML标签创建表格：代码：人员表姓名性别年龄张三

2015-12-21 20:27:41 2357

原创 DIV+CSS实操七：中文系内容模块控制文本不换行和超出指定宽度后用省略号代替

在做经管系主网页的同时也在进行着中文系主网页的构建，果然是只有自己去实践了，才能遇到各种各样的问题，然后再去寻找解决这些问题的方法，最后进行修改和不断的调试，最后达到自己想要的效果。中文系主网页构建遇到的问题也很多，首先就是遇到了在排版链接文字时由于宽度是固定的文字过多造成折行显示，这种结果是不想要的，还有就是想要多出宽度的文字用省略号代替。上面的两个问题都是CSS样

2015-12-20 21:25:25 3189 2

原创轻松学习JavaScript二十二：DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点，也可以操作节点，那就是创建，插入，删除，替换和复制节点。先来看节点操作方法：还是借用一贯的HTML代码：DOM编程window.onload=function(){ } 你喜欢那个城市北京市天津市上海市

2015-12-19 21:09:48 2992 2

原创轻松学习JavaScript二十一：DOM编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种。还是拿上一篇博文的代码实例进行分析：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">JS代码位置window.onl

2015-12-18 21:21:44 5684 6

原创轻松学习JavaScript二十：DOM编程学习之获取节点

我们这里所说的获取节点包含元素节点，属性节点和文本节点。通常，通过DOM我们就能够操作HTML元素。为了做到这件事情，您必须首先找到该元素。W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。我们先来写一个简单的HTML文档以供我们进行测试，并且JS代码都是写在window.onload事件中：<!DOCTYPE html PUBLIC "-

2015-12-17 19:57:10 2170 1

原创轻松学习JavaScript十九：DOM编程学习之在HTML文档什么位置编写JS代码

在学习DOM编程的时候又回过头去看了过去写的JS代码，并没有考虑在什么位置编写JS代码更加符合规范以及当HTML文档加载完毕后再运行JS代码的问题。在刚接触JS的时候，写过一篇博文：轻松学习JavaScript三： JavaScript与HTML的结合，只是单纯就HTML与JS的结合说明JS代码放在什么位置，可能一些还是错的，现在开始在博文中纠错。开始学习DOM编程的时候又遇到了新的问

2015-12-16 20:44:35 2239

原创轻松学习JavaScript十八：DOM编程学习之DOM简介

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。DOM描绘了一个层次化的节点树，运行开发人员添加，移除和修改页面的某一部分。HTML或XML页面的每个部分都是一个节点的衍生物。通过DOM，可访问HTML文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型，DOM模型被构造为对象的

2015-12-15 17:05:17 2611 2

原创轻松学习JavaScript十七：JavaScript的BOM学习(二)

JavaScript计时事件通过使用JavaScript中的BOM对象中的window对象的两个方法就是setTimeout()方法和claerTimeout()方法，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。在JavaScritp中使用计时事件是很容易的，两个关键方法是: set

2015-12-14 21:54:49 2100 1

原创轻松学习JavaScript十六：JavaScript的BOM学习(一)

一window对象概述 BOM的核心对象是Window对象，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其创建window对象。所有浏览器都支持window对象，它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动成为 window对象的成员。全局变量是 window对象的属性。全

2015-12-13 15:04:30 2276 2

原创轻松学习JavaScript十五：JavaScript之BOM简介

大概用了二十天结束了JS第一大模块ECMAScript核心的学习，尽管ECMAScript是一个重要的标准，但它并不是 JavaScript唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的JavaScript实现是由以下 3个不同部分组成的：核心(ECMAScript)：JavaScript的核心ECMAScript描述了该语言的语法和基本对象。

2015-12-12 21:13:55 2762 1

原创轻松学习JavaScript十四：JavaScript的RegExp对象(正则表达式)

一RegExp对象概述 RegExp对象表示正则表达式，RegExp是正则表达式的缩写，它是对字符串执行模式匹配的强大工具。RegExp对象用于规定在文本中检索的内容。当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp就是这种模式。简单的模式可以是一个单独的字符；更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等。正则表达式可以规定字符串中的

2015-12-12 17:04:24 2534 2

原创 DIV+CSS实操六：经管系网页添加导航栏下拉菜单

其实很久之前就想实现这个功能，一直没有去付诸行动，大早上的就开始看老师讲过的一些简单的JS下拉菜单的知识，可能是我们基础差，老师讲的也是非常基础的一些，但是我们还是没有听懂，仔细研究了一番，反反复复终于实现了下拉的效果，后来在网上找这方面的教程和代码实例看，发现和自己写的还是有很大的区别，最近一直在深入JS的学习，还没有学到这块，相信学到这块，自己可以写出更加简洁的下拉菜单的代码。由于

2015-12-10 10:43:30 5497 2

原创轻松学习JavaScript十三：JavaScript基于面向对象之继承(包含面向对象继承机制)

一面相对象继承机制今天算是什么都没干，尽在了解面向对象三大特性之一的继承了，过去的学习的C++和C#都是正统的面向对象语言，学习的时候也没有怎么深入了解过，只是简单的学习最基础的继承。下午在看继承机制的时候，看到一个很经典的继承机制实例。这个实例使用UML很好的解释了继承机制。说明继承机制最简单的方式是，利用一个经典的例子就是几何形状。实际上，几何形状只

2015-12-09 21:18:15 2429 1

原创轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(二)

四原型方式我们创建的每个函数都有一个通过prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototypt通过条用构造函数而创建的那个对象的原型对象。使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是直接将这些信息添加到原型中。

2015-12-08 21:12:26 2070 1

原创轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(一)

这一次我们深入的学习一下JavaScript面向对象技术，在学习之前，必要的说明一下一些面向对象的一些术语。这也是所有面对对象语言所拥有的共同点。有这样几个面向对象术语：对象 ECMA-262把对象(object)定义为“属性的无序集合，每个属性存放一个原始值、对象或函数”。严格来说，这意味着对象是无特定顺序的值的数组。尽管ECMAScript如此定义对象

2015-12-07 21:40:04 2297

原创轻松学习JavaScript十一：JavaScript基本类型(包含类型转换)和引用类型

一值的类型早在介绍JS的数据类型的时候就提到过基本类型和引用类型，不过在说两种类型之前，我们先来了解一下变量的值的类型。在ECMAScript中，变量可以存在两种类型的值，即原始值和引用值。 (1)原始值存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。 (2)引用值存储在堆中的对象，也

2015-12-05 22:36:21 3250 1

原创 CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效

学习了CSS布局的定位和浮动，我们可以简单地做出很多排版和内容拼接。今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处。顺便也说一下CSS3新增的样式属性box-shadow和属性transform。一图文混排CSS布局之图文混排#test {border:#FF00FF solid 2px;width:650px;height:46

2015-12-04 18:11:35 24631

原创轻松学习JavaScript十：JavaScript的Date对象制作一个简易钟表

JS提供了Date类型来处理时间和日期。Date类型内置一系列获取和设置日期时间信息的方法。下面我们简单的概述一下这个Date类型。大概看了一下Date类型的方法，下面给出：上面的方法自己尝试即可，我只简单的演示一下JS正确输出的格式： var today=new Date();//创建一个时间日期对象 document.writ

2015-12-03 19:08:36 3948 10

原创轻松学习JavaScript九：JavaScript对象和数组

许多高级编程语言都是面向对象的，比如C++、C#和Java等高级程序设计语言，那么一种面向对象语言有哪些基本要求呢？下面我们就通宿地说一下面向对象的一些知识。一种面向对象语言需要向开发者提供四种基本能力： (1)封装：把相关的信息（无论数据或方法）存储在对象中的能力 (2)聚集：把一个对象存储在另一个对象内的能力 (3)继承：由

2015-12-02 19:43:59 2418 5