视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery中attr()与prop()函数用法实例详解(附用法区别)_jquery
2020-11-27 21:48:03 责编:小采
文档
 本文实例讲述了jQuery中attr()与prop()函数用法。分享给大家供大家参考,具体如下:

一、jQuery的attr()方法

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。

1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

2. attr(属性名, 属性值) //设置属性的值 (为所有匹配的元素设置一个属性值。)

3. attr(属性名,函数值) //设置属性的函数值 (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

4.attr(properties) //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

示例代码:





jquery中attr()方法




你最喜欢的水果是?

  • 苹果
  • 橘子
  • 菠萝
  • 1.attr(name)//获取属性的值

    1.1使用attr(name)获取title值:

    
    
    

    结果:

    1.2使用attr(name)获取alt值:

    
    
    

    结果:

    2. attr(name,value) //设置属性的值

    2.1使用attr(name,value)修改title值为:不吃橘子

    
    
    

    结果:

    3. attr(name,fn) //设置属性的函数值

    3.1把alt属性的值设置为title属性的值。

    
    
    

    结果:

    4.attr(properties) //将一个“名/值”形式的对象设置为所有匹配元素的属性

    4.1获取里第2个

  • 设置title和alt属性。

    
    
    

    结果:

    4.2获取里第2个

  • 设置class。

    
    
    

    结果:

    4.3获取里第2个

  • 设置id。

    
    
    

    结果:

    4.4获取里第2个

  • 设置style。

    
    
    

    结果:

    在li中添加alt是错误的,它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法,没有合适的属性,所有用了alt进行举例,只供学习参考attr()方法用法。

    在此说明下alt和tite的区别。

    alt:这是用以描述图形的文字,当图片无法显示时,这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。
    title:是鼠标放上去之后,会显示出来的文字。

    那么怎么删除属性呢?

    jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:
    同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

    
    
    

    就这么简单, attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。

    那么是否有跟attr()相似的属性呢?

    jquery中val()与之类似,
    $(this).val();获取某个元素节点的value值,相当于$(this).attr("value");
    $(this).val(value);设置某个元素节点的value值,相当于$(this).attr("value",value);

    二、jQuery的prop()方法:

    prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。

    该函数属于jQuery对象(实例)。如果需要删除DOM元素的属性,请使用removeProp()函数。

    语法

    jQuery 1.6 新增该函数。prop()函数有以下两种用法:

    用法一:

    jQueryObject.prop( propertyName [, value ] )
    设置或返回指定属性propertyName的值。如果指定了value参数,则表示设置属性propertyName的值为value;如果没有指定value参数,则表示返回属性propertyName的值。

    参数value还可以是函数,prop()将根据匹配的所有元素遍历执行该函数,函数中的this指针将指向对应的DOM元素。prop()还会为函数传入两个参数:第一个参数就是该元素在匹配元素中的索引,第二个参数就是该元素propertyName属性当前的值。函数的返回值就是为该元素的propertyName属性设置的值。

    用法二:

    jQueryObject.prop( object )
    以对象形式同时设置任意多个属性的值。对象object的每个属性对应propertyName,属性的值对应value。

    注意:prop()函数的所有"设置属性"操作针对的是当前jQuery对象所匹配的每一个元素;所有"读取属性"的操作只针对第一个匹配的元素。
    参数

    请根据前面语法部分所定义的参数名称查找对应的参数。

    参数 描述
    propertyName String类型指定的属性名称。
    value 可选/Object/Function类型指定的属性值,或返回属性值的函数。
    object Object类型指定的对象,用于封装多个键值对,同时设置多项属性。
    参数value可以是包括对象和数组在内的任意类型。

    返回值

    prop()函数的返回值是任意类型,返回值的类型取决于当前prop()函数执行的是"设置属性"操作还是"读取属性"操作。

    如果prop()函数执行的是"设置属性"操作,则返回当前jQuery对象本身;如果是"读取属性"操作,则返回读取到的属性值。

    如果当前jQuery对象匹配多个元素,返回属性值时,prop()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性,则返回undefined。

    prop()和attr()的主要区别:prop()函数针对的是DOM元素(JS Element对象)的属性,attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看jQuery函数attr()和prop()的区别。

    注意事项

    1、如果通过prop()函数更改

  • 显示全文
    专题