zoukankan      html  css  js  c++  java
  • jquery 包裹元素、元素外插入

    .unwrap()

    将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。

    <div class="a">
    	<p>test</p>
    </div>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('p').unwrap();
    });
    </script>
    

    .wrap()

    在每个匹配的元素外层包上一个html元素。

    <style type="text/css">
    .a{background:#900; 100px; height:100px; margin-top:10px;}
    </style>
    </head>
    <body>
    <p>test</p>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('p').wrap('<div class="a"></div>');
    });
    </script>
    

    .wrapAll()

    在所有匹配元素外面包一层HTML结构。

    <style type="text/css">
    .a{background:#900; 100px; height:100px; margin-top:10px;}
    </style>
    </head>
    <body>
    <p>test</p>
    <p>test2</p>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('p').wrapAll('<div class="a"></div>');
    });
    </script>
    

    .wrapInner()

    在匹配元素里的内容外包一层结构。

    <style type="text/css">
    .a{background:#900; 100px; height:100px; margin-top:10px;}
    </style>
    </head>
    <body>
    <p>test</p>
    <p>test2</p>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('p').wrapInner('<div class="a"></div>');
    });
    </script>
    

    .after()

    在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。

    <div class="a">1</div>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $('.a').after('<p>test2</p>');
    });
    </script>
    

    .before()

    根据参数设定,在匹配元素的前面插入内容(译者注:外部插入)

    <div class="a">1</div>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('.a').before('<p>test2</p>');
    });
    </script>
    

    .insertAfter()

    在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

    <div class="a">1</div>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $('<p>test2</p>').insertAfter('.a');
    });
    </script>
    

    .insertBefore()

    在目标元素前面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

    <div class="a">1</div>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $('<p>test2</p>').insertBefore('.a');
    });
    </script>
    
  • 相关阅读:
    简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片
    MVC4方法行为过滤器例子(用户登录)
    MVC4过滤器
    MVC4 @RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和区别
    FPGA之外,了解一下中断
    滤波器中的窗口
    关于有限脉冲响应滤波器
    分布式算法原理
    学习FPGA过程中的理论知识
    关于硬件实现FFT逆运算
  • 原文地址:https://www.cnblogs.com/hustshu/p/15071731.html
Copyright © 2011-2022 走看看