筛选选择器（方法）

　　　　既然是方法 那就应该对象调用   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. VS未能正确加载 ”Microsoft.VisualStudio.Editor.Implementation.EditorPackate“包错误解决方法

    很久没用VS了,打开后出现未能正确加载 ”Microsoft.VisualStudio.Editor.Implementation.EditorPackate“包的错误,经过一番上网查阅错误得以解决. ...

  2. Win(Phone)10开发第(2)弹，导出APPX包并签名部署

    当我们新建一个win10 uap项目,如果想导出测试包,需要点击项目名称,选择商店-导出应用包,这个时候会生成一个文件夹,包含appx和ps1等文件. powershell运行Add-AppDevPa ...

  3. [翻译].NET Core 3 Preview1和Windows桌面框架开源

    原文来自TechViews 今天,我们宣布推出.NET Core 3 Preview 1.这是.NET Core 3的第一个公开发布.我们有一些令人兴奋的新功能可供分享,并希望得到您的反馈.您可以使用 ...

  4. Unity运行时保存prefab的方法一则

    unity编辑器在运行状态时,prefab的apply按钮就消失了,其实此时代码访问的话是有效的. 代码如下,将会给transform的右键增加一个save prefab的选项. using Unit ...

  5. 639. Decode Ways II

    A message containing letters from A-Z is being encoded to numbers using the following mapping way: ' ...

  6. Mysql数据库二:表的增删改查

    ----建表CREATE TABLE emp( id int PRIMARY key auto_increment, name char(10) , birthday DATE , salary FL ...

  7. jzoj100031

    這題是結論題 好玄學,不懂 代碼: #include<bits/stdc++.h> using namespace std; struct no{ int v,p; bool operat ...

  8. hdu4815----dp0-1背包

    /* 题目大意: 有n个问题,,告诉你答对该题能得多少分,其中一个人随机答题,问另一个人不输的概率为p 至少需要答多多少分 对于样例: 3 0.5 1 2 3 分析: 分数 0 1 2 3 3 4 5 ...

  9. Highcharts纯Javascript图表使用讲解

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...

  10. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...