首页 > 代码库 > jQuery 属性操作
jQuery 属性操作
属性操作
<input type=”text” class=”apple” id=”username” name=”username” value=http://www.mamicode.com/”tom” address=”beijing” />
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
jquery方式操作属性(attribute)：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn); //通过fn函数执行的return返回值对属性进行赋值
/**********************************************************************/
<script type="text/javascript">
function f1(){
//获得属性信息
console.log($("#username").attr(‘type‘));
console.log($("#username").attr(‘class‘));
console.log($("#username").attr(‘id‘));
console.log($("#username").attr(‘name‘));
console.log($("#username").attr(‘value‘));
console.log($("#username").attr(‘address‘));
}
function f2(){
//修改属性
$(‘#username‘).attr(‘class‘,‘orange‘);
$(‘#username‘).attr(‘name‘,‘email‘);
$(‘#username‘).attr(‘value‘,‘jim@163.com‘);
$(‘#username‘).attr(‘address‘,‘shanghai‘);
$(‘#username‘).attr(‘weight‘,‘120‘);//新属性
//$(‘#username‘).attr(‘type‘,‘radio‘); //禁止修改
$(‘#username‘).attr(‘id‘,‘email123‘);
}
function f3(){
//批量修改属性
//$().attr(json对象);
var jn = {name:‘tel‘,‘class‘:‘pear‘,value:‘132787323728‘,address:‘沈阳‘}
$(‘#username‘).attr(jn);
}
function f4(){
//函数返回值设置属性
$(‘#username‘).attr(‘value‘,function(){
return 10+30;
});
}
function f5(){
//删除属性
$(‘#username‘).removeAttr(‘class‘);
$(‘#username‘).removeAttr(‘name‘);
$(‘#username‘).removeAttr(‘value‘);
$(‘#username‘).removeAttr(‘address‘);
$(‘#username‘).removeAttr(‘id‘);
//$(‘#username‘).removeAttr(‘type‘); //禁止删除
}
</script>
</head>
<body>
<h1>属性操作</h1>
<input type="text" class="apple" id="username" name="username" value="http://www.mamicode.com/tom" address="beijing" />
<input type="button" value="http://www.mamicode.com/获取" onclick="f1()" />
<input type="button" value="http://www.mamicode.com/设置" onclick="f2()" />
<input type="button" value="http://www.mamicode.com/批量修改" onclick="f3()" />
<input type="button" value="http://www.mamicode.com/函数修改" onclick="f4()" />
<input type="button" value="http://www.mamicode.com/删除属性" onclick="f5()" />
</body>
/**********************************************************************/
jQuery 属性操作