下载了jQuery的UI组件,发现内容还挺多的,还是决定先把jQuery的源码看完一遍之后再涉足UI组件。考虑到队列和动画使用较少,特别是动画,基本开始使用css3完成。因此暂时略过,开始看jQuery对属性操作的处理。该部分大约500行代码,预计一周看完。

jQuery提供的属性操作方法有两种

1、挂载到jQuery对象上

  // 获取或设置属性值。当参数只有name时,获取jQuery集合中的第一个元素的name属性的值。

  // name和value都有时,为jQuery集合中的所有元素增加name属性,value为值的属性

  $(elem).attr(name, [value]);

  // 删除jQuery集合中所有元素上的name属性

  $(elem).removeAttr(name); 

  // 获取或设置属性值。当参数只有name时,获取jQuery集合中的第一个元素的name属性的值。

  // name和value都有时,为jQuery集合中的所有元素增加name属性,value为值的属性

  // 同attr的区别是当属性为checked等属性时,attr返回“checked”字符串,而prop返回true布尔值

  $(elem).prop(name, value);

  // 删除jQuery集合中所有元素上的name属性

  $(elem).removeProp(name);

  // 为jQuery集合中每个元素添加class

  $(elem).addClass(value);

  // 删除class,当有value参数时,删除jQuery集合中所有元素的为value的class,如果没有参数,则删除jQuery集合中所有元素的所有class

  $(elem).removeClass([value]);

  // 交替添加或删除class。当只有value参数时,有这个class就删除,没有就添加

  // 如果有两个参数时,第二个参数如果为true,则添加class,否则删除class

  $(elem).toggleClass(value, [stateVal]);

  // 判断元素上是否有某个class

  $(elem).hasClass(selector);

  // 得到或者获取元素的值(一般是表单元素),当有value参数时,为jQuery集合中每个元素设置value

  // 如果没有传入参数。则得到jQuery集合中第一个元素的值

  $(elem).val(value);

2、挂载在$上的属性和方法。(主要为第一种方法提供兼容性上的处理)

  $.valHooks 属性

  $.attr()

  $.removeAttr()

  $.attrHooks 属性

  $.propFix 属性

  $.prop()

  $.propHooks 属性

因为挂载到$上的方法提供基础处理,所以先看下挂载到$上的方法和属性

jQuery.extend({
    valHooks: {
        option: {

    // 处理获取option的value时,不同浏览器的兼容性(原生不熟悉,并不了解为什么做这样的处理)
            get: function( elem ) {
                var val = elem.attributes.value;
                return !val || val.specified ? elem.value : elem.text;
            }
        },
    },

attr: function( elem, name, value ) {},

removeAttr: function( elem, value ) {},

attrHooks: {},

propFix: {},

prop: function( elem, name, value ) {},

propHooks: {}
});

jQuery属性操作(一)的更多相关文章

  1. jquery——属性操作、特殊效果

    1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. jQuery属性操作

    jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...

  3. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  4. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  5. python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  6. jQuery属性操作(四)

    通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks,发现jQuery在属性操作方面并没有做过多的设计,只是处理一下兼容性问题,然后调用基础的DOM操作方法.以下是对JQue ...

  7. jQuery属性操作(二)

    挂载到$上的几个属性操作方法分析,发现属性操作用到了sizzle封装的方法 attr: function( elem, name, value ) {        var hooks, ret,   ...

  8. web前端----jQuery属性操作

    知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...

  9. Jquery属性操作(入门二)

    ********JQuery属性相关的操作******** 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个 ...

随机推荐

  1. JS 动态修改json字符串

    <script type="text/javascript"> //1.将表单序列化成json字符串 $.fn.serializeObject = function() ...

  2. PostgreSQL安装入门教程

    一.安装 首先,安装PostgreSQL客户端. sudo apt-get install postgresql-client 然后,安装PostgreSQL服务器. sudo apt-get ins ...

  3. MAC 查看端口占用

    命令 lsof -i tcp:[port]  (port替换成端口号,比如6379)可以查看该端口被什么程序占用,并显示PID,方便KILL 之后,kill -9  [PID] , kill进程即可 ...

  4. JSTL XML标签库 使用

    推荐博客:http://blog.sina.com.cn/s/blog_4f925fc30101820u.html XML标签库 JSTL提供了操作xml文件的标签库,使用xml标签库可以省去使用Do ...

  5. [AngularJS] tips技巧收集

     单个参数调用angular.module(),用来取得该模块而不是定义新的 这样就可以在不同的地方定义app的controller而不用通过全局变量 angular.module('myapp') ...

  6. awk调用shell

    为什么会有这份记录:在帮同学传文件至服务器时,使用了scp,因此链接属性没有建立好,所以向通过awk完成.(更好的是通过tar传递) 附:awk中调用shell的方法. 参考:http://hi.ba ...

  7. Android Material Design控件学习(二)——NavigationView的学习和使用

    前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...

  8. 详解BarTender选项大小调整模式

    BarTender大小调整模式是DotCode码制独有的符号体系特殊选项.DotCode 符号可能在形状上有所不同,包括从接近正方形的点阵到细长的色带,而“大小调整模式”选项通过指定点阵的配置来确定 ...

  9. Android开发学习笔记-md5加密算法

    十六位的md5加密 private static void Md5(String plainText ) { try { MessageDigest md = MessageDigest.getIns ...

  10. 配置caffe过程中,生成解决方案出错。无法打开包括文件: “gpu/mxGPUArray.h”

    ------ 已启动生成: 项目: matcaffe, 配置: Release x64 ------12> MatlabPreBuild.cmd : Create output director ...