// 添加一个处理兼容获取样式的静态方法
jQuery.getStyle = function( dom, styleName ) {

// dom不是dom,styleName不是字符串,直接打走
if( !jQuery.isDOM( dom ) || !jQuery.isString( styleName ) ) {
return false;
}

// 兼容获取指定的样式
if( window.getComputedStyle ) {
return window.getComputedStyle( dom )[ styleName ];
}else {
return dom.currentStyle[ styleName ];
}
};

// 添加属性和样式操作的方法
jQuery.fn.extend({

// 设置或者获取元素的属性节点
attr: function( attr, val ) {

/*
* 实现思路:
* 1、如果参数的个数为1
* 1.1、这个参数为字符串,那么获取第一个元素指定的属性节点值(getAttribute())并返回。
* 1.2、这个参数为对象,遍历所有的元素,然后再遍历这个对象,
* 把对象中所有的属性值按照属性节点的方式添加给所有元素。
* 2、如果参数的个数为2,遍历所有的元素,
* 以attr为属性节点名,val为属性节点值添加给这些元素。
* 3、链式编程返回this。
* */

var arg = arguments, argLen = arg.length;

// 参数为1
if( argLen === 1 ) {

// 类型为字符串,返回第一个元素指定的属性节点值
if( jQuery.isString( attr ) ) {
return this.get(0).getAttribute( attr );
}

// 类型为对象,遍历所有的元素,然后再遍历这个对象,依次添加遍历到的所有属性节点值
else if( jQuery.isObject( attr ) ) {

/*// 遍历所有元素
for( var i = 0, len = this.length; i < len; i++ ) {

// 遍历传入进来的对象
for( var key in attr ) {

// 给每一个元素设置遍历到的属性节点
this[ i ].setAttribute( key, attr[ key ] );

}
}*/

// 遍历所有元素
this.each( function() {

// 这里的this指向遍历到的每一个元素
var self = this;

// 遍历传入进来的对象
jQuery.each( attr, function( key, val ) {

// 给每一个元素设置遍历到的属性节点
self.setAttribute( key, val );
});
});
}
}

// 参数为2
else if( argLen === 2 ) {

// 两个参数都是字符串,那么给所有元素设置指定的属性节点
if( jQuery.isString( attr ) && jQuery.isString( val ) ) {

this.each( function() {

// 这里的this指向遍历到的每一个元素
this.setAttribute( attr, val );
});
}
}

// 链式编程
return this;
},

// 设置或者获取元素的属性
prop: function( prop, val ) {

/*
* 实现思路:
* 1、如果参数的个数为1
* 1.1、这个参数为字符串,那么获取第一个元素指定的属性并返回。
* 1.2、这个参数为对象,遍历所有的元素,然后再遍历这个对象,
* 把对象中所有的属性值添加给所有元素。
* 2、如果参数的个数为2,遍历所有的元素,
* 以attr为属性名,val为属性值添加给这些元素。
* 3、链式编程返回this。
* */
var argLen = arguments.length;

// 参数为1
if( argLen === 1 ) {

// 类型为字符串,返回第一个元素指定的属性值
if( jQuery.isString( prop ) ) {
return this.get(0)[ prop ];
}

// 类型为对象,遍历所有的元素,然后再遍历这个对象,依次添加遍历到的所有属性值
else if( jQuery.isObject( prop ) ) {

// 遍历所有元素
this.each( function() {

// 这里的this指向遍历到的每一个元素
var self = this;

// 遍历得到所有的属性
jQuery.each( prop, function( key, val ) {

// 给每一个元素分别设置遍历到的属性
self[ key ] = val;
});
});
}
}

// 参数为2
else if( argLen === 2 ) {

// 两个参数都是字符串,那么给所有元素设置指定的属性
if( jQuery.isString( prop ) && jQuery.isString( val ) ) {
this.each( function() {
this[ prop ] = val;
});
}
}

// 链式编程
return this;
},

// 设置或者获取元素的value属性
val: function( val ) {

// 不传参,返回第一个元素的value属性值
if( arguments.length === 0 ) {
return this.get(0).value;
}

// 传参,给所有元素分别设置对应的value属性值
else {
this.each( function() {
this.value = val;
});
}

// 链式编程
return this;
},

// 升级版,复用prop方法实现value属性的获取和设置
_val: function() {
return this.prop.apply( this, [].concat.apply( ['value'], arguments ) );
},

css: function( styleName, val ) {
/*
* 实现思路:
* 1、如果参数的个数为1
* 1.1、这个参数为字符串,那么获取第一个元素指定的样式并返回。
* 1.2、这个参数为对象,遍历所有的元素,然后再遍历这个对象,
* 把对象中所有的样式添加给所有元素。
* 2、如果参数的个数为2,遍历所有的元素,
* 以styleName为样式名,val为样式值添加给这些元素。
* 3、链式编程返回this。
* */

var argLen = arguments.length;

// 参数为1
if( argLen === 1 ) {

// 如果为字符串,那么返回第一个元素指定的样式
if( jQuery.isString( styleName ) ) {
return jQuery.getStyle( this.get(0), styleName );
}

// 如果为对象,遍历所有元素,遍历所有样式,依次给每一个元素设置
else if( jQuery.isObject( styleName ) ) {

this.each( function() {
var self = this;

jQuery.each( styleName, function( key, val ) {
self.style[ key ] = val;
});
});
}
}

// 参数为2
else if( argLen === 2 ) {

// 给所有元素分别设置对应的样式
this.each( function() {
this.style[ styleName ] = val;
});
}

// 链式编程
return this;
},

hasClass: function( className ) {
/*
* 实现思路:
* 1、遍历所有元素
* 2、依次得到每一个元素的className,并加空格处理
* 3、然后用处理过的className判断是否存在某class(也要加空格处理)
* 4、只要有一个存在,就返回true,否则返回false。
* */
for( var i = 0, len = this.length; i < len; i++ ) {

if( (' ' + this[ i ].className + ' ')
.indexOf(' ' + className + ' ' ) > -1 ) {
return true;
}
}

return false;
},

// 判断是否存某class
_hasClass: function( className ) {

var has = false;

this.each( function() {

if( (' ' + this.className + ' ').indexOf(' ' + className + ' ' ) > -1 ) {
has = true;
return false;
}

});

return has;
},

// 批量添加class
addClass: function( classNames ) {
/*
* 实现思路:
* 1、把classNames字符串转换为存储不同class的数组
* 2、遍历所有元素,遍历所有class
* 3、依次判断元素有没有遍历到的class,没有则累加。
* 4、链式编程返回this
* */

classNames = classNames.split(' ');

this.each( function() {

var self = this;

jQuery.each( classNames, function() {

if( !jQuery( self ).hasClass( this + '' ) ) {
self.className += ' ' + this;
}
});
});

return this;
},

// 批量删除class
removeClass: function( classNames ) {
/*
* 实现思路:
* 1、如果没传参
* 1.1. 遍历所有元素,清除每一个元素的class
* 2、如果传参了
* 2.1、把classNames字符串转换为存储不同class的数组
* 2.2、遍历所有元素,遍历所有class
* 2.3、直接替换掉遍历到的class,然后把替换后的class字符串赋给元素
* 3、链式编程返回this
* */

// 不传参,清除全部class
if( arguments.length === 0 ) {
this.each( function() {
this.className = '';
});
}

// 传参,批量删除指定class
else {

classNames = classNames.split(' ');
this.each( function() {

var self = this;

jQuery.each( classNames, function( i, val ){

self.className = self.className.replace( new RegExp( '\\b' + val + '\\b' , 'g' ), '' );
});
});
}

// 链式编程
return this;
},

// 有则删,没则加
toggleClass: function( classNames ) {
/*
* 实现思路:
* 1、把classNames字符串转换为存储不同class的数组
* 2、遍历所有元素,遍历所有class
* 3、有则删除,没则加
* 4、链式编程返回this
* */

classNames = classNames.split(' ');
this.each( function() {

var $self = jQuery(this);

jQuery.each( classNames, function( i, val ) {

if( $self.hasClass( val ) ) {
$self.removeClass( val );
}else {
$self.addClass( val );
}
});
});
}
});

