jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

第1章 认识jQuery

jQuery有以下优势:

  • 轻量级;
  • 强大的选择器;
  • 出色的DOM操作的封装;
  • 可靠的事件处理机制;
  • 完善的Ajax;
  • 不污染*变量;
  • 出色的浏览器兼容性;
  • 链式操作方式;
  • 隐式迭代;
  • 行为层与结构层的分离;
  • 丰富的插件支持;
  • 完善的文档;
  • 开源。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

在jQuery对象中无法使用DOM对象的任何方法。同样,DOM对象也不能使用jQuery里的方法。

jQuery对象和DOM对象的相互转换

       如果获取的对象是jQuery对象,那么在变量前面加上$,例如:

var $variable = jQuery对象;

如果获取的是DOM对象,则定义如下:

var variable = DOM对象;

(1)jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。

(2)对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方式为$(DOM对象)。

通过以上的方法,可以任意地相互转换jQuery对象和DOM对象。

解决jQuery和其他库的冲突

(1)jQuery库在其他库之后导入

在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数类将变量$的控制权移交给其他JavaScript库。

(2)jQuery库在其他库之前导入

如果jQuery库在其他库之前就导入了,那么可以直接使用“jQuery”来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。

第2章 jQuery选择器

jQuery选择器的优势

  • 简洁的写法
  • 支持CSS1到CSS3选择器
  • 完善的处理机制

使用jQuery获取网页中不存在的元素也不会报错,这能避免某些错误。

