jquery中attr和prop的区别

两者从中文意思理解，都是获取/设置属性的方法。

attr 方法一般用于 *** 作自定义属性，通过访问、 *** 作 DOM 元素的属性节点来工作，类似 JS 中的 setAttribute("属性","值")和取得属性值getAttribute("属性")，事实上 jQuery 的源码中也是利用这两个原生方法。

那么为什么还要有 prop 方法呢？不是多此一举吗？其实不然，prop 方法是 jQuery v161 才新出来的，性能要更好一些，解决了 window 或 document 无法使用 attr 方法的问题，同时在获取元素状态时返回布尔值，大大方便了对状态的判断。prop 一般用于 *** 作 HTML 元素固有属性。

举一些例子来辅助说明吧，假设有如下 HTML 元素：

<input type="text" id="ipt1" name="demo">

<input type="radio" id="radio" disabled>

<input type="checkbox" id="ckbox" checked>

<input type="text" id="ipt3">

<input type="text" id="ipt4">

<span id="span" data-tip="abc"></span>

验证结果如下：

consolegroup('获取固有属性');

consolelog($('#ipt1')attr('name'));  // 'demo'

consolelog($('#ipt1')prop('name'));  // 'demo'

consolegroupEnd();

consolegroup('获取固有属性-状态值');

consolelog($('#radio')attr('disabled'));  // 'disbaled'

consolelog($('#radio')prop('disabled'));  // true

consolelog($('#ckbox')attr('checked'));  // 'checked'

consolelog($('#ckbox')prop('checked'));  // true

consolegroupEnd();

$('#ipt3')attr('readonly', true);  // 文本框处于只读状态

$('#ipt4')prop('readonly', true);  // 同上

consolegroup('获取自定义属性');

consolelog($('#span')attr('data-tip'));  // 'abc'

consolelog($('#span')prop('data-tip'));  // undefined

consolegroupEnd();

consolegroup('获取不存在的自定义属性');

consolelog($('#span')attr('data-none'));  // undefined

consolelog($('#span')prop('data-none'));  // undefined

consolegroupEnd();

当点击id为selectBar的dom时，执行括号总的函数。函数执行的 *** 作是找到当前窗口中所有类型为checkbox但id不等于selectBar的input标签，然后将这些标签的checked属性设置成id为selectBar的checked属性。说白了就是将id不等于selectBar的checkbox的选中情况设置成跟id等于selectBar的一致。prop是吧选中的对象的名字叫第一个参数的属性的值设置成第二个参数。如果只有一个参数是取这个对象的属性的值

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery。

2、在indexhtml中的<script>标签，输入jquery代码：$('body')append($('a')attr('id'));。

3、浏览器运行indexhtml页面，此时成功获取到了a标签的id值。

以上就是关于jquery中attr和prop的区别全部的内容，包括:jquery中attr和prop的区别、这段jquery代码的意思prop是什么意思啊、jquery怎么获取a里面某个标签的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！