学习jquery示例

最新推荐文章于 2022-08-04 09:55:06 发布

iWarming

最新推荐文章于 2022-08-04 09:55:06 发布

阅读量178

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/csdn9228/article/details/84394106

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

第一个jQuery程序

<!DOCTYPE html>
<html>
  <head>
    <title>jquery.html</title>
	<meta charset="utf-8">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
    $(document).ready(function(){
	alert("我正在测试Jquery!");
	});
    </script>
	
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

运行截图

左导航示例

<!DOCTYPE html>
<html>
  <head>
    <title>web_left.html</title>
	<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
	$("li").click(function(){
		$("#current").addClass("current");
	}
	);
}
);
</script>
<style type="text/css">
li{
list-style:none;
line-height:22px;
cursor:pointer;
}
.current{
background:#6cf;
font-weight:bold;
color:#fff;
}
</style>
  </head>
  
  <body>
  <ul>
  	<li id="current">jQuery简介</li>
  	<li>jQuery语法</li>
  	<li>jQuery选择器</li>
  	<li>jQuery事件与动画</li>
  	<li>jQuery方法</li>
  </ul>
  </body>
</html>

问答特效

<!DOCTYPE html>
<html>
  <head>
    <title>点击实现问答特效</title>
    <meta charset="utf-8">
    <style type="text/css">
    	h2{
    		padding:5px;
    	}
    	p{
    		display:none;
    	}
    </style>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script>
	$(document).ready(function(){
		$("h2").click(function(){
		$("h2").css("background-color","#CCFFFF").next().css("display","block");
		});
	});
	</script>
  </head>
  <body>
  <h2>什么是受益人？</h2>
  <p>
  	<strong>解答：</strong>
  	受益人是指人身保险中由被保险人或者投保人指定的享有保险金请求权的人，投保人、被保险人可以为收益人。
  </p>
  </body>
</html>

iWarming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习jquery示例

第一个jQuery程序&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;jquery.html&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script type="text/javascript" src=&quot
复制链接

扫一扫