zoukankan      html  css  js  c++  java
  • jq的dom操作

    代码可以在该网址测试:www.w3school.com.cn/tiy/t.asp?f=jquery_manipulation_detach_move 

    attr

    使用函数来设置属性/值:函数参数为选择器的 index 值和当前属性值。

    $(selector).attr(attribute,function(index,oldvalue))

    示例代码

    $(document).ready(function(){
      $("button").click(function(){
        $("img").attr("width",function(n,v){
          return v-50;
        });
      });
    });

    设置多个属性/值对:

    $(document).ready(function(){
      $("button").click(function(){
        $("img").attr({"50",height:"80"});
      });
    });

    detach和remove:移除元素内容

    detach() 方法移除匹配的元素,包括所有文本和子节点。

    方法返回移除的元素,会保留该元素所有绑定的事件、附加的数据,因而可以在将来再使用这些匹配的元素。这一点与 remove() 不同,remove不会保留事件和数据,只保留元素。

    示例代码:

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("body").append($("p").detach());
      });
      $('p').click(function(){alert(1)})
    });
    </script>
    </head>
    <body>
    <p>This is a paragraph.</p>
    <button>移动 p 元素</button>
    </body>
    </html>

     hasClass

    检查被选元素是否包含指定的 class。

    <p class="intro abc ef">This is a paragraph.</p>

    检查是否有指定的几个class:结果为true

    $(document).ready(function(){
      $("button").click(function(){
        alert($("p:first").hasClass("abc ef"));
      });
    });

    html

    获取:返回第一个匹配元素的内容。

    设置:使用该方法设置一个值时,它会覆盖所有匹配元素的内容。

    使用函数来设置元素内容:

    $(selector).html(function(index,oldcontent))

    示例代码:

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").html(function(n){
        return "这个 p 元素的 index 是:" + n;
        });
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>改变 p 元素的内容</button>
    </body>
    </html>

    操作结果:

    几个穿插元素或者内容方法的区别

    添加的内容可包含html标签的:

    append(appendTo):向匹配元素集合中的每个元素结尾插入由参数指定的内容。

    before:在每个匹配的元素之前插入内容。

    prepend(prependTo):向匹配元素集合中的每个元素开头插入由参数指定的内容

    操作元素与元素之间的位置,如果该方法用于已有元素,这些元素会被从当前位置移走“

    insertAfter:把匹配的元素插入到另一个指定的元素集合的后面。

    insertBefore:把匹配的元素插入到另一个指定的元素集合的前面。

    $("button").click(function(){
      $("<span>Hello world!</span>").insertAfter("p");
    });

    toggleClass:对设置或移除被选元素的一个或多个类进行切换。

    该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

    不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。

    $(selector).toggleClass(class,switch)

    使用函数来切换类:参数为选择器的 index 位置和当前的类。

    $(selector).toggleClass(function(index,class),switch)

    wrapwrapAll:给元素增加父级标签

    每个P标签外面包裹一个div

    $(".btn1").click(function(){
       $("p").wrap("<div></div>");
    });

    用一个div包裹所有p标签

    $(document).ready(function(){
      $(".btn1").click(function(){
        $("p").wrapAll("<div></div>");
      });
    });
  • 相关阅读:
    P2420 让我们异或吧(倍增)
    bzoj题目分类
    hash练习们
    bzoj1433[ZJOI2009]假期的宿舍(匈牙利)
    bzoj2427:[HAOI2010]软件安装(Tarjan+tree_dp)
    bzoj2730矿场搭建(Tarjan割点)
    codevs4511信息传递(Tarjan求环)
    进入js
    css层叠样式表
    HTML超文本标记语言
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/10399858.html
Copyright © 2011-2022 走看看