您的位置：首页 > Web前端 > JQuery

jQuery实用Demo

2016-11-17 09:42 106 查看

1、点击 隐藏/显示 元素

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demos.css" />
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*文档结构加载完成后,给2个按钮添加单击事件处理函数。*/
$(document).ready(function() {

$('#id-button-show').click(function() {
$('h3').show();
});
$('#id-button-hide').click(function() {
$('h3').hide();
})

});
</script>
</head>

<body>
<button type="button" id="id-button-show">显示</button>
<button type="button" id="id-button-hide">隐藏</button>
<hr />
<h3>这里是要操作的内容。</h3>
</body>

</html>


视图：



引用文件：
http://files.cnblogs.com/files/wanghaibin/demos.css http://files.cnblogs.com/files/wanghaibin/jquery-1.9.1.js

2、点击 隐藏/显示 元素（2）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demos.css" />
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id-button-showhide').click(function() {
$('h3').toggle();
});
});
</script>
</head>

<body>
<button type="button" id="id-button-showhide">显示/隐藏</button>
<hr />
<h3>这里是要操作的内容。</h3>
</body>

</html>


视图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航