<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height: 400px; 200px;border: 1px solid blanchedalmond"> <div class="item"> <div class="header">标题一</div> <div class="content">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题四</div> <div class="content hide">内容</div> </div> </div> <script src="jquery.js"></script> <script> $('.header').click(function () { //当前点击的标签$(this) //获取某个标签的下一个标签 //获取某个标签的父标签 //得获取所有的兄弟标签 //添加样式和移除样式 //筛选器 // $(this).next()获取下一个 // $(this).prev()获取上一个 // $(this).parent()获取父标签 // $(this).children()获取所有的孩子标签 // $(this).siblings()获取所有的兄弟标签 //find('i1')子子孙孙中查找 // $(this).next().removeClass('hide'); // $(this).parent().siblings().find('.content').addClass('hide'); //jquery链式编程 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html>
注释：
筛选：
$('i1:eq(1)')
$('i1).eq(1)
// $(this).next()获取下一个
$(this).nextAll([expr])
$(this).nextUntil([e|e][,f])
// $(this).prev()获取上一个
$(this).prevAll([expr])
$(this).prevUntil([e|e][,f])
// $(this).parent()获取父标签
$(this).parents([expr])
$(this).parentsUntil([e|e][,f])
// $(this).children()获取所有的孩子标签
// $(this).siblings()获取所有的兄弟标签
//find('i1')子子孙孙中查找
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide');
first()
last()
hasClass(class)