jquery给元素设置属性的简单方法
设置方法：1、使用attr()方法，语法“$(selector).attr(属性名,值)”或“$(selector).attr({属性名:值;})”；2、使用prop()方法，语法“$(selector).prop(属性名,值)”。
1、使用attr()方法
attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。
语法：
//单个属性
$(selector).attr(属性名,值)
//多个属性
$(selector).attr({属性名:值;属性值:值...})2、使用prop()方法
prop() 方法设置或返回被选元素的属性和值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
语法：
//单个属性
$(selector).prop(属性名,值)
//多个属性
$(selector).prop({属性名:值;属性值:值...})3、attr()和prop()方法的区别
prop() 方法和 attr() 方法相似，都是用来获取或设置元素的 HTML 属性的，不过两者也有着本质上的区别。
jQuery 官方建议：具有 true 和 false 这两种取值的属性，如 checked、selected 和 disabled 等，建议使用 prop() 方法来操作，而其他的属性都建议使用 attr() 方法来操作。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$('input[type="radio"]').change(function(){
var bool = $(this).attr("checked");
if(bool){
$("p").text("你选择的是：" + $(this).val());
}
})
})
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p></p>
</body>
</html>预览效果如图 1 所示。
分析:
$().change(function(){
……
})在这个例子中，我们其实是想通过$(this).attr("checked")判断单选框是否被选中，如果被选中，就获取该单选框的 value 值。可是运行代码后发现：完全没有效果！这是为什么呢？
实际上，对于表单元素的 checked、selected、disabled 这些属性，我们使用 attr() 方法是没法获取的，而必须使用 prop() 方法来获取。因此，我们把 attr() 方法替换成 prop() 方法就有效果了。
其实，prop()方法的出现就是为了弥补 attr() 方法在表单属性操作中的不足。记住一句话：如果某个属性没法使用 attr() 方法来获取或设置，改换 prop() 方法就可以实现。
补充：jQuery给标签添加自定义属性
jQuery给标签添加自定义属性
下面代码包含了添加和获取自定义属性。
添加的属性值有数字，类数组，对象，详细用法见备注。
<script type="text/javascript">
// 设置属性
$('#box').css('width', '200px')
$('#a1').attr('href',"http://www.baidu.com")
// 设置多个属性
// 注意：属性名不用加引号
$('#a1').attr({ href: "http://t.tt", target: "_blank" })
// *********** 添加和获取自定义属性 ************
// ==========1.设置一个自定义值==========
$('#a1').attr('myIndex',2)
console.log($('#a1').attr('myIndex'))
// ==========2.设置多个自定义值==========
// 注意：属性名要加引号，不能使用阿拉伯数字作为属性名
fruitsList = {'a':'苹果', 'b':'香蕉', 'c':'西瓜'}
// !!!!!!!!!!! 不正确的设置 !!!!!!!!!!!
$('#a1').attr('fruit',fruitsList)
console.log($('#a1').attr('fruit')) // 打印：[object Object]，没有实际用处
// 正确设置和获取属性
$('#a1').attr(fruitsList)
console.log($('#a1').attr('a')) // 打印: 苹果
console.log($('#a1').attr('b')) // 打印: 香蕉
console.log($('#a1').attr('c')) // 打印: 西瓜
// ==========3.设置自定义值为对象===========
// 创建对象
function Person(name, age){
this.name = name
this.age = age
}
person1 = new Person('Lili', 20)
// !!!!!!!!!!! 不正确的设置 !!!!!!!!!!!
$('#a1').attr('myattar', person1)
console.log($('#a1').attr('myattar')) // 打印：[object Object]，没有实际用处
// 正确设置和获取属性
$('#a1').attr(person1)
console.log($('#a1').attr('name'))
console.log($('#a1').attr('age'))
</script>
总结
到此这篇关于jquery给元素设置属性的文章就介绍到这了,更多相关jquery元素设置属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇动态设置form表单的action属性的值的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
下面小编就为大家带来一篇jquery模拟多级复选框效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
在一些电商网站和家居网站上我们会看到这样的应用，一张图片中显示多种商品，点击每个商品可以弹出对应商品的简单介绍，包括价格等等，极大的提高了用户体验，今天我们通过实例给大家分享使用jQuery插件来实现这一效果2016-03-03
常用的方法就是把控件的CSS position属性设置为relative或 absolute，大家也可以学习下本文提供的其他方法2013-09-09
这篇文章主要记录了在近期开发中遇到的jQuery dom基本查找方法，然后将各种方法性能做了一个比较，目的是希望自己在以后dom元素查找时，使用最优的方案。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
jQuery DateTimePicker 日期和时间插件示例
jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，这篇文章主要介绍了jQuery DateTimePicker 日期和时间插件示例，有兴趣的可以了解一下。2017-01-01
这篇文章主要介绍了jquery实现的点击翻书效果代码,可呈现点击图片显示翻页的效果,涉及jQuery响应鼠标事件动态改变页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
deferred对象的延迟功能对jQuery的ajax操作是一个很大的帮助,尤其是回调控制,下面我们就来看一下对jQuery中借助deferred来请求及判断AJAX加载的实例讲解2016-05-05
这篇文章主要为大家介绍了如何利用JQuery实现相邻item焦点移动的效果，文中的示例代码讲解详细，对我们学习前端知识有一定的帮助，感兴趣的可以学习一下2022-04-04
jquery 学习之二 属性 文本与值(text,val)，学习jquery的朋友可以参考下。2010-11-11
最新评论