筛选选择器（方法）

　　　　既然是方法 那就应该对象调用   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. (php)实现万年历

    <?php //修改页面编码 header("content-type:text/html;charset=utf-8"); //获取当前年 $year=$_GET['y'] ...

  2. 解决创建带有NameSpace的XML文件出现空白xmlns的问题

    为了能够让用户自行部署ClickOnce应用程序,需要编写一个生成ClickOnce应用程序的ClickOnce专用安装程序setup.exe,而生成这个setup.exe的方法就是编写一个XML格式 ...

  3. 合服导致 globalserver 起不来的问题

    globalserver 报错 RMIInitArmyBackObject InitError 根据报错信息一路追查下来,发现某个帮派的数据解析 json 的时候报错.监视变量,找出这段字符串,大致结 ...

  4. 读Lock-Free论文实践

    论文地址:implementing Lock-Free Queue 论文大体讲的意思是:Lock-Base的程序的performance不好,并且a process inside the critic ...

  5. 安装Apache时端口号被占用解决方案

    有些朋友的电脑在安装Apache是会遇到端口冲突的问题.以下是一种解决方案 1.打开控制面板的管理工具 2.打开IIS 3.观察网站下的端口号 4.点击绑定 5.更改端口号 6.重新启动即可

  6. day 54 linux 常用指令入门

    Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...

  7. hbase搭建web项目 报500错误 HTTP Status 500 - Unable to compile class for JSP

    在昨天,用hbase做后台搭建web项目时,前边的进行的非常顺利,当运行时便 报错了,截图如下: 这是直接在jsp中接收参数报的错误,如果在servlet中,同样也是报500的错误,虽然显示的不太一样 ...

  8. 使用Jacob操作Wrod文档的工具类代码

    一.需要有jacob的jar包支持 import java.util.Iterator; import java.util.List; import java.util.HashMap; import ...

  9. MyEclipse:详细使用教程

    http://www.56.com/u18/v_MTQwNzY1MTU5.html?fromvsogou=1

  10. Postman—命令执行脚本及生成报告

    前言 前面的应用中,都是在postman图形界面工具里面进行测试,但是有时候我们需要把测试脚本集成到CI平台,或者在非图形界面的系统环境下进行测试,那么我们该如果处理呢 通过newman来执行post ...