温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
/linxinzheng Java&Android教学视频,欢迎大家订阅！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
2、jQuery.data()方法可以将某一数值等附加在一对象上，方便以后取值用，在API的介绍如下：
3、下面是具体代码，供学习和参考
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&&html&& &head&&&& &title&JQuery中attr属性和jQuery.data()学习笔记&/title&&&& &meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&&&& &meta http-equiv="description" content="this is my page"&&&& &meta http-equiv="content-type" content="text/ charset=UTF-8"&&&script type="text/javascript" src="js/jquery-1.7.1.js"&&/script&&&script type="text/javascript"&&&$(document).ready(function(){&&&//设置DIV的背景色&&&$("#div1").css("background","EEE");&&&//设置DIV的宽度&&&$("#div1").css("width","200px");&&&//设置DIV的高度&&&$("#div1").css("height","100px");&&&//使DIV中的内容居中&&&$("#div1").attr("align","center");&&&//创建一个文本框&&&var divObj = $("#div1");&&&var inputObj =$("&input type='text' id='username' value='初始化值'&")&&&//创建一个按钮&&&var buttonObj =$("&input type='button' id='change' value='改变文本框大小'&");&&&inputObj.appendTo(divObj);&&&buttonObj.appendTo(divObj);&&&//给DIV2赋值&&&$("#div2").data("newValue","通过jQuery.data赋值");&&&//改变文本框的宽度&&&$("#change").click(function(){&&&&//利用attr取值&&&&//alert($("#change").attr("value"));&&&&//利用attr赋值&&&&//获取DIV2赋于的值&&&&var val =$("#div2").data("newValue");&&&&$("#username").attr("value",val);&&&});&&&&&});&&/script&& &/head&& &body&&&div id="div1"&&/div&&&div id="div2"&&/div&& &/body&&/html& 4、运行效果：&&
阅读(10354)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'JQuery中attr属性和jQuery.data()学习笔记',
blogAbstract:'1、用JQuery的attr方法，既可以赋值，也可以取值；它在JQuery中API的介绍如下：
2、jQuery.data()方法可以将某一数值等附加在一对象上，方便以后取值用，在API的介绍如下：
3、下面是具体代码，供学习和参考',
blogTag:'jquery,attr和data方法运用',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:6,
publishTime:3,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'/linxinzheng Java&Android教学视频,欢迎大家订阅！',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}jQuery - 获得内容和属性
jQuery - 获得内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
$(&#btn1&).click(function(){
alert(&Text: & + $(&#test&).text());
$(&#btn2&).click(function(){
alert(&HTML: & + $(&#test&).html());
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
$(&#btn1&).click(function(){
alert(&Value: & + $(&#test&).val());
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
$(&button&).click(function(){
alert($(&#w3s&).attr(&href&));
下一章会讲解如何设置（改变）内容和属性值。
jQuery HTML 参考手册
如需有关 jQuery HTML 方法的完整内容，请访问以下参考手册：jQuery中attr()方法用法实例-JavaScript/Ajax教程-源码库|专注为中国站长提供免费商业网站源码下载！
当前位置:----jQuery中attr()方法用法实例
jQuery中attr()方法用法实例
这篇文章主要介绍了jQuery中attr()方法用法,实例分析了attr()方法的功能、定义及设置或返回匹配元素属性值的使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery中attr()方法用法。分享给大家供大家参考。具体分析如下：
此方法设置或返回匹配元素的属性值。
attr()方法根据参数的不同，功能也不同。
语法结构一:
获取第一个匹配元素指定属性的属性值。
复制代码代码如下:
$(selector).attr(name)
定义要获取其值的属性名称。
复制代码代码如下:
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&attr()函数-源码库&/title&
&style type=&text/css&&
& font-size:18
& color:yellow
& background:#336;
& color:green
&script type=&text/javascript& src=&mytest/jQuery/jquery-1.8.3.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function(){
& $(&#btn&).click(function(){
&&& alert($(&div&).attr(&class&));
&div class=&font bg&&我是第一个div&/div&
&div class=&second&&我是第二个div&/div&
&button id=&btn&&点击查看效果&/button&
以上代码中，点击按钮可以弹出匹配元素集合中，第一个元素的class属性值。
语法结构二:
为匹配元素指定的属性设置属性值。
复制代码代码如下:
$(selector).attr(attribute,value)
定义要设置值的属性名称。
定义要设置的属性值。
复制代码代码如下:
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&attr()函数-源码库&/title&
&style type=&text/css&&
& width:200
& height:200
& border:1px solid blue
& font-size:18
& color:yellow
& background:#336;
& font-size:20
&script type=&text/javascript& src=&mytest/jQuery/jquery-1.8.3.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function(){
& $(&#btn&).click(function(){
&&& $(&div&).attr(&class&,&reset&);
&div class=&font bg&&源码库欢迎您&/div&
&button id=&btn&&点击查看效果&/button&
以上代码中， 当点击按钮的时候，能够重新设置div元素的class属性值。
语法结构三:
将&名/值&形式的对象设置为匹配元素的属性。可以一次性设置多组&名/值&对，对匹配元素属性进行设置。
复制代码代码如下:
$(selector).attr(properties)
attribute:value
定义属性名/值对
复制代码代码如下:
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&attr()函数-源码库&/title&
&script type=&text/javascript& src=&mytest/jQuery/jquery-1.8.3.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function(){
& $(&#btn&).click(function(){
&&& $(&td&).attr({width:&200&,height:&300&});
&table border=&1&&
& &td&欢迎来到源码库&/td&
&button id=&btn&&点击查看效果&/button&
以上代码中，可以设置单元格的宽度和高度。
语法结构四:通过函数返回值设置属性值。
复制代码代码如下:
$(selector).attr(name,function(index,oldvalue))
定义要设置值的属性的名称。
function(index,oldvalue)
定义返回属性值的函数
index - 可选，接受选择器的索引位置。
class - 可选，接受选择器的当前的属性值。
复制代码代码如下:
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&attr()函数-源码库&/title&
&style type=&text/css&&
& height:200
& width:200
& border:1px solid blue
& font-size:18
& background:#336;
& font-size:20
&script type=&text/javascript& src=&mytest/jQuery/jquery-1.8.3.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function(){
& $(&#btn&).click(function(){
&&& $(&div&).attr(&class& ,function(){
&&&&& return &reset&
&div class=&font bg&&源码库欢迎您&/div&
&button id=&btn&&点击查看效果&/button&
以上代码中，同样可以设置div的class属性值，只是属性值是以函数的返回值方式获得的。
希望本文所述对大家的jQuery程序设计有所帮助。
相关JavaScript/Ajax教程：
相关资源下载：
JavaScript/Ajax教程搜索
JavaScript/Ajax教程推荐
热门源码推荐
热门JavaScript/Ajax教程
©2012jquery 获取 自定义属性（attr 和 prop）_悬赏任务_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
jquery 获取 自定义属性（attr 和 prop）
我需要一份与标题相关的文档
收到2篇文档
相似悬赏任务