`
IT阿狸
  • 浏览: 67680 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jQuery的一些简单例子

jQuery 
阅读更多

jQuery 是一个 JavaScript 库。

 

以下代码来自度娘或W3Cschool。

 

一、入门实例

<html>
	<head>
		<title>入门实例</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
		<!-- 
			当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
			由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
			ready() 函数规定当 ready 事件发生时执行的代码。
			ready() 函数仅能用于当前文档，因此无需选择器。
			允许使用以下三种语法：
			1.$(document).ready(function)
			2.$().ready(function)
			3.$(function)
			提示：ready() 函数不应与 <body onload=""> 一起使用。
		 -->
		<script type="text/javascript">   
			// jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码
			$(document).ready(function(){
			  	$('#div1').append('<b>Hello World</b>'); 
			}); 
		</script>
	</head>
	
	<body>
		<div id="div1"></div>
	</body>
</html>

 

 

二、使用jQuery的html()和text()方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>使用jQuery的html()和text()方法</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="script/jquery-1.8.0.js"></script>  
	<script type="text/javascript">
		$(document).ready(function(){
			//$(selector).html(content) 改变被选元素的（内部）HTML 
			$('#divResult').html($('#p1').text());  
			//text()方法，设置或返回被选元素的文本内容。
			$('#divResult2').html($('#p1').html());  
		});   
	</script>
  </head>
  
  <body>
	<div id="div1">  
		<p id="p1"><b>W3Cschool</b></p>  
		<p id="p2">jQuery太好了</p>  
	</div>  
	<div id="divResult"></div>  
	<div id="divResult2"></div>  
  </body>
</html>

 

 

三、对class进行动态操作

<!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>对class进行动态操作 </title>
	<script src="script/jquery-1.8.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#table tr").mouseover(function() {
				$(this).addClass("over");
			});
			$("#table tr").mouseout(function() {
				$(this).removeClass("over");
			});
			// 选择每个相隔的（偶数） <tr> 元素，触发的事件
			$("#table tr:even").addClass("double");
		});
		// 去除样式
		function removeEvenTdClass() {  
        	$("#table tr:even").removeClass();  
    	}
    	// 增加样式
    	function addEvenTdClass() {  
        	$("#table tr:even").addClass("double");
    	}
	</script>
	<style type="text/css">
		th {
			background: gray;
			color: white;
		}
		
		table {
			width: 30em;
			height: 10em;
		}
		
		td {
			border-bottom: 1px solid #95bce2;
			text-align: center;
		}
		
		tr.over td {
			font-weight: bold;
		}
		
		tr.double td {
			background: #DAF3F1;
		}
	</style>
	</head>
	
	<body>
		<table id="table" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>籍贯</th>
				<th>手机</th>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>18</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>bbbb</td>
				<td>20</td>
				<td>广州</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>23</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>ddddd</td>
				<td>24</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>eeeee</td>
				<td>43</td>
				<td>北京</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>fffff</td>
				<td>26</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>gggggg</td>
				<td>19</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>hhhhhh</td>
				<td>43</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>iiiiii</td>
				<td>32</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
		</table>
		<input id="btnRemoveClass" name="btnRemoveClass" type="button" value="removeEvenTdClass" onclick="removeEvenTdClass()"/> 
		<input id="btnAddClass" name="btnAddClass" type="button" value="addEvenTdClass" onclick="addEvenTdClass()"/> 
	</body>
</html>

 

 

四、对表格的操作，选择器的使用

<!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>对表格的操作，选择器的使用 </title>
	<script src="script/jquery-1.8.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#table tr").mouseover(function() {
				$(this).addClass("over");
			});
			$("#table tr").mouseout(function() {
				$(this).removeClass("over");
			});
			// 选择每个相隔的（偶数） <tr> 元素，触发的事件
			$("#table tr:even").addClass("double");
		});
	</script>
	<style type="text/css">
		th {
			background: gray;
			color: white;
		}
		
		table {
			width: 30em;
			height: 10em;
		}
		
		td {
			border-bottom: 1px solid #95bce2;
			text-align: center;
		}
		
		tr.over td {
			font-weight: bold;
		}
		
		tr.double td {
			background: #DAF3F1;
		}
	</style>
	</head>
	
	<body>
		<table id="table" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>籍贯</th>
				<th>手机</th>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>18</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>bbbb</td>
				<td>20</td>
				<td>广州</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>23</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>ddddd</td>
				<td>24</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>eeeee</td>
				<td>43</td>
				<td>北京</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>fffff</td>
				<td>26</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>gggggg</td>
				<td>19</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>hhhhhh</td>
				<td>43</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
			<tr>
				<td>iiiiii</td>
				<td>32</td>
				<td>上海</td>
				<td>13088888888</td>
			</tr>
		</table>
	</body>
</html>

 

 

五、jQuery的隐藏特效hide()方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>jQuery的隐藏特效hide()方法</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
	<!-- 
		演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
		$(selector).hide(speed,callback), 
		speed：可选。规定元素从可见到隐藏的速度。默认为 "0"。 
		callback：可选。hide 函数执行完之后，要执行的函数
	 -->
	<script type="text/javascript">
	    $(document).ready(function(){      
	        $("#table").hide(4000,function(){
	           	alert("Animation Done!");  
	        });   
	   });
	</script>  

  </head>
  
  <body>
	<table id="table" border="1" cellpadding="0" cellspacing="0">
		<tr>
	     	<th width="50">姓名</th>  
	     	<th width="50">年龄</th>  
	     	<th>手机</th>  
    	</tr> 
		<tr>
	     	<td>阿狸</td>  
	     	<td>21</td>  
	     	<td>13800138000</td>  
    	</tr> 
    	<tr>
	     	<td>桃子</td>  
	     	<td>21</td>  
	     	<td>13800138000</td> 
    	</tr>
    	<tr>
	     	<td>影子</td>  
	     	<td>21</td>  
	     	<td>13800138000</td>  
    	</tr>
	</table>
</html>

 

 

六、对DOM的简单操作

<html>
	<head>
		<title>对DOM的简单操作</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
		<!-- 
			insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。
			注释:如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
			语法:$(content).insertBefore(selector)
			content：必需。规定要插入的内容。可能的值：
			selector：必需。规定在何处插入被选元素。 
			
			after() 方法在被选元素后插入指定的内容。
			语法：$(selector).after(content)
			content 必需。规定要插入的内容（可包含 HTML 标签）。 
		 -->
		<script type="text/javascript">   
			function sure(){
				$("<b>Hello</b>").insertBefore("#p1"); 
				$("#p1").after("<b>World</b>"); 
			}; 
		</script>
	</head>
	
	<body>
		<p id="p1">这是一个段落</p>
		<br/>
		在文字前面加上Hello，后面加上World
		<input type='button' onclick="sure();" value="确定"/>
	</body>
</html>

 

 

七、对CSS的操作

<html>
	<head>
		<title>对CSS的操作</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
		<!-- 
			css() 方法设置或返回被选元素的一个或多个样式属性。
		 -->
		<script type="text/javascript">
			$(document).ready(function(){
			$("p").css({ "margin-left": "10px", "background-color": "blue" }); 
			}); 
		</script>
	</head>
	
	<body>
		<p id="p1">这是一个段落</p>
	</body>
</html>

 

 

八、有关attr属性的应用，2个例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>有关attr属性的应用1</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script/jquery-1.8.0.js"></script>
    <!-- 
    	:gt() 选择器选取 index 值高于指定数的元素。index 值从 0 开始。
    	语法：$(":gt(index)")
    	index：必需。规定要选择的元素。
    	
    	attr() 方法设置或返回被选元素的属性值。
    	语法：$(selector).attr(attribute,value)
    	attribute：规定属性的名称。 
    	value：规定属性的值。 
     -->
    <script>
		function sure(){
	    	$("button:gt(0)").attr("disabled","disabled");
	  	};
  	</script>
 	<style>
  		button { margin:10px; }
  	</style>
  </head>
  
  <body>
    <button>0th Button</button>
  	<button>1st Button</button>
  	<button>2nd Button</button>
 	除第一个按钮以外，其它禁用
 	<input type="button" value="确定" onclick="sure();" />
  </body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>有关attr属性的应用2</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script/jquery-1.8.0.js"></script>
    <!-- 
    	attr() 方法设置或返回被选元素的属性值。
    	语法：$(selector).attr(attribute)
    	attribute：规定要获取其值的属性。
     -->
     <script>
     	
	 	function sure(){    
	    	var title = $("em").attr("title");
	    	$("div").text(title);
	  	};
  	</script>
  	<style>
  		em { color:blue; font-weight;bold; }
  		div { color:red; }
	</style>
  </head>
  
  <body>
  	<!-- <em> 把文本定义为强调的内容。  -->
    <p>
    	Once there was a <em title="huge, gigantic">large</em> dinosaur...
  	</p>
  	The title of the emphasis is:<div></div>
  	获取em的title属性
  	<input type='button' onclick='sure();' value='确定' />
  </body>
</html>

 

 

九、demos

JQuery-BaseDemo.zip

分享到：
| 在MyEclipse中安装插件，例如JBPM
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery简单应用实例

    ### jQuery简单应用实例详解 #### 一、理解jQuery与传统JavaScript的区别 在现代网页开发中，jQuery作为一种轻量级的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画等操作，使得开发者能够更加专注于...

    JqueryAjax简单实例

    在这个"JqueryAjax简单实例"中，我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先，我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....

    SSI、jquery的简单实例

    SSI整合的jar包、jquery的简单实例SSI整合的jar包、jquery的简单实例

    jquery简单实例代码

    在jQuery中，操作DOM变得非常简单。例如，要添加一个新的HTML元素，可以使用`append()`或`prepend()`方法。要删除元素，使用`remove()`。修改元素内容，用`html()`, `text()`, 或 `val()`。 **事件处理** jQuery...

    jQuery简单例子

    &lt;title&gt;jQuery简单例子 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;!-- 图片元素 --&gt; 示例图片"&gt; 切换图片显示状态 &lt;script src="script.js"&gt;&lt;/script&gt; ``` 在这个例子中...

    jQuery 简单小例子

    这个“jQuery简单小例子”旨在为初学者提供一个快速入门的教程，帮助他们理解和掌握jQuery的基本用法。 1. **引入jQuery库** 在HTML文件中，可以通过在`&lt;head&gt;`标签内添加以下代码来引入jQuery库： ```html ...

    jquery 实例完整例子

    "jQuery实例完整例子"提供了丰富的示例，帮助初学者和有经验的开发者更好地理解和应用jQuery库，尤其在创建高级特效方面。 在jQuery中，特效是其魅力之一，它们使网页更具吸引力和互动性。例如，`slideUp()`和`...

    jquery学习简单实例

    **jQuery学习简单实例** jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本实例旨在为初学者提供一个快速了解和掌握jQuery基础知识的途径...

    备忘：jquery的一些实例

    标题中的“备忘：jquery的一些实例”提示我们，这篇内容主要关注的是jQuery库中的实际应用案例。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个备忘中，作者...

    bootstrap&jQueryUI例子

    在"bootstrap&jQueryUI例子"这个压缩包中，可能包含的是结合了这两个框架的示例代码或项目。这些示例通常会展示如何在同一个页面中有效地利用 Bootstrap 的布局和样式，同时引入 jQuery UI 的组件，实现更复杂的用户...

    php+jquery+ajax最简单例子

    这个“php+jquery+ajax最简单例子”旨在教你如何使用这些工具实现一个基本的异步数据交换功能。 首先，让我们深入了解这三个概念： 1. PHP（Hypertext Preprocessor）：这是一种服务器端脚本语言，主要用于网页...

    jquery 弹出窗口简单例子

    在这个"jquery 弹出窗口简单例子"中，我们将探讨如何使用jQuery和JavaScript来创建一个基础的弹出窗口。 首先，让我们理解jQuery Popup的基本概念。Popup或模态对话框是一种在主页面之上打开的浮动窗口，它阻止用户...

    jquery-treetable最简单实例

    《jQuery Treetable最简单实例解析》 在Web开发中，数据展示往往需要有层次感，特别是当数据结构复杂时，树形表格（Treetable）成为一种理想的选择。jQuery Treetable是一款轻量级的JavaScript插件，它能够将普通的...

    jQueryUI官方实例集

    9. **按钮(Button)**：jQueryUI的Button组件不仅可以创建简单的按钮，还可以创建具有下拉菜单、复选按钮和单选按钮功能的复杂按钮。 10. **效果(Effects)**：jQueryUI包含了大量的动画效果，如淡入淡出、滑动、切换...

    jQuery特效和实例集合

    50个JS实例则涵盖了从简单到复杂的应用场景，如表单验证、图片轮播、下拉菜单、时间日期插件、拖放功能、Ajax请求等。这些实例可以帮助学习者将理论知识转化为实际技能，理解如何将jQuery应用于实际项目。 六、学习...

    ajax与jquery实现的简单验证实例

    这个“ajax与jquery实现的简单验证实例”着重于如何利用这两种技术进行前端数据验证，提高用户体验，减少不必要的服务器交互。在这个实例中，我们将探讨Ajax的核心概念，jQuery库的优势，以及它们如何结合实现表单...

    jquery的一些实例

    本篇文章将详细探讨“jQuery的一些实例”，适合初学者入门学习。** **一、jQuery的选择器** 在jQuery中，选择器用于选取HTML元素。例如，`$("#myID")`选择ID为"myID"的元素，`$(".myClass")`选择所有class为...

    jQuery 精通的实例

    3. 插件开发：jQuery的插件机制使得扩展功能变得简单，开发者可以通过$.fn.extend()将新方法挂载到jQuery对象上。 三、jQuery实例分析 在“书中实例”中，你可以找到以下内容： 1. 选择器应用：实例可能涵盖了...

    jquery所有经典例子

    3. **动画效果**：jQuery的动画功能强大，`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等方法让网页动态效果制作变得简单。`animate()`尤其灵活，可自定义动画的属性和时间。 4. **Ajax交互**：jQuery的...

Magicbox
Global site tag (gtag.js) - Google Analytics