jQuery入门（二）—— 属性操作

一.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("用户名不可用")
    }
    });