十三的博客

前端开发

0%

发表于 更新于 分类于

这两天学习了DOM的高级操作，主要是以对表格的一些排序和搜索处理为例子来进行学习的。

排序

表格的排序主要分为三个步骤:转换————排序————插入。
第一步，转换成数组。只有将获得的对象元素转换成数组才能进行大小的比较。

1
2
3
4
for(i=0;i<oTab.tBodies[0].rows.length;i++)
        {
            arr[i]=oTab.tBodies[0].rows[i];
        }

第二步，数组排序。这里是升序排列的。

阅读全文 »

发表于 更新于 分类于

今天学习了JS面向对象的一个特性–继承。JS是一门基于面向对象的语言，也就是说，JS并非真正的面向对象，相对的，Java，PHP5以上等的编程语言则是真正面向对象的、真正意义上的面向对象语言。所以这里通过对PHP语言的继承的学习来延伸到对JS继承的学习。

PHP是一门常用的后端开发语言，因为学习JS的继承，让我有机会第一次接触到这门语言。PHP的工作过程就是服务器先读取PHP文件，把服务器端的标记（如）里面的内容选出来运行，再把结果返回来给客户端，所以客户端看不到服务端程序的源码，这就是PHP保密性好的原因。出于只是为了帮助对JS继承的学习的出发点，所以只对PHP一些简单语法进行学习与了解。PHP中用echo来进行输出，跟JS中的alert作用是一样的；PHP定义变量一定要用美元符号，如定义值为12 的变量a，则写作“$a=12”。PHP有两个比较特别的地方，其一，在PHP中，字符串两边可以不加引号，如“echo abc”；其二，JS中要连接两个字符串可以使用加号，但是PHP中加号只能是数字相加，所以要做字符串连接要用点，如“$a.$b”。那么又有新的疑问出现了，PHP中用点来连接两个字符串，点在JS中常用来访问对象的属性，那么PHP中用什么符号访问对象的属性呢？答案是->，如“$this->name”。PHP学起来还是蛮有意思的。

接下来就是学习PHP的继承。所谓继承，就是从已有的类去派生出新的类，说白点就是把其他类的内容copy过来，再加上自己的东西，由此产生属于自己的类。对象由属性和方法组成，所以要继承一个对象，需要继承那个对象的属性和方法。PHP的继承是先创建一个父类，里面添加好属性和方法，然后用extends关键字让子类去继承父类的属性和方法，再添加子类自己独有的属性和方法，最终形成独有的子类。过程其实并不难。

最后由PHP的继承类比到JS的继承，同样的先创建一个父类，利用构造函数添加其属性，利用原型添加其方法。接着也是利用extends关键字让子类去继承父类，通过调用父类的构造函数来继承父类的属性，这里采用call方法，如“Person.call(this,name,sex);”；通过原型来继承父类的方法，如“Worker.prototype=Person.prototype;”。然后添加子类自己的属性和方法，一个完整的子类就创建好了。JS的继承里面涉及到两个重要的知识点，call()方法和原型链，这将通过后续的学习再进一步掌握。

发表于 更新于 分类于

今天学习了JS的面向对象部分内容。首先是理解面向对象的概念，因为之前在学校学的几门编程语言都有接触面向对象这个概念，所以理解起来相对来说还是比较容易的。面向对象只关注对象提供的功能，不关注其内部细节，就像我们使用收音机时不需要知道收音机里面的构造以及连线方式，而只需要知道收音机各个按钮的功能即可，收音机就是一个对象。面向对象具有三个特性：封装，继承，多态，并且由方法和属性组成。这些大都已经记在心中了，考过好几次了。

接着就是学会用工厂方式构造对象，分为三步：

  1. 工厂制作产品首先需要的是原料，对应的我们需要创建一个空白的对象；
    1
    var obj=new Object();
  2. 对原料进行加工，即对应的我们需要为对象添加属性和方法；
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    obj.name=name;
    obj.sex=sex;
    obj.showName=function()
    {
        alert('我的名字叫'+this.name);
    }
    obj.showSex=function()
    {
        alert('我是'+this.sex+'的');
    }
  3. 将加工好的产品送出厂，所以我们需要返回对象。
    1
    return obj;

