jQuery基础笔记（2）

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）的更多相关文章

jQuery基础笔记（1）
day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery? MySQL Python ...
jquery基础笔记一
一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...
jQuery基础笔记 each和data（7）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...
jQuery基础笔记事件（6）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
jQuery基础笔记（4）
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...
jQuery基础笔记（3）
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签样式操作样式类 addClass();// 添 ...
jquery基础笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
jquery基础笔记二
动态创建元素关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
Jquery基础笔记
1.$(function(){ 等价于 window.onload=function(){ }) } 2 ...

随机推荐

js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf
var Cts = "bblText"; if(Cts.indexOf("Text") > 0 ) { alert('Cts中包含Text字符 ...
Java ENUM枚举的用法
DK1.5引入了新的类型——枚举.在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便. 用法一:常量在JDK1.5 之前,我们定义常量都是: publicstaticfianl... ...
Luogu 1070 道路游戏
看完题面想了一会发现只会写$n^3$,愣了一会才想出了单调队列优化的做法. 90分算法: 设$f_{i, j, k}$表示第$i$分钟在第$j$座城市已经走了$k$步的最大价值,转移显然,时间复杂度$ ...
[BAT]cmd命令之 cd /d %~dp0
cd /d %~dp0是什么意思啊?批处理文件中的一条语句意思是更改当前目录为批处理本身的目录有些晕吧?不急,我举例比如你有个批处理a.bat在D:\qq文件夹下 a.bat内容为 cd /d ...
13 Maven 编写插件
Maven 编写插件 Maven 的任何行为都是由插件完成的,包括项目的清理.绵编译.测试以及打包等操作都有其对应的 Maven 插件.每个插件拥有一个或者多个目标,用户可以直接从命令行运行这些插件目 ...
使用reactjs做一个CRUD功能
第一步:引入reactjs所依赖的js文件,本案例使用的是bootstrap前端框架,所以引入了相应的js和css文件第二步:body里面添加两个div 第三步:开始编写reactjs脚本 < ...
类内初始值（c++11）
1.概念 1)可以为数据成员提供一个类内初始值,创建对象时,类内初始值用于初始化数据成员,没有初始值的成员将被默认初始化 2)类内初始值和赋值类似,或者放在花括号里(如数组),或者放在等号右边,不能使 ...
UVa 11636 Hello World! （水题思维）
题意:给你一个数,让你求需要复制粘贴多少次才能达到这个数. 析:这真是一个水题,相当水,很容易知道每次都翻倍,只要大于等于给定的数就ok了. 代码如下: #include <iostream&g ...
点云库PCL学习
1. 点云的提取点云的获取:RGBD获取点云的获取:图像匹配获取(通过摄影测量提取点云数据) 点云的获取:三维激光扫描仪 2. PCL简介 PCL是Point Cloud Library的简称,是 ...
Amazon成本和产出的衡量方式
Amazon用一种T-Shirt Size 估计的方式来做项目. 产品经理会对每一条需求评估上业务影响力的尺寸,如:XXXL 影响一千万人以上或是可以占到上亿美金的市场,XXL,影响百万用户或是占了千 ...