day54

筛选器

参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5

筛选器方法

下一个元素：

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2")

举例：

<ul>

    <li id="l0">l0</li>

    <li>l1</li>

    <li>l2</li>

    <li id="l3">l3</li>

    <li>l4</li>

    <li>l5</li>

</ul>

实践：

父亲元素：

$("#id").parent()

$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

找父标签

<!--父标签-->

<div id="d1">div-1

    <div id="d2">div-2

        <div id="d3">div-3

            <a href="">a标签</a>

        </div>

    </div>

</div>

实践：

parents()、parentsUntil()作用看注释可知。

儿子和兄弟元素：

$("#id").children();// 儿子们

$("#id").siblings();// 兄弟们

示例：

<!--兄弟和儿子-->

<div id="dd">

    <p>p0</p>

    <p>p1</p>

    <p id="p2">p2</p>

    <p>p3</p>

</div>

实践：

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

操作标签

样式操作

样式类

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

示例：

<div id="dd">

    <p>p0</p>

    <p>p1</p>

    <p id="p2">p2</p>

    <p>p3</p>

</div>

实践：

应用toggleClass()：、

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>样式操作示例</title>

    <style>

        .c1 {

            height: 200px;

            width: 200px;

            border-radius: 50%;

            background-color: red;

        }

        .c2 {

            background-color: green;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<script src="jquery-3.2.1.min.js"></script>

<script>

    // 找标签

    $("div.c1").click(function () {

        // console.log(this);  // this是DOM对象,转为jQuery对象才能使用jQuery方法

        $(this).toggleClass("c2"); // 有就删掉 没有就加上

    })

</script>

</body>

</html>

divEle2.onclick=function () { this.innerText="呵呵"; }      divEle2是DOM对象。

应用：

展开点击的栏目

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>左侧菜单作业分解</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style-type: none;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

<div class="left-menu">

    <div class="menu-title">菜单一</div>

    <div class="menu-items">

        <ul>

            <li><a href="">111</a></li>

            <li><a href="">222</a></li>

            <li><a href="">333</a></li>

        </ul>

    </div>

    <div class="menu-title">菜单二</div>

    <div class="menu-items hide">

        <ul>

            <li><a href="">111</a></li>

            <li><a href="">222</a></li>

            <li><a href="">333</a></li>

        </ul>

    </div>

    <div class="menu-title">菜单三</div>

    <div class="menu-items hide">

        <ul>

            <li><a href="">111</a></li>

            <li><a href="">222</a></li>

            <li><a href="">333</a></li>

        </ul>

    </div>

</div>

<script src="jquery-3.2.1.min.js"></script>

<script>

    // 需求分析

    // 找到所有的.menu-title标签,绑定点击事件

        $(".menu-title").click(function () {

               // 点击事件具体要做的事儿

        // 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)

//            $(this).next().removeClass("hide");

            $(this).next().toggleClass("hide");

            // 2. 把其他的.menu-items隐藏,添加hide类

            $(this).next().siblings(".menu-items").addClass("hide"); //把其他都隐藏

        })

//    $(".menu-title").click(function () {

//        // 1. 找到所有的.menu-items, 隐藏

//        var $currMenuitem = $(this).next();

//        $(".menu-items").not($currMenuitem).addClass("hide");  // 所有的二级菜单都是隐藏的

//        // 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)

//        $(this).next().toggleClass("hide");

//    })

</script>

</body>

</html>

效果：

jQuery基础笔记（2）的更多相关文章

  1. jQuery基础笔记（1）

    day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery?  MySQL Python              ...

  2. jquery基础 笔记一

    一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...

  3. jQuery基础笔记 each和data（7）

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...

  4. jQuery基础笔记 事件（6）

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 *****         1. 目前为止学过的绑定 ...

  5. jQuery基础笔记（4）

    day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...

  6. jQuery基础笔记（3）

    day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签 样式操作 样式类 addClass();// 添 ...

  7. jquery基础 笔记三

    一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...

  8. jquery基础 笔记二

    动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...

  9. Jquery基础笔记

    1.$(function(){               等价于     window.onload=function(){ })                               } 2 ...

随机推荐

  1. BZOJ1106[POI2007]立方体大作战tet - 树状数组

    描述 一个叫做立方体大作战的游戏风靡整个Byteotia.这个游戏的规则是相当复杂的,所以我们只介绍他的简单规则:给定玩家一个有2n个元素的栈,元素一个叠一个地放置.这些元素拥有n个不同的编号,每个编 ...

  2. Codeforces 709B 模拟

    B. Checkpoints time limit per test:1 second memory limit per test:256 megabytes input:standard input ...

  3. linux(rhel) rescue修复详解

    修复linux,先准备好一张安装光盘,光驱安装好后开机,选择从光驱启动.等待安装盘显示操作界面时选择"rescue"选项,如果有光标提示的话,也可以输入:linux rescue进 ...

  4. Javascript 常用扩展方法

    这篇文章纯粹是为了保存这些方法,供以后翻阅,其实一直保存在 evernote 里面,但觉得还是放到对的地方会好点. 现在收录的很少,希望以后会慢慢增多. 数组扩展 contains,remove 扩展 ...

  5. 冒泡排序java语言实现

    class bubbleSort { public static void main(String[] args){ int[] a={49,38,65,97,76,13,27,49,78,34,12 ...

  6. Check time of different search methods

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...

  7. 判定map中是否存在某元素

    判断某key是否存在可以使用map的count方法来间接判定 count接受一个参数key值,返回map中key值为给定值的元素总数 map<int, string> i_to_s_map ...

  8. 2018.09.23 codeforces 1053B. Vasya and Good Sequences（前缀和）

    传送门 考试的时候卡了一会儿. 显然这个答案只跟二进制位为1的数量有关. 还有一个显然的结论. 对于一个区间[l,r][l,r][l,r],如果其中单个数二进制位为1的数量最大值不到区间所有数二进制位 ...

  9. hdu-1150（二分图+匈牙利算法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1150 思路:题目中给出两个机器A,B:给出k个任务,每个任务可以由A的x状态或者B的y状态来完成. 完 ...

  10. Docker 技巧：删除 Docker 容器和镜像

    默认安装完 docker 后,每次执行 docker 都需要运行 sudo 命令,非常浪费时间影响效率.如果不跟 sudo,直接执行 docker images 命令会有如下问题: Get http: ...