jquery api children()

最新推荐文章于 2024-05-28 22:16:31 发布

依然那么楞

最新推荐文章于 2024-05-28 22:16:31 发布

阅读量719

点赞数

文章标签： jquery api children

本文链接：https://blog.csdn.net/ling811/article/details/17551499

版权

.children()

描述:孩子的每个元素在匹配的元素集合,有选择地过滤选择器。

children([selector])

selector

一个字符串包含一个选择器表达式匹配元素。

给定一个jQuery对象,该对象表示一组DOM元素,children()方法允许我们搜索这些元素在DOM树和构造一个新的jQuery对象匹配元素。children()方法不同.find()，children()只旅行一个水平下DOM树,find()可以遍历多个水平选择后代元素(孙子,等等)。还要注意最喜欢jQuery方法,children()不返回文本节点,所有的孩子(包括文本和注释节点,使用.contents()。　　
children()方法可以接受一个相同类型的选择器表达式,我们可以通过$()函数。如果选择器提供,元素将被过滤测试他们是否匹配。

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>children</title>
<script src="jquery-1.10.2.js"></script>
<style>
  body {font-size: 16px;font-weight: bolder;}
  div { width: 130px; height: 82px; margin: 10px; float: left;  border: 1px solid blue; padding: 4px; }
  #container {  width: auto; height: 105px;  margin: 0;float: none; border: none; }
  .hilite { border-color: red;}
  #results {  display: block;color: red; }
  p, span, em, a, b, button { border: 1px solid transparent; }
  p { margin: 10px;}
  span {  color: blue; }
  input {width: 100px; }
  </style>
</head>

<body>
<div id="container">
  <div>
    <p>This <span>is the <em>way</em> we</span>
      write <em>the</em> demo,</p>
  </div>
 
  <div>
    <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
    the</button> demo,
  </div>
 
  <div>
    This <span>the way we <em>write</em> the <em>demo</em> so</span>
    <input type="text" value="early"> in
  </div>
 
  <p>
    <span>t</span>he <span>m</span>orning.
    <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
  </p>
</div>
<script>
	$("#container").click(function(event){
		$("*").removeClass("hilite");
		var kids = $(event.target).children();
		var len = kids.addClass("hilite").length;
		$("#results span:first").text(len);
		$("#results span:last").text(event.target.tagName);
		
		event.preventDefault();
	})
</script>
</body>
</html>

效果图：