筛选选择器（方法）

　　　　既然是方法 那就应该对象调用   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. CSS2.1SPEC：视觉格式化模型之width属性详解(上)

    在介绍了包含块之后,CSS2.1标准中介绍了width属性和height属性,这两个属性在我们的页面布局中也发挥着重要的作用.在盒模型中,width和height包围了一个框的内容区域(content ...

  2. KEUC首次落地中国，网易云深度剖析Kubernetes优化与实践

    本文由  网易云发布. 10 月 15 日,聚焦 Kubernetes 中国行业应用与技术落地的首届中国 Kubernetes 用户大会(KEUC)在杭州成功举办.本次大会吸引了来自全球各地的技术精英 ...

  3. S11 day 97 -98天 Luffycity项目

    1. 建模 from django.db import models from django.contrib.contenttypes.fields import GenericForeignKey, ...

  4. day65 Django模板语言

      常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特殊的含 ...

  5. Socket编程概念

    一.网路套接字 在通信过程中,套接字是成对存在的,该套接字内部借助两个缓冲区实现 二.网络字序 1.存储方式 大端法(网络):高位存低位,低位存高位 小端法(本地):高位存高位,低位存低位 2.网络字 ...

  6. day24 计算任意文件夹大小 , 校验大文件的一致性 , 发抢红包程序

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.计算任意一个文件夹的大小(考虑绝对路径的问题)# 基础需求 这个文件夹中只有文件# 进阶需求 这个文件夹 ...

  7. Mysql数据库一:安装与创建windows服务

    Mysql数据库安装与创建windows服务 1.先下载压缩包(mysql-5.7.18-winx64.zip)移动到对应目录(如D:\software)后解压. 2.安装服务端: mysqld:带d ...

  8. 标准的sql执行顺序

    正常情况下是先join再进行where过滤

  9. SecureCRT连接Ubuntu,centos失败，长时间的重新连接，连接不了解决办法

    Ubuntu,centos默认未安装ssh远程加密连接服务.使用命令,安装即可. 0.sudo apt-get install openssh-server openssh-client 1.rpm ...

  10. linux中进程和计划任务管理

    进程和计划任务管理 1. 程序和进程的关系 程序:保存在硬盘.光盘等介质中的可执行代码和数据:静态保存的代码 进程:在 CPU 及内存中运行的程序代码:动态执行的代码:父.子进程:每个进程可以创建一个 ...