【jQuery】DOM和CSS操作

页面内容操作
  1. text()方法:获取和设置某个元素的“文本内容”。
  2. html()方法:获取和设置某个元素中的“HTML内容”
  3. val()方法:获取或设置“表单元素”的值。

属性操作

  1. attr() 设置或返回匹配元素的属性和值.

    返回被选元素的属性值,语法:$(selector).attr(attribute)

    设置被选元素的属性和值,语法:$(selector).attr(attribute,value)

    使用函数来设置属性/值,语法:$(selector).attr(attribute,function(index,oldvalue))

  2. removeAttr() 从元素中移除指定的属性,语法:$(selector).removeAttr(attribute)

CSS属性操作

  1. 获取CSS属性值:$().css("属性")
  2. 设置单个CSS属性:$().css("属性","属性值")
  3. 设置多个CSS属性:$().css({"属性1":"属性值1","属性2":"属性值2",……})

CSS类操作

在jQuery中,类名操作包括:添加类名、删除类、切换类这3种情况

  1. addClass() - 向被选元素添加一个或多个类
  2. removeClass() - 从被选元素删除一个或多个类
  3. toggleClass() - 对被选元素进行添加/删除类的切换操作

    $(selector).toggleClass(classname,function(index,currentclass),switch)

    1. classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。
    2. function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
      1. index - 返回集合中元素的 index 位置。
      2. currentclass - 返回被选元素的当前类名。
    3. switch 布尔值,规定是否仅仅添加(true)或移除(false)类。

元素的宽度高度

  1. width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
  2. innerWidth() 方法返回元素的宽度(包括内边距)
  3. outerWidth() 方法返回元素的宽度(包括内边距和边框)
  4. height()、innerHeight()、outerHeight()与宽度类似

元素的位置

  1. offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
    1. 该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
    2. 设置偏移坐标:$(selector).offset(value)
    3. 使用函数来设置所有匹配元素的偏移坐标:$(selector).offset(function(index,oldoffset))
      • index - 可选。接受选择器的 index 位置
      • oldvalue - 可选。接受选择器的当前坐标
  2. position() 方法返回匹配元素相对于父元素的位置(偏移)。

    在CSS定位布局中,如果我们对父元素设置position:relative,我们就可以使用position:absolute来设置子元素相对于父元素的定位距离

    • position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。
    • 该函数返回一个坐标对象,该对象有一个left属性和top属性。position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0),向右为正,向下为正。
    • 如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。
    • 如果当前jQuery对象匹配多个元素,返回坐标时,position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素,则返回undefined。
    • 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offset()返回的是相对于当前文档的坐标。
    • position()函数无法用于设置操作。
  3. scrollTop():获取或设置元素相对于垂直滚动条顶部的距离,
    scrollLeft():来获取或设置元素相对于水平滚动条左部的距离。

DOM操作

    DOM操作是jQuery核心内容之一,在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素,这种添加元素、删除元素的操作就是通过DOM来实现的。

    我们之前学习了html(),text()方法为文档添加新的内容,但是更多时候我们需要在现有内容之上增加或修改某些内容,这就要用到我们接下来要讲的节点操作。

    1. 创建节点:$(html) 如:$("< li >< /li >")
    2. 插入节点
      • append()和appendTo()

        • append() 方法在被选元素的结尾插入指定内容。

          语法1:$(selector).append(content)

          语法2:$(selector).append(function(index,html))

        • appendTo()跟append()类似,作用都是在所选元素内部的“末尾”插入内容。

          语法:$(content).appendTo(selector)

          append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。

      • prepend()和prependTo()

        • prepend(),prependTo() 方法在被选元素的开头(内部)插入指定内容。
        • 使用方法和appendTo(),append()类似
      • before()和insertBefore()

        • before(content|fn):在每个匹配的元素之前插入内容。
        • insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
      • after()和insertAfter()
        • after(content|fn):在每个匹配的元素之后插入内容。
        • insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    3. 删除节点

      1. remove():删除匹配的元素集合中所有的子节点。

        绑定的事件,附加的数据等都会被移除。

      2. detach():从DOM中删除所有匹配的元素。

        与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

      3. empty():删除匹配的元素集合中所有的子节点。

        remove()和detach()这2个方法删除节点时,会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点,而会保留自身节点。

    4. 复制节点

      语法:$(selector).clone(includeEvents)includeEvents:可选。布尔值。规定是否复制元素的所有事件处理。

    5. 包裹节点:

      • wrap():把每个被选元素放置在指定的 HTML 内容或元素中。
      • wrapAll():将所有匹配的元素用单个元素包裹起来
      • unwrap():移出元素的父元素。
      • wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
    6. 替换节点

      • replaceWith():用指定的 HTML 内容或元素替换被选元素。
      • replaceAll():用指定的 HTML 内容或元素替换被选元素。

        replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。

    7. 遍历节点:each()

      在jQuery中,我们可以使用each()方法来轻松实现元素的遍历操作。

      语法:$(selector).each(function(index))

过滤方法

    为了更加灵活迅速地操作元素,除了选择器之外,jQuery还为我们提供了过滤、查找方法。过滤和查找补充了很多使用选择器无法进行的操作

    1. first()/last() 方法返回被选元素的首个元素/最后一个元素。
    2. eq() 方法返回被选元素中带有指定索引号的元素。

      索引号从 0 开始,因此首个元素的索引号是 0 而不是 1

    3. filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
    4. not() 方法返回不匹配标准的所有元素。
    5. is() 判断所选元素是否有符合某个条件的元素,返回值为true或false.

      根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

    6. has() 使用“自定义表达式”来选择符合条件的元素
    7. slice(start, [end])把匹配元素集合缩减为指定的指数范围的子集。
      • start:开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。

      • end:结束选取自己的位置,如果不指定,则就是本身的结尾。

查找方法

    查找祖先元素


    • parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
    • parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
    • parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。

    查找后代元素


    • children() 获得匹配元素集合中每个元素的所有子元素。
    • find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
    • contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。

      不常用,了解即可

    向前查找


    • prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
    • prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
    • prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。

    向后查找


    • next() 获得匹配元素集合中每个元素紧邻的同辈元素。
    • nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
    • nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。

    查找所有兄弟元素


    • siblings() 方法返回被选元素的所有同胞元素。

    其他


    • add() 方法将元素添加到匹配元素的集合中。
    • addBack()添加堆栈中元素集合到当前集合,一个选择性的过滤选择器。
    • end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
    • map() 把当前匹配集合中的每个元素传递给函数,返回值是 jQuery 封装的数组。
    • closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。

      closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤。

    • offsetParent()获得用于定位的第一个父元素。即:返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注