JQuery基础之(三)JQuery选择器

一、    前言

本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量.

编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步.

 

二、    区分DOM对象 与 JQuery包装集对象

无论是在写程序还是看API文档,  我们要时刻注意区分Dom对象和jQuery包装集.

1)       DOM对象

在传统的JavaScript中我们通过下面的方法获取DOM对象：

            var div = document.getElementById("divId");

    var divs =  document.getElementsByName("divName");

另外在事件函数中, 可以通过在方法函数中使用this引用事件触发对象(但是在多播事件函数中IE6存在问题), 或者使用event对象的target(FF)或srcElement(iIE6)获取到引发事件的Dom对象。

DOM对象的属性如下，只要是DOM对象，在操作时都会弹出这些属性：

 

 

2)       JQuery包装集对象

jQuery包装集可以说是Dom对象的扩充，然后在这个扩充的程序集中提供更多更方便的函数和属性。在jQuery的世界中将所有的对象, 无论是一个还是一组, 都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:

var jQueryObject = $("#testDiv");

jQuery包装集都是作为一个对象一起调用的. jQuery包装集拥有丰富的属性和方法

 

3)       DOM对象与JQuery对象之间的转换

                        i.              DOM对象转JQuery对象

        var div = document.getElementById("divId");

        var domToJQuery = $(div);

 

                       ii.              JQuery对象转DOM对象

jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:

var domObject = $("#testDiv")[0];           //注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象!

      或者

        var divs = $("div");

        divs.each(function(){

            alert(this.id);

            alert($(this).html(“这样又是JQuery对象了”));           //$(this)又将DOM转为JQuery对象

        });

jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素

 

三、    JQuery选择器

在Dom编程中我们只能使用有限的函数根据id或者TagName获取Dom对象.

在jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回.

首先来看看什么是选择器:  

var divs = $("div");

 

官方提供的选择器非常非常多，这里只列出了最基本最常用的，如果有特殊的需求，请到官方文档参考，地址如下：

jQuery官方API: http://docs.jquery.com/

中文在线API: http://jquery.org.cn/visual/cn/index.xml

中文jQuery手册下载: http://files.cnblogs.com/zhangziqiu/jquery_api.rar

 

基础选择器：

名称	说明	举例
#id	根据元素Id选择	$("divId") 选择ID为divId的元素
element	根据元素的名称选择,	$("a") 选择所有<a>元素
.class	根据元素的css类选择	$(".bgRed") 选择所用CSS类为bgRed的元素
*	选择所有元素	$("*")选择页面所有元素
selector1, selector2, selectorN	可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.	$("#divId, a, .bgRed")