jquery学习第一节（普通验证）

lpinjava — Thu, 12 May 2011 06:20:00 GMT

总结方法：
jquery中的简单方法
1 val() 可以获得节点的value值 ===document.getElementById().value
2 html() 可以获得节点的html值
3 click() 可已获得鼠标点击事件
4 keyup()可以获得键盘弹起事件
5 addClass()、removeClass 可以给某个节点添加或删除一个class

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document TITLE>
<link rel="stylesheet" type="text/css" href="css/jquery.css">HEAD>
<script type="text/javascript" src="js/jquery-1.4.4.js">script>
<script type="text/javascript" src="js/jquery-js.js">script>

<BODY>
    请输入用户名：
    <input type="text" id="userName"  class="userText"/>
    <input type="button" id="button1" value="验证"/>
    <div id="validate">div>
BODY>
HTML>

/*******javascript**********/

//初始化
$(function(){

    //声明一个公共变量
    var userName=$("#userName");

    /*
    *    当鼠标按下时获取到文本框的值向后台发送
    */

    $("#button1").click(function(){
        var con=userName.val();
        if(con==''){
            $("#validate").html("值不可为空");
        }else{

            /*$.post(
                "",//路径
                {}, //参数
                function(data){
                    //回调函数
                }

            );*/
            $("#validate").html("用户名可用");
        }
    });

    //当输入错误的时候文本框的颜色为空如果为空时颜色为红色

    $("#userName").keyup(function(){
        var value=userName.val();
        if(value==''){
            userName.addClass("userText");//添加这种样式
        }else{
            userName.removeClass("userText");//删除这种样式
        }
    });
})

/******CSS*****/

/*给边框加颜色 */
.userText{
border: 1px solid red; /* 一个像素宽实线红色*/
}

lpinjava 2011-05-12 14:20 发表评论

BlogJava-创新思维，开拓进取-文章分类-jquery学习总结

jquery学习第一节（普通验证）