JQuery意义 - Why?
为什么要使用JQuery,从我个人来说,就是这么几点:简化代码 + 统一行为 + 功能强大 + 搭配方便。
简化代码是从写代码的角度来说的,实现同样的功能,如果用JavaScript内置对象和函数去完成的话,需要写很多代码,而使用JQuery这种类库却很简洁,下面的例子会体现出来。
统一行为是从浏览器的兼容性的角度来说的,实现一个行为,如果用JavaScript内置对象和函数去完成的话,需要处理很多的兼容性问题,这个在前面我们已经见识过了,使用JQuery这种类库,我们就不需要(或者说不总是需要)去考虑兼容性问题了。
功能强大是从JQuery提供的功能的角度来说的,在众多的类库中,无疑JQuery提供了最为全面的功能,这一点促使它甚至成为了微软的御用类库,默认加到了Web工程中,不仅如此,只要是使用类库的网站,大部分选择的都是JQuery,在网站开发中使用JQuery基本变成了固定的模式。
搭配方便是从JQuery与其它的类库配合使用的角度来说的,使用JQuery这种以提供行为为主的类库配合上Bootstrap这类以提供布局为主的类库,简直可以说是页面开发的通吃组合。再加上另外两个兄弟,形成的"JQuery+Bootstrap+AngularJS+NodeJS"开发模式,几乎成为了当今最为热门的开发方式(最起码兄弟我是这么认为的)。
JQuery引用 - Where?
引用一个类库的方式大家已经很熟悉了,不再多说:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
这是引用CDN上的文件,通常大家也会把这个类库下载下来放到本地,然后引用。
不管引用的这个文件是哪的,上面这行代码基本上都是放到页面尾部。把脚本放到页面尾部可以提高页面的加载速度,这也是基本常识了。
JQuery对象 - What?
JQuery最重要的概念,就是jQuery对象。它是一个全局对象,可以简写为美元符号$。也就是说,jQuery和$两者是等价的(下面的例子中使用的都是美元符号$,不过很多人认为,为了不和其它类库中定义的$函数冲突,最好还是使用jQuery函数)。
在网页中加载JQuery函数库以后,就可以使用jQuery对象了。JQuery全部的方法,都定义在这个对象上面。所以使用JQuery类库的第一步自然是获取jQuery对象。
前面我们讲DOM的时候说过,为了操作DOM,必须对HTML元素进行抽象,得到对应的JavaScript中的DOM对象,这样才能通过这些对象操作HTML。
同样的道理,jQuery对象就是所有HTML元素在JQuery类库中的抽象,所有的相关方法自然是定义在这个对象上。
当我首次使用JQuery的时候,我一直对$(selector)心存困惑,直到很久之后,我才豁然开朗,原来jQuery对象就是通过这个函数获取到的,函数的参数决定了获取到的jQuery对象。不过jQuery对象一不是一般的对象,它是包装了满足参数条件的所有DOM对象的一个类似于数组的对象,这是很重要的一个特征。
到这里,我们就有必要分清两个概念了:JQuery对象与DOM对象。
通过上面我们知道它们都是JavaScript中的对象,具有不同的方法集。DOM对象通过document获得,然后可以执行相关的操作;JQuery对象通过$()函数获得,然后可以执行相关的操作。
于是同样是在浏览器中编程,那么不可避免的,我们有时候是使用DOM编程,有时候是使用JQuery编程,这就涉及到了DOM对象与JQuery对象的转换,通常来说有如下方式:
从DOM对象转为JQuery对象,这个很简单,因为$函数的参数支持DOM对象直接传进来:
var domObj = document.getElementById(‘testDiv‘); var jQueryObj = $(domObj);
而JQuery对象作为一个DOM对象的包装集,使用索引值的方式获取的就是DOM对象,如下面例子中的获取第1个元素:
var domObj = $(‘#testDiv‘)[0]; var domObj = $("#testDiv").get(0);
当然了,JQuery对象枚举的时候返回的也是DOM对象,如下所示:
$("#testDiv").each(function() { alert(this); });
这个例子中的this就是DOM对象。
JQuery模式 - How?
使用JQuery的步骤是:获取JQuery对象,执行相关操作。概括起来就是:
$(selector).action(parameters);
下面分别看看这两个部分:
1. 获取JQuery对象的途径 - 选择器selector
下面我们就来看看selector这个参数;selector参数可以是一个字符串,也可以是DOM对象。
使用DOM对象作为参数的话就是直接把DOM对象转换成jQuery对象,这个在上面已经总结过了。
字符串形式的selector是最主要的使用方式,它可以是下列的各种形式:
1)CSS选择器语法
这里只是给出一些常见的选择器的例子,完整的选择器列表参看后面的参考文档:
// 基础选择器 $(‘#testDiv‘) // 选择id为testDiv的元素,一般id在整个页面是唯一的 $(‘p‘) // 选择页面中所有的p元素 $(‘.big‘) // 选择页面中所有的CSS类为big的元素 // 选择器的与或关系 $(‘.big,p‘) // 选择页面中所有CSS类为big的元素和所有的p元素 $(‘p#testDiv‘) // 选择页面中所有的CSS类为big的p元素 // 层次选择器 $(‘form input‘) // 选择页面中所有的form元素下面的所有的input元素 $(‘form>input‘) // 选择页面中所有的form元素下面直接属于form的input元素 $(‘#name+img‘) // 选择页面中id为name的元素后面紧跟着的img元素 $(‘#name~img‘) // 选择页面中id为name的元素后面所有的img元素 // 各种条件的过滤器:索引值,内容过滤,属性过滤,子元素过滤 $(‘tr:first‘), $(‘tr:last‘) // 选择第一行/最后一行表格 $(‘input:not(:checked)‘) // 选择页面中没有被checked的input,not后面的参数可以是任意的选择器 $(‘tr:even‘), $(‘tr:odd‘) // 偶数行/奇数行 $(‘tr:eq(1)‘),$(‘tr:gt(1)‘), $(‘tr:lt(1)‘) // 满足条件的第二行/第二行后面的/第二行前面的 $(‘:header‘) // 所有h1, h2, h3元素 $(‘div:not(:animated)‘) // 所有没有在执行动画效果的div $("div:contains(‘Name‘)") // 所有内容中含有Name字符串的div $(‘div:has(p)‘) // 所有含有p元素的div $(‘tr:hidden‘), $(‘tr:visible‘) // 隐藏/显示的行 // 所有有id属性的div/id值为name的div/id值不为name的div $(‘div[id]‘), $("div[id=‘name‘]"), $("div[id!=‘name‘]") // 所有id属性值以name开头/结尾/包含name的div $("div[id^=‘name‘]"), $("div[id$=‘name‘]"), $("div[id*=‘name‘]") // 满足多个属性条件的div $("div[id=‘name‘][name$=‘man‘]") // 在每个ul中查找第2个li,nth-child后面的参数可以是even, odd, index值, 倍数如3n, 3n+1等等。 // 注意这个参数是从1开始的,而eq()是从0开始的。 $(‘ul li:nth-child(2)‘) // 在每个ul的子元素中中查找第一个/最后一个li $(‘ul li:first-child‘), $(‘ul li:last-child‘) // 表单选择器与过滤器: // 选择所有的input/text/password... $(‘:input‘), $(‘:text‘), $(‘:password‘), $(‘:radio‘), $(‘:checkbox‘) $(‘:button‘), $(‘:submit‘), $(‘:image‘), $(‘:reset‘), $(‘:file‘) // 选择启用/禁用/checked/选中的input,option $(‘:input:enabled‘), $(‘:input:disabled‘), $(‘:input:checked‘), $(‘select option:selected‘)
2)字符串形式的元素
如果直接在jQuery构造函数中输入HTML代码,返回的也是jQuery实例。
$(‘<li class="greet">test</lt>‘)
上面代码从HTML代码生成了一个jQuery实例,它与从CSS选择器生成的jQuery实例完全一样。唯一的区别就是,它对应的DOM结构不属于当前文档。
3)函数的第二个参数 - 限制查找范围
默认情况下,jQuery将文档的根元素(html)作为寻找匹配对象的起点。如果要指定某个网页元素(比如某个div元素)作为寻找的起点,可以将它放在jQuery函数的第二个参数。
$(‘li‘, someElement);
上面代码表示,只寻找属于someElement对象下属的li元素。someElement可以是jQuery对象的实例,也可以是DOM对象。
如果还以我们前面的DOM操作那一篇中长途查找与短途查找的分类来看,上面使用选择器的方式显然是属于长途查找的一种。
下面来看看短途查找的方式,这个和前面一样,事先要获取到一个jQuery对象,然后基于这个对象,再进一步缩小查找的范围(当$函数指定第二个参数的时候,也可以缩小查找范围,从这个方面来说,这种也算是短途查找吧),看例子:
// first方法返回结果集的第一个成员,last方法返回结果集的最后一个成员。 $("li").first() $("li").last() // next方法返回紧邻的下一个同级元素,prev方法返回紧邻的上一个同级元素。 // 如果next方法和prev方法带有参数,表示选择符合该参数的同级元素。 $("li").first().next() $("li").last().prev() $("li").first().next(‘.item‘) $("li").last().prev(‘.item‘) // parent方法返回当前元素的父元素,parents方法返回当前元素的所有上级元素(直到html元素)。 // parent, parents, children这三个方法都接受一个选择器作为参数。 $("p").parent() $("p").parent(".selected") $("p").parents() $("p").parents("div") // children方法返回选中元素的所有子元素。 $("div").children() $("div").children(".selected") // 等同于 $(‘div > *‘) $(‘div > .selected‘) // siblings方法返回当前元素的所有同级元素。 $(‘li‘).first().siblings() $(‘li‘).first().siblings(‘.item‘) // nextAll方法返回当前元素其后的所有同级元素,prevAll方法返回当前元素前面的所有同级元素。 $(‘li‘).first().nextAll() $(‘li‘).last().prevAll()
当然除了这些与DOM操作类似的获取parent, child, sibling(兄弟节点)的操作外,JQuery还提供了其它的一些相当强大的过滤操作,例如:
// closest方法返回当前元素,以及当前元素的所有上级元素之中,第一个符合条件的元素。 // find方法返回当前元素的所有符合条件的下级元素。 $(‘li‘).closest(‘div‘) $(‘div‘).find(‘li‘) // add方法用于为结果集添加元素。 $(‘li‘).add(‘p‘) // addBack方法将当前元素加回原始的结果集。 $(‘li‘).parent().addBack() // end方法用于返回原始的结果集 $(‘li‘).first().end() // filter方法用于过滤结果集,它可以接受多种类型的参数,只返回与参数一致的结果。 // 返回符合CSS选择器的结果 $(‘li‘).filter(‘.item‘) // 返回函数返回值为true的结果 $("li").filter(function(index) { return index % 2 === 1; }) // 返回符合特定DOM对象的结果 $("li").filter(document.getElementById("unique")) // 返回符合特定jQuery实例的结果 $("li").filter($("#unique")) // not方法的用法与filter方法完全一致,但是返回相反的结果,即过滤掉匹配项。 $(‘li‘).not(‘.item‘) // has方法与filter方法作用相同,但是只过滤出子元素符合条件的元素。 $("li").has("ul") // 上面代码返回具有ul子元素的li元素。
上面代码中的需要说明两点:
第一点,例子中的find方法,选中所有div元素下面的li元素,等同于$(‘li‘,‘div‘)。由于这样写缩小了搜索范围,所以要优于$(‘div li‘)的写法。
第二点,是这种"$(‘li‘).last().prevAll()"链式调用,每个jQuery对象的方法结束时都会返回当前的jQuery对象,所以可以直接把方法串起来这样调用。
选择器的知识就总结这些了,用好选择器是JQuery的核心,兄弟我还需努力。
参考资料:
JQuery官方网站:http://api.jquery.com/
JQueryUI官方网站:http://jqueryui.com/