JQuery—-Reset()方法

$(document).ready(function() {  

// use this to reset a single form  

$(“#reset”).click(function() {  

  $(“#form”)[0].reset();  

});  

});这个代码选择了所有ID为”form”的元素,并在其第一个上call了一个reset()。如果你有一个以上的form,你可以这样做:  

 

$(document).ready(function() {  

// use this to reset several forms at once  

$(“#reset”).click(function() {  

  $(“form”).each(function() {  

   this.reset();  

  });  

});  

});这样你在点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。

JQuery开发5-在网页中获取鼠标的三种坐标

在开发过程中。有时候会获取鼠标当前的坐标,主要分为三种,第一种是获取鼠标在屏幕中的坐标,第二种是获取鼠标在客户区中的坐标,第三种是获取鼠标在窗口页面中的坐标。

分别用的方法名称为screenX和screenY,clientX和clientY,pageX和pageY。

属性说明

  • clientX/clientY

    名称
    说明
    返回
    clientX 返回事件触发时鼠标相对于元素视口 的X坐标 数值
    clientY 返回事件触发时鼠标相对于元素视口 的Y坐标 数值

    这里的元素视口实际上代指就是浏览器,clientX是鼠标距离浏览器左边框的距离,clientY是鼠标距离浏览器上边框的距离。当鼠标停留在页面某个位置时,滚动鼠标滚动条,坐标会随着鼠标滚动条的改变而改变。

  • screenX/screenY

    名称
    说明
    返回
    screenX 返回事件触发时鼠标相对于屏幕 的X坐标 数值
    screenY 返回事件触发时鼠标相对于屏幕 的Y坐标 数值

    顾名思义,screenX是鼠标距离显示器屏幕左边框的距离,screenY是鼠标距离显示器屏幕上边框的距离。

  • pageX/pageY

    名称
    说明
    返回
    pageX 返回事件触发时鼠标相对于文档 的X坐标 数值
    pageY 返回事件触发时鼠标相对于文档 的Y坐标 数值

     

    如果鼠标停留在网页中的某个位置,滚动鼠标滚动条,pageY不会因为鼠标滚动的滚动而改变。

  • 参考代码如下
  • <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script language="javascript"
    	src="${pageContext.request.contextPath}/script/jquery.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		$(document).mousemove(function(e) {
    			getScreenCoordinates(e);//获取鼠标在屏幕中的坐标
    			getClientCoordinates(e);//获取鼠标在窗口客户区中的坐标,会随着滚动条的滚动而变化
    			getPageCoordinates(e);//获取鼠标当前页面区域中的坐标,不会随滚动条滚动而变化
    		});
    		function getScreenCoordinates(e) {
    			x1 = e.screenX;
    			y1 = e.screenY;
    			$(".sp1").text("X1:" + x1 + ",Y1:" + y1);
    		}
    		function getClientCoordinates(e) {
    			x2 = e.clientX;
    			y2 = e.clientY;
    			$(".sp2").text("X2:" + x2 + ",Y2:" + y2);
    		}
    		function getPageCoordinates(e) {
    			x3 = e.pageX;
    			y3 = e.pageY;
    			$(".sp3").text("X3:" + x3 + ",Y3:" + y3);
    		}
    	});
    </script>
    </head>
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    	<p>
    		鼠标当前屏幕的坐标为:<span class="sp1"></span>
    	</p>
    	<p>
    		鼠标当前窗口客户区坐标为:<span class="sp2"></span>
    	</p>
    	<p>
    		鼠标当前页面区域中的坐标为:<span class="sp3"></span>
    	</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    </body>
    </html>
    

     

jQuery实现页面checkbox参数传递(Struts2)

用过Struts2(以后简称S2)标签的人可能知道,checkboxlist标签并不是很好用,今天在遇到一个页面需求的时候Google了一下,但没太满意的结果,要么就是弄的很复杂,要么写的不完整,无奈自己弄了下用iterator标签+jQuery实现参数传递,效果还算理想,记下来以免以后忘记。

简单说下需求:

    这个部分是权限管理-角色添加与对应模块关联的实现过程。

流程:

    1.角色列表页选择一个要‘添加/修改’关联模块的角色。

    2.进入该角色对应模块列表页,要求选中之前已经关联的模块,未选的即还没关联。

    3.将选好的模块跟该角色关联,显示操作结果。

实现:

主要就是下面这一个方法

