JQuery前奏：特性简介

迫于JQuery强大的噱头（玩笑话O(∩_∩)O~），本人也开始着手学习，继上篇介绍了几款优秀的js框架，这篇将对JQuery核心特性进行简单记录。

一、JQuery框架的核心就是从HTML文档中匹配元素并对其进行操作。JQuery通过封装js的原生方法，模拟了一套CSS选择器，甚至定义了完整的XPath语言的选择能力，在一定程度上简化了js的操作。另外JQuery还解决了跨浏览器的兼容问题，使DOM操作趋于统一，许多让开发者头痛的事件处理，样式设计等兼容问题变得轻松，方便。总的说来JQuery有以下几个优点：

体积小，使用灵活。
丰富的DOM选择器（CSS1~3，XPath）
跨浏览器（IE6，FF，Safari，Opera等）
链式代码。
强大的事件、样式支持。
强大的ajax能力
易于扩展，插件丰富。

二、下面挑选几个特性简单介绍下。

（1）jquery构造函数：jquery把所有的操作都包装在一个jQuery()函数中，形成了统一（也是唯一）的操作入口，这就为jquery操作降低了门槛。jquery狗仔函数能够接受任意类型的数据，但是能够解析的包括以下四种。

　　①jquery(expression,context)

　　jQuery("Div#wrap>p:first").addClass("red")

　　②jQuery(html)
　　$('ul').append($'<li>new item</li>')

　　③jQuery(element)
　　$(document).ready(function(){
　　　　$('ul').css('color','red');
　　})

　　④jQuery(fn)
　　$(function(){
　　　　$('ul').css('color','red');
　　})

（2）jquery链式语法：它允许用户进行连续设计各种行为，从而实现按人的惯性思维进行快速开发。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6     .panel
 7     {
 8         padding:60px;
 9         background-color:Red;
10         color:#FFFFFF;
11         font-size:50px;
12         font-weight:bold;
13         width:600px;
14         text-align:center;
15         }
16     </style>
17     <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
18     <script type="text/javascript">
19         $(function () {
20             //第一行代码添加四个按钮
21             $('<input type="button" value="click me" /><input type="button" value="triggle clickme" /><input type="button" value="detach handler" /><input type="button" value="show/hide text" />').appendTo($('body'));
22             //第二行，分别选中四个按钮，并为他们绑定不同的事件处理函数
23             $('input[type="button"]')
24             .eq(0).click(function () { alert('you clicked me!'); }).end()//找到第一个按钮，并为其绑定click事件处理函数，然后返回所有按钮，供下一次查找
25             .eq(1).click(function () { $('input[type="button"]:eq(0)').trigger('click'); }).end()
26             .eq(2).click(function () { $('input[type="button"]:eq(0)').unbind('click'); }).end()
27             .eq(3).toggle(function () { $('.panel').hide('slow'); }, function () { $('.panel').show('slow'); });
28         });
29     </script>
30 </head>
31 <body>
32 <div class="panel">Welcome To JQuery！</div>
33 </body>
34 </html>

（3）jquery之所以让人爱不释手，原因在于其强大的选择器表达式。

　　关于选择器，我们在后续的学习中无时无刻不跟其打交道，后续再讲。

（4）扩展性。