一、说明
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/
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