需要注意的是,例如,$(‘#tt’)获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否处在时,不能使用以下代码:

if( $(‘#tt’) ) {

//do something

}

而应该根据获取到元素的长度来判断,代码如下:

if( $(‘#tt’).length > 0 ) {

//do something

}

或者转化成DOM对象来判断,代码如下:

if( $(‘#tt’)[0] ) {

//do something

}

jQuery选择器

       jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

  • 基本选择器

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。

  • #id  根据给定的id匹配一个元素;
  • .class  根据给定的类名匹配元素;
  • element  根据给定的元素名称匹配元素;
  • *   匹配所有元素;
  • selector1,selector2,···,selectorN 将每一选择器匹配到的元素集合并后一起返回。
  • 层级选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。

  • ancestor descendant  选取ancestor元素里的所有descendant(后代)元素;
  • parent > child 选取parent元素下child(子)元素;
  • prev + next 选择紧接在prev元素后的next元素;
  • prev ~ siblings 选取prev元素之后的所有siblings元素。
  • 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素。

(1)基本过滤选择器

  • :first  选取第一个元素;
  • :last  选取最后一个元素;
  • :not(selector)  去除所有与给定选择器匹配的元素;
  • :even 选取索引是偶数的所有元素,索引从0开始;
  • :odd  选取索引是奇数的所有元素,索引从0开始;
  • :eq(index)  选取索引等于index的元素(index从0开始);
  • :gt(index)  选取索引大于index的元素(index从0开始);
  • :lt(index)  选取索引小于index的元素(index从0开始);
  • :header  选取所有的标题元素,例如h1,h2,h3等等;
  • :animated  选取当前正在执行动画的所有元素;
  • :focus  选取当前获取焦点的元素。

(2)内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本上。

  • :contains(text)  选取含有文本内容“text”的元素;
  • :empty  选取不包含子元素或者文本的空元素;
  • :has(selector)  选取含有选择器所匹配的元素的元素;
  • :parent  选取含有子元素或者文本的元素。

(3)可见性过滤选择器

  • :hidden  选取所有不可见的元素;
  • :visible  选取所有可见的元素。

在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为“none”的元素,也包括文本隐藏(<input> type=” hidden”/>和visibility:hidden之类的元素。

(4)属性过滤选择器

  • [attribute]  选取拥有此属性的元素;
  • [attribute=value]  选取属性的值为value的元素;
  • [attribute!=value]  选取属性的值不等于value的元素;
  • [attribute^=value]  选取属性的值以value开始的元素;
  • [attribute$=value]  选取属性的值以value结束的元素;
  • [attribute*=value]  选取属性的值含有value的元素;
  • [attribute|=value]  选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-”)的元素;
  • [attribute~=value]  选取属性用空格分隔的值中包含一个给定值的元素;
  • [attrSel1][attrSel2][attrSelN]  用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围。

(5)子元素过滤选择器

  • :nth-child(index/even/odd/equation)  选取每个父元素下的第index个元素或者奇偶元素(index从1开始);
  • :first-child  选取每个父元素的第1个子元素;
  • :last-child  选取每个父元素的最后一个子元素;
  • :only-child  如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中包含其他元素,则不会被匹配。

(6)表单对象属性过滤选择器

  • :enabled  选取所有可用元素;
  • :disabled  选取所有不可用元素;
  • :checked  选取所有被选中的元素(单选框,复选框);
  • :selected  选取所有被选中的选项元素(下拉列表)。
  • :input  选取所有的<input>、<textarea>、<select>和<button>元素;
  • :text  选取所有的单行文本框;
  • :password  选取所有的密码框;
  • :radio  选取所有的单选框;
  • :checkbox  选取所有的多选框;
  • :submit  选取所有的提交按钮框;
  • :image  选取所有的图像按钮;
  • :reset  选取所有的重置按钮;
  • :button  选取所有的按钮;
  • :file  选取所有的上传域;
  • :hidden  选取所有不可见元素。
  • 表单选择器

选择器中的一些注意事项

  • 选择器中含有“.”、“#”、“(”或“]”等特殊字符

根据W3C的标准,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。

  • 选择器中的空格也是不容忽视的,多一个空格或少一个空格也许会得到截然不同的结果。

第3章 jQuery中的DOM操作

DOM操作的分类

       一般来说,DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。

  • DOM Core

DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。

JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法,这些都是DOM Core的组成部分。

  • HTML-DOM

获取某些对象、属性既可以用DOM Core来实现,也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短,不过它只能用来处理Web文档。

  • CSS-DOM

CSS-DOM是针对CSS的操作。在JavaScript中,CSS-DOM技术主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性,可以使网页呈现出各种不同的效果。

jQuery中的DOM操作

  1. 查找节点

可以使用jQuery选择器在文档树上查找节点。

利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。

  1. 创建节点

用jQuery来动态创建HTML元素是非常简单、方便和灵活的。例:

var $li_1 = $(“<li title=”香蕉”>香蕉</li>”);

注意:(1)动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。

(2)当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。

例如创建一个<p>元素,可以用$(“<p/>”)或者$(“<p></p>”),但不要使用$(“<p>”)或者大写的$(“<P/>”)。

  1. 插入节点

append()  向每个匹配的元素内部追加内容;

appendTo()  将所有匹配的元素追加到指定的元素中

实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中。

prepend() 向每个匹配的元素内部前置内容;

prependTo()  将所有匹配的元素前置到指定的元素中;

after()  在每个匹配的元素之后插入内容;

insertAfter()  将所有匹配的元素插入到指定元素的后面。

实际上,使用该方法是颠倒了常规的$(A). after (B)的操作,即不是将B插入到A后面,而是将A插入到B后面。

before()  在每个匹配的元素之前插入内容;

insertBefore()  将所有匹配的元素插入到指定的元素的前面。

  1. 删除节点

remove()方法

当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

另外remove()方法也可以通过传递参数来选择性地删除元素。

detach()方法

detach()和remove()一样,也是从DOM中去掉所有匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

empty()方法

严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。

  1. 复制节点

可以使用clone()方法来复制节点。

复制节点后,被复制的新元素并不具有任何行为。如果在clone()方法中传递一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。

  1. 替换节点

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

另一个方法是replaceAll(),该方法与replaceWith()方法的作用相同,只是颠倒了replaceWith()操作。

  1. 包裹节点

如果要将某个节点用其他标记包裹起来,可以使用wrap()。该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义。

wrap()方法是将所有的元素进行单独的包裹。

wrapAll()方法会将所有匹配的元素用一个元素来包裹。如果被包裹的多个元素之间有其他元素,其他元素会被放到包裹元素之后。

wrapInner()方法将每个元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

  1. 属性操作

在jQuery中,用attr()方法来获取和设置元素的属性,removeAttr()方法来删除元素的属性。

  1. 样式操作

获取样式和设置样式

获取class和设置class都可以使用attr()方法来完成。使用attr()方法设置class,如果原本就存在了class,将会把原来的class替换为新的class。

追加样式

jQuery提供了专门的addClass()方法来追加样式。

移除样式

要删除class的某个值,可以使用removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的class。

删除多个class名,可以用空格隔开。

当它不带参数的时候,就会将class的值全部删除。

切换样式

toggle()方法主要是控制行为上的重复切换。如:

$toggleBtn.toggle (function() {

//显示元素

},function(){

//隐藏元素

})

另外jQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例:

$(“p”). toggleClass(“another”);

判断是否含有某个样式

hasClass()可以用来判断元素中是否含有某个class。如果有,则返回true,否则返回false。

  1. 设置和获取HTML、文本和值

html()方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个而元素中的HTML内容。

html()方法可以用于XHTML文档,但不能用于XML文档。

text()方法类似于JavaScript中的innerText属性,可以用来读取或者设置牧歌元素的文本内容。

val()方法类似于JavaScript中的value属性,可以用来设置和获取元素的值。

无论元素是文本框,下拉列表还是单选框,它都可以返回元素的值。

如果元素为多选,则返回一个包含所欲选择的值的数组。

  1. 遍历节点

children()方法用于取得匹配元素的子元素集合。注意,该方法只考虑子元素而不考虑其他后代元素。

next()方法用于取得匹配元素后面紧邻的同辈元素;

prev()方法用于取得匹配元素前面紧邻的同辈元素;

siblings()方法用于取得匹配元素前后所有的同辈元素;

closest()方法用于取得最近的匹配元素。

首先检查当前元素是否匹配,如果匹配则直接返回元素本身。

如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。

如果什么都没找到则返回一个空的jQuery对象。

parent()方法用于获取集合中每个匹配的父级元素

parents()方法用于获取集合中每个匹配的祖先元素

closest()方法是从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。

  1. CSS-DOM操作

可以直接利用css()方法来获取元素的样式属性,而不管这些属性是外部CSS导入,还是直接拼接在HTML元素里(内联)的。

也可以直接利用css()方法来设置某个元素的单个样式或者多个样式属性。

注意:(1)如果值是数字,将会被自动转化为像素值。

(2)在css()方法中,如果属性值中带有“-”符号,例如font-size和background-color属性,如果在设置这些属性的值的时候不带引号,那么就要用驼峰式写法。

如果带上了引号,既可以写成 ”fint-size”,也可以写成 ”fontSize”。

建议带上引号,养成良好的习惯。

在jQuery中还有另外一种方法也可以获取元素的高度,即height()。它的作用是取得匹配元素当前计算的高度值(px)。

height()方法也能用来设置元素的高度,如果传递的值是一个数字,则默认单位为px。如果要用其他单位(例如em),则必须传递一个字符串。

两者的区别:css()方法获取的高度值与样式的设置有关,可能会得到“auto”,也可能得到“10px”之类的字符串;而height()方法获取的高度值则是元素在页面中实际高度,与样式的设置无关,并且不带单位。

与height()方法对应的还有一个width()方法,它可以取得匹配元素的宽度值(px)。

此外,在CSS-DOM中,关于元素定位有以下几个经常使用的方法。

offset()方法的作用是获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效。

position()方法的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,其中返回的对象也包括两个属性,即top和left。

scrollTop()方法和scrollLeft()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。

另外,可以为这两个方法指定一个参数,控制元素的滚动条滚动到指定位置。

上一篇:MySQL数据库一个字段对应多个值得模糊查询


下一篇:UVa 232 Crossword Answers