<script type="text/javascript">
$(document).ready(function(){
	
	//得到服务器传过来的原有权限id的字符串,格式自定义,我的格式为"0001;0002;xxx;"
	var checkMenu = $('#checkedMenu').val();
	//alert(checkMenu);
	//分割字符串成数组
	var array = checkMenu.split(";");
	for(var i = 0 ; i < array.length ; i++){
		//设置原有权限菜单处于选中状态,其中$("#0001")为id为0001的节点。
		$("#"+array[i]+"").attr("checked",true);
	}
	
	$('#butn').click(function(){
		//将已选模块的ID拼成 ID;ID 的字符串
		var aa = "";
		var i = 0;
		$("input:checked").each(function(){
			var j = $("input:checked").size();	
	        if(this.checked){
	        	i++;
	            aa+=this.value;
	            if(i != j){
	            	aa += ";";
	            }
	        }
		})
		//赋值给一个变量
		$('#menuIds').attr('value',aa);
		//提交
		$('#urForm').submit();
	});
	
	$('#selectTable').tablesorter();
});
</script>

form里的内容

<s:form id="urForm" name="urForm" method="post"
	action="sysRoleAddModuleThree" namespace="/bm" theme="simple">
	
	<s:hidden name="roleId" />
	<s:hidden name="checkedMenu" id="checkedMenu" />
	<s:hidden name="menuIds" id="menuIds" />
	
	<table id="selectTable" class="tablesorter">
		<thead>
		<tr>
			<th>选择</th>
			<th>注释</th>
			<th>创建时间</th>
			<th>是否有效</th>
			<th>链接URL</th>
		</tr>
		</thead>
		<tbody class="data-content">
		<s:iterator value="moduleList" status="stat">
			<tr>
				<td>
					<input name="modu" type="checkbox" id='<s:property value="moduleId"/>'
						value='<s:property value="moduleId"/>'>
				</td>
				<td><s:property value="modDeclare" /></td>
				<td><s:date name='createTime' format='yyyy年MM月dd日HH点mm分' /></td>
				<td><s:property value="isDisplay" /></td>
				<td><s:property value="moduleUrl" /></td>
			</tr>
		</s:iterator>
		</tbody>
		<tfoot>
		<tr>
			<th colspan="5"><button id="butn">确认提交</button></th>
		</tr>
		</tfoot>
	</table>
</s:form>

上面注释还算清楚,下面就没必要说明了。主要就是

id='<s:property value=”moduleId”/>’

注:模块选择是有另一个直接用jQuery tree + checkbox plug in选择的实现方法,上面这个不过是另一个小需求,有空再记录那个。

jquery组件精选

JQUERY MODAL DIALOG

说明:一个带关闭、可拖拽的对话框,适合用于信息提示
主页:http://plugins.jquery.com/project/modaldialog
演示:http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/

SIMPLEMODAL

说明:屏蔽底层,在页面中间显示一个提示框
主页:http://plugins.jquery.com/project/SimpleModal
演示:http://www.ericmmartin.com/projects/simplemodal/

image combobox

说明:生成自定样式、内含图片的下拉框
主页:http://plugins.jquery.com/project/image-combobox
演示:http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/jquery-image-dropdown-2.1/index.html

FullCalendar

说明:一个包含有月、周、日视图的日历组件
主页:http://plugins.jquery.com/project/fullcalendar
演示:http://arshaw.com/fullcalendar/

jMonthCalendar

说明:一个只有月视图的日历组件
主页:http://plugins.jquery.com/project/jMonthCalendar
演示:http://www.bytecyclist.com/SourceCode/jMonthCalendar/1.3.0-beta/Demo.html

jQuery Week Calendar

说明:一个只有周视图的日历/事件组件
主页:http://plugins.jquery.com/project/weekcalendar
演示:http://jquery-week-calendar.googlecode.com/svn/trunk/jquery.weekcalendar/full_demo/weekcalendar_full_demo.html

jQuery UI Datepicker Project

说明:一个弹出窗口式日期选择组件,适合在文本框处使用
主页:http://plugins.jquery.com/project/jquery-calendar
演示:http://jqueryui.com/demos/datepicker/default.html

jQuery UI on Google Maps

说明:在 Google Map 上使用 jQuery 的漂亮UI
主页:http://plugins.jquery.com/project/jquery-calendar
演示:http://marcgrabanski.com/pages/code/jquery-ui-google-maps

mcDropdown jQuery Plug-in

