欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中add()方法用法實例

 更新時間：2015年01月08日 11:15:41   投稿：shichen2014  
這篇文章主要介紹了jQuery中add()方法用法,實例分析了add()方法的功能、定義及匹配元素中添加與表達式匹配的元素使用技巧,需要的朋友可以參考下

本文實例講述了jQuery中add()方法用法。分享給大家供大家參考。具體分析如下：

此函數在匹配元素中添加與表達式匹配的元素。
add()函數返回的結果將始終以元素在HTML文檔中出現的順序來排序，而不再是簡單的添加。

語法:

語法一:

復制代碼 代碼如下:
$(selector).add(expr,context)

參數 描述
expr 可選。用于匹配元素的選擇器字符串。
context 可選。作為待查找的 DOM 元素集、文檔或 jQuery 對象。

實例:

實例一:

將span元素添加的匹配元素中去，并將它們的字體顏色設置為綠色。

復制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
   ul
   {
          width:200px;
          height:200px;
          border:1px solid blue;
   }
   div
   {
          height:300px;
   }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add("span").css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

實例二:

復制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
    ul
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    div
    {
        height:300px;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add("span","ul").css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

語法二:

復制代碼 代碼如下:
$(selector).add(element)

參數列表:
參數 描述
element 可選。被添加的DOM元素或者jQuery元素。

實例:

實例一:

復制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add(document.getElementById("myspan")).css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id="myspan">我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

實例二:

復制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add($("#myspan")).css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id="myspan">我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

語法三:

復制代碼 代碼如下:
$(selector).add(html)

參數列表:
參數 描述
html 可選。被添加的html代碼片段。

實例:

復制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        alert($("p").add("<span>新添加的</span>").length);
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
  </ul>
</body>
</html>

希望本文所述對大家的jQuery程序設計有所幫助。

相關文章

  • 封裝的jquery翻頁滾動(示例代碼)

    封裝的jquery翻頁滾動(示例代碼)

    這篇文章主要介紹了封裝的jquery翻頁滾動。需要的朋友可以過來參考下，希望對大家有所幫助
    2013-11-11
  • jQuery中insertAfter()方法用法實例

    jQuery中insertAfter()方法用法實例

    這篇文章主要介紹了jQuery中insertAfter()方法用法,實例分析了insertAfter()方法的功能、定義及匹配的元素插入到另一個指定的元素集合后面的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery實現簡單QQ聊天框

    jQuery實現簡單QQ聊天框

    這篇文章主要為大家詳細介紹了jQuery實現簡單QQ聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • jQuery?v3.3.1的BUG以及解決辦法(附解決方案)

    jQuery?v3.3.1的BUG以及解決辦法(附解決方案)

    這篇文章描述了我們?FineUIPro?產品?更新中遇到的一個問題，最終將問題定位到?jQuery.position()?函數，雖然jQuery的做法是依照HTML規(guī)范來的，但是?jQuery.offsetParent()?和?jQuery.position()?兩個函數有沖突，并且會導致之前的jQuery插件出錯，應該算是一個BUG吧
    2023-03-03
  • 使用jquery解析XML示例代碼

    使用jquery解析XML示例代碼

    這篇文章通過示例為大家介紹了使用jquery解析XML的方法,經測試比較實用，需要的朋友可以參考下
    2014-09-09
  • jquery插件uploadify實現帶進度條的文件批量上傳

    jquery插件uploadify實現帶進度條的文件批量上傳

    這篇文章主要介紹了jquery插件uploadify實現帶進度條的文件批量上傳，感興趣的小伙伴們可以參考一下
    2015-12-12
  • jQuery Ajax使用實例

    jQuery Ajax使用實例

    這篇文章主要介紹了jQuery Ajax使用實例,本文講解了$.ajax的一般格式、$.ajax的參數描述、$.ajax需要注意的一些地方、$.ajax我的實際應用例子,需要的朋友可以參考下
    2015-04-04
  • jquery nth-child()選擇器的簡單應用

    jquery nth-child()選擇器的簡單應用

    今天項目中遇到過一個這樣的問題，就是希望讀出來的文章列表能夠每隔五個加一個分割條，而不是每個都加。
    2010-07-07
  • 基于jQuery.Validate驗證庫知識點的詳解

    基于jQuery.Validate驗證庫知識點的詳解

    本篇文章介紹了，基于jQuery.Validate驗證庫知識點的詳解。需要的朋友參考下
    2013-04-04
  • 解析jquery獲取父窗口的元素

    解析jquery獲取父窗口的元素

    本篇文章是對jquery獲取父窗口元素的實現方法進行了詳細的分析介紹，需要的朋友參考下
    2013-06-06

最新評論