JQuery中对各种域进行隐藏和显示操作

2024-02-09 19:54:28

原文链接：http://www.cnblogs.com/softmans/p/3529576.html

操作的基本步骤：

（1）导入jquery相关jar

<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>

（2）根据需求，进行方法实现：

1.需求：用a标签进行区域隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>用法</title> 
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
	$("a").toggle(function() {
		$(".stuff").hide('slow');
	}, function() {
		$(".stuff").show('fast');
	});
});
</script> 

</head> 
<body> 
<a>点我测试</a>

<div class="stuff">
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
	</div>
<!--
toggle是轮换的意思
相当于hide or show
也就是说如果p是隐藏的就让它显示 如果是显示的就让它隐藏
当然这个显示与隐藏是相对height的属性的 
是通过调整元素的height属性来显示和隐藏元素
-->


</body> 
</html>

 2.需求：点击某一超链接进行区域隐藏：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>animate</title> 
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
   });
});
</script> 

</head> 
<body> 
<a href="http://www.css    rain.cn">
text
</a> 
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。</div>
</body> 
</html>

3.需求：点击复选框进行区域隐藏：

<%@ page contentType="text/html;charset=gbk"%>
<%@ taglib prefix="html" uri="/WEB-INF/struts-html.tld"%>
<html>
    <head>
        <script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
        <script type="text/javascript">
        
        
        
$(document).ready(function(){
$(".ss").hide();
$("#check").click(function(){
$(".ss").slideToggle("slow");

});
}); 
        

        
    </script>
        <link href="../css/style.css" rel=stylesheet type=text/css>
        <style type="text/css">
.th-left{
    font-size:9pt;
    font-family: 宋体;
    color:black;
    text-align:left;
    background-color:#EFF3FF;
    LINE-HEIGHT: 23px;
    padding-right: 5px;
    padding-left: 5px
}
</style>
    </head>
    <body class="body">
        <table border="0" width="100%">
            <tr>
                <td colspan="7" width="100%">
                    <img name="topic" src="" width="980" height="120" alt=""
                        style="background-color: #333333">
                </td>
            </tr>
            <tr>
                <td colspan="7" width="100%" class="lth">
                    您当前的位置为:首页-->注册第一步-->注册第二步
                </td>
            </tr>


            <tr>
                <td colspan="7" width="100%" class="th">
                    <table>
                        <tr>
                            <td class="th"></td>
                            <td class="th">
                                <table>
                                    <tr>
                                        <td colspan="2" class="th" valign="top">
                                            用户注册
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="th">

                                            用户名:
                                        </td>
                                        <td class="th">
                                            <input type="text" class="text" size="20">
                                            &nbsp;
                                            <font color="red">*</font>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td class="th">

                                            密&nbsp;码:
                                        </td>
                                        <td class="th">
                                            <input type="password" class="text" size="20">
                                            &nbsp;
                                            <font color="red">*</font>
                                        </td>

                                    </tr>

                                    <tr>
                                        <td class="th">

                                            密码确认:
                                        </td>
                                        <td class="th">
                                            <input type="password" class="text" size="20">
                                            &nbsp;
                                            <font color="red">*</font>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td class="th">

                                            Email:
                                        </td>
                                        <td class="th">
                                            <input type="text" class="text" size="20">
                                            &nbsp;
                                            <font color="red">*</font>
                                        </td>

                                    </tr>



                                    <tr>
                                        <td class="th">
                                            高级内容
                                        </td>
                                        <td class="th-left">
                                            <input type="checkbox" class="checkbox" id="check">
                                        </td>
                                    </tr>

                                </TABLE>
                            
                                    <div class="ss">
                                        <table>


                                            <tr>
                                                <td class="th">
                                                    性别:
                                                </td>
                                                <td class="lth">
                                                    <input type="radio" type="radio" name="sex" value="男">
                                                    男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <input type="radio" name="sex" value="女">
                                                    女
                                                </td>
                                            </tr>


                                            <tr>
                                                <td class="th">
                                                    出生年月
                                                </td>
                                                <td class="lth">
                                                    <input type="text">

                                                </td>
                                            </tr>



                                            <tr>
                                                <td class="th">
                                                    地址
                                                </td>
                                                <td class="lth">
                                                    <input type="text">
                                                </td>
                                            </tr>
                                            
                                            <tr>
                                            
                                            <td class="th">形象照片</td><td class="th-left"   valign="middle"><select><option>asdfasdfasdfasd</option></select>&nbsp;&nbsp;<img></td>
                                            
                                            </tr>
                                            
                                            <tr>
                                                <td class="th">
                                                    安全问题
                                                </td>
                                                <td class="lth">
                                                    <select>
                                                        <option>
                                                            asdf
                                                        </option>

                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="th">
                                                    回答答案
                                                </td>
                                                <td class="lth">
                                                    <input type="text">
                                                </td>
                                            </tr>



                                            <tr>
                                                <td class="th">
                                                    主页
                                                </td>
                                                <td class="lth">
                                                    <input type="text">

                                                </td>
                                            </tr>


                                            <tr>
                                                <td class="th">
                                                    QQ
                                                </td>
                                                <td class="lth">
                                                    <input type="text">

                                                </td>
                                            </tr>


                                            <tr>
                                                <td class="th">
                                                    身份证号
                                                </td>
                                                <td class="lth">
                                                    <input type="text">

                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="th">
                                                    支付宝帐号
                                                </td>
                                                <td class="lth">
                                                    <input type="text">

                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="th">
                                                    自我介绍
                                                </td>
                                                <td class="lth">
                                                    <textarea rows="5" cols="30"></textarea>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="th">
                                                    个人箴言
                                                </td>
                                                <td class="lth">
                                                    <textarea rows="5" cols="30"></textarea>

                                                </td>
                                            </tr>


                                        </table>
                                    </div>
                                
                            <tr>
                            <td class="th" colspan="7">
                                <input type="submit" value="确认" class="button">
                                <input type="reset" value="充填" class="button">
                            </td>
                            </tr>

                            </td>

                            </tr>
                    </table>
                    
                </td>
            </tr>


            <tr>
                <td colspan="7" class="th">
                    <br>
                    Copyright 1994-2003 孙文涛
                    <br>
                    <b>关于SUN公司||联系我们||使用条款||隐私政策</b>
                    <br>
                    <br>
                </td>
            </tr>
        </table>
    </body>