虽然工厂方式看起来挺完美的，但是还是存在两个问题：其一，没有new；其二，函数重复定义，即每个对象都有一套自己的函数，浪费资源。问题一解决相对来说比较简单，添加一个new即可，主要还是问题二的解决。问题二可以用原型prototype为对象添加方法，原型prototype又是今天新学到的一个概念，通过原型添加方法可以在已有对象中加入自己的方法，可以扩展系统对象，添加一些本不支持的方法。用原型添加方法不仅给构造函数于极度的简化，而且使所有同类的对象都只有一套方法，节省了大量的资源，有效地解决了工厂方法的第二个问题。所以对上述的工厂方法进行改进，首先是将原来的构造函数删除部分，再将剩下的关于属性的部分稍微修改成如下形式：

1
2
3
4
5
function Person(name,sex)//构造函数，添加属性
        {
            this.name=name;
            this.sex=sex;
        }
阅读全文 »

发表于 更新于 分类于

今天继续了 JS 运动的学习，本来以为昨天总结的运动函数 startMove()是最完整的了，才发现昨天那个还是存在欠缺部分，只能实现单个 div 单个运动。今天将这个运动函数进行改进，实现了多个 div 运动以及同一个 div 的多值运动。改进版运动函数跟之前的差别不大，首先是参数的改变，由原来的 2 个变成 3 个，参数类型也变了,”function startMove(obj,json,fn)”。其次是多了个布尔变量 bStop，该变量用来判断运动是否结束；最后是添加一个 if 语句，判断是否传入 fn 参数，以此来决定执行不执行 fn,”if(fn){fn();}”。

然后学到的就是图片轮换播放，这是今天最大的收获了。下面就是实现图片轮换播放的过程。

  1. 用 class 名称选取元素，需要注意，js 中的 class 是关键字，所以必须写成 className。
1
2
3
4
5
6
7
8
9
10
11
function getByClass(oParent, sClass) {
	var aEle = document.getElementsByTagName("*"); //选出父节点下的所有元素
	var i = 0;
	var aResult = []; //定义一个空的数组，用来装所有的选出元素
	for (i = 0; i < aEle.length; i++) {
		if (aEle[i].className == sClass) {
			aResult.push(aEle[i]); //将选出的所有元素装入数组中
		}
	}
	return aResult; //  循环完成后，返回数组里的值
}
  1. 点击实现上下张图片的左右按钮，通过改变其透明度的大小，实现鼠标移入移出渐隐渐现功能。
阅读全文 »

发表于 更新于 分类于

今天学习了 JS 的运动，从最简单的一个 div 运动到多个 div 运动开始，到后面通过 div 的运动实现常见的侧边栏的隐藏与显示，最后还实现图片或者 div 块的淡入淡出。最终总结起来其实都是一个运动函数 startMove()的套用，涉及定时器的关与开。仔细观察下每个例子的 startMove()运动函数，会发现都是大同小异的，所以将 startMove()运动函数封装起来，当需要的时候导入，再修改下相应的参数即可，这样可以大大实现代码的简洁性。下面就是封装该函数的一个过程。

首先，获取样式表指定对象的属性值，其中涉及浏览器兼容性问题，利用 if-else 语句来解决兼容性问题。

1
2
3
4
5
6
7
function getStyle(obj, attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr]; //只支持IE浏览器
	} else {
		return getComputedStyle(obj, false)[attr]; //支持火狐，谷歌等浏览器，IE浏览器不支持
	}
}

然后，就是设置 startMove()函数里面包含的真正内容了，

  1. 设置三个参数值，分别为 obj（对象），attr（属性值），iTarget（目标值）
阅读全文 »