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 ...
随机推荐
- chrome 调试工具的使用
Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift + ...
- 使用 EWS（Exchange Web Service）协议读取邮件、发送邮件
问题: 公司之前可以通过POP3协议收发邮件,因而在SoapUI中用JavaMail可以读取邮件,后来配置了Office 365,POP3协议端口不再开放,邮件全部读取失败,报login timeou ...
- OSGi 系列（三）之 bundle 事件监听
OSGi 系列(三)之 bundle 事件监听 bundle 的事件监听是在 bundle 生命周期的不同状态相互转换时,OSGi 框架会发出各种不同的事件供事先注册好的事件监听器处理. 1. 事件监 ...
- thrift相关资源
官网资料,具有各语言的例子 https://thrift.apache.org/tutorial/ https://thrift.apache.org/tutorial/py
- 原生JS 实现元素排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- UVa 11178 Morley's Theorem (几何问题)
题意:给定三角形的三个点,让你求它每个角的三等分线所交的顶点. 析:根据自己的以前的数学知识,应该很容易想到思想,比如D点,就是应该求直线BD和CD的交点, 以前还得自己算,现在计算机帮你算,更方便, ...
- Creating a Simple Web Service and Client with JAX-WS
Creating a Simple Web Service and Client with JAX-WS 发布服务 package cn.zno.service.impl; import javax. ...
- 201709021工作日记--Volley源码详解（五）
学习完了CacheDispatcher这个类,下面我们看下NetworkDispatcher这个类的具体细节,先上代码: /** * 提供一个线程执行网络调度的请求分发 * Provides a th ...
- C语言中union关键字
union 关键字的用法与struct 的用法非常类似. union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在union 中所有的数据成员共用一个空间,同一时间 ...
- What Is Your Grade?
Problem Description “Point, point, life of student!”This is a ballad(歌谣)well known in colleges, and ...