接上一篇:jQuery乱谈(五),今天分析removeClass()、removeProp()、toggleClass()、val()。

  removeClass():

/** * removeClass方法的内部实现和addClass方法很类似,都是先对参数类型进行判断: * 参数为Function类型,则利用Function.call()执行函数参数,然后取得返回值,接着 * 利用jQuery.each方法和removeClass方法对每个匹配元素执行命令; * 参数为String类型,首先对每个匹配元素的class属性的字符串值规则化为 * " class1 class2 class3 "的形式,接着进行各自的处理(移除或添加) */ removeClass: function( value ) {         var removes, className, elem, c, cl, i, l;          // 如果参数为Function类型,执行该分支语句         if ( jQuery.isFunction( value ) ) {             // each方法在jQuery中经常用到,因为我们操作的jQuery对象经常是多个,该方法可以让每个jQuery对象都执行相应的操作             return this.each(function( j ) {                  /* 这里用到了Function.call(),这也是在jQuery内部实现中经常用到的                    还有与之类似的Function.apply()。二者都是用于改变运行上下文,                    借用已存在的方法进行操作,不同点就是传递参数的方式.                    这里的value.call(this, j, this.className)会返回一个或更多用空格隔开的被移除class名         */                 jQuery( this ).removeClass( value.call(this, j, this.className) );             });         }         /**         只有参数为String或者参数不存在(也可以参数等于undefined),才执行该分支语句         当参数不存在(也可以参数等于undefined)时,则匹配元素所有的样式类名都会去掉         */         if ( (value && typeof value === "string") || value === undefined ) {             // // core_rspace = /\s+/,用于匹配一个及以上的空白字符              removes = ( value || "" ).split( core_rspace ); // 将提供的参数按空白字符分开放到一个数组里              // // 循环对匹配元素的每一项进行处理             for ( i = 0, l = this.length; i < l; i++ ) {                 elem = this[ i ]; // 这里的this表示匹配的元素集合,this[ i ]表示匹配的每一项                 // 确保元素是元素节点,而且元素的class属性存在                 if ( elem.nodeType === 1 && elem.className ) {                      // 在元素原有的class类名字符串前后添加空白字符可以保证添加新的类名后和原来的类名不会连到一块,从而导致错误                     className = (" " + elem.className + " ").replace( rclass, " " );                                           for ( c = 0, cl = removes.length; c < cl; c++ ) {                         //  确保新添加的className在原来的元素的class属性中不存在                         while ( className.indexOf(" " + removes[ c ] + " ") >= 0 ) {                             // 将要替换的样式类名先处理为“ class1 ”的形式,然后替换为“ ”                             className = className.replace( " " + removes[ c ] + " " , " " );                         }                     }                     /**                     jQuery.trim方法用于去除字符串前后空格,如果参数不存在,表明匹配元素的所有样式类名将要全部去掉,所以直接等于"";                     如果参数存在,且为String类型,则应该去除整个样式类名的前后空格                     */                     elem.className = value ? jQuery.trim( className ) : "";                  }             }         }         // // 形成链式调用         return this;     }

  该方法用于移除每个匹配元素的一个,多个或全部class属性。如果一个样式类名作为一个参数,只有这样式类为匹配的元素集合中被删除 。 如果没有样式名作为参数,那么所有的样式类将被移除。使用方法:

  • removeClass( [ className ] )

    className 为每个匹配元素移除的样式属性名。

  • removeClass( function(index, class) )

    function(index, class) 这个函数返回一个或更多用空格隔开的被移除样式名。接收元素的索引位置和元素旧的样式名作为参数。

  

  removeProp():

/* 这里用到了propFix: {         tabindex: "tabIndex",         readonly: "readOnly",         "for": "htmlFor",         "class": "className",         maxlength: "maxLength",         cellspacing: "cellSpacing",         cellpadding: "cellPadding",         rowspan: "rowSpan",         colspan: "colSpan",         usemap: "useMap",         frameborder: "frameBorder",         contenteditable: "contentEditable"     },它用于修正IE浏览器中的IE6、7getAttribute、setAttribute、removeAttribute等方法的不足 */ removeProp: function( name ) {         name = jQuery.propFix[ name ] || name;         return this.each(function() {             // try/catch 用于处理在IE浏览器中的抽风 (比如移除一个window的属性)             try {                 /*                 这里的this指的是配一个匹配的元素,我们可以通过this[ name ]访问元素对象的name属性,                 有两种方式来访问对象的属性,点操作符或者中括号操作符。但一般推荐使用中括号操作符,                 因为中括号操作符在下面两种情况下依然有效:                  动态设置属性;属性名不是一个有效的变量名(比如属性名中包含空格,或者属性名是 JS 的关键词)                 */                 this[ name ] = undefined; // 将 name属性设置成 undefined                 delete this[ name ]; // delete就是用于移除对象的属性             } catch( e ) {}         });     }

  该方法用于为匹配的元素删除设置的属性。只接受一个参数:removeProp( propertyName )。propertyName参数表示要移除的属性名。该方法会移除使用 .prop()方法设置的属性。若尝试移除 DOM 元素或 window 对象上一些内建的 property 属性,浏览器可能会产生错误。如果真的那么做了,那么 jQuery 首先会将 property 属性设置成 undefined,然后忽略任何浏览器产生的错误。一般来说,只需要移除自定义的 property 属性,而不是移除内建的(原生的) property 属性。

注意: 不要使用该方法来移除原生的 property 属性,例如:checked, disabled, 或 selected 属性。因为这样会完全移除该 property 属性,它们一旦被删除,就不能再被添加。请使用.prop() 来将这些 property 属性的值设置成 false

补充说明:

  • 在 IE 9 之前,使用 .prop() 对一个 DOM 元素的属性进行赋值时,若所赋值的类型不是基本类型(number, string, 或 boolean),而且也没有使用 .removeProp() 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题,请使用 .data() 方法 。

  toggleClass():

toggleClass: function( value, stateVal ) {         var type = typeof value, // 第一个参数的类型             isBool = typeof stateVal === "boolean"; // 判断第二个参数是否为boolean型          // 如果第一个参数为Function类型,执行该分支语句         if ( jQuery.isFunction( value ) ) {             // each方法在jQuery中经常用到,因为我们操作的jQuery对象经常是多个,该方法可以让每个jQuery对象都执行相应的操作             return this.each(function( i ) {                 /* 这里用到了Function.call(),这也是在jQuery内部实现中经常用到的                    还有与之类似的Function.apply()。二者都是用于改变运行上下文,                    借用已存在的方法进行操作,不同点就是传递参数的方式.                    这里的value.call(this, j, this.className, stateVal)会返回在匹配的元素集合中的每个元素上用来切换的样式类名         */                 jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );             });         }          // each方法在jQuery中经常用到,因为我们操作的jQuery对象经常是多个,该方法可以让每个jQuery对象都执行相应的操作         return this.each(function() {             // 如果第一个参数为String类型,执行             if ( type === "string" ) {                 var className,                     i = 0,                     self = jQuery( this ),                     state = stateVal,                     classNames = value.split( core_rspace );                  while ( (className = classNames[ i++ ]) ) {                     // 判断每一个class属性值,决定添加还是移除                     state = isBool ? state : !self.hasClass( className );                     self[ state ? "addClass" : "removeClass" ]( className );                 }              } else if ( type === "undefined" || type === "boolean" ) {                 if ( this.className ) {                     // 如果class属性存在,保存                     jQuery._data( this, "__className__", this.className );                 }                  // 切换整个class属性,也就是把添加或删除class值后的字符串返回给每个匹配元素的class属性                 this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";             }         });     }

  该方法在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或价值切换属性。即:如果存在(不存在)就删除(添加)一个类。

  • toggleClass( className )

    className 在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。

  • toggleClass( className, switch )

    className 在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。

    switch 一个用来判断样式类添加还是移除的 boolean 值。

  • toggleClass( function(index, class), [ switch ] )

    function(index, class) 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

    switch 一个用来判断样式类添加还是移除的 boolean 值。如果这个参数的值是true,那么这个样式类将被添加;如果这个参数的值是false,那么这个样式类将被移除。

  val():

val: function( value ) {         var hooks, ret, isFunction,             elem = this[0]; // 匹配元素的第一个元素          // 如果参数不存在,执行该分支语句         if ( !arguments.length ) {               // 保证匹配元素的第一个元素存在             if ( elem ) {                 /*                 jQuery的val()函数需要针对不同标签进行不同的处理, 因此定义一个以tagName为key的函数映射表                 valHooks: { option: {get:function(){}}} 这样在程序中就不需要到处写:                 if(elm.tagName == ’OPTION’){return …; }else if(elm.tagName == ’TEXTAREA’){ return …;}                 可以统一处理:                 valHooks[elm.tagName.toLowerCase()];                 映射表将函数作为普通数据来管理, 在动态语言中有着广泛的应用.                 */                 // hooks是用来解决浏览器兼容性的问题(select、option等元素)                 hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];                  if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {                     return ret; // ret为获取的值                 }                  ret = elem.value;// 直接获取元素的value值,这时应该主要针对表单元素                  return typeof ret === "string" ?                     // rreturn = /\r/g,若元素的value值为字符串类型,将字符串中的回车符替换为""                     ret.replace(rreturn, "") :                     // 如果value为null,返回"";否则返回ret本身                     ret == null ? "" : ret;             }              return; // 如果值不存在,直接返回         }            // 以下代码主要处理参数存在的情况,就是设置值的情况          isFunction = jQuery.isFunction( value ); // 判断参数是否为Function类型          return this.each(function( i ) {             var val,                 self = jQuery(this);              // 如果节点不是元素节点,直接返回             if ( this.nodeType !== 1 ) {                  return;             }              // 如果参数为Function类型,val等于函数参数返回的设置的值             if ( isFunction ) {                 val = value.call( this, i, self.val() );             } else {// 否则val直接等于参数值                 val = value;             }              // 如果val等于null/undefined,val = "";             if ( val == null ) {                 val = "";                 //  如果val为数字类型,将val值转换为相应的字符串类型             } else if ( typeof val === "number" ) {                 val += "";                 // 如果val为数组类型,转换为字符串             } else if ( jQuery.isArray( val ) ) {                 val = jQuery.map(val, function ( value ) {                     return value == null ? "" : value + "";                 });             }              // 同上,hooks是用来解决浏览器兼容性的问题(select、option等元素)             hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];              // If set returns undefined, fall back to normal setting             if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {                 this.value = val;             }         });     }

  该方法可以获取匹配的元素集合中第一个元素的当前值,或者设置匹配的元素集合中每个元素的值。val() 方法主要用于获取或设置表单元素的值。

  • val()

  获取匹配的元素集合中第一个元素的当前值。

  • val( value )

  设置匹配的元素集合中每个元素的值。

  • val( value )

      value一个文本字符串或一个以字符串形式的数组来设定每个匹配元素的值。

  • val( function(index, value) )

      function(index, value)一个用来返回设置值的函数。

  jQuery的val()方法不仅能够设置元素的值,同时也能获取元素的值。常见的操作是对文本框的操作,比如判断邮箱地址等。val()方法还有另外的一个用处,就是它能使select(下拉列表框),checkbox(多选框)和radio(单选框)相应的项被选中,这在表单操作中经常会用到。

转载于:https://blog.51cto.com/3001448/1205904

[置顶]       jQuery乱谈(六)相关推荐

  1. html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例

    本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...

  2. html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件

    这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...

  3. html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果

    今天做了个固定定位的效果.比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示.当滚动到导航下面,导航就固定到顶部. 一.css部分: fixed 生成绝对定位的元素,相对于浏览器窗口进 ...

  4. HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效

    本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...

  5. [置顶] JQuery在线截取图片

    JQuery在线截取图片 ASP.NET结构开发 1.在线截取 前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取 2.开始正文 首先构建文档,样式 <html ...

  6. [置顶]       JQUERY一些注意事项

    1.   jQuery变量命名时不能使用"-",可以使用下划线"_",例如var click-product:会报出"丢失分号"很奇怪的错误 ...

  7. [置顶]       Jquery实现网页marquee效果

    原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jqu ...

  8. html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...

    本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...

  9. jquery实现截取pc图片_[置顶] JQuery在线截取图片

    JQuery在线截取图片 ASP.NET结构开发 1.在线截取 前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取 2.开始正文 首先构建文档,样式 JQuery截取 ...

最新文章

  1. linux学习笔记一
  2. 【连载】优秀程序员的 45 个习惯之习惯35
  3. 使用qtcreator中的git_Git中submodule的使用
  4. Webpack进阶(二)代码分割 Code Splitting
  5. 一场价值4500亿的抉择
  6. 对List.Sort的简单研究
  7. Riot Blockchain再次购入1.5万台比特大陆S19系列矿机
  8. python list去重_基础知识详解:python( list,set,dict)大规模查找效率对比
  9. Pgsql登录连接失败原因及解决方法
  10. CAT1 4G+以太网开发板腾讯云手机微信小程序显示温度和下发控制
  11. 一款自动生成唯一头像的开源代码库
  12. 中国计算机设计大赛国二省一比赛总结——新冠病毒管理系统
  13. mysql数据,中国最新行政区划数据,到乡村共5级
  14. X86服务器及“机架、塔式、刀片”三类服务器分类
  15. 关于信息安全专业学习的一些看法
  16. linux安装英伟达显卡驱动
  17. 算术左、右移位与逻辑左、右移位,右移一位和除二的区别、算术溢出
  18. android 十字架效果实现(水平和垂直滑动)
  19. app被Rejected 的各种原因翻译
  20. 美利坚合众国概况(美国概况)

热门文章

  1. python sanic_sanic中文文档
  2. 华为鸿蒙被扒出来安卓,华为鸿蒙被“实锤”,操作界面曝光,为何被吐槽是换皮安卓?...
  3. 测试一款CSDN免费下载软件
  4. 2021 CSDN年度回忆录
  5. 红外发送管的角度特性测试
  6. 2021年春季学期-信号与系统-第十次作业参考答案-第六小题
  7. 2021年春季学期-信号与系统-第二次作业参考答案-第九小题
  8. 光电信标灯发光盘的特性电流测试
  9. 对ZNNT-5NM力矩传感器进行标定
  10. 减速电机JGA25-370的控制电路