8、jQuery中DOM文档操作之筛选操作使用示例
<!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,)
$(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>
页:
[1]