jQuery学习笔记——$()工厂函数找你所找

     接触Web开发有段时间了，现在网络早已步入2.0时代，最早的那种如同报纸一样死板的纯静态页面已不能满足现在人们的需要。人们需要的不是和一个死的，没有动感的页面。他们需要的是能给他们带来动感的页面，或者说的直白点，就是有动态效果的页面。说到给页面添加动态效果，首先必然会想到javascript。但它可恼的兼容性问题让我吃足了苦头，开始转而使用jQuery。

  

    jQuery就起根本仍然是javascript。但它为我这种新手缓解了js的浏览器兼容性问题。并且作为一个js库，它的体积的小巧让我着迷。Write less，Do more是它一直坚持的口号。还有一个优点就是当所选取的对象不存在，它不会报错。下面进入正题，首先是下载一个jquery的包，目前的版本是1.3.2。把它放入我们的项目，并在页面head中添加对其的引用

 

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

然后再下面我们就可以开始编写jQuery代码了。

 

    和原生js一样，想要操作具体的一些元素，首先需要找到它或者它们。原生js中最常用的getElementById(),而jQuery为我们提供了$()工厂函数取代前者。工厂函数$()中可以用多种选择器来定位我们所需要的元素们，主要包括了css选择器、属性选择器、自定义选择器等（xpath选择器在1.2版本更新时已经被弃用）。

   

    一、css选择器。

    $('.content')//获取所有class为content的元素

    $('#content')//获取所有id为content的元素

    $('table a')//获取table元素中所有超连接元素

    上述的写法和我们编写css很相似，可以说是基本一样，通过css这样的定义所要选取的元素，形式灵活，也是xpath选择器被弃用的主要原因。

 

    二、属性选择器。

       一般同css选择器结合使用。

       $("div[id=content'']")//获取所有div中有id属性的，并且id为content的div元素。

       有了上面的范例很容易能写出a标签中href为xxxx的a元素。

 

       三、过滤选择器。

       jQuery为了方便一些操作，定义了一些过滤选择器帮助我们更快定位到我们想要的元素。

       例如：odd和even奇偶数选择器

       $('div:odd')//获取div中索引为奇数的div     注：由于行的索引从0开始，所以第一个奇数行是正式页面中的第2行。

       $('div:even')//获取dic中索引为偶数的div

       这样我们可以很容易的作出交错行的特效。

       与此相近还有first（所有选取的元素中第一个元素）、last（最后一个）、only-child（没有兄弟节点的）、nth-child(n)（第n个子节点）等。

 

       单个的选择器所能达到的效果往往不尽如人意，组合使用才是王道。

 

       还有一点需要注意的是$()寻找出来的不完全和getElementById()一样。因为$()寻找出来的是一个jQuery对象，类似一个数组，即使里面元素只有一个，也不能直接给它使用DOM的方法和属性，需要用get(index)或者[index]的方法转换成DOM对象才行。

       方法一、var div = $('div').get(0);//所有div中第一个div的DOM对象

       方法二、var divs = $('div');

                   var div = divs[0];

      

      以上是我学习jQuery的一些学习笔记，如有问题还望各位大家不吝指教。