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 ...
随机推荐
- Nginx 分析access日志文件
Nginx Access Log日志统计分析常用命令 IP相关统计 统计IP访问量 awk '{print $1}' access.log | sort -n | uniq | wc -l 查看某一时 ...
- Codeforces 677C. Vanya and Label 位操作
C. Vanya and Label time limit per test:1 second memory limit per test:256 megabytes input:standard i ...
- Codeforces 595B. Pasha and Phone 容斥
B. Pasha and Phone time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- [SoapUI] 通过context获取response并解析里面的某个字段的值
import com.eviware.soapui.support.GroovyUtils def groovyUtils = new GroovyUtils( context ) def realI ...
- yii2 内置事件
1.yii2系统登录 const EVENT_BEFORE_LOGIN = 'beforeLogin'; //登录前 const EVENT_AFTER_LOGIN = 'afterLog ...
- （最小生成树）Jungle Roads -- HDU --1301
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1301 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- java 把InputStream流写入到文件中
基于流(Stream)的解决 流是单向的有方向性的描述信息流的对象,InputStream是输入流的接口,对程序来说是入,是读,可以从文件读,缓存区读,网络节点读等等. 写入文件,对程序来说是出,是写 ...
- delphi 使用oauth的控件
unit OAuth; interface uses Classes, SysUtils, IdURI, Windows; type EOAuthException = class(Exception ...
- C# 调用C++ CLR dll类库时，实现从 string 到 sbyte* 的转换
问题描述 今天在做项目的时候碰到一个问题,就是用C++编写CLR类库dll的时候,C++的函数参数列表中包含一个char*的输出型参数,然而在C#调用该dll时候,会自动将函数的中的char*参数“翻 ...
- Excel中使用VBA进行度分秒与十进制度的转换
发现Excel的VBA功能真是批量处理的一把利刃,工作中小试牛刀了一把,将Excel中度分秒形式的坐标批量处理成十进制度形式,处理完后用于GIS展点制图. 原Excel数据如下: VBA代码如下: S ...