jquery初级接触-----链式操作
设置一个初级菜单,点击显示本级菜单下的项目,被点击的同级其它菜单收起
html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.bg {
background: #ccc;
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#">衬衫</a>
<ul class="level2">
<li><a href="#" class="cc">长袖衬衫</a></li>
<li><a href="#" class="cc">短袖衬衫</a></li>
<li><a href="#" class="cc">长袖T shirt</a></li>
<li><a href="#" class="cc">短袖T shirt</a></li>
</ul>
</li>
<li class="level1">
<a href="#">卫衣</a>
<ul class="level2">
<li><a href="#" class="cc">开襟卫衣</a></li>
<li><a href="#" class="cc">套头卫衣</a></li>
<li><a href="#" class="cc">运动卫衣</a></li>
<li><a href="#" class="cc">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#">裤子</a>
<ul class="level2">
<li><a href="#" class="cc">短裤</a></li>
<li><a href="#" class="cc">牛仔裤</a></li>
<li><a href="#" class="cc">卡其裤</a></li>
<li><a href="#" class="cc">蚕丝库</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
js代码(非链式写法):
<script>
$(function() {
$("ul.level2").addClass("none");
$(".level1>a").on("click", function() {
$(this).addClass("bg");
$(this).next().removeClass('none');
$(this).parent().siblings().children("a").removeClass("bg");
$(this).parent().siblings().children("a").next().addClass("none");
});
})
</script>
运行结果:
juery 链式写法:链式写法,可以把常规的需要写的代码简化,从而达到精简代码的目的
jquery 存在的意义:目的就是要达到少写代码,多做操作的事情,把写代码的问题简单化,也就是:write less,do more!
<script>
$(function() {
$("ul.level2").addClass("none");
$(".level1>a").on("click", function() {
$(this).addClass("bg").next().removeClass("none").end().parent().siblings().children("a").removeClass("bg").next().addClass("none");
});
})
</script>
运行结果:
从以上的写法可以看出,虽然写的代码行数减少了,但是效果并没有打折,达到目的了
备注:其中end() 是一个改变指针的函数,在这一行代码中,如果某个时候,我不知道指针现在指到哪里去了,那就加一个end()函数,这样,指针就指向了最初的 this 了
jquery初级接触-----链式操作的更多相关文章
- jQuery对象的链式操作用法分析
可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- 如何一行jquery代码写出tab标签页(链式操作)
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- jquery中链式操作的this指向
jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- jQuery 筛选器 链式编程操作
$('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- PHP链式操作输出excel(csv)
工作中经常会遇到产品运营让导出一些简单的比较规范的数据,这时候要是有一个简单的方法可以用就简单多了.下面是我的一个输出简单的excel(csv)的方法类,用到了链式操作.说到链式操作,在jquery中 ...
随机推荐
- 修改ECSHOP的小数点保留位数
客户站点http://carfa.hk79.2ifree.com 原来的程序直接取整了,现在做下面修改. 首先打开文件 /carfa/web/includes/lib_common.php 第一步:在 ...
- mysql 意向锁的作用
直接copy知乎上的内容 https://www.zhihu.com/question/51513268 作者:尹发条地精链接:https://www.zhihu.com/question/51513 ...
- [UE4]爆头和穿墙
一.LineTracebyChannel的Out Hit值展开后有一个名为“Hit Bone Name”(击中的骨骼名称),以此来判断击中的是否是头部,进而实现爆头的目的(爆头:高伤害,一枪毙命) 二 ...
- linux达人养成计划
一.命令基本格式: ls -1 详细列表 (ll) -h 人性化显示文件大小 -a 显示所有文件,包括隐藏文件 -d 查看目录属性 -i 显示iNode 二.文件处理命令 mkdir -p [目录名] ...
- Java内存泄漏简单说明
Java语言的一个关键的优势就是它的内存管理机制.你只管创建对象,Java的垃圾回收器帮你分配以及回收内存.然而,实际的情况并没有那么简单,因为内存泄漏在Java应用程序中还是时有发生的. 下面就解释 ...
- asp.net mvc 5 单元测试小例子
using System.Collections.Generic; using System.Linq; using Microsoft.VisualStudio.TestTools.UnitTest ...
- SCCM 2012 R2实战系列之八:OSD(上)--分发全新Windows7系统
今天将跟大家一起分享SCCM 中最为重要的一个功能---操作系统分发(OSD),在此文章中会讨论到OSD的初始化配置.镜像的导入.任务序列的创建编辑.并解决大家经常遇到的分发windows7系统分区盘 ...
- JDK8 Java 中遇到null 和为空的情况,使用Optional来解决。
空指针是我们最常见也最讨厌的异常,写过 Java 程序的同学,一般都遇到过 NullPointerException :) 初识null 详细可以参考[jdk 1.6 Java.lang.Null.P ...
- USACO 2008 Running(贝茜的晨练)
[题解] 动态规划,dp[i][j]表示第i分钟疲劳度为j的最长距离. [代码] #include <iostream> #include <cstdlib> #include ...
- 错误为Lc.exe已退出,代码为-1
近来在做项目的时候,突然遇到 了 LC.exe 已退出,代码为-1 的提示,怎么也编译不了,在查了相关的资料后,终于明白了原因,其解决方案如下 : 1. 以管理员的身份来运行vs, 并把项目中“pro ...