attr 与 prop 都可以对某个属性进行获取和设置的操作，二者的用法相同：

<script src = 'jQuery.js'></script>

<script>

    // attr:

    // 设置单个属性

    $(element).attr(name,value);

    // 设置多个属性

    $(element).attr(obj);

    // 获取属性

    $(element).attr(name);

    // prop:

    // 设置单个属性

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

    // 设置多个属性

    $(element).prop(obj);

    // 获取属性

    $(element).prop(name);

</script>

用处和区别却是不一样的，对于返回值是布尔类型的属性，如：disabled, checked只能使用 prop 进行操作，当然更大的区别在于，attr 操作的是写在元素内的字面属性，而 prop 操作的是元素的 DOM 属性：

<body>

    // 以访问网站的形式打开页面

    // 例：假设文件在C盘中，上层主目录文件夹为 folder-min

    <img id="img" src="/folder/image.jpg" />

    <input id="check1" type="checkbox" checked="checked" />

    <input id="check2" type="checkbox" />

<script>

    $( '#img' ).attr( 'src' );  // 控制台输出："/folder/image.jpg"

    $( '#check' ).prop( 'src' );  // "http://folder-min/folder/image.jpg"

    $( '#check1' ).attr( 'checked' );  // checked

    $( '#check1' ).prop( 'checked' );  // true 或 false 取决于复选框状态

    $( '#check2' ).attr( 'checked' );  // undefined

    $( '#check2' ).prop( 'checked' );  // true 或 false 取决于复选框的状态

</script>

</body>

jQuery中操作属性的方法attr与prop的区别的更多相关文章

  1. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  2. jQuery中获取属性值：attr()、html()、text()、val()等(一)

    <!DOCTYPE html> <html> <head> <title>01_basic.html</title> <meta na ...

  3. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  4. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  5. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  6. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  7. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  8. jquery中attr和prop的区别（转）

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  9. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

随机推荐

  1. 基于 Njmon + InfluxDB + Grafana 实现性能指标实时可视监控

    引言 最近逛 nmon 官网时,发现了一个新工具 njmon,功能与 nmon 类似,但输出为 JSON 格式,可以用于服务器性能统计. 可以使用 njmon 来向 InfluxDB 存储服务器性能统 ...

  2. 【three.js第二课】页面自适应

    1.在[three.js第一课]的基础上加入以下代码,改变窗口大小时,页面内容会自适应 //加入事件监听器,窗口自适应 window.addEventListener('resize', functi ...

  3. Map使用foreach遍历方式，Map获取第一个键值

    List<Map<String, Object>> mapList = new ArrayList<>();  for (Map.Entry<String,O ...

  4. 植物大战僵尸的代码如何使用python来实现

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:程序IT圈 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  5. 一个好的olap框架

    一.何为一个好的olap框架? 框架大概分为两种: (1)底层技术框架,专注于抽象底层技术,如网络通信netty.中间件kafka等 (2)开发人员框架,专注于提高开发效率,如spring的面向切面和 ...

  6. sudo -s 命令 [oh-my-zsh] 提示检测到不安全目录

    运行sudo -s 命令时,[oh-my-zsh] 冒出下面一大堆提示: [oh-my-zsh] Insecure completion-dependent directories detected: ...

  7. get 获取方式练习题及dom基础

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Jmeter系列（3）- Jmeter安装目录介绍

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html Jmeter安装目录说明 bin:包含 ...

  9. 微信小程序画布（1）

    wxml: <view  catchtouchmove="preventTouchMove" wx:if="{{canvas_haoBao}}"> ...

  10. 解决centos ping不通外网

    先确认三件事: 一.ip 二.网关 三.dns 一就不说了,设置好本地ip和掩码就行了,二网关   添加默认网关,命令:route add defaule gw 192.168.1.1 这是 你用ro ...