jQuery中常用网页效果应用

一、常用网页效果应用

1.表单应用

表单由表单标签、表单域和表单按钮组成。

1.1单行文本框应用

例：获取和失去焦点改变样式
首先，在网页中创建一个表单，HTML代码如下

<form action="" method="post" id="regForm">
        <fieldset>
            <legend>个人基本信息</legend>
                <div>
                    <label  for="username">名称:</label>
                    <input id="username" type="text" />
                </div>
                <div>
                    <label for="pass">密码:</label>
                    <input id="pass" type="password" />
                </div>
                <div>
                    <label for="msg">详细信息:</label>
                    <textarea id="msg" rows="2" cols="20"></textarea>
                </div>
        </fieldset>
    </form>

当文本框获取焦点后，它的颜色需要有变化;当它失去焦点后，则要恢复原来的样式。此功能极大地提升用户体验，使用户的操作可以得到及时的反馈。
可以使用CSS中的伪类选择符来实现以上的功能

CSS代码如下

    input:focus , textarea:focus{
        boreder: 1px solid #f00
        background: #fcc;
    }

但是IE6并不支持除超链接元素之外的:hover伪类选择符，此时可以用jquery来弥补ie6对css支持的不足

首先在CSS中添加一个类名为focus的样式。

.focus { 
     border: 1px solid #f00;
     background: #fcc;

    } 

然后再添加获取焦点和失去焦点事件

$(":input").focus(function(){
   

                $(this).addClass("focus");
            }).blur(function(){
   

                $(this).removeClass("focus");
            })

1.2多行文本框应用

首先创建一个表单，其中包含评论框

<form>
    <div class = "msg">
        <div class="msg_caption">
            <span class="bigger">放大</span>
            <span class="smaller">缩小</span>
        </div>
        <div>
            <textarea id="comment" rows="8" clos="20">
            多行文本框高度变化
            多行文本框高度变化
            多行文本框高度变化
        多行文本框高度变化多行文本框高度变化多行文本框高度变化
        </div>
    </div>
</form>

<style type="text/css">
/*定义全局属性*/
* { 
    margin:0; /*外边距0px*/
    padding:0;/*内边距0px*/
    font:normal 12px/17px Arial; /*字体颜色，默认，字体大小，字体*/
}
/*定义消息显示区*/
.msg {
    width:300px; /*宽度300px*/
    margin:100px; /*定义外边距100px*/
}
/*定义消息中的标题*/
.msg_caption { 
    width:100%;  /*宽度100%，此处就是300px*/
    overflow:hidden; /*溢出范围就会自动裁剪*/
    margin-bottom:1px;/*内底边距1px*/
}
/*定义消息菜单选项*/
.msg_caption span { 
    display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
    float:left;  /*浮动在左边*/
    margin:0 2px; /*外边距上下为0左右2px*/
    padding:4px 10px; /*内边距上下为4px左右10px*/
    background:#898989; /*背景颜色*/
    cursor:pointer;/*鼠标的形状，手形*/
    color:white; /*字体颜色*/
}
/*定义消息文本域*/
.msg textarea{ 
    width:300px; /*宽度300px*/
    height:80px;/*高80px*/
    border:1px solid #000;/*边框大小1px，边框粗细 solid 边框颜色 黑色*/
}
</style>

然后，需要思考以下两种情况
(1)当单击放大按钮后，如果评论框的高度小于500px，则在原有高度的基础上增加50px。
(2)当单击”缩小”按钮后，如果评论框的高度大于50px，则在原有高度的基础上减去50px。

$(function(){
   

            var $comment = $("#comment");//获取评论宽

            $(".bigger").click(function(){
   //放大按钮
                var height = $comment.height();//当前评论框高度
                var number = 50;//增量
                if( height < 500){
                    //重新设置高度
                    $comment.height(height + number);

                }
            });

            $(".smaller").click(function(){
   //缩小按钮
                var height = $comment.height();//当前评论框高度
                var number = 50;//减量
                if( height > 50){
                    //重新设置高度
                    $comment.height(height - number);
                }
            });
        });

但是，此时评论框显得很呆板，缺乏缓冲效果。改用自定义动画animate来实现。

$(function(){
   

            var $comment = $("#comment");//获取评论宽

            $(".bigger").click(function(){
   //放大按钮
                var height = $comment.height();//当前评论框高度
                var number = 50;//增量
                if(!$comment.is(":animated")){
  //判断是否处于动画
                    if( height < 500){
                        //重新设置高度
                        //$comment.height(height + number);
                        //清空当前正在执行动画，然后在加入动画
                        $comment.stop(true).animate({height: height + number},300);
                    }
                }

            });

            $(".smaller").click(function(){
   //缩小按钮
                var height = $comment.height();//当前评论框高度
                var number = 50;//减量
                if(!$comment.is(":animated")){
  //判断是否处于动画
                    if( height > 50){
                        //重新设置高度
                        //$comment.height(height - number);
                        //清空当前正在执行动画，然后在加入动画
                        $comment.stop(true).animate({height: height - number},300);
                    }
                }
            });
        });

2.滚动条高度变化

通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。

与控制高度的方法相同，只不过此处需要控制的是另一个属性，scrollTop。

$(".up").click(function(){
   //向上翻一页
                var height = $comment.height();//当前评论框高度
                if(!$comment.is(":animated")){
  //判断是否处于动画
                    if( height > 50){
                        //清空当前正在执行动画，然后在加入动画
                            $comment.stop(true).animate({scrollTop: "-="+height},300);

                    }
                }
            });

            $(".down1").click(function(){
   //向下翻一页
                var height = $comment.height();//当前评论框高度
                if(!$comment.is(":animated")){
  //判断是否处于动画
                        //清空当前正在执行动画，然后在加入动画
                        $comment.stop(true).animate({scrollTop: "+="+height},300);

                }
            });

1.3复选框应用

对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作。复杂的操作要与选项挂钩，来达到各种级联反应效果。

首先在空白网页中创建一个表单，其中放入一组复选框，HTML代码如下：

<form action="" method="post" id="regForm">
        你爱好的运动是？<br/>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <input type="checkbox" name="items" value="排球" />排球