关于Jquery获取对象的属性与值

本文详细介绍了jQuery中选取DOM元素的方法,包括基本的选择器如ID、Class、标签选择器等,并进一步探讨了属性选择器的使用方式及如何获取元素属性。

1.获取对象的常用方法

$("*")  表示获取所有对象一般都不会去使用

$("#XXX") ’获得 id=XXX 的元素对象常用

$(".XXX") ’获得 class=XXX 的元素对象常用)

$("div") ' 标签选择器 选择所有的div元素  (常用)

$("input[name='uname']")   获得input标签中name='uname'的元素对象(常用)

如:

self.find("input[name='complany']").css('border','#FFB240 1px solid');
self.find("textarea[name='messcont']").css('border','#FFB240 1px solid');
		

以上选择方法可以通过 空格与大于号>、加号+与波浪号~组合使用,关于使用规则,可以参考 这里(http://blog.youkuaiyun.com/hsd2012/article/details/51750105)在这篇博文中,忘记了加上使用逗号组合,下面给出一个使用逗号组合的案例
如想获取class为message的div,代码如下:
<div class="message">
gegrew
</div>
<span class="message">ageaw</span>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	console.log($(".message,div").html()) ;
</script>




2、其他对象获取方法

$("Element[attribute = 'ceshi']" )获得所有某个属性为ceshi的元素
$("Element[attribute !=  'ceshi']") 获得所有某个属性为不是ceshi的元素
$("Element[attribute ^=  'ceshi']") 获得所有某个属性为不是ceshi的开头的元素
$("Element[attribute *= 'ceshi']" '获得所有某个属性包含ceshi的开头的元素

<span class="message" src="hello">hello</span>
<span class="message" src="byebye">byebye</span>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	console.log($("span[src ='hello']").html()) ;
</script>


3、获取对象的属性

$("Element").attr(key)  获取某一个元素的属性
$("Element").attr(key,value)  给某一个元素设置属性


























jQuery 中,`.attr()` 方法用于获取或设置匹配元素集中第一个元素的属性。该方法不会对集合中的所有元素进行操作,而是仅针对第一个元素进行属性获取或设置 [^1]。 ### 获取属性 要使用 `.attr()` 方法获取元素的属性,可以传递属性名称作为参数。例如,获取一个元素的 `href` 属性: ```html <a href="https://example.com" id="myLink">Example Link</a> ``` ```javascript var hrefValue = $('#myLink').attr('href'); console.log(hrefValue); // 输出: https://example.com ``` ### 设置属性 要设置属性,可以传递属性名称和新的属性作为参数: ```javascript $('#myLink').attr('href', 'https://new-example.com'); ``` 更新后,`<a>` 元素的 `href` 属性将变为 `https://new-example.com`。 ### 多属性设置 也可以通过传递一个对象来一次性设置多个属性: ```javascript $('#myLink').attr({ 'href': 'https://another-example.com', 'title': 'Another Example' }); ``` 此操作会同时更新 `href` 和 `title` 属性。 ### 注意事项 1. `.attr()` 方法主要针对 DOM 属性,但也可以操作 HTML 属性。 2. 如果需要操作自定义数据属性,建议使用 `.data()` 方法,因为它会自动处理数据类型。 3. 在 jQuery 1.6+ 版本中,`.prop()` 方法被引入,用于专门处理布尔类型的属性(如 `checked`、`selected` 等),而 `.attr()` 通常用于字符串属性 。 ### 示例代码 以下是一个完整的示例,展示如何获取和设置属性: ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <a href="https://example.com" id="myLink">Example Link</a> <button id="getAttr">Get Href</button> <button id="setAttr">Set Href</button> <p id="output"></p> <script> $('#getAttr').click(function () { var hrefValue = $('#myLink').attr('href'); $('#output').text('Current Href: ' + hrefValue); }); $('#setAttr').click(function () { $('#myLink').attr('href', 'https://new-example.com'); $('#output').text('Href has been updated.'); }); </script> </body> </html> ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值