说明:在下拉框中以多级菜单方式选择项目
主页:http://plugins.jquery.com/project/mcdropdown
演示:http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

mb.jQuery.components!

说明:超炫的显示方式
主页:http://pupunzi.com/#mb.components/components.html
演示:http://pupunzi.com/#mb.components/components.html

jQuery.validity

说明:表单内容验证
主页:http://plugins.jquery.com/project/validity
演示:http://validity.thatscaptaintoyou.com/

Supersized

说明:一个体验超棒的全屏图片展示
主页:http://plugins.jquery.com/project/Supersized
演示:http://buildinternet.com/project/supersized/default.php

cookies

说明:JS Cookie 操作库
主页:http://plugins.jquery.com/project/cookies
演示:http://code.google.com/p/cookies/

JQuery Twitter Suggestion

说明:仿 Twitter 登录风格的文本框提示
主页:http://plugins.jquery.com/project/twitterSuggestion
演示:http://www.enricofoschi.com/jquery/twittersuggestion/

MopBox

说明:效果超棒的弹出对话框,可做多页图文展示
主页:http://plugins.jquery.com/project/mopbox
演示:http://www.mopstudio.jp/mopBox2demo.html

UI.Layout

说明:适合做 Web 应用时做布局,上下左右都可隐藏
主页:http://plugins.jquery.com/project/Layout
演示:http://layout.jquery-dev.net/demos/simple.html

         http://layout.jquery-dev.net/demos.cfm

jqGrid学习————–格式化

jqGrid的格式化是定义在语言包中

$jgrid = {
...
   formatter : {
     integer : {thousandsSeparator: " ", defaultValue: '0'},
     number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},
     currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},
     date : {
       dayNames: [
         "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
         "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
       ],
       monthNames: [
         "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
         "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
       ],
       AmPm : ["am","pm","AM","PM"],
       S: function (j) {return j < 11 || j > 13   ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'},
       srcformat: 'Y-m-d',
       newformat: 'd/m/Y',
       masks : {
         ISO8601Long:"Y-m-d H:i:s",
         ISO8601Short:"Y-m-d",
         ShortDate: "n/j/Y",
         LongDate: "l, F d, Y",
         FullDateTime: "l, F d, Y g:i:s A",
         MonthDay: "F d",
         ShortTime: "g:i A",
         LongTime: "g:i:s A",
         SortableDateTime: "Y-m-d\\TH:i:s",
         UniversalSortableDateTime: "Y-m-d H:i:sO",
         YearMonth: "F, Y"
       },
       reformatAfterEdit : false
     },
     baseLinkUrl: '',
     showAction: '',
     target: '',
     checkbox : {disabled:true},
     idName : 'id'
   }
...

这些设置可以通过colModel中的formatoptions参数修改

jQuery("#grid_id").jqGrid({
...
   colModel : [
   ...
      {name:'myname', ... formatter:'number', ...},
   ...
   ],
...
});

此实例是对名为“myname”的列进行格式化,格式化类是“number”,假如初始值为“1234.1”则格式化后显示为“1 234.10” 。

如果给某列进行格式化:

jQuery("#grid_id").jqGrid({
...
   colModel : [
   ...
      {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,
   ...
   ],
...
});

这个设置会覆盖语言包中的设置。

预先设置的格式化类

类型 可选值 说明
integer thousandsSeparator,defaulValue thousandsSeparator:对数字使用千分位分隔符;defaulValue保持原始值不改变
number decimalSeparator,thousandsSeparator,decimalPlaces,defaulValue 对数据进行不同的分隔
currency decimalSeparator,thousandsSeparator,decimalPlaces,defaulValue,prefix,suffix 同number,但是要在附加prefix跟suffix
date srcformat,newformat srcformat:对输入数值进行格式化;newformat:对输出进行格式化
email none 如果是email类型则会附加 mailto:
link target 默认的targer是null,如果设置此值就会添加一个超链接
showlink baseLinkUrl,showAction,addParam,target,idName baseLinkUrl:原始链接;showAction:会在链接之后附加一些信息;addParam:会在idName后附加额外参数;target:附加属性;idName:附加在showAction后的第一个参数,默认为id
checkbox disabled 默认禁用,是否可以被修改
select none

select类型的格式化实例:

原始数据

<script>
jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],
...
});
</script>

使用格式化后

<script>
jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]
...
});
</script>

结果是,表格的数据值为1或者2但是现实的是One或者Two。

