JQuery分析及实现part2之css部分功能及实现

Posted on | In

JQuery模块分析及其实现第二部分css部分功能及实现,接第一部分!

hasClass方法

  1. 功能:如果结果集里只要有一个 dom 元素,具有指定的样式类,就返回 true
  2. 实现思路

    • 定义结果变量 ret ,默认值为 false

    • 遍历结果集的每一个 dom 元素,如果当前 dom 元素具有指定的样式类,将 ret=true 结束循环

    • 返回 ret .

    • 如何判断 dom 元素具有指定的样式类?
      在 dom 元素所有的样式类的 首位 + 空格 ;在用户指定的样式类 首位 + 空格 调用indexOf方法,如果返回值 = -1,表示没有;否则就具有指定样式类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
hasClass: function(className) {
	// 默认结果false
	var ret = false;
	// 遍历this上的每一个dom元素
	// for(var i = 0, l = this.length;i < l;i++){
	// 	// 如果当前dom元素具有指定的样式类
	// 	// 返回值为true，结束循环
	// if((' ' + this[i].className + ' ')
	// 	.indexOf(' ' + className + ' ') !== -1) {
	// 	ret = true;
	// 	break;
	// }
	// }
	this.each(function(v) {
		if ((' ' + v.className + ' ')
			.indexOf(' ' + className + ' ') !== -1) {
			ret = true;
			return false;
		}
	});

	return ret;
},

$.each方法

  1. 功能:实现遍历数组或者伪数组,通过第二个参数(回调函数)来处理遍历到的每一个元素
    在回调函数中, this 是指向当前遍历的元素.
  2. 语法: $.each([数组/伪数组], callback) ;
  3. 实现思路
    • 声明 each 函数,定义两个形参,第一个 遍历的(伪)数组;第二: 回调函数
    • 使用 for 循环,遍历(伪)数组,再循环体内部执行回调函数. 在执行时,给回调函数传实参
    • 实现回调函数内部 this 指向,当前遍历到的元素
    • 通过回调函数的返回值,判断是否结束循环. 规定:当返回值为 false ,结束循环
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      each: function(obj, callback) {
      	var i = 0,
      		l = obj.length;
      	// 遍历数组元素
      	for (; i < l; i++) {
      		// 执行用户指定回调函数
      		// 将当前遍历到的元素以及索引传入回调函数
      		if (callback.call(obj[i], obj[i], i) === false) break;
      	}
      }

itcast中链式编程的实现

  1. 返回当前方法的调用者: return this;

get方法

  1. 功能:根据参数 index ,获取相应 dom 元素
  2. 实现思路
    • 将字符串类型转换成数字
    • index < 0 ==> index +length
    • return this[index]
1
2
3
4
5
get: function(index) {
	index = index - 0;
	index = index < 0 ? index + this.length : index;
	return this[index];
},

eq方法

  1. 功能:根据参数 index ,获取相应 dom 元素,转换成 itcast 对象,并且返回
1
2
3
eq: function(index) {
	return itcast(this.get(index));
},

first方法

1
2
3
first: function() {
	return this.eq(0);
},

last方法

1
2
3
last: function() {
	return this.eq(-1);
}

css方法

  1. 功能:
    • 获取:如果只传一个参数并且类型不为对象,获取相应的样式属性值
    • 设置:a,如果只传一个参数并且类型为对象,设置多个样式值; b,传入两个参数,设置单个样式.
  2. 实现思路
    • 给 itcast 原型添加 css 方法,定义两个参数.
    • 如果只传入一个参数
      • 类型为对象的话,同时设置多个样式属性
      • 类型不为对象,获取指定的样式值
    • 如果只传入两个参数,设置单个样式值
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      css: function(name, value) {
      	// 只传入一个参数
      	if (value == undefined) {
      		// 如果name类型为对象，同时设置多个样式
      		if (typeof name === 'object') {
      			// 遍历this上的每一个dom元素
      			this.each(function(v) {
      				// 枚举name上的每个属性值
      				for (var k in name) {
      					// 给当前遍历到的dom元素设置样式
      					v.style[k] = name[k];
      				}
      			});
      		} else { // 如果name不为对象
      			// 默认获取this上的第一个dom元素的指定样式值
      			// 如果浏览器支持getComputedStyle，使用该方法获取指定样式值
      			// if(window.getComputedStyle){
      			// 	return window.getComputedStyle(this[0])[name];
      			// } else { //否则使用currentStyle获取
      			// 	return this[0].currentStyle[name];
      			// }
      			// 如果this上没有任何dom元素， 就返回null
      			if (!this[0]) return null;
      			return window.getComputedStyle ?
      				window.getComputedStyle(this[0])[name] :
      				this[0].currentStyle[name];

      		}
      	} else { // 如果传入两个参数
      		this.each(function(v) {
      			v.style[name] = value;
      		});
      	}
      	// 实现链式编程
      	return this;
      },

addClass方法

  1. 功能:给结果集中的每一个 dom 元素添加指定样式类.
  2. 实现思路
    • 遍历 this 上的每一个 dom 元素
    • 首先判断当前遍历到的 dom 元素是否含有样式类.
1
2
3
4
5
6
7
8
9
10
addClass: function(className) {
	// 遍历this上的每一个dom元素，并实现链式编程
	return this.each(function(v) {
		// 判断当前dom元素v是否具有className
		// 如果不具有，给其添加指定的样式类
		if(!itcast(v).hasClass(className)){
			v.className += ' ' + className;
		}
	});
},

removeClass方法

  1. 功能:删除结果集中的每一个 dom 元素的指定样式类.
  2. 实现思路
    • 遍历 this 上的每一个 dom 元素
    • (' ' + v.className + ' ').replace(' ' + className + ' ',' ');
      1
      2
      3
      4
      5
      6
      7
      8
      removeClass:function(className) {
      	// 遍历this上的每一个dom元素，并实现链式编程
      	return this.each(function(v) {
      		// 删除当前dom元素的样式类className
      		v.className = (' ' + v.className + ' ').
      			replace(' ' + className + ' ', ' ');
      	});
      }

toggleClass方法

  1. 功能: 切换指定的样式类,如果有,就删除,没有就添加
  2. 实现思路
    • 遍历 this 上的每一个 dom 元素
    • 判断当前遍历到的 dom 元素是否含有指定的样式类
    • 如果有,就删除
    • 如果没有,就添加
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      toggleClass: function(className) {
      	// 遍历this上的每一个dom元素，并实现链式编程
      	return this.each(function(v) {
      		// 将当前遍历到的元素转换成itcast对象
      		var $v = itcast(v);
      		// 如果具有指定的样式类，就删除该样式类
      		if($v.hasClass(className)){
      			$v.removeClass(className);
      		} else { // 如果没有指定的样式类，就添加该样式类
      			$v.addClass(className);
      		}
      	});
      }