[ jquery 文档处理 wrap(html|element|fn) ] 此方法用于把所有匹配的元素用其他元素的结构化标记包裹起来

此方法用于把所有匹配的元素用其他元素的结构化标记包裹起来

实例:

<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type="text/css">
    *{margin:0;padding:0;}
    html{font:400 15px/1.2em ‘Courier New‘;color:#666;width:750px;margin:25px auto;}
    ul{list-style:none;}
    .hover{color:#FF96EC;}
</style>
<script type=‘text/javascript‘>
    $(function(){
        $(‘.active‘).wrap(function(index){  // 添加包裹机制
            return ‘<div class=‘+$(this).html()+‘></div>‘;
        });
        $(‘p‘).unwrap();    //  取消包裹
    });
</script>
</head>
<body>
    <div id=‘demo‘>
        <div class=‘noClassDemo‘>
            <ul class=‘list‘>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li class=‘active‘>Index</li>
                <li class=‘wrap‘>Index value :</li>
                <li>Index value :</li>
            </ul>
            <div class=‘unwrap‘>
                <p>this is unwrap test</p>
            </div>
        </div>
    </div>
</body>
</html>
时间: 2024-08-06 12:40:47

[ jquery 文档处理 wrap(html|element|fn) ] 此方法用于把所有匹配的元素用其他元素的结构化标记包裹起来的相关文章

[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹

此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素 html HTML标记代码字符串,用于动态生成元素并包装目标元素 element 用于包装目标元素的DOM元素 fn 生成包裹结构的一个函数 实例: <html lang='zh-cn'> &l

[ jquery 文档处理 append(content|fn) ] 此方法用于向每个匹配的元素内部追加内容,这个操作与javascript对指定的元素执行appendChild方法,将它们添加到文档中的情况类似

此方法用于向每个匹配的元素内部追加内容,这个操作与javascript对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数解释如下: content 要追加到目标中的内容 function(index, html) 返回一个HTML字符串,用于追加到每一个匹配元素的里边.接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值. 实例: <html lang='zh-cn'> <head> <title>I

[ jquery 文档处理 insertAfter(content) after(content|fn) ] 此方法用于把所有匹配的元素插入到另一个、指定的元素元素集合的后面,实现外部插入

after(content | fn):在每个匹配的元素之后插入内容 insertAfter(content): 把所有匹配的元素插入到另一个.指定的元素元素集合的后面 实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面 在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用en

[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个、指定的元素元素集合的前面,实现外部插入

在每个匹配的元素之前插入内容,用法类似于after() 和insertAfter(): 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,ke

[ jquery 文档处理 prepend(content|fn) ] 此方法用于向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式

向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,keywor

jQuery文档处理总结

<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>文档操作</title> <style type="text/css"> #imglist, #imglist2 { width: 98%; padding: 10px; border: 10px solid #0a0; }

[ jquery 文档处理 replaceWith(content|fn) replaceAll(content) ] 此方法用于把所有匹配的元素替换成指定的HTML或DOM元素

此方法用于把所有匹配的元素替换成指定的HTML或DOM元素 content(String, Element, jQuery, Function) 用于将匹配元素替换掉的内容.如果这里传递一个函数进来的话,函数返回值必须是HTML字符串. fn 返回THML字符串,用来替换的内容. 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='descri

[ jquery 文档处理 wrapAll(html|ele)) ] 此方法用于把所有匹配的元素使用指定的 HTML 元素来包裹

将所有匹配的元素用单个元素包裹起来 这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的,'.wrap()'为每一个匹配的元素都包裹一次.这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质.这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个

jQuery 文档操作

jQuery 文档操作方法 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容. appendTo() 向目标结尾插入匹配元素集合中的每个元素. attr() 设置或返回匹配元素的属性和值. before() 在每个匹配的元素之前插入内容. clone() 创建匹配元素集合的副本. detach() 从 DOM 中移除匹配元素集合. empty() 删除匹配的元素集合中所