美文网首页
5 jquery中的属性操作

5 jquery中的属性操作

作者: 流光已至 | 来源:发表于2018-08-04 20:27 被阅读0次

1 获取属性和设置属性

<script type="text/javascript">
    function getVal(){
        
        alert($("#username").val());
    }
     
    function setVal(){
        $("#username").val("999");
        $("#username").css({background:"green",border:"1px solid yellow"});
        
    } 
</script>

设置类

  function setClass(){
        //添加类
        $("#div1").addClass("c2");
        //删除类
        $("#div1").removeClass();
        //切换类,一点出现,再一点消失
        $("#div1").toggleClass("c3")
        
    }

2 小练习

<script type="text/javascript">
    function myfocus(obj){
        
        var val=$(obj).val();
        
        if(val=="请输入电话/邮箱/用户名"){
            
            $(obj).val("");
            $(obj).removeClass();
        }
        
    }
    
    function myblur(obj){
        
        if($(obj).val()==""){
            
            $(obj).val("请输入电话/邮箱/用户名");
            $(obj).addClass("uname")
            
        }
        
    }
</script>
<style type="text/css">
    .uname {
    
         color:gray;
    }

</style>
</head>
<body>
    用户名:<input class="uname" type="text" value="请输入电话/邮箱/用户名"  onfocus="myfocus(this)" onblur="myblur(this)">
</body>

效果如下:


相关文章

网友评论

      本文标题:5 jquery中的属性操作

      本文链接:https://www.haomeiwen.com/subject/wqvmvftx.html