开发者社区> nicenelly> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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博客。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《扩展 jQuery》——第2章 第一个插件2.1 jQuery的架构
jQuery是一个可以使得与网页上元素交互更容易的JavaScript库。它通常被用于通过直接选择或者遍历DOM来查找元素,然后在这些元素上应用一些功能。开发者可以添加或删除这些元素,或者改变它们的属性,还可以为它们添加事件处理器用来响应用户的动作。开发者也可以随着时间推移改变元素的属性来产生动画。
1120 0
《扩展 jQuery》——第6章 函数插件 6.1定义插件
基于5.5.2节中描述的本地化方案,这个工具假定相关的JavaScript文件只由它们的语言或地区码来区别。当发生请求时,这个插件以语言和地区码的升序来加载这些文件,每个都覆盖前一个,这样能得到给定的语言和地区的最佳匹配结果。
1370 0
【jQuery 冻结任意行列】冻结任意行和列的jQuery插件
  实现原理: 创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆。例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格的上层。
2433 0
16款最佳的 jQuery Time Picker 时间选择插件
  jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站。网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件。 在这里,我们收集了最好的一组 jQuery 时间选择器插件列表分享给大家。
1725 0
使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框
这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexselect。
1326 0
+关注
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载