• jQuery简要dom操作


    文本

    dom

    获取标签 $(选择)。

    创建一个标签对象 $("标签"); 由于所有的返回jQuery对象。能够调用链(无论jQuery API 回报jQuery对象)

    插入标签

    内部插入


    1.append(content|fn)


    概述
    向每一个匹配的元素内部追加内容。


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

    參数
    contentString, Element, jQueryV1.0

    要追加到目标中的内容

    function(index, html)FunctionV1.4

    返回一个HTML字符串,用于追加到每个匹配元素的里边。

    接受两个參数。index參数为对象在这个集合中的索引值,html參数为这个对象原先的html值。


    演示样例

    描写叙述:向全部段落中追加一些HTML标记。

    HTML 代码:
    <p>I would like to say: </p>
    jQuery 代码:
    $("p").append("<b>Hello</b>");
    结果:
    [ <p>I would like to say: <b>Hello</b></p> ]


    2.appendTo(content) 返回值:jQuery  把全部匹配的元素追加到还有一个指定的元素元素集合中。


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

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

    參数
    contentString

    用于被追加的内容


    演示样例

    描写叙述:把全部段落追加到ID值为foo的元素中。

    HTML 代码:
    <p>I would like to say: </p>
    <div></div><div></div>
    jQuery 代码:
    $("p").appendTo("div");
    结果:
    <div><p>I would like to say: </p></div>
    <div><p>I would like to say: </p></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|fn)

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


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

    參数
    contentString, Element, jQueryV1.0

    要插入到目标元素内部前端的内容

    function(index, html)FunctionV1.4

    返回一个HTML字符串,用于追加到每个匹配元素的里边。接受两个參数。index參数为对象在这个集合中的索引值,html參数为这个对象原先的html值。


    演示样例描写叙述:向全部段落中前置一些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> ]


    描写叙述:将一个DOM元素前置入全部段落

    HTML 代码:
    <p>I would like to say: </p>
    <p>I would like to say: </p>
    <b class="foo">Hello</b>
    <b class="foo">Good Bye</b>
    jQuery 代码:
    $("p").prepend( $(".foo")[0] );
    结果:
    <p><b class="foo">Hello</b>I would like to say: </p>
    <p><b class="foo">Hello</b>I would like to say: </p>
    <b class="foo">Good Bye</b>


    描写叙述:向全部段落中前置一个jQuery对象(类似于一个DOM元素数组)。

    HTML 代码:
    <p>I would like to say: </p><b>Hello</b>
    jQuery 代码:
    $("p").prepend( $("b") );
    结果:
    <p><b>Hello</b>I would like to say: </p>


    4.prependTo(content)


    返回值:jQueryprependTo(content)

    概述
    把全部匹配的元素前置到还有一个、指定的元素元素集合中。


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

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

    參数
    contentString

    用于匹配元素的jQuery表达式


    演示样例描写叙述:把全部段落追加到ID值为foo的元素中。

    HTML 代码:
    <p>I would like to say: </p><div id="foo"></div>
    jQuery 代码:
    $("p").prependTo("#foo");
    结果:
    <div id="foo"><p>I would like to say: </p></div>


    外部插入


    1..after(content|fn)

    after(content|fn)

    在每一个匹配的元素之后插入内容。

    參数
    contentString, Element, jQueryV1.0

    插入到每一个目标后的内容

    functionFunctionV1.4

    函数必须返回一个html字符串。


    演示样例描写叙述:在全部段落之后插入一些HTML标记代码。

    HTML 代码:
    <p>I would like to say: </p>
    jQuery 代码:
    $("p").after("<b>Hello</b>");
    结果:
    <p>I would like to say: </p><b>Hello</b>


    描写叙述:在全部段落之后插入一个DOM元素。

    HTML 代码:
    <b id="foo">Hello</b><p>I would like to say: </p>
    jQuery 代码:
    $("p").after( $("#foo")[0] );
    结果:
    <p>I would like to say: </p><b id="foo">Hello</b>


    描写叙述:在全部段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

    HTML 代码:
    <b>Hello</b><p>I would like to say: </p>
    jQuery 代码:
    $("p").after( $("b") );
    结果:
    <p>I would like to say: </p><b>Hello</b>

    2.before(content|fn) 返回值:jQuery   在每一个匹配的元素之前插入内容。


    參数
    contentString, Element, jQueryV1.0

    插入到每一个目标后的内容

    functionFunctionV1.4

    函数必须返回一个html字符串。


    演示样例描写叙述:在全部段落之前插入一些HTML标记代码。

    HTML 代码:
    <p>I would like to say: </p>
    jQuery 代码:
    $("p").before("<b>Hello</b>");
    结果:
    [ <b>Hello</b><p>I would like to say: </p> ]


    描写叙述:在全部段落之前插入一个元素。

    HTML 代码:
    <p>I would like to say: </p><b id="foo">Hello</b>
    jQuery 代码:
    $("p").before( $("#foo")[0] );
    结果:
    <b id="foo">Hello</b><p>I would like to say: </p>


    描写叙述:在全部段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

    HTML 代码:
    <p>I would like to say: </p><b>Hello</b>
    jQuery 代码:
    $("p").before( $("b") );
    结果:
    <b>Hello</b><p>I would like to say: </p>


    3.insertAfter(content) 返回值:jQuery 把全部匹配的元素插入到还有一个、指定的元素元素集合的后面。


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

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

    參数
    contentStringV1.0

    用于匹配元素的jQuery表达式


    演示样例描写叙述:把全部段落插入到一个元素之后。与 $("#foo").after("p")同样

    HTML 代码:
    <p>I would like to say: </p><div id="foo">Hello</div>
    jQuery 代码:
    $("p").insertAfter("#foo");
    结果:
    <div id="foo">Hello</div><p>I would like to say: </p>


    4.insertBefore(content) 返回值:jQuery   把全部匹配的元素插入到还有一个、指定的元素元素集合的前面。


    实际上,使用这种方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面。而是把A插入到B前面。

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

    參数
    contentStringV1.0

    用于匹配元素的jQuery表达式


    演示样例描写叙述:把全部段落插入到一个元素之前。与 $("#foo").before("p")同样。

    HTML 代码:
    <div id="foo">Hello</div><p>I would like to say: </p>
    jQuery 代码:
    $("p").insertBefore("#foo");
    结果:
    <p>I would like to say: </p><div id="foo">Hello</div>

    删除标签


    1.empty() 返回值:jQuery 删除匹配的元素集合中全部的子节点。


    演示样例描写叙述:把全部段落的子元素(包含文本节点)删除

    HTML 代码:
    <p>Hello, <span>Person</span> <a href="#">and person</a></p>
    jQuery 代码:
    $("p").empty();
    结果:
    <p></p>

    2.remove([expr])


    从DOM中删除全部匹配的元素。


    这种方法不会把匹配的元素从jQuery对象中删除,因而能够在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其它的比方绑定的事件,附加的数据等都会被移除。

    參数expr  String       

    用于筛选元素的jQuery表达式


    演示样例描写叙述:从DOM中把全部段落删除

    HTML 代码:
    <p>Hello</p> how are <p>you?</p>
    jQuery 代码:
    $("p").remove();
    结果:
    how are


    描写叙述:从DOM中把带有hello类的段落删除

    HTML 代码:
    <p class="hello">Hello</p> how are <p>you?</p>
    jQuery 代码:
    $("p").remove(".hello");
    结果:
    how are <p>you?

    </p>


    3.detach([expr]) 返回值:jQuery     detach([expr])



    从DOM中删除全部匹配的元素。


    这种方法不会把匹配的元素从jQuery对象中删除,因而能够在将来再使用这些匹配的元素。与remove()不同的是。全部绑定的事件、附加的数据等都会保留下来。

    參数
    expr  String    用于筛选元素的jQuery表达式


    演示样例描写叙述:从DOM中把全部段落删除

    HTML 代码:
    <p>Hello</p> how are <p>you?</p>
    jQuery 代码:
    $("p").detach();
    结果:
    how are


    描写叙述:从DOM中把带有hello类的段落删除

    HTML 代码:
    <p class="hello">Hello</p> how are <p>you?</p>
    jQuery 代码:
    $("p").detach(".hello");
    结果:
    how are <p>you?</p>

    获得和加入标签

    attr(name|properties|key,value|fn)


    设置或返回被选元素的属性值。

    參数
    name  String     属性名称

    properties Map   作为属性的“名/值对”对象

    key,value String, Object      属性名称。属性值

    key,function(index, attr) String,Function

    1:属性名称。

    2:返回属性值的函数,第一个參数为当前元素的索引值,第二个參数为原先的属性值。


    演示样例

    參数name

    描写叙述:返回文档中全部图像的src属性值。

    jQuery 代码:
    $("img").attr("src");


    參数properties

    描写叙述:为全部图像设置src和alt属性。

    jQuery 代码:
    $("img").attr({ src: "test.jpg", alt: "Test Image" });


    參数key,value 描写叙述:

    为全部图像设置src属性。

    jQuery 代码:
    $("img").attr("src","test.jpg");


    參数key,回调函数 描写叙述:

    把src属性的值设置为title属性的值。

    jQuery 代码:
    $("img").attr("title", function() { return this.src });

    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    Binary Tree Zigzag Level Order Traversal
    Binary Tree Level Order Traversal
    Symmetric Tree
    Best Time to Buy and Sell Stock II
    Best Time to Buy and Sell Stock
    Triangle
    Populating Next Right Pointers in Each Node II
    Pascal's Triangle II
    Pascal's Triangle
    Populating Next Right Pointers in Each Node
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4727045.html
Copyright © 2020-2023  润新知