1、属性
attr(name):获取指定属性的值
attr(key,value):设置指定属性的值
attr(properties):要求参数是一个json对象,设置多个属性的值 属性:值
attr(key,fn):使用一个函数的返回值为指定属性的属性值
removeAttr(name):删除指定的属性
<SCRIPT type="text/javascript">
window.onload = function() {
document.getElementById('btnok').onclick = function() {
//对图像的src属性进行取值操作
// alert($('#img1').attr('src'));
//$('#img1').attr('src','XXX.jpg');//换图像
//使用json同时为图像设置多个属性值
/* var data={
'width':200,
'height':300
};
$('#img1').attr(data);*/
//使用函数的返回值作为图像的src地址
/* $('#img1').attr('src',function(){
return '../image/xxx.jpg';*/
//删除了图像的src属性
//$('#img1').removeAttr('src');
});
};
};
</SCRIPT>
</head>
<body>
<img id='img1' src='images/psb.jpg'>
<input type='button' id='btnok' value="确定">
</body>
2、css
addClass(class):添加一个类选择器
removeClass(class):移除一个类选择器
toggleClass(class):如果有,则删除,如果无,则添加
hasClass(class):判断对象是否具有指定的类选择器(返回值:true/false)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>css</title>
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript">
window.onload = function() {
document.getElementById('btnok').onclick = function() {
//$('div').addClass('d4');//添加 d4选择器
//$('div').removeClass('d2');//移除d2选择器
//$('div').toggleClass('d2');//如果有,就不用,如果没有,就用
/*if($('div').hasClass('d1')){
alert('具有');
}else{
alert('不具有');
}*/
};
};
</SCRIPT>
<style>
.d1{
background-color:red;
}
.d2{
border: 1px solid green;
}
.d3{
color:blue;
}
.d4{
width:200px;
height:100px;
}
</style>
</head>
<body>
<div class='d1 d2 d3'>div</div>
<input type='button' id='btnok' value="确定">
</body>
</html>
3.html
html()
html(val)
innerHTML
val()
val(val)
innerText
text()
text(val)
value
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>html。文本。值</title>
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript">
window.onload = function() {
document.getElementById('btnok').onclick = function() {
//alert($('#div1').html());//取 div内的所有值,包括代码
//alert($('#div1').text());//取div中的纯文本,不包括代码
//$('#div1').html('<font color=red>测试</font>');//调试html属性
//$('#div1').text('<font color=red>测试</font>');//测试text属性
//$('#username').val('你好!');
//上述三个有参数就是设置,没参数就读取
};
};
</SCRIPT>
<style>
.d1{
background-color:red;
}
.d2{
border: 1px solid green;
}
.d3{
color:blue;
}
.d4{
width:200px;
height:100px;
}
</style>
</head>
<body>
<div id='div1'><p>div</p></div>
<input type='text' id='username'><br>
<input type='button' id='btnok' value="确定">
</body>
</html>