Jquery学习（五）—jQuery 文档操作方法

最新推荐文章于 2024-08-09 02:16:38 发布

sungang1120

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

分类专栏：细细品味-Jquery 文章标签： jquery ViewUI

本文链接：https://blog.youkuaiyun.com/sungang1120/article/details/84380848

细细品味-Jquery 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了jQuery中的各种文档操作方法，包括添加类、插入内容、属性操作、克隆、移除元素等，并通过实例展示了每种方法的具体应用。

Jquery学习（五）—jQuery 文档操作方法

<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<style type="text/css">
    .intro{
        color: red;
        font-size: 30px;
    }
    #wrapDiv{
        color: red;
        font-size: 30px;
    }
</style>
<script type="text/javascript">
    //1向第一个 p 元素添加一个类：addClass()
    //语法：$(selector).addClass(class)
    $(document).ready(function(){
        $("#button1").click(function(){
            //向第一个p标间添加一个或多个class 属性之间加一个空格
            //设置class属性的css样式
            $("p:first").addClass("intro");
        });
        
        //2在每个 p 元素结尾插入内容：
        //append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器
        //语法：$(content).appendTo(selector)
        $("#button2").click(function(){
            //在每个P标间之后  加上HOLLE WORLD
            $("<b>HOLLE WORLD!&nbsp;&nbsp;</b>").appendTo("p");
        });
        //语法：$(selector).append(content)
        $("#button3").click(function(){
            //在每个P标间之后  加上HOLLE WORLD
            $("p").append("<b>HOLLE WORLD!&nbsp;&nbsp;</b>");
        });
        
        //3attr() 方法设置或返回被选元素的属性值
        //语法:$(selector).attr(attribute)
        $("#button4").click(function(){
            //设置
            $("img").attr("width","80px");
        });
        //克隆并追加e某个元素
        //语法：$(selector).clone(includeEvents)
        $("#button5").click(function(){
            $("body").append($("#p1").clone());
        });
        //detach() 方法移除被选元素，包括所有文本和子节点
        //这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
        //detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同
        //语法：$(selector).detach()
        $("#button6").click(function(){
            $("#p2").detach();
        });
        //empty() 方法从被选元素移除所有内容，包括所有文本和子节点
        //语法：$(selector).empty()
        $("#button7").click(function(){
            $("#p2").empty();
        });
        //remove() 方法移除被选元素，包括所有文本和子节点。
        //该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素
        //remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不yiyang 
        $("#button8").click(function(){
            $("#p2").remove();
        });
        //hasClass() 方法检查被选元素是否包含指定的 class
        //语法：    $(selector).hasClass(class)
        $("#button9").click(function(){
            alert($("div:first").hasClass("divClass"));
        });
        //removeAttr() 方法从被选元素中移除属性
        //语法：$(selector).removeAttr(attribute)
        $("#button10").click(function(){
            alert($("p").removeAttr("id"));
        });
        //removeClass() 方法从被选元素移除一个或多个类
        //语法：$(selector).removeClass(class)
        $("#button11").click(function(){
            $("p").removeClass("intro");
        });
        //replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。
        //该方法与 replaceWith() 执行的任务相同，但颠倒了参数
        //语法：$(content).replaceAll(selector)
        $("#button12").click(function(){
            alert(11);
            $("<b><font>===============================</font></b>").replaceAll($("<p>"));
        });
        //replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。
        //该方法与 replaceAll() 执行的任务相同，但颠倒了参数
        //语法：$(selector).replaceWith(content)
        $("#button13").click(function(){
            alert(111);
            $("<p>").replaceWith("<b><font>===============================</font></b>");
        });
        
        //wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
        //语法:$(selector).wrap(wrapper)
        $("#button14").click(function(){
            $("#p3").wrap("<div id='wrapDiv'></div>");
        });
        //wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
        //语法：$(selector).wrapInner(wrapper)
        $("#button15").click(function(){
            $("#p4").wrapInner(document.createElement("b"));
        });    
    });
</script>

</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button id="button1">向第一个 p 元素添加一个类</button>
    <button id="button2">向每个 p 元素之后用appendTo()加上HOLLE WORLD</button>
    <button id="button3">向每个 p 元素之后用append()加上HOLLE WORLD</button>
    </p>
    <img alt="搞笑" src="images/1.jpg">
    <button id="button4">改变图片的大小</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
    <p id="p1">我可以被克隆出来哦...</p>
    <button id="button5">复制每个 p 元素id为p1de 然后追加到 body 元素</button></p>
    <p id="p2">this is P2</p>
    <button id="button6">detach()删除p元素id为p2的 所有元素属性</button>
    <button id="button7">empty()删除p元素id为p2的 所有元素属性</button>
    <button id="button8">remove()删除p元素id为p2的</button></p>
    <div class="divClass">this is p3</div>
    <button id="button9">检查第一个div元素是否包含class为divClass的属性</button></p>
    <button id="button10">从任何p元素中移除id属性</button><p>
    <p class="intro">我的class值是："intro"</p>
    <button id="button11">从第一个p元素为P3的中  移除class属性"intro"</button></p>
    
    <button id="button12">replaceAll()用红色粗体=替换所有换行</button>
    <button id="button13">replaceWith()用红色粗体=替换所有换行</button></P>
    <p id="p3">This is a paragraph.</p>
    <button id="button14">wrap()用div替换p元素</button></P>
    <p id="p4">This is another paragraph.</p>
    <button id="button15">加粗p元素id="p4"段落中的所有内容</button></P>