今天写了关于jquery的一些写法

最新推荐文章于 2015-10-21 22:08:41 发布

DING135DING

最新推荐文章于 2015-10-21 22:08:41 发布

阅读量387

点赞数

CC 4.0 BY-SA版权

分类专栏： javaweb积累文章标签： javascript

本文链接：https://blog.youkuaiyun.com/DING135DING/article/details/42065697

javaweb积累专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一个使用JSP技术实现的简单网页案例，该案例通过jQuery进行页面元素的选择和操作，包括按钮点击事件处理、元素显示隐藏及表单元素状态修改等功能。通过这个例子，读者可以了解到如何在JSP页面上运用jQuery来增强用户体验。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    <title>My JSP 'Test.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="../../js/jquery-1.8.2.min.js"></script>
	 <style type="text/css">
	 	div.one
	 	{
	 		background-color :yellow;
	 	}
	 /* 	body
	 	{
	 		background-image:url(../img/denglu_bg.gif); 
	 	} */
	 	#back_image
	 	{
	 		width: 1000px;
			height: 400px;
			background: url(../img/nane.gif) ;
			margin-left: 10px;
	 	}
	 </style>
	 <script type="text/javascript">
	 	//包含one的button背景为蓝色
	 	 $(document).ready(function(){
	 			$("#button1").click(function()
	 			{
	 				$("div:contains('one')").css("background","blue");
	 			});
	 		});
	 	//id为none的元素切换显示
	 	 $(document).ready(function(){
	 		 	$("#button2").click(function(){
	 		 		 $("#none").toggle(1000);
	 		 	});
	 		});
	 	//对于input中不为sss且disable的元素背景设为黄色
	 	 $(document).ready(function(){
	 		 $("form input:not(.sss):disabled").css("background","yellow");
	 	 });
	 	
	 	 $(document).ready(function(){
	 		//将勾选的checkbox显示在div中
			$(":checkbox").click(function(){
				$("div:first").html('<font color="blue"><b>'+$("input:checked").length+'<b><font>');
			});
	 		var str='';
			//将select选中的元素显示出来
			$("select").change(function(){

		 		$("select :selected").each(function(){
		 			str +=$(this).text()+",";
		 		});
		 		$('div:first').html('<b>'+str+'<b>');
		 	});
			
	 	 }); 
	 	
	 </script>
	 
  </head>
 
  
  <body>
  	 <h3>基本过滤器</h3>
  	 <form action="">
  	   <input type="button" value="test1" id="button1" disabled="disabled">
	    <input type="button" value="test2" id="button2" >
	    <input type="button" class="sss" value="sss" id="button3" disabled="disabled">
	    <input type="button" value="mmm" id="button4">
	    
	    <input type="checkbox" checked="checked" name="school1" id="school1">school1
	    <input type="checkbox" checked="checked" name="school2" id="school2">school2
	    <input type="checkbox" checked="checked" name="school3" id="school3">school3
	    <!-- $("div:contain('one')").css("background",blue); -->
	    <!-- <div id="back_image" ></div>  -->
	    <div></div>
	    <br/>
	    <select name="first" id="first">
	    	<option>北京</option>
	    	<option>上海</option>
	    	<option>南京</option>
	    	<option selected="selected">guangzhou</option>
	    	<option>云南</option>
	    	<option>贵州</option>
	    	<option>重庆</option>
	    </select>
	    
	    
	    <div id="none" class="none"> this is a hidden div</div>
	    <div class="one" id="one">
	    	id = "one" class 为one的div
	    </div>
	    <p id="one1"> id = one1</p>
	    --------------------------
	    <div id="back_img">
	     <img alt="背景图片" src="../img/denglu_bg.gif">
	    </div>
	    <input type="text" disabled="disabled">
		<%=basePath%>
  	 </form>
  
  </body>
</html>

希望以后能用到一些。