</html>

4.需求：鼠标事件，进行样式的改变：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script src="jquery-1.1.3.pack.js" type="text/javascript"></script> 
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){  //这个就是传说的ready
        $(".stripe tr").mouseover(function(){  
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
        $(this).addClass("over");}).mouseout(function(){ 
                                //给这行添加class值为over，并且当鼠标一出该行时执行函数
        $(this).removeClass("over");}).click(function(){ //移除该行的class
        
    $(this).toggleClass("click").removeClass("alt")})//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt").

     $(".stripe tr:even").addClass("alt");
         //给class为stripe的表格的偶数行添加class值为alt
});
</script>
<style>
th {
        background:#0066FF;
        color:#FFFFFF;
        line-height:20px;
        height:30px;
}
 
td {
        padding:6px 11px;
        border-bottom:1px solid #95bce2;
        vertical-align:top;
        text-align:center;
}
 
td * {
        padding:6px 11px;
}


 
tr.alt td {
        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
}
 
tr.over td {
        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
}

.click{background:yellow;}

 
</style>
</head>
 
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> 
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>QQ</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="http://www.cssrain.cn" >Cssrain</a></td>
    <td>cssrain</td>
    <td>demo</td>
    <td>可以发现超连接还是可以连接的，没有被 toggle和click占用</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
</tbody>
</table>

</body>
</html>

5.最普通的隐藏方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>用法</title> 
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $("a").toggle(function() {
        $(".stuff").animate({
            height: 'hide',
            opacity: 'hide'
        }, 'fast');
    }, function() {
        $(".stuff").animate({
            height: 'show',
            opacity: 'show'
        }, 'fast');
    });
});
</script> 

</head> 
<body> 
<a>点我测试</a>

<div class="stuff">
英文详解
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象
。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。 

[示例]:
$("p").animate({
  height: 'toggle', opacity: 'toggle'
}, "slow");
[示例]:
$("p").animate({
  left: 50, opacity: 'show'
}, 500);
[示例]:
一个使用“擦除”函数提供不同动画样式的例子。只有在一个插件可以提供这个“擦除”函数（jQuery库中默认只提供“linear”函数）的情况下才有效。 

$("p").animate({
  opacity: 'show'
}, "slow", "easein");

    </div>



</body> 
</html>

 

转载于:https://www.cnblogs.com/softmans/p/3529576.html

上一篇：jQuery自定义动画


下一篇：jQuery常见的事件和效果