zoukankan      html  css  js  c++  java
  • jquery学习之add()

    解读:

    add() 将元素添加到匹配元素的集合中

    例1:

        <!DOCTYPE html>  
        <html>  
        <head>  
        <style>  
        div { width:60px; height:60px; margin:10px; float:left; }  
        p { clear:left; font-weight:bold; font-size:16px;  
        color:blue; margin:0 10px; padding:2px; }  
        </style>  
        <script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>  
        <script>  
        $(document).ready(function(){  
            $("div").css("border", "2px solid red").add("p").css("background", "yellow");  
        });  
        </script>  
        </head>  
        <body>  
        <div></div>  
        <div></div>  
        <div></div>  
        <div></div>  
        <div></div>  
        <div></div>  
        <p>Added this… (notice no border)</p>  
        </body>  
        </html>  

     结果如下图所示:

    解说:这里的add("p")相当于和的意思,就是说$("div")的css和p的css。这里注意的是div是有边框的。而p没有。

    例2:

        <body>  
        <p>Hello</p><span>Hello Again</span>  
        </body>  
        $("p").add("span").css("background", "yellow");  

    结果如下图所示:

    p和span的css,相当于

        $("p,span").css("background","yellow");  

    例三:

        <body>  
        <p>Hello</p>  
        </body>  
        $("p").clone().add("<span>Again</span>").appendTo(document.body);  

    结果如下:

    clone()复制的意思;复制一个p和把<span>Again</span>插入到文档的body中。

    这里插一句:如果不用clone(),则原来的p不存在了。

    例四:

        <body>  
        <p>Hello</p><span id="a">Hello Again</span>  
        </body>   
        $("p").add(document.getElementById("a")).css("background", "yellow");  

    结果如下:

    这表明add()中的参数不仅可以是选择器,也可以是DOM元素。

    转自:http://blog.csdn.net/zm2714/article/details/8119554

  • 相关阅读:
    [转]优秀的程序员不会觉得累成狗是一种荣耀
    .NET读写Excel工具Spire.XlS使用(DataExport )
    WPF之Binding深入探讨
    第一个WPF应用程序
    Visio作图
    唯一的重复元素
    Strange Problem O(∩_∩)O~
    数据库知识点①
    HDU 2825 Wireless Password
    POJ 1625 Censored!
  • 原文地址:https://www.cnblogs.com/lvmylife/p/5359609.html
Copyright © 2011-2022 走看看