关于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)都能很好的集成
。。。