基本属性 attr
原作：西岭老湿、凌风
<body>
<input type="button" id="btu" value="点击"> <br>
<img src="91.jpg" id="img">
</body>
<script>
$('#btu').click(function(){
//获取被选元素的属性值。
var s = $('#img').attr('src');
alert(s);
//设置被选元素的属性值
$('#img').attr('src','92.png')
//设置被选元素的 多个 属性值
$('#img').attr({'src':'92.png','alt':'sdfds'})
//函数返回值为属性值
$('img').attr('width',function(){
return 10*40;
});
//删除元素属性
$('img').removeAttr('src');
});
</script>知识点：
attr(name) ：根据属性的名称获取元素的属性值
attr(key,value) ：设置元素的属性，key属性，value属性值
attr(properties) ：一次为元素设置多个属性，要求参数是一个json对象
attr(key,fn) ：通过函数的返回值设置元素的属性
removeAttr(name) ：移除元素的属性
class属性
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jq183.js"></script>
<style media="screen">
td{
border: 1px solid black;
}
table{
width: 500px; height: 180px;
border-collapse: collapse;
background-color: #e0e0e0;
}
.l{
background-color: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<td>编号</td><td>姓名</td>
<td>性别</td><td>年龄</td>
</tr>
<tr>
<td>1</td><td>刘能</td>
<td>男</td><td>45</td>
</tr>
</table>
</body>
<script type="text/javascript">
$('tr').mouseover(function(){
//添加class值为l
$(this).addClass('l');
//如果有就移除，没有就添加
// $(this).toggleClass('l');
})
$('tr').mouseleave(function(){
//移除class值为l
$(this).removeClass('l');
//如果有就移除，没有就添加
// $(this).removeClass('l');
})
</script>知识点：
addClass(class) ：为元素添加class属性
removeClass(class) ：移除元素的class属性
toggleClass(class) ：切换元素的class属性，如果有就移除，没有就添加
hasClass(class) ：判断元素是否具有某个class属性
css样式设置
<body>
<div style="width:300px;height:300px;border:1px red solid">
itcast
</div>
</body>
<script>
//获取style属性值
alert($('div').css('width'));
//设置style 属性值
$('div').css('background','yellow');
//一次性设置多个值
$('div').css({
width:200,
height:200,
background:'pink'
});
</script>知识点
css(name) ：根据name获取元素的css属性值
css(name,value) ：设置元素的属性值
css(properties) ：一次为元素设置多个属性值，要求参数是一个json对象
offset位置
<body>
<div style="width:300px;height:300px;border:1px red solid">
itcast
</div>
</body>
<script>
// 获取div位置
var pos = $('div').offset();
alert('横坐标开始位置'+pos.left);
alert('纵坐标开始位置'+pos.top);
//修改坐标位置
$('div').offset({
left:50,
top:30
});
</script>知识点
offset() ：获取元素的横纵坐标，返回一个json对象，拥有left与top属性
offset(coordinates) ：设置元素位置要求是一个json对象，必须包含left与top属性
宽高设置
<body>
<div style="width:300px;height:300px;border:1px red solid">
itcast
</div>
</body>
<script>
//获取宽高值
alert($('div').width());
alert($('div').height());
//设置宽高值
$('div').width(500);
$('div').height(500);
</script>知识点
width() ：获取元素的宽度
width(value) ：设置元素的宽度
height() ：获取元素的高度
height(value) ：设置元素的高度
文本 & 表单值
<body>
<input type="button" name="" value="文本值" id="i">
<hr>
<input type="text" name="" value="" id="u">
<div id="d"><div><p>icast</p></div></div>
</body>
<script>
$('#i').click(function(){
//文本框的内容
alert($('#u').val());//获取
$('#u').val(222);//设置
//文本内容
$('#d').html('西岭老湿'); //设置
alert($('#d').html()); //获取(包括标签)
$('#d').text('西岭老湿');//设置
alert($('#d').text());//获取(不包括标签)
//html()方法和text()方法的区别
$('#d').html('<strong>西岭老湿</strong>'); //内容会被解析
$('#d').text('<strong>西岭老湿</strong>'); //内容原样输出
});
</script>知识点
val() ：获取表单元素的value值
val(val) ：设置表单元素的value值
html() ：获取元素的内容
html(val) ：设置元素的内容
text() ：获取元素的文本内容
text(val) ：设置元素的文本内容
2259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
