jQuery的一些简单例子

于 2013-10-30 13:23:48 发布
阅读量274 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 转载 学习笔记 文章标签： jQuery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_8400/article/details/82546658
本文介绍了jQuery库的基础使用，包括入门实例、html()和text()方法应用、class动态操作、表格操作、隐藏特效、DOM简单操作、CSS操作、attr属性应用及demos等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值