8、jQuery中DOM文档操作之筛选操作使用示例

Sian · 发表于 2016-2-19 22:18:12

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
	<title>DOM基本操作之筛选操作</title>
	<meta charset="utf-8"/>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>
	// eq(index|-index)
	// first()
	// last()
	// hasCalss(class)
	// filter(expr|obj|ele|fn)
	// is(expr|obj|ele|fn)
	// map(callback)
	// has(expr|ele)
	// not(expr|ele|fn)
	// slice(start,[end])
	$(document).ready(function(){
		$('button').click(function(){
			// 某个某元素标签执行某动作(p元素中的第2个元素修改颜色为红色)
			$('p').eq(1).css('color', 'red');
			// 某个元素集合中匹配某个元素执行某动作(p标签中匹配php类的标签颜色改为绿色)
			$('p').filter('.php').css('color', 'green');
			// 将某个集合的元素内容进行重新集合化
			var str = $('p').map(function(){
				// 获取p标签内容
				return $(this).text();
				// 使用“,”连接起来
			}).get().join(',');
			console.log(str);
			// 某个元素集中从某个到某个执行某动作(所有p标签中从1开始到第2个，实际上就是第2个)
			$('p').slice(1, 2).css('color', 'blue');
		});
	});
	</script>
</head>
<body>
	<button>按钮</button>
	<div>
		<p class="php">PHP 资讯</p>
		<p>PHP 论坛</p>
		<p>Zend 产品</p>
	</div>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 8、jQuery中DOM文档操作之筛选操作使用示例