Jquery基础之hide,show,toggle

最新推荐文章于 2021-10-10 20:43:06 发布

都说没想好

最新推荐文章于 2021-10-10 20:43:06 发布

阅读量979

点赞数

分类专栏： web前端（慕课网教程操作+笔记）

本文链接：https://blog.csdn.net/u013045370/article/details/51344091

版权

web前端（慕课网教程操作+笔记）专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.认识JQurey,在上面的博文中有提到，实现同样的效果，引用jquery可以减少很多代码。jquery的宗旨就是write less,do more，这就好比我们能够借用jquey这个强大的javascript库来减少我们的代码量。搭建jquery环境也比较简单，一个是下载jquery文件库到本地引用，还有一个直接引用文件库的URL，这里提供一个1.9.0的地址：

2. Jquery 效果：隐藏hide（）,显示 show（），切换toggle（）

<!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=utf-8" />
 <title>初识jQuery</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<!--引用这个jquery库-->

<style>
#test{
    display:none;
    width:120px;
    height:50px;
    border:1px solid blue;
	 }
</style>
</head>
    
    <body>
        <div id="test">Hello world!</div>
		<!--设置三个按钮，每次点击调用特定的函数-->
        <button οnclick="sayHello()">点我打开！</button>
        <button οnclick="sayGoodbye()">点我关闭！</button>
		<button οnclick="change()">点我切换！</button>
		
        <script type="text/javascript">
            function sayHello(){
                $("#test").show(5000);
			<!--设参数5000，表示用5000ms的时间完成这个动作-->	
            }
			
			 function sayGoodbye(){
                $("#test").hide();
			<!--不设置，默认速度-->
            }
			
			 function change(){
                $("#test").toggle("slow");
			<!--设置以slow的速度打开-->
            }
        </script>
    </body>
</html>

都说没想好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Jquery基础之hide,show,toggle

1.认识JQurey,在上面的博文中有提到，实现同样的效果，引用jquery可以减少很多代码。jquery的宗旨就是write less,do more，这就好比我们能够借用jquey这个强大的javascript库来减少我们的代码量。搭建jquery环境也比较简单，一个是下载jquery文件库到本地引用，还有一个直接引用文件库的URL，这里提供一个1.9.0的地址：2.Jquer
复制链接

扫一扫