近期工作总结之Jquery篇

最新推荐文章于 2024-04-30 13:43:00 发布

Jacy_Young

最新推荐文章于 2024-04-30 13:43:00 发布

阅读量366

点赞数

分类专栏： Ajax 文章标签： jquery 工作 function dwr ajax ajax框架

本文链接：https://blog.csdn.net/Jacy_Young/article/details/5150490

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于jQuery以前的确没用过，用惯了DWR刚开始接手还真有点不习惯。但东西都是靠自己学的2个多月下来，本人差不多也对jQuery有所了解了，特在此总结一番。希望大家多多指点哦！！Let's Go !

其实，在当今Ajax技术兴起的时代。简直是群雄并起，与之相关的技术框架可谓举不胜举：前有prototype、DwR后者中出类拔萃的就属jQuery了。但其实他们无非都是为了Ajax技术的实现，在此本人发现了他们的一个共同点。那就是在获取页面对象的时候，无论prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的jQuery别出心裁是这样搞滴：

　var someElement = $("#ElementId"); 简洁、方便。

除了获取Dom对象简洁外，jquery也提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单：var element=$("#Dom对象id") 这样就行了。

此外jQuery还提供了一种页面加载时调用JavaScript函数的方式如下：

$(document).ready(function(){

　　alert("hello");

　　}); (1)

　　<body οnlοad="alert('hello');"> (2)

(1)和(2)一个效果！

      另外让本人感觉比较爽的就是jQuery的遍历了，这是我项目中的一段代码：
$("#frameId").contents().find("input[type='checkbox']").each(function(){
    if($(this).attr("checked")==true)
    {
      msgId = $(this).attr("value");
     i++;
           }
})

上面这段代码有两点是比较令本人Happy的：那就是：

1.find("input[type='checkbox']") ——>jQuery提供的find()方法可将同一文本中所有 ("input[type='checkbox']") ，这样的Dom对象找到，即遍历整个页面找到说有复选框。

2.each(function(){......}) ——>jQuery提供的each()方法可用于集合的遍历，也是本人最喜欢用的一种形式。

。。。。

算了，这些都是jQuery在JavaScript处理Dom对象上的简化。像这样细节上的小方便jQuery还有很多你还是自己去发掘吧，偶实在不想举下去了。来说说重头吧！！！

竟然是Ajax框架，那就不得不重点说说jQuery在Ajax技术上的优势了，一句话牛X！！！

说他牛X，主要是因为他在Ajax上的实现着实让本人吃惊：快、准、稳！！！比起以前用的那繁琐的DWR不知要强上多少倍。。来看看这段代码：

function query()
{

var msgId = $("#msgId").val();
var msgFmt= $("#msgFmt").val();
var select = $("#frameId").contents().find("select");
maxRows = select.val();
if(maxRows== null||maxRows=='undefined')
{
maxRows = 15;
}
var parameterString = 'tableId_p=1&tableId_mr_='+maxRows +'&tableId_tr_=true';

url = "${pageContext.request.contextPath}/getStlMsgInfo.action?";
url += "tblStlMsgInfo.msgId=" + msgId;
url += "&tblStlMsgInfo.msgFmt="+msgFmt;
url += "&" + parameterString;
url += '&anticache=' + Math.floor(Math.random()*1000);

/
$.get(url, function(data) {
  frameReload();
    });
}

前面的都可以pass掉，主要就这个 $.get((url, function(data) {
  frameReload();
    });

就这简简单单的一句便实现了，frameReload的异步调用。哎！╮(╯▽╰)╭ ！！

这种事get方式提交，也可用post方式：

$.post((url, function(data) {
  frameReload();
    });

都一个样。get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。

另外还有一种在指定的Dom对象上绑定响应ajax执行的事件的写法如：

$("#msg").ajaxStart(function(){

　　this.html("正在加载。。。。");

　　});

　　$("#msg").ajaxSuccess(function(){

　　this.html("加载完成！");

　　});

这些都是jQuery在Ajax上的体现。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去多多研究。

由于本人也是现学现用，所以理解有限，希望大家能够多多交流，多多指点。这样才能共同进步嘛！

通过2个多月的学习和应用本人对jQuery也有一定的感觉：

1.上手快，容易理解（也许本人以前用过DWR，O(∩_∩)O~ ！）

2.功能强大，提供了许多有用的函数（本人也只是用过其中的小部分，更多期待你的发掘。记得分享哦！！）

3.实现Ajax异常简单，比起DwR。。。

4.有許多成熟的插件供选择。

5.Query能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需定義id即可

6.与其它框架如（Struts、Spring、hibernate、iBATIS）都能很好的集成

。。。

Jacy_Young

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
近期工作总结之Jquery篇

关于jQuery以前的确没用过，用惯了DWR刚开始接手还真有点不习惯。但东西都是靠自己学的2个多月下来，本人差不多也对jQuery有所了解了，特在此总结一番。希望大家多多指点哦！！Lets Go ! 其实，在当今Ajax技术兴起的时代。简直是群雄并起，与之相关的技术框架可谓举不胜举：前有prototype、DwR后者中出类拔萃的就属jQuery了。但其实他们无非都是
复制链接

扫一扫