对超链接使用select类型的格式化:

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...} 
      ... 
   ]
...
});
</script>

输出结果:

http://localhost/someurl.php id=123&action=edit

如果想改变id值则

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...} 
      ... 
   ]
...
});
</script>

输出为

http://localhost/someurl.php myid=123&action=edit

jquery基础

jQuery基础知识

jQuery

   1.特点:

   小巧

   功能强

   跨浏览器

   插件

   2.使用

    实际是js文件

    a)  复制js到WebRoot

    b)  页面<script src=”jquery.js” charset=””></script>

   3.核心对象及常用方法和属性

     a)名称

     jQuery和$

     用$找出来的对象叫jQuery对象

     用document找出来的对象叫Dom对象

    

     b)dom和jquery对象转换

     jQuery对象.get(0) —>dom对象

     $(dom对象)—>jQuery对象

   

     c)jQuery对象方法

      .show() 显示

      .hide() 隐藏

      .toggle() 显示或隐藏切换

      $(“div”).hide();

      $(“#myid”).show();

      $(“.myclass”).show(100);

      .size() 找到多少个对象

      var n = $(“div”).size()

      文本框赋值(value)

      $(“#myid”).val(123);

      .val()取值

      层的内容.innerHTML/.innerText

      $(“div”).html() ;

      $(“div”).html(123);

      $(“div”).html(“<input type=button>”);

      $(“div”).text(“<input type=button>”);

      样式 document….style.color=”red”

      $(“div”).css(“color”,”red”).css(“font-size”,”18″);

      $(“div”).css({color:”red”,”font-size”:18});

      删除

      $(“div”).remove(); 删除所有div

      添加

      父加子: $(“div”).append(“<input button>”);

              $(“div”).append( $(“#myid”) );

      子加父

           $(“input”).appendTo(  $(“div”) );

      对象属性

        $(“input”).attr(“checked”,true);

      去首尾空格:

         $.trim(字符串)

$(“div”).each(  function(i,obj){}  );

$.post(url,function(x){});

$.post(url,{键:值},function(x){});

$.getJSON(url,function(x){//这里x已转成json了,不要用eval});

      克隆

        $(“div”).clone();

4. 选择器

    a) 类选择器

       <input type=text class=”myclass”>

       $(“.myclass”)     找多个

    b) id选择器  

       <input type=text id=”myid”>

       $(“#myid”) 找一个

       相当于:document.getElementById(“myid”)

    c) 标记选择器   找多个

       $(“div,span”)

       相当于document.getElementsByTagName()

    d) 表单选择器

       $(“:text”)   所有文本框

       $(“input[type=text][value=”]”)

       $(“:radio”)  所有单选框

       $(“:checkbox”) 所有复选框

    e) 表单属性选择器

       $(“:checkbox:checked”)或$(“:checked:checkbox”)

       $(“:checked”)  找所有选中(单选框和复选框)

       $(“:selected”) 找所有选中列表框

    f) 层级选择器

       父找子 d找c

       $(“table”).find(“tr”)  //找子孙都可以

       $(“table>tbody>tr”) 找所有tr

       $(“table>tbody>tr:first”) 找第一行

       $(“table>tbody>tr”).eq(0) 找第一行

       $(“table>tbody>tr:odd”)   所有奇数行

       $(“table>tbody>tr:even”)  所有偶数行

       子找父

       $(“tr”).parent()

       找兄弟

       $(a).next() 下一个

       $(b).prev() 上一个

—jQuery对表格tr的操作

function bh()  //序号进行编号

      {

        jQuery(“#t>tr”).each(function(i,obj){

           obj.cells[0].innerHTML=i+1;

        });

      }

      function addRow() //添加一行tr

      {

       var tr = jQuery(“#t>tr:first”).clone().appendTo(jQuery(“#t”));

          tr.find(“:text”).val(“”);

          tr.find(“td”).eq(4).html(“”);  //eq(4)第二个文本框

          bh();

      }

          function droRow(del) //删除一行tr

      {

         jQuery(del).parent().parent().remove();

         bh();

      }

     

      //计算输入文本中数字的结果 

      function js(js)

      {

         //找到tr

         var tr=jQuery(js).parent().parent();

         //取数

         var sl=tr.find(“:text”).eq(1).val();

         var jg=tr.find(“:text”).eq(2).val(); 

         tr.find(“td”).eq(4).html(sl*jg);

        

      }