zoukankan      html  css  js  c++  java
  • jQuery学习总结04-文档处理

    1、append(content|fn)

    说明:向每个匹配的元素内部追加内容。

       这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

    content(要追加到目标中的内容) string,element,jquery

    function(index, html)

    返回一个HTML字符串

    index参数为对象在这个集合中的索引值

    html参数为这个对象原先的html值。

    function

    示例:

    描述:不再赘述

    2、appendTo(content)

    说明:把所有匹配的元素追加到另一个指定的元素集合中

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

       在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用end()方法,参见例二。

    示例:

    描述:把所有段落追加到ID值为foo的元素中。

    HTML代码:

    <p>I would like to say: </p>
    <div></div>
    <div></div>

    jQuery代码:

    $('p').appendTo('div');

    描述二:新建段落追加div中并加上一个class

    HTML代码:

    <div></div>
    <div></div>

    jQuery代码:

    $("<p/>")
       .appendTo("div")
       .addClass("test")
       .end()
       .addClass("test2");

    结果:

    <div><p class="test test2"></p></div>
    <div><p class="test"></p></div>

    3、prepend(content)

    说明:向每个匹配元素内部前置内容

       这是向所有匹配元素内部的开始处插入内容的最佳方式。

    示例:

    参数:

    content(要插入到目标元素内部前端的内容) string,element,jquery

    function(index, html)

    返回一个HTML字符串

    index参数为对象在这个集合中的索引值

    html参数为这个对象原先的html值。

    function

    描述:向所有段落中前置一些HTML标记代码。

    HTML代码:

    <p>I would like to say: </p>

    jQuery代码:

    $('p').prepend('<b>Hello </b>');

    结果:

    [ <p><b>Hello</b>I would like to say: </p> ]

    4、prependTo(content)

    说明:把所有匹配的元素前置到另一个、指定的元素元素集合中。

       实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

       在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法,参见 appendTo 方法的例二。

    示例:不再赘述

  • 相关阅读:
    Webpack教程二
    Webpack教程一
    整个互联网行业都缺前端工程师?
    Sublime Text 3 搭建 React.js 开发环境
    Javascript的9张思维导图学习
    实现字体外部有描边
    CSS样式重置
    vue使用过滤器 filters:{}
    修改select的默认样式
    onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法
  • 原文地址:https://www.cnblogs.com/it-q/p/9288827.html
Copyright © 2011-2022 走看看