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;




原文发布时间为:2010-04-24


本文作者:vinoYang


本文来自云栖社区合作伙伴CSDN博客,了解相关信息可以关注CSDN博客。

目录
相关文章
|
设计模式 JavaScript 前端开发
|
JavaScript 前端开发
JavaScript常用库—jQuery
jQuery的核心特性可以总结为具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
216 0
JavaScript常用库—jQuery
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
41 3
|
1月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
12 0
|
3月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
84 4
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
33 0
|
6月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
78 0
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
89 0
|
Web App开发 JavaScript
Chrome控制台引入js库jQuery为例
Chrome控制台引入js库jQuery为例
497 0