jQuery add()

admin發表於2017-02-14
jQuery

此方法在匹配元素中新增與表示式匹配的元素。

返回一個jQuery物件，其中的元素按照元素在文件中出現的位置進行排序。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
$(selector).add(expr)

引數解析:

expr：一個字串表示的選擇器表示式，找到更多的元素新增到匹配的元素集合。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
$(selector).add(elements)

引數解析:

elements:一個或多個元素新增到匹配的元素集合。

jQuery1.0版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
$(selector).add(html)

引數解析:

html：HTML片段新增到匹配的元素集合。

jQuery1.0版本新增。

語法結構四:

[JavaScript] 純文字檢視 複製程式碼
$(selector).add(jQuery object)

引數解析:

jQuery object:一個現有的jQuery物件新增到匹配的元素集合。

jQuery1.3.2版本新增。

語法結構五:

[JavaScript] 純文字檢視 複製程式碼
$(selector).add(selector,context)

引數解析:

（1）.selector:一個字串表示的選擇器表示式，找到更多的元素新增到匹配的元素集合。

（2）.context:指定選擇器查詢元素所在的上下文。

jQuery1.4版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("div").add("p").css("color","blue");
})
</script>
</head>
<body>
<div>螞蟻部一</div>
<p>螞蟻部落二</p>
</body>
</html>

上面的程式碼可以將p元素新增到集合中，然後將它們的字型顏色設定為藍色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  var p = document.getElementsByTagName("p")[0];
  $("div").add(p).css("color", "blue");
})
</script>
</head>
<body>
<div>螞蟻部落一</div>
<p>螞蟻部落二</p>
</body>
</html>

功能與上面的程式碼相同，只不過引數是dom元素物件。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("div").add('<p>螞蟻部落三</p>')
    .appendTo(document.body)
    .css("color", "blue");
})
</script>
</head>
<body>
<div>螞蟻部落一</div>
<p>螞蟻部落二</p>
</body>
</html>

以html片段作為引數，相當於建立了一個p元素然後新增到集合。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  var $p = $("p");
  $("div").add($p).css("color", "blue");
})
</script>
</head>
<body>
<div>螞蟻部落一</div>
<p>螞蟻部落二</p>
</body>
</html>

上面的程式碼以jQuery物件作為引數。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("div").add("p","#ant").css("color", "blue");
})
</script>
</head>
<body>
<div>螞蟻部落一</div>
<p>螞蟻部落二</p>
<div id="ant">
  <p>螞蟻部落三</p>
</div>
</body>
</html>

以上程式碼規定了查詢p的上下文範圍。

相關文章