jQuery库的导入与选择符



本人最近学图灵系列丛书中《jQuery基础教程》,现将相关摘录整理如下(后续章节也会相继整理出来)。





关于库的导入

引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前。否则,在我们编写的代码中将引用不到jQuery框架。

jQuery中基本的操作就是选择文档中的某个部分。这是通过$()结构来完成的。通常,该结构中需要一个字符串参数,参数可以包含任CSS选择符表达式。
$()函数实际上就是jQuery对象的一个制造工厂。jQuery对象中会封装零个或多个DOM元素,并允许我们以多种不同的方式与这些DOM元素进行交互。

.addClass()——加入新类
它会将一个CSS类应用到我们选择的页面部分。该方法唯一的参数就是要添加的类名。.addClass()方法及其反方法.removeClass()为我们探索jQuery支持的各种选择符表达式提供了便利。
值得注意的是jQuery在.addClass()等方法中使用了隐式迭代机制,因此一次函数调用就可以完成对所有选择的文档部分的修改。

 

关于代码的执行
如果将代码插入文档的头部,不会有任何效果。通常情况下JavaScript代码在浏览器初次遇到它们时就会执行,而在浏览器处理头部时,HTML还不会呈现样式。因此我们需要将代码延迟到DOM可用时再执行。
控制Javascript代码何时执行的传统机制是在事件处理程序中调用代码。有许多针对用户发起的事件的处理程序。

在没有jQuery的情况下,我们需要依靠onload处理程序,它会在页面(连同其他包含的所有图像)呈现完成后触发。
所以为了在onload事件中执行修改样式的代码,需要先把代码放到函数中,然后需要修改HTML的<body>标签,将这个函数附加给事件:<body onload="函数名();">——这样当页面加载完后,我们的代码会执行。

但是,上述方法存在很多缺点,(缺点主要为:结构与功能变得紧耦合,导致代码混乱等)。

为了避开这个缺陷,jQuery允许我们使用$(document).ready()结构预定DOM加载完成后(不必等待图像加载完成)触发的函数调用。
因此我们可以在文档头部包含代码,并可以直接写如下代码即可:$(document).ready(函数名)

 

 

关于选择符

有三种基本的选择符:标签名ID。这些选择符可以单独使用,也可以与其他选择符组合使用。

选择符                                               CSS                                   jQuery                                    说明
标签名                                                P                                       $(‘p’)                               取得文档中所有的段落
ID                                                     #some-id                        $(‘#some-id’)                    取得文档中ID为some-id的一个元素
类                                                     .some-class                     $(‘.some-class’)            取得文档中类为some-class的所有元素

 

将方法连缀到$()工厂函数后面,包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说,这样就避免了使用for
循环之类的显示迭代。

 

负责任的jQuery开发者应该在编写自己的程序时,始终坚持渐进增强和平稳退化的理念,做到在Javascript禁用时页面仍然能够
与启用时一样准确地呈现。

 

属性选择符 属性选择符石CSS选择符中特别有用的一类选择符。通过HTML元素的属性选择符元素,例如链接的title属性或图像的alt属性。
例如,要选择带有alt属性的所有图像元素,可以使用以下代码:
$(img[alt])

属性选择符允许以类似正则表达式的语法来标识字符串的开始(^)和结尾($)。而且,也可以使用星号(
)表示位于字符串中
任意位置的值,使用叹号(!)表示取相反的值。

比如:给所有电子邮件链接添加类:
代码:$(‘a[href^=mailto]’).addClass(‘mailto’);

要为所有指向PDF文件的链接添加类:
代码:$(‘a[href$=.pdf]’).addClass(‘pdflink’);

属性选择符也可以组合使用,例如,可以为href属性既为以http开头且任意位置又包含henry的所有链接添加一个类:
代码:$(a[href^=http][href=henry]).addClass(‘henrylink’);

自定义选择符 自定义选择符的语法与CSS中的伪类选择符语法相同,即选择以一个冒号(:)开头。
注意,javascript中的数组从0开始编号,而CSS则是从1开始编号的。

jQuery库中有两个非常有用的自定义选择符是:odd和:even。
例如:要为一个表格的所有的偶数行增加一个灰色的背景色(奇数行为无背景色)可以写下面这句代码:
$(‘tr:odd’).addClass(‘alt’);  ——alt是一个CSS类;
注意:为什么争对偶数行使用:odd选择符呢?很简单,:eq()选择符、:odd和:even选择符都使用Javascript内置从0开始的编号
方式。不过要注意的是,如果一个页面上存在多个表格,比如一个表格的最后一行拥有白色背景,所以下一个表格的第一行
就会带有“另一种”浅灰色背景。(jQuery默认去遍历页面中所有的“tr”并一直使用:odd机制去添加背景色)
解决的办法是使用:nth-child()选择符。这个选择符可以接受一个数值、odd或even作为参数。值得一提的是,:nth-child()
是jQuery中唯一从1开始计数的选择符。所以要让一个页面上所有的表格效果一致,可以用下面这句代码来代替上面一句:
$(‘tr:nth-child(even)’).addClass(‘alt’);

 

*contains——自定义选择符
假如出于某种原因,我们希望突出显示提到的任何一种特定的字符串所处的表格单元,并为此添加特定的样式,假设样式类为:
.highlight,我们可以使用contains选择符:
$(‘td:contains(Henry)’).addClass(‘highlight’);
有一点需要注意的是:contains()选择符区分大小写

$(‘tr:odd’).addClass(‘alt’);  的等价表达方式为: $(‘tr’).filter(‘:odd’).addClass(‘alt’);
这两种取得元素的方式在很大程度上可以互为补充。同样,.filter的功能叶十分强大,因为它可以接受函数参数。通过传入
的函数,可以执行复杂的测试,以决定相应元素是否应该保留在匹配的集合中。假如,我们要为所有外部链接添加一个类。
我们可以这样实现:
$(‘a’).filter(function{
 return this.hostname && this.hostname !=location.hostname;
}).addClass(‘external’);
第二行代码可以筛选出符合下面两个条件的<a>元素:
(1)必须包含一个带有域名(this.hostname)的href属性,这个测试可以排除mailto及类似链接。
(2)链接指向的域名(还是this.hostname)必须不等于页面当前所在域的名称。
更准确地说,.filter()方法会迭代所有匹配的元素,基于每个元素测试函数的返回值。

.next()方法:
.next()方法只有选择下一个最接近的同辈元素。

.nextAll()用于返回其后所有的同辈元素。

其中它们分别对应.prev()和.prevAll()。此外,.siblings()能够选择处于相同DOM层次的所有其他元素,无论这些元素处于当前
元素之前还是之后。

要在这些筛选的其他单元格中再包含原来的单元格,可以添加.andSelf()方法:

.parent()方法在DOM中上溯一层,

.children()选择该行所有的单元格。

我们仍然有需要在代码中直接访问DOM元素的时候,访问DOM中的元素,可以使用get()方法,要访问jQUery对象引用的第一个元素,可是使用get(0)。如果需要在循环中使用DOM元素那么应该使用.get(index)。因而如果想知道带有id="my-element"属性的元素的标签名,可以使用如下代码:
var a= $(‘#hello’)[0].tagName;  或者  var b= $(‘#hello’).get(0).tagName;



版权声明:本文为博主原创文章,未经博主允许不得转载。