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

Posted 2020-07-02 浅岸

第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()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。

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