一、说明
jQuery是近来在国外比较火的一个客户端JavaScript框架,特别是一些有关于ASP.NET MVC框架的增强探讨方面,经常见到它的身影。这个框架在诸多方面简化了使用 JavaScript操作 客户端DOM元素的方式,能够快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。 而且,又有许多开发人员在其上开发出了 jQuery 插件,还有各种各样的UI库。这些UI库支持基本的鼠标互动操作,例如拖拽,排序,选择,缩放等;此外,还支持各种互动效果,例如手风琴式的折叠菜单、日历、对话框、滑动条、表格排序、页签、放大镜效果、阴影效果,等等。此外,对于目前流行的Ajax技术也提供了有力的支持。为此,有必要作一些简单学习。无奈学习内容甚多,只好作备忘于此。
二、关于语法选择器及举例
在Jquery框架的学习过程中,首先引起你注意的是其特别的语法表达形式。其中,它所提供的(或新发明的)语法选择器功能强大。
首先看一段代码:
$(document).ready(function() { $(”a”).click(function() { alert(”Hello world!”); }); });
在这段代码中,ready事件是处理HTML文档的开始,jQuery会在DOM载入后开始执行事件,可以由多个ready事件,jQuery会生成一个由ready事件组成的readyList,然后在DOM载入后开始按照list中的顺序,执行所有的ready事件。
特别值得注意的是,$(”a”) 正是一个jQuery选择器!!!现在,它选择所有的a标签,$号是jQuery “类”(jQuery “class”)的一个别称(jQuery里的代码:var $ = jQuery;),因此$()构造了一个新的jQuery对象(jQuery object)。函数click()是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法。该段代码等同于在所有标签里面加上onclick事件。和LINK效果相同。
归纳来看,函数$(...)主要有如下四种类型的传入参数:
1.$(html)--根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素。例:$(”
Hello
2. $(elements)--为一个或多个DOM元素捆绑jQuery功能。这个函数也可以接收XML文档和Window对象作为有效的参数。例:一段HTML代码如下:
one
two
three
two
3.$(fn)--$(document).ready()的简写方式,允许你绑定一个在DOM文档载入完成后执行的函数。
4.$(expr, context)--第二个参数是可选的。如果不指定范围,jQuery会把范围指定为整个document()。这个函数接收一个包含CSS或基本的XPath选择符的字符串,然后用这个字符串去匹配一组元素。jQuery的核心功能都是通过这个函数实现的。这个函数最基本的用法就是向它传递一个表达式,然后根据这个表达式来查询所有匹配的元素。例:$(”input:radio”, document.forms[0]),其作用是在文档的第一个表单中,搜索type值为radio的input元素。
在jQuery的官方支持网站http://docs.jquery.com/DOM/Traversing/Selectors处还有更多关于选择器的大量的例子供你参考。
下面选出几个比较有代表的例子,再看看:
[例一]
$(document).ready(function() {
$(”li”).not(”[ul]“).css(”border”, “1px solid black”);
});
其中,not()则用来取消所有符合过滤表达式的被选择项。上面的代码选择所有的没有ul子元素的li元素,然后再加给选中的元素上一个宽度1像素的边。
[例二]
$(document).ready(function() {
$(”a[@name]“).background(”red”);
});
选择所有的带有name属性的链接,并修改其颜色。
[例三]$(document).ready(function() {
$(”a[@href*=/content/gallery]“).click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
其中“ *= ”的意思是部分匹配。[例四]
$(’#faq’).find(’dd’).hide().end().find(’dt’).click(function() {
var answer = $(this).next();
if (answer.is(’:visible’)) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
利用end()方法,第一次find()方法会结束(undone),所以我们可以接着在后面继续find(’dt’),而不需要再写$(’#faq’).find(’dt’)。这段代码将所有的dd节点隐藏,并在dt节点上加上对应的事件。slideUp和slideDown是jQuery节点的库函数,能改变选中的节点的display属性。
三、小结如今的Web新技术层出不穷,可谓“长江水后浪推前浪,尘世间一代新人换旧人”。 前两三年里各种Ajax框架争相涌现,特别是 微软基于 开源思路推出的ASP.NET AJAX框架赢得了ASP.NET平台的半壁江山。如今微软又推出一个ASP.NET MVC新的开发ASP.NET应用程序的架构技术,而且被宣布为ASP.NET表单技术的重要候选和开发大型ASP.NET应用的重点推荐框架。于是,ASP.NET AJAX服务器端重要控件ScriptManager和UpdatePanel以其“笨拙臃肿”受到严重的冲击。这不,近几个月有关增强ASP.NET MVC AJAX支持技术的研究又逐渐引发众多开发人员的兴趣。而新出现的 jQuery框架也自然成为这种增强ASP.NET MVC AJAX支持技术研究的焦点之一。
先写这些,后面抽时间我一定好好地学习一下JQuery框架,至少因为javascript及DOM技术是开发日渐占主流的Web应用的重要基础课程之一吧。
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/9474419/viewspace-469886/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/9474419/viewspace-469886/