分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

jQuery筛选器

发布时间:2023-09-06 01:06责任编辑:沈小雨关键词:jQuery

一、jQuery常用筛选器有以下几种:

1、下一个标签

$(document).next()

2、上一个标签

$(document).prev()

3、父亲标签

$(document).parent()

4、孩子标签

$(document).children()

5、兄弟标签

$(document).siblings()

6、子孙中查找

$(document).find(‘.i1‘) ??/*在子孙中查找class属性为i1的标签*/

二、具体应用

实现点击菜单栏出现当前菜单下的内容,并隐藏其它菜单下的内容:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 ????<style> 7 ????????.menu{ 8 ????????????background-color: yellow; 9 ????????????width: 200px;10 ????????}11 ????????.content{12 ????????????background-color: red;13 ????????????width: 100px;14 ????????}15 ????????.hide{16 ????????????display: none;17 ????????}18 ????</style>19 </head>20 <body>21 ????<div>22 ????????<div>23 ????????????<div class="menu">目录1</div>24 ????????????<div class="content hide">内容1</div>25 ????????????<div class="content hide">内容1</div>26 ????????</div>27 ????????<div>28 ????????????<div class="menu">目录2</div>29 ????????????<div class="content hide">内容2</div>30 ????????????<div class="content hide">内容2</div>31 ????????</div> ???????32 ????????<div>33 ????????????<div class="menu">目录3</div>34 ????????????<div class="content hide">内容3</div>35 ????????????<div class="content hide">内容3</div>36 ????????</div> ???????37 ????</div>38 ????<script src=‘jquery-3.2.1.js‘></script>39 ????<script type="text/javascript">40 ????????$(‘.menu‘).click(function(){41 ????????????$(this).siblings().removeClass(‘hide‘);42 ????????????$(this).parent().siblings().find(‘.content‘).addClass(‘hide‘)43 ????????})44 ????</script>45 </body>46 </html>

jQuery筛选器

原文地址:http://www.cnblogs.com/Charles9703/p/7440485.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved