zoukankan      html  css  js  c++  java
  • jQuery实用Demo

    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>

    视图:


     

  • 相关阅读:
    用Vue创建一个新的项目
    事件循环学习2
    事件循环学习笔记
    关于访问器属性
    bootstrap-datetimepicker时间控件
    前端的指导方针---css篇
    web移动端小tip,box-flex
    数组常用的几种方法
    ajax对一些没有接口的数据进行分析和添加方法
    JAVA静态代理和动态代理理解
  • 原文地址:https://www.cnblogs.com/wanghaibin/p/6072536.html
Copyright © 2011-2022 走看看