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 ...

随机推荐

Qt中使用python--Hello Python！
step1:install Python (version 2.7 or higher): step2:The configuration is as follows: 1.create qt con ...
VisulaVM 性能：分析 JVM 性能的免费工具
VisualVM是一个集成多个JDK命令行工具的可视化工具.可以作为Java应用程序性能分析和运行监控的工具.开发人员可以利用它来监控.分析线程信息,浏览内存堆数据.系统管理员可以利用它来监测.控制 ...
Response.Redirect原理图解
java 打包jar 并后台运行
编译java: javac main.java 运行: java main.class 生成jar: 第一步:新建一个MANIFEST.MF 第二步:将如下信息放到该文件中 Manifest-Ver ...
使用java做paypal开发时购买东西支付不成功的原因
使用java做paypal开发时购买东西支付不成功的原因没有设置网站习惯设定,登陆自己的paypal账户,在网站习惯设定上填写回调的url路径,这样就可以支付成功了并且异步修改订单的状态. 支付成 ...
Docker swarm结合Openresty部署rabbitmq集群
Docker swarm结合Openresty部署rabbitmq集群大家好,年底了,年味儿越来越浓了．2019年的寒冬被定义为未来10年中最好的一年,对于这一说法悲观的人和乐观的人的理解是不一样的 ...
arduino 串口命令解析
/* DS3231_test.pde Eric Ayars 4/11 Test/demo of read routines for a DS3231 RTC. Turn on the serial m ...
=default(c++11)
1.概念 1)如果我们需要编译器默认的行为,则可以在参数列表后面加上=default来显式地要求编译器生成合成版本的默认构造函数和拷贝控制成员:合成的默认构造函数.合成拷贝构造函数.合成拷贝赋值运算符 ...
s111 stark组件
内容回顾: 1. 类当做key 2. django中的model所在app名称.以及小写类名. def index(request): # print(m1.UserInfo,m1.UserInfo. ...
LA 3602 DNA Consensus String （暴力枚举）
题意:给定m个长度为n的DNA序列,求一个最短的DNA序列,使得总Hamming距离最小. Hamming距离等于字符不同的位置个数. 析:看到这个题,我的第一感觉是算时间复杂度,好小,没事,完全可以 ...