筛选选择器（方法）

　　　　既然是方法 那就应该对象调用   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. java web service wsdlLocation 不写死 可动态配置

    本解决方案用例Maven 如果项目没用Maven的客园参考扩展一下思路 寻找下适合解决自己项目的方式

  2. DDoS防护之TCP防护

    本文由  网易云 发布. TCP协议,相信对于每一个开发工程师都不陌生.由于该协议是一个面向连接,可靠的特性,广泛应用于现在互联网的应用中.如常见的Web.SSH.FTP等都是基于TCP协议.目前TC ...

  3. Kubernetes性能测试实践

    本文由  网易云 发布. 概述 随着容器技术的发展,容器服务已经成为行业主流,然而想要在生产环境中成功部署和操作容器,关键还是容器编排技术.市场上有各种各样的容器编排工具,如Docker原生的Swar ...

  4. 为什么选择AJPFX

    外汇贵金属交易市场是全球最大的金融产品市场,日均交易量达到5万亿美元,相当于美国证券市场的40倍,中国股票市场日均交易量的700倍,它的主要优势在于其透明度较高,由于交易量巨大,主力资金(如政府外汇储 ...

  5. day 104 luffy项目第二天

    一.前端配置 二.后端配置 一.前端配置 app.vue 二 . 后端配置 model模型配置 迁移数据 序列化 views.py文件配置 url路由 配置中间件解决跨域问题 重新设计下 model模 ...

  6. 713. Subarray Product Less Than K

    Your are given an array of positive integers nums. Count and print the number of (contiguous) subarr ...

  7. react.js学习之路二

    看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 ...

  8. Golang 实现守护主进程

    package main import ( "fmt" "runtime" "sync" "time" ) func t ...

  9. hdoj1575 Tr A（矩阵快速幂）

    简单的矩阵快速幂.最后求矩阵的秩. #include<iostream> #include<cstring> using namespace std; ; int n,k; s ...

  10. FunDA（11）－ 数据库操作的并行运算：Parallel data processing

    FunDA最重要的设计目标之一就是能够实现数据库操作的并行运算.我们先重温一下fs2是如何实现并行运算的.我们用interleave.merge.either这几种方式来同时处理两个Stream里的元 ...