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

随机推荐

【Sikuli】Sikuli 文档
http://sikulix-2014.readthedocs.io/en/latest/index.html
TLS/SSL简单过程
.wcf的认证分为两种 1.1 transport模式,在传输层完成认证(只能在传输层完成认证,利用硬件加速效率更高) a.在使用transport模式,非windows凭证的情况下默认使用TLS/S ...
Linux多线程服务端编程使用muduo C++网络库学习笔记日志log
代码来自陈硕开源代码库 muduo中地址是https://github.com/chenshuo/muduo #pragma once #include <string> #define ...
stl学习记录(2)
#include <iostream> #include <utility> #include <tuple> #include <complex> # ...
关于apicloud图片缓存
imageCache如果是同一个地址,得到的缓存文件名字是一样的.可能是对url md5了一下. apicloud目前有两种清除方式1 一种是api.clearCache 另一种方法当然是强大的 ...
转录组差异表达分析工具Ballgown
Ballgown是分析转录组差异表达的R包. 软件安装: 运行R, source(“http://bioconductor.org/biocLite.R”) biocLite(“ballgown”) ...
hi~大家好，特地出来解释下最近为啥都不更新了！
总结一句话就是!因为我有宝宝啦~加上项目赶得不要不要的公司原因加上个人原因只能在家养胎啦,对象也是程序猿哦~不过是后端程序猿哈哈哈. 我打算开公众号(百撕可乐)啦,和博客圆的名字一样,毕竟用了这么多年 ...
hdu-1070(水题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1070 题意:一个人喝牛奶,有三个原则: 1.牛奶的日期不超过6天,就是最多5天. 2.每次只喝200m ...
右值引用和std::move函数(c++11)
1.对象移动 1)C++11新标准中的一个最主要的特性就是移动而非拷贝对象的能力 2)优势: 在某些情况下,从旧内存拷贝到新内存是不必要的,此时对对象进行移动而非拷贝可以提升性能有些类如IO类或un ...
json、JSONObject、JSONArray的应用
type.java package jiekou.duixiang; import java.text.ParseException;import java.text.SimpleDateFormat ...