属性操作

<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”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="tom" address="beijing" />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
<input type="button" value="批量修改" onclick="f3()" />
<input type="button" value="函数修改" onclick="f4()" />
<input type="button" value="删除属性" onclick="f5()" />
</body>

/**********************************************************************/

 

posted on 2016-09-14 09:15  冬_雪_飘  阅读(164)  评论(0编辑  收藏  举报