03-对JQuery对象的属性,特性以及数据的操作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了03-对JQuery对象的属性,特性以及数据的操作相关的知识,希望对你有一定的参考价值。

  • 对JQuery对象的属性,特性以及数据的操作:
    • 特性(attributes)和属性(properties):
      • 特性的值是字符串。
      • 属性的值不光为字符串,而且可以为布尔值,对象,数字。
      • 元素的属性和特性有动态链接,如果特性在dom对象中存在,其中一个发生变化,另一个也会变化
      • 如果特性是本来就在dom对象中存在,但是类型为boolean,那么特性和属性将不会同步。
      • 如果attributes不是dom对象内建的属性,attributes和properties的值不会同步。
    • 操作元素的特性:
      • 获取特性的值:attr(name)
      • 设置特性的值:attr(name,value) attr(attributes)
      • 删除特性:removeAttr(); 删除多个特性中间加空格。
    • 操作元素的属性:
      • 获取属性的值:prop(name)
      • 设置属性的值:prop(name,value)  prop(properties) 
      • 特性不区分大小写,属性区分
      • 删除属性:removeProp();
    • 在元素中存储数据:
      • 获取数据的值:data([name])
      • 设置数据的值:data(name,value) data(object);
      • 删除数据:removeData([name]);
      • 判断元素是否这个数据:hasData(‘ele‘);
  • 修改JQuery对象的样式和内容:
    • 添加或修改class:addClass(name);
    • 移除类:removeClass(name);
    • 以上方法可以定义函数,不过返回值需要有一个或多个类名。
     
$(#demo).addClass(function(index,className){
          return red;
     })

 

    • 判断是否有某个类:hasClass(name);
    • 切换某个类,有就删除,没有就添加:toggleClass(name);
    • 获取或设置style (用横杠写属性需要加引号,驼峰则不用):css(name,value);
    • 设置不包含边框和内边距宽和高:width()和height(); 
    • 设置包含内边距的高:innerHeight();
    • 设置包含内边距和边框的高,可以设置值为true的话包含外边距:outerHeight();
    • 返回对象集合中的一个元素,返回两个值,左侧和顶部的距离:offset();
    • 返回匹配元素相对于父元素的位置(偏移):position();
    • 设置滚动条:scrollTop()和scrollLeft();
    • 设置内容:html()设置html的值,只获取集合的的一个,text()设置文本,集合获取全部值。

以上是关于03-对JQuery对象的属性,特性以及数据的操作的主要内容,如果未能解决你的问题,请参考以下文章

面向对象的三大特性

jQuery数据缓存$.data 的使用以及源码解析

jQuery ---[jQuery选择器,jQuery对象的遍历]

面向对象三大特性

JQuery元素属性和样式操作以及设置元素和内容

面向对象三大基本特性