jquery之blur()、checked、animate()

来源：互联网发布：c语言99乘法表for 编辑：程序博客网时间：2024/05/22 12:29

1.失去焦点，呈现提示框： blur()--在每一个匹配元素的blur事件中绑定一个处理函数,blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的.

<body>
<div class="container">
<h2>登录</h2>
<div class="div_line">
  <label class="container_username">用户名:</label><input id="user" type="text" />
  <span id="user_tips">请输入用户名</span>
</div>
<div class="div_line">
  <label class="container_password">密  码:</label><input id="psd" type="password" />
  <span id="psd_tips">请输入密码</span>
</div>
    <p>
    <input type="submit" value="提交"/>
    <input type="reset" value="取消"/>
    </p>

</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

                    alert($("#user")[0].value);
             $("#user").blur(function(){
                 if(this.value==""){
                      $("#user_tips").css({display:"block"});
                 }else{
                       $(".user_tips").css({display:"none"});
                }
              });

              $("#psd").blur(function(){
                    if(this.value==""){
                            $("#psd_tips").css({display:"block"});
                     }else{
                           $(".psd_tips").css({display:"none"});
                    }
                 });

</script>
</body>

2.jquery的checked以及disabled

1)jquery判断checked的三种方法:

    .attr('checked'):   //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
    .prop('checked'): //16+:true/false
   .is(':checked'):    //所有版本:true/false//别忘记冒号

2)赋值——所有jquery版本都可以这样赋值

$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);

3）jquery1.6+:prop的4种赋值:

// $("#cb1").prop("checked",true);//很简单就不说了哦
// $("#cb1").prop({checked:true}); //map键值对
// $("#cb1").prop("checked",function(){
return true;//函数返回true或false
});

//记得还有这种哦:$("#cb1").prop("checked","checked");

更多参考:http://api.jquery.com/prop/

window.onload = function(){

          //    alert($("#all_checked").is(':checked'));
      $("#all_checked").click(function(){
           if($("#all_checked").is(':checked')){ //------------------------------
                var i =   $("input").length;
               $("input").attr("checked",true);      //------------------------------
            }
       });

}

3.animate()动画改变透明度

                   //filter:;alpha(opacity=90);  IE
               },
               function(){
                     $(this).animate({opacity:"0.3"},1000);
               }
          )
      </script>