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

时间: 2024-08-04 15:19:25

jQuery库的导入与选择符的相关文章

jQuery选择符介绍 jQuery选择符怎么用

jQuery选择符介绍 1.CSS选择符 如: $('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li). $('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项. 2.jQuery库支持XPath选择符 如: 3.$('a[@title]')为取得所有带title属性的链接.也可以不用@符号. 如: 4.$('div[ol]')为取得所以包含一个ol属性的div元

jQuery的nth-child(N)选择符

说说nth-child(an+b). nth-child()这个东西,是CSS3中的一个伪类选择符,jQuery也拿来用了. 国内翻译教材<jQuery基础教程>中有一句这样的翻译"......因此CSS选择符$('p:nth-child (1)')取得的是作为其父元素第1个子元素的所有p."初读此句,总觉得不易理解,于是便有了google 的冲动(在这里要强烈BS一下教育网,网速慢的比蜗牛还慢,打开google都要等半天,下载基本围绕在 1Byte/5s左右,jQuery

jquery选择符快速提取web表单数据示例

 遇到要重复多次同样的事时,就想找一种省时省力的方法,下面就为大家介绍下利用jquery选择符快速提取web表单数据 本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法.    以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法

初窥JQuery(一)jquery选择符 必备知识点_jquery

本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的

JQUERY的属性选择符和自定义选择符使用方法(二)_jquery

例子:给链接中含用"wangorg"字符的链接文字加粗 css: 复制代码 代码如下: .abold{ font-weight:bold; } html: 复制代码 代码如下: $('document').ready(function(){ $('a[href*=wangorg]').addClass('abold'); }) 属性选择也可以用组合方式: $('a[href^=http] [href*=wangorg]').addClass('abold') 自定义选择符是JQUERY

jQuery代码优化 选择符篇_jquery

本文就从选择符的角度简单探讨一下优化jQuery代码的问题. Sizzle的运行机制 jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎.当我们把一个选择符表达式(比如"#id".".class".":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度.以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述

jQuery 关于伪类选择符的使用说明_jquery

   jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符   :nth-child的用法         nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:"匹配其父元素下的第N个子或奇偶元素".读着感觉有点绕口,下面让我们通过例子来说明: 复制代码 代码如下: <div>    <ul>   

jquery选择符快速提取web表单数据示例_jquery

本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法. 以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法. 我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name

很容易学习的JQuery库 : (一) 简介

jQuery 是一个 JavaScript 库: jQuery 极大地简化了 JavaScript 编程: jQuery 很容易学习. 上面的三句话是结合最近的学习整理后的心得,个人感觉可以很好地解释JQuery. 是什么      jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库.      jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).      jQu