筛选选择器（方法）

　　　　既然是方法 那就应该对象调用   obj.metch();

　　　　$(“.dd”).children("ul"),show();           //找到.dd下的带Ul的所有子元素  显示

　　　　　　　　.eq(index)　　　　//匹配index下标的元素

　　　　　　　　.first()　　　　　　//获取第一元素

　　　　　　　　.last()　　　　　　//获取最后一个元素

　　　　　　　　.find()　　　　　　//后代查找

　　　　　　　　.parent()　　　　//查找父标签

　　　　　　　　.siblings()　　　　//兄弟元素

　　　　　　　　.next()　　　　//下一个兄弟元素

　　　　　　　　.prev()　　　　//前一个兄弟元素

　　　　　　　　.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="jquery1.12/jquery-1.12.4.js"></script>

    <title>Document</title>

</head>

<body>

        <style>

            .li>a{

                text-decoration: none;

                display: block;

                width: 140px;

            }

            ul{

                list-style: none;

            }

           .box>ul>li{

               float: left;

               margin: 50px;

           }

           .box{

               display: block;

               height: 30px;

               text-align: center;

           }

           .ul{

               padding-left: 0;

               text-align: center;

           }

           .li>ul{

               display: none;

           }

        </style>

    <div class="box">

        <ul class="ul">

            <li class="li">

                <a href="">公司简介</a>

                <ul class="ul">

                    <li>二级菜单选项</li>

                    <li>二级菜单选项</li>

                    <li>二级菜单选项</li>

                </ul>

            </li>

            <li class="li">

                <a href="">招聘中心</a>

                <ul class="ul">

                    <li>二级菜单选项</li>

                    <li>二级菜单选项</li>

                    <li>二级菜单选项</li>

                </ul>

            </li>

            <li class="li">

                <a href="">联系方式</a>

                <ul class="ul">

                    <li>二级菜单选项</li>

                    <li>二级菜单选项</li>

                    <li>二级菜单选项</li>

                </ul>

            </li>

        </ul>

    </div>

    <script>

            //当我们鼠标移动到.box>ul>li 这个元素的时候 显示它下面的ul  为什么？

            //如果我们不把.box>ul>li 元素设置事件 ，放我们把鼠标放在这个元素后 就会隐藏了

          $(".box>ul>li").mouseover(function(){

              //$(this),因为this是DOM对象，所以需要转换

              //children 是获取所有的子元素，        a  和ul

              //但是我们只需要ul 所以 children("ul"),show()

             $(this).children("ul").show();

         });

         $(".box>ul>li").mouseout(function(){

             $(this).children("ul").hide();

         });

    </script>

</body>

</html>

Jquery 筛选选择器的更多相关文章

  1. jquery-5 jQuery筛选选择器

    jquery-5  jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...

  2. jQuery筛选选择器

    <!DOCTYPE html><html><head>    <meta http-equiv="Content-type" conten ...

  3. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  4. jQuery选择器之表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. jQuery选择器之属性筛选选择器

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...

  6. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  7. jquery 表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  8. jquery 子元素筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  9. jquery 属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

随机推荐

  1. Python：Selenium+Webdriver安装

    本人小白一枚,今天在使用selenium+webdriver的时候遇到了一个小问题: WebDriverException: 'chromedriver' executable needs to be ...

  2. lnmp下thinkphp 500错误指南

    先在php.ini打开报错,display_errors: on: 如果是open_basedir的问题,修改nginx的配置文件fastcgi.conf 将fastcgi_param PHP_ADM ...

  3. Android---------------Service的学习

    一.创建与启动Servcie的三个步骤 : 1. 创建一个类并继承Servcie 2.在配置文件中注册服务 3.通过Intent来启动服务 二.Service的两种启动方式 1.startServce ...

  4. 通过网站统计或系统监视器查看IIS并发连接数

    如果要查看IIS连接数,最简单方便的方法是通过“网站统计”来查看,“网站统计”的当前在线人数可以认为是当前IIS连接数;如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带 ...

  5. spring3.2+mybatis3.2+maven整合

    用maven管理spring+mybatis的项目: 这里主要讲述的是maven中的pom.xml文件的配置,以及在maven构建过程中会碰到的几个问题(我用的是maven4.4的版本): 首先一步一 ...

  6. Sql Sever 2012数据库更名失败 error：5030

    打开SQL Server 2012数据库时,对HzWind_2MW数据库名修改为HzWind_2MW_GEM,结果出现如图1所示: 图1 数据库更名时出现error:5030 数据库不能重名名5030 ...

  7. n层满k叉树总共有多少个节点

    2叉树 1 3 7 对应公式为(2^n-1)/1 3叉树 1 4 13 对应公式为(3^n-1)/2 4叉树 1 5 21对应公式为(4^n-1)/3 ... n层k叉树,总共有(k^n-1)/k-1 ...

  8. OS之进程管理---进程调度和多线程调度

    进程调度基本概念 多道程序的目标就是始终允许某个进程运行以最大化CPU利用率,多个进程通时存在于内存中,操作系统通过进程调度程序按特定的调度算法来调度就绪队列中的进程到CPU,从而最大限度的利用CPU ...

  9. 利用wget配合bash脚本同时下载多个文件

    先把需要下载的文件写入到一个文件中,命名为urls.txt,比如: http://blog.is36.com/a.jpg http://blog.is36.com/b.jpg http://blog. ...

  10. Linux文件目录管理

    Linux文件目录管理 文件的路径 路径: . 表示当此层目录 .. 表示上一层目录 - 代表前一个工作目录 ~ 代表"目前用户身份"所在的文件夹 ~account 代表accou ...