JQuery常用代码集锦

最新推荐文章于 2024-05-08 02:39:14 发布

liangbinny

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量815

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/liangbinny/article/details/9455407

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JQuery选择器

http://www.cnblogs.com/linzheng/archive/2010/10/08/1846149.html

1、Dialog定义

js部分

$('.test').dialog({
autoOpen: false,
modal: true,//使dialog层下面的不可点击
resizable: true,
width: 500,
buttons:{
  "保存":function(){
     },
  "取消":function(){
   $( this ).dialog( "close" );
  }
}
});

body部分

调用js：

$( ".test" ).dialog( "open" );

2、JQuery Ajax json

前台页面部分：

js部分：

//data部分就是送往后台action的值

function showDetail(id){
try{
  var url="loginAction!doShowDetailLog.action";
  $.ajax({
   url:url,
   type : "post",
   dataType : "text",
   cache : false,
   data:{sid:id},
   success : function(data) {
    if(data.indexOf("error:") == 0){
     var msg = data.replace("error:","");
     alert("失败 !" + msg);
    } else {
     var info = JSON.parse(data);
     $("#xxx").text(info.text);
    }
    $("#dialogFj").dialog("open");
   },
   error:function(){}
});
}catch(e){
  alert("error");
}
}

窗体部分：

后台action部分

public void doShowDetailLog() {

  String id = ServletActionContext.getRequest().getParameter("id");
  try {
        System.out.println("id");

         JSONObject jsonObj = new JSONObject();
         jsonObj.put("text", "xxxxxxxx");
         response.getWriter().write(jsonObj.toString());
  } catch (Exception e) {
   try {
                response.getWriter().write("error:" + e.getMessage());
            } catch (IOException e1) {
            }
  }
}

3、jquery 显示年月日，星期，时分秒

参考：http://www.csharpwin.com/dotnetspace/12582r6372.shtml

<!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 runat="server">
<title>未命名頁面</title>

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
setInterval("GetTime()",1000);
})

function GetTime()
{
var mon,day,now,hour,min,ampm,time,str,tz,end,beg,sec;
mon=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
day=new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
now=new Date();
hour = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();
if(hour<10)
{
hour="0"+hour;
}
if(min<10)
{
min="0"+min;
}
if(sec<10)
{
sec="0"+sec;
}
$("#Timer").html("<nobr>"+day[now.getDay()]+","+mon[now.getMonth()]+""+now.getDate()+","+now.getFullYear()+""+hour+":"+min+":"+sec+"</nobr>");
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div style="background: pink; width:200px;" id="Timer">
</div>
</div>
</form>
</body>
</html>

4、页面关闭响应事件

参考:http://blog.csdn.net/sunlylorn/article/details/6603023

onbeforeunload与onunload事件
onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。

5、键盘监听事件：

5.1

//获得焦点
function inputshortcutkey(text){
text.onkeydown = function(){
  event.cancelBubble = true;
  event.returnValue = false;
  var ieKey=event.keyCode;
  if(event.ctrlKey){
   text.value="Ctrl+";
  }else{
   alert('只支持‘Ctrl+数字键’方式');
  }
  if((event.ctrlKey)&&(ieKey>47 && ieKey <58)){
   text.value="Ctrl+"+special_keys[ieKey];
  }else if((event.ctrlKey)&& ieKey!=17 && !((ieKey>47 && ieKey <58))){
   alert('只支持‘Ctrl+数字键’方式');
  }
}

text.onkeyup = function(){
  if (text.value=="Ctrl+"){
   text.value="无";
  }
}
}

6标签页切换的制作

html部分：

js部分：

var $div=$('div.huadong ul>li');
  var len=$div.length;
  var index=($div.filter('.selected').index()+1)%len;
  $div.removeClass('selected').eq(index).addClass('selected');
  $("div.icontent > div").eq(index).show().siblings().hide();

css部分：

.selected{background:url(../images/arrow.gif) no-repeat scroll center 22px;}

.selected div{ background-color:#00f6ff !important;color:#000;}

显示/隐藏面板也很简单

$(".panel").toggle();

7、注意区分js代码和JQuery代码

比如一个checkbox,

<s:checkbox name="111" cssClass="abc" οnclick="checkSelect();" ></s:checkbox> <label>全选</label>

js如下：

$(function(){

$(".allTicketSelect").click(
    function(){
     alert(this.name);
    });

  });

function checkSelect(){
alert(1);
}

onclick里定义的方法是js代码，checkSelect不能定义在Jquery中，而jquery是绑定事件，用这样绑定$(".allTicketSelect").click(function(){});

8、注意js代码和JQuery代码2

方法的定义，最好定在外部，尽量不要定义在$(function(){xxx});里面，因为定义在外部，方法就全局的，执行完就会释放内存，定义在里面，是局部的，会一直保存在内存中，不释放内存。

如下面的例子：

较好的定义方法：

$(function(){
test();
});
</script>

不好的定义方法：

虽然都能够执行，但明显第一个好一点，因为第一个执行完会释放内存，但第二个例子由于是定义在function()里面，是局部的，所以不会释放内存

而且第一个定义在全局的话，js也可以调用的到，但第二个定为局部，外部的就调用不到。

关键就是理清作用域的问题。

liangbinny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery常用代码集锦

1、jquery 显示年月日，星期，时分秒参考：http://www.csharpwin.com/dotnetspace/12582r6372.shtmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
复制链接

扫一扫