一.jQuery 属性操作 - attr() 方法
1.获取属性的值
例如:获取p标签的id
var t=$("p").attr("id");
2.设置属性的值
例如:设置图片路径
$("img").attr({src:"img/图片1.png",alt:"图片加载中"});
例如:设置input的value,以键值对的方式
$("input").attr("value","samith");
例如:以函数返回值的方式设置value的属性
$("input").attr("value",function(){
var sum=0;
for(var i=1;i<=100;i++)
{
sum=sum+i;
}
return sum;
});
二、修改css类
1.addClass() 添加类名
2.removeClass() 删除类名
例如:
在body中创建2个按钮
在点击添加按钮时给div添加类名d1
在点击删除按钮时删除类名d1
script
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div").addClass("d1");
});
$("#btn2").click(function(){
$("div").removeClass("d1");
});
</script>
css
.d1{
color: #f00;
font-family: "楷体";
font-size: 16px;
}
3.将1.2可以整合为toggleClass() 方法合并为一个按钮
对设置或移除被选元素的一个或多个类进行切换。
$("#btn3").click(function(){
$("div").toggleClass("d1");
});
使用以上方法实现简单的登录验证:
$("#btn4").click(function(){
var name=$("#name").val();
if(name=="abc")
{
$("#sp").removeClass("s1");
$("#sp").addClass("s2");
$("#sp").html("用户名可用")
}
else
{
$("#sp").removeClass("s2");
$("#sp").addClass("s1");
$("#sp").html("用户名不可用")
}
});