jQuery

这是一篇关于jQuery的思维导图。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery操作DOM

• 操作元素样式
  • 操作元素属性
    • 获取样式属性值
      • 获取单个属性
        • $(selector).css('property');
      • 获取多个属性
        • $(selector).css(['property1','property2',...]);
      • 区别
        • 返回结果
          • 单个属性：属性值
          • 多个属性：属性名和属性值
        • 返回css形式
          • 单个属性：字符串形式
          • 多个属性：数组形式传入css（）方法中，对象形式
    • 设置样式属性值
      • 通过元素的样式属性设置具体的值来改变元素的样式
      • 设置单个属性
        • $(selector).css('property','value');
      • 设置多个属性
        • $(selector).css('property':'value','property':'value',...);
      • 键值对形式
        • 键：值，键：值
    • 通过函数设置样式属性值
      • value值替换成函数形式
      • 设置单个属性
        • $(selector).css('property',function(index,value){return newValue;}
      • 设置多个属性
        • $(selector).css({'property1',function(index,value){return newValue;}, 'property2',function(index,value){return newValue;} });
      • 含义
        • index
          • 匹配元素的索引值
          • 从0开始
        • value
          • 匹配元素的样式属性的当前值
        • newValue
          • 函数的返回值
  • 操作元素类
    • addClass()
      • 添加单个类
        • $(selector).addClass('c');
      • 添加多个类
        • $(selector).addClass('c1 c2 c3');
        • 一次添加多个类时，空格隔开
      • 必须有返回值
    • removeClass()
      • 移除所有类
        • $(selector).removeClass();
      • 移除单个类
        • $(selector).removeClass('c1');
      • 移除多个类
        • $(selector).removeClass('c1 c2 c3');
        • 一次移除多个类时，空格隔开
    • toggleClass()
      • 切换类的有无
      • 自定义类调用该方法
        • $(selector).toggleClass('c');
      • 两个参数手动控制
        • $(selector).toggleClass('c',true); 添加类
        • $(selector).toggleClass('c',false); 移除类
      • 条件判断返回值
        • var count = 0;$('div').click(function(){$(this).toggleClass('c',++count % 3 === 0);});
        • 在操作元素类中使用函数 addClass removeClass toggleClass都支持使用函数作为参数 函数：function(){}
    • hasClass()
      • 判断类是否存在，然后进行操作。存在返回true;不存在返回false
      • $(selector).hasClass('c');
  • 操作元素的尺寸
    • width() 获取或设置元素的宽度
      • 获取 $(selector).width();
      • 设置 $(selector).width('30px');
      • 设置宽度时，参数可以不加引号；不加引号，参数只能是数字，不能加单位
    • innerWidth() 包括内边距
    • outerWidth() 包括内边距和边框
    • outerWidth(true) 包括内边距，边框和外边距
    • height() 获取或设置元素的高度
    • innerHeight() 包括内边距
    • outerHeight() 包括内边距和边框
    • outerHeight(true) 包括内边距，边框和外边距
  • 操作元素的位置
    • offset()
      • 获取或设置匹配元素中的第一个元素在当前页面的坐标位置；若元素样式display设置成none，则获取的值为0
      • $(selector).offset();
        • 返回值包含两个属性；left：元素距浏览器的左偏移；top：元素距浏览的上偏移
    • position()
      • $(selector).opsition();
      • position()与offset()区别
        • position（） 只能获取不能设置； offset（）可以获取和设置
        • position（）获取元素相对于父元素（含有定位）的偏移； offset()获取元素相对于当前窗口的偏移; 当父元素没有定位时，二者等价
    • offsetParent()
      • 获取距离指定元素最近的"被定位"的祖辈元素；"被定位"：元素的样式属性中的position属性的值为relative absolute fixed ,不包括position属性的默认值static
    • scrollLeft()
      • 获取或设置指定元素相对滚动条左侧的偏移值
    • scrollTop()
      • 获取或设置指定元素相对于滚顶条顶部的偏移值
• 操作元素属性attr()
  • 获取和设置元素属性值
    • $(selector).attr('property');
    • 键值对形式；
    • attr() 与css()区别： attr()设置属性，所有属性; css()设置属性，只能是样式属性
  • 设置元素的状态属性
    • checked 获取或设置表单的选中状态 （true）
    • disabled 获取或设置表单的禁用状态
    • selected 获取或设置下拉框的选中状态
• 操作元素内容
  • 获取和设置元素
    • html()
      • 无参数
        • 获取元素的HTML内容
      • 字符串
        • 设置元素的HTML内容
    • text()
      • 无参数
        • 获取元素的文本内容
      • 字符串
        • 设置元素的文本内容
    • 区别
      • 都可以用来设置元素文本内容。 html()操作的元素含标签； text()操作的内容不含标签
      • html()标签被浏览器解析； text()标签原样输出
  • 获取和设置表单的值val()
    • $(selector).val(); $(selector).val(value);
    • value:表单元素的value属性值； selector：一般是指表单元素
• 操作DOM节点
  • 创建节点
    • $() 追加
    • html() 替换原标签内容
  • 插入节点
    • 内部添加
      • append(ele) 匹配元素的最后一个子元素后面插入ele
      • appendTo(ele) 将匹配元素插入ele中，匹配元素为ele的最后一个子元素
      • prepend(ele) 匹配元素的第一个子元素之前插入ele
      • prependTo(ele) 将匹配元素插入ele中，匹配元素为ele的第一个子元素
    • 外部添加
      • before(ele)在匹配元素之前插入ele
      • insertBefore(ele) 将匹配元素插入ele之前
      • after() 在匹配元素之后插入ele
      • insertAfter() 将匹配元素插入ele之后
    • 变量
      • 全局变量 执行某一个事件时，多次执行只加一次节点
      • 局部变量 执行某一个事件时，多次执行多次加节点
  • 删除节点
    • remove() 从DOM中删除所有匹配的元素; 还存在于jQuery对象中; 移除绑定的事件和附加的数据
    • detach() 从DOM中删除所有匹配的元素; 存在于jQuery对象中; 保留绑定事件和附加数据; 调用后返回当前被删除元素的对象
    • empty(） 删除匹配的元素集合中的所有子节点; $("ul").empty等效于$("ul").html();
  • 复制节点
    • $(selector).clone()
    • selector：要复制的内容;可以是选择器或者HTML内容
    • 调用后生成副本，需要利用插入节点才能显示到DOM中
    • 返回jQuery对象
  • 替换节点
    • replaceWith 调用对象：代替换的元素对象；参数：替换后的HTML元素或DOM对象
    • replaceAll 调用对象和参数与replaceWith相反
  • 包裹节点
    • warp（）
      • 每个li都单独包裹
      • <ul> <strong><li></li></strong> <strong><li></li></strong> </ul>
    • warpAll()
      • 所有li整体包裹
      • <ul> <strong> <li></li> <li></li> </strong> </ul>
    • warpInner()
      • 每个li里面的内容单独包裹
      • <ul> <li><strong></strong></li> <li><strong></strong></li> </ul>
  • 遍历节点
    • $(selector).each(function(index,element));
    • index:遍历元素的索引，默认从0开始; element:当前元素，一般用this代替
• 案例主要思想
• 习题
• 链式编程
  • 返回jQuery对象
  • 语句不宜过长