zoukankan      html  css  js  c++  java
  • 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 });

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

  • 相关阅读:
    【网易官方】极客战记(codecombat)攻略-森林-加农炮之舞forest-cannon-dancing
    【网易官方】极客战记(codecombat)攻略-森林-森林慢跑forest-jogging
    https://developer.android.com/codelabs/java-to-kotlin
    今日英语
    架构师技能图谱
    java接口防重提交如何处理
    看看人家那后端API接口写得,那叫一个优雅!
    MySQL不推荐使用uuid或者雪花id作为主键
    “12306”是如何支撑百万QPS的?
    阿里巴巴为什么能抗住90秒100亿?看完这篇你就明白了!
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4727045.html
Copyright © 2011-2022 走看看