jQuery中add()方法用法實例
更新時間：2015年01月08日 11:15:41 投稿：shichen2014
這篇文章主要介紹了jQuery中add()方法用法,實例分析了add()方法的功能、定義及匹配元素中添加與表達式匹配的元素使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中add()方法用法。分享給大家供大家參考。具體分析如下：
此函數(shù)在匹配元素中添加與表達式匹配的元素。
add()函數(shù)返回的結(jié)果將始終以元素在HTML文檔中出現(xiàn)的順序來排序，而不再是簡單的添加。
語法:
語法一:
復(fù)制代碼 代碼如下:
$(selector).add(expr,context)
實例:
實例一:
將span元素添加的匹配元素中去，并將它們的字體顏色設(shè)置為綠色。
復(fù)制代碼 代碼如下:
<!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.fzitv.net/" />
<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>
實例二:
復(fù)制代碼 代碼如下:
<!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.fzitv.net/" />
<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>
語法二:
復(fù)制代碼 代碼如下:
$(selector).add(element)
參數(shù)列表:
實例:
實例一:
復(fù)制代碼 代碼如下:
<!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.fzitv.net/" />
<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>
實例二:
復(fù)制代碼 代碼如下:
<!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.fzitv.net/" />
<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>
語法三:
復(fù)制代碼 代碼如下:
$(selector).add(html)
參數(shù)列表:
實例:
復(fù)制代碼 代碼如下:
<!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.fzitv.net/" />
<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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery預(yù)加載圖片常用方法,以兩個簡單實例分析了jQuery預(yù)加載圖片的實現(xiàn)技巧,需要的朋友可以參考下2015-06-06
EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼
今天做項目的時候，想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個操作按鈕，怎么實現(xiàn)此功能呢？下面小編給大家?guī)砹薊asyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼，需要的朋友參考下吧2017-08-08
jQuery實現(xiàn)側(cè)浮窗與中浮窗切換效果的方法
這篇文章主要介紹了jQuery實現(xiàn)側(cè)浮窗與中浮窗切換效果的方法,涉及jQuery針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2016-09-09
JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用示例
這篇文章主要介紹了JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用,結(jié)合實例形式分析了jQuery針對頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,并給出了購物車動畫效果案例進行總結(jié),需要的朋友可以參考下2019-05-05
JQuery 1.3.2以上版本中出現(xiàn)pareseerror錯誤的解決方法
最近正在做一個系統(tǒng)，測試組那邊不停的報告bug：后臺、前臺各種列表報告js彈出窗錯誤，內(nèi)容僅僅是一句“pareseerror”！2011-01-01
jquery input checked全選與反選1.3.2的版本
jquery 全選與反選1.3.2的版本2009-05-05
jQuery實現(xiàn)html可聯(lián)動的百分比進度條
這篇文章主要介紹了jQuery實現(xiàn)html可聯(lián)動的百分比進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
jquerydom對象的事件隱藏顯示和對象數(shù)組示例
本文為大家介紹下jquery的dom對象的事件隱藏顯示和對象數(shù)組，感興趣的朋友可以參下2013-12-12
最近項目中遇見 Jquery Ajax 緩存問題,load出來的頁面狀態(tài)有時正常，有時不對，記錄一下，希望對大家有幫助2011-05-05
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器，使用jQuery EasyUI的朋友可以參考下。2011-09-09