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

随机推荐

超星网站cc++
a系统苏龙杰 a系统苏龙杰目录 1 C/C ++程序设计 1.1 前言 1.2 第一部分基础篇 1.2.1 第1章初识C 1.2.1.1 1.1 C语言的诞生与发展 1 ...
Linux dkpg命令
一.简介 dpkg 是Debian Package 的简写,是Debian系列系统下的一个软件安装.更新及移除工具. 二.常用指令 1.查询功能查看软件包信息: dpkg -info xxx.deb ...
java Arrays.asList用法
java Arrays.asList用法用途 Arrays是java容器相关操作的工具类,asList方法将Array转换为list,是Array和List之间的桥梁. 注意 Arrays.asLi ...
OSGi 系列（十四）之 Event Admin Service
OSGi 系列(十四)之 Event Admin Service OSGi 的 Event Admin 服务规范提供了开发者基于发布/订阅模型,通过事件机制实现 Bundle 间协作的标准通讯方式. ...
【文件下载】Java下载文件的几种方式
[文件下载]Java下载文件的几种方式摘自:https://www.cnblogs.com/sunny3096/p/8204291.html 1.以流的方式下载. public HttpServl ...
如何从dvi生成pdf--------亲测有效果.
用里面第二个命令. http://blog.csdn.net/u014682350/article/details/46482477
201.09.22 除虫药水（线性dp）
描述在十年前,除虫是十分艰苦的工作.那时,使用普通药水进行除虫的效果极差,在一片苹果林中使用后除掉的虫仅为极小一部分. 比如说,Bugs 镇共有 N 片苹果林,对第i 片使用普通药水可以除掉 ai ...
Java 注解概要
转载自:https://www.cnblogs.com/peida/archive/2013/04/24/3036689.html(Java注解就跟C#的特性是一样的) 要深入学习注解,我们就必须能定 ...
ansible-playbook api 2.0 直接运行
官方文档见 http://docs.ansible.com/ansible/dev_guide/developing_api.html 拿官方的例子修改如下 import json from col ...
简单的cxf-ws 基于web容器
pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...