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

  • 相关阅读:
    搜索--P1605 迷宫
    搜索--P1219 N皇后
    复制百度文库的技巧
    P1036 选数(DFS)
    P1217 [USACO1.5]回文质数 Prime Palindromes
    mysql常用指令
    code blocks 安装与实践
    C++ string 是否以‘’结尾 讨论
    ELK(1) ELK的安装及使用收集日志
    windows下nginx的安装及使用
  • 原文地址:https://www.cnblogs.com/lvmylife/p/5359609.html
Copyright © 2011-2022 走看看