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

Posted 2020-09-30

• 对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()设置文本，集合获取全部值。