jQuery原生框架-----------------属性操作的更多相关文章

  1. jQuery原生框架-----------------dom操作

    // 扩展DOM操作方法jQuery.fn.extend({ // 设置或者获取元素的内容 html: function( html ) { /* * 实现思路: * 1.不传参,返回第一个元素的内容 ...

  2. jQuery attr removeAttr 属性操作

    jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...

  3. jquery 学习(二) - 属性操作

    html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...

  4. jQuery对象的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  5. jQuery原生框架中的jQuery.fn.extend和jQuery.extend

    extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...

  6. jquery对标签属性操作

    jquery中添加属性和删除属性: $("#2args").attr("disabled",'disabled'); $("#2args") ...

  7. jQuery原生框架-----------------核心框架

    // 1.自调防止全局变量污染(function( window ) { var version = '1.0.0'; var document = window.document; var arr ...

  8. jQuery基本的属性操作

    attr和prop,prop常用来操作标签的固有属性,比方说checkbox的checked属性.select的selected属性,而attr常用来操作我们自己给标签添加的属性. $('div'). ...

  9. jQuery原生框架-----------------事件

    jQuery.extend({ // 绑定事件 addEvent: function( ele, type, fn ) { // ele不是DOM,type不是字符串,fn不是函数,打包打走 if( ...

随机推荐

  1. python 爬虫(三)

    爬遍整个域名    六度空间理论:任何两个陌生人之间所间隔的人不会超过六个,也就是说最多通过五个人你可以认识任何一个陌生人.通过维基百科我们能够通过连接从一个人连接到任何一个他想连接到的人. 1. 获 ...

  2. Smart210学习记录------linux串口驱动

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=27025492&id=327609 一.核心数据结构 串口驱动有 ...

  3. 破解 crackme(完全拆解警告窗口)

    系统 : Windows xp 程序 : crackme 程序下载地址 :http://pan.baidu.com/s/1kUrbcAr 要求 : 注册机编写 & 去除Nag窗口 使用工具 : ...

  4. POJ C++程序设计 编程题#2 编程作业—文件操作与模板

    编程题#2: 实数的输出格式 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 1000kB 描述 ...

  5. Oracle DB 分区特性概述 Overview of Partitions

    概述:在Oracle数据库中,分区(partitioning)可以使非常大的表(table)或索引(index)分解为小的易管理的块(pieces),这些块被称作分区(partitions).每个分区 ...

  6. CodeSmith模板生成

    转:http://blog.csdn.net/jason_ldh/article/details/9887073 一.            工具设置 CodeSmith默认是不支持中文的,那么我们必 ...

  7. c语言数组小练习

    //查找数组中最大的值: #include<stdio.h> int main01() { , , , , , , , , , ,,}; ]; int i; ;i < ]);i++) ...

  8. SQL 简单练习

    USE study; SELECT * FROM EMP --查询雇员姓名的最后三个字母 ) FROM EMP ; --查询10部门雇员进入公司的星期数 --1 查询部门30中的所有员工 --2 列出 ...

  9. 【转载】Stack Overflow: The Architecture - 2016 Edition

    转载:http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi?utm_source=tuicool&utm_ ...

  10. Ionic.Zip.dll文件压缩和解压

    Ionic.Zip.dll文件压缩和解压 下载地址: http://download.csdn.net/detail/yfz19890410/5578515 1.下载Ionic.Zip.dll组件,添 ...