强大的JQuery链式操作风格
实例代码
<style type="text/css">
#menu {width: 300px;}
.has_children {background:#555;color:#fff;cursor:pointer;}
.highlight {color:#fff;background:green;}
div {padding:0px;margin:10px 0px;}
div a {background:#888;display:none;float:left;width:300px;}
</style>
<div id="menu">
<div class="has_children">
<span>第1章—认识juery</span>
<a>1.1-javascript和javascript库</a>
<a>1.2-加入juery</a>
<a>1.3-编写简单juery代码</a>
<a>1.4-juery对象和dom对象</a>
<a>1.5-解决juery和其他库的冲突</a>
<a>1.6-juery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章—juery选择器</span>
<a>2.1-juery选择器是什么</a>
<a>2.2-juery选择器的优势</a>
<a>2.3-juery选择器</a>
<a>2.4-应用juery改写实例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案列研究——类似淘宝网品牌列表效果</a>
<a>2.7-还有其他选择器么?</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章—juery中的dom操作</span>
<a>3.1-dom操作的分类</a>
<a>3.2-juery中的dom操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".has_children").click(function () {
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素,并去掉它
.children("a").hide(); //将兄弟元素下的<a>元素隐藏
});
})
</script>
效果展示
加载完毕
点击第一个
点击第二个
点击第三个
强大的JQuery链式操作风格的更多相关文章
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- jQuery的链式编程风格
jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...
- 如何一行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对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...
- js实现链式操作
前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回2 ...
随机推荐
- cxgrid的过滤%x%问题【备查】
把这个文件复制到你的程序目录\DevExpress VCL\ExpressDataController\Sources\cxLike.pas function LikeStr(const AStr, ...
- lucene_07_solr使用IK分词器
使用IKAnalyzer 中文分析器.. 第一步: 把,IKAnalyzer2012FF_u1j 添加到sol/WEB-INF/lib 目录下. 第二步: 复制IKAnalyzer 的配置文件和自定义 ...
- [bzoj3307]雨天的尾巴_线段树合并
雨天的尾巴 bzoj-3307 题目大意:N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. ...
- 关于Hanoi算法
java经典算法——河内算法(Hanoi) 有三根相邻的柱子,标号为A,B,C,A柱子上从下到上按金字塔状叠放着n个不同大小的圆盘,要把所有盘子一个一个移动到柱子B上,并且每次移动同一根柱子上都不能出 ...
- Go语言net/http 解读.
Http包提供实现HTTP客户端和服务端的方法与函数. Get.Head.Post.PostForm配合使用实现HTTP请求: resp, err := http.Get("http://e ...
- Linux下把目录拷贝到全部同名目录的脚本
需求:拷贝文件夹到Linux文件夹下.覆盖该Linux文件夹下全部同名文件夹 目标:Linux下,运行本脚本.输入目录名.就可以批量复制覆盖. 使用说明: 先把本脚本文件和要复制的文件 ...
- Android之UtilsRequesServicetHelp工具类
package com.example.getnetutil; import java.io.BufferedReader; import java.io.ByteArrayOutputStream; ...
- vue组件的3种书写形式
第一种使用script标签 <!DOCTYPE html> <html> <body> <div id="app"> <my- ...
- vs2015+ffmpeg开发环境配置【转】
本文转载自:http://blog.csdn.net/hustlx/article/details/51014307 1.在http://ffmpeg.zeranoe.com/builds/ 下载最新 ...
- [BZOJ 2100] Apple Delivery
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2100 [算法] Answer = min{ dist(PB,PA1) + dist( ...