强大的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 ...
随机推荐
- Spring Boot-热部署和Debugger使用(三)
热部署 1.添加热部署pom依赖 <!--热部署插件依赖jar包--> <dependency> <groupId>org.springframework.boot ...
- 安装GCC for Red Hat Enterprise Linux Server release 6(64位)
http://www.cnblogs.com/emanlee/archive/2012/08/11/2633895.html
- [bzoj1614][Usaco2007Jan]Telephone Lines 架设电话线_二分答案_最短路
Telephone Lines bzoj-1614 Usaco-2007Jan 题目大意:给你一个n个点m条边的带边权无向图,求最短路.可以选取k条边免费. 注释:$1\le n\le 10^3$,$ ...
- sync_binlog=1
MySQL提供一个sync_binlog参数来控制数据库的binlog刷到磁盘上去. sync_binlog=0,表示MySQL不控制binlog的刷新,由文件系统自己控制它的缓存的刷新.这时候的性能 ...
- uva 10276 / pc 110908
黑书上说用二分图的知识来解,但我想不出来,只好找规律 发现,一条柱时为1,两条柱时为4.三条柱时为8.. 这些1,3,7,11的数字加1后,都是下一条柱的最底部的数字,而且一条柱的数字之和总是按照这样 ...
- Android Internet - WebView 的使用
WebView是Android 提供的操作网页的一个组件. 用于浏览网页及其它Internet资源. 这里总结了一些WebView 的经常使用接口.和2个小演示样例程序用于自己开发时直接使用.就不用再 ...
- C++实现顺序栈的基本功能
栈是限定仅在表头进行插入和删除操作的线性表.有着先进后出的特点(FILO): 如今我来动手实现栈的基本本功能练练手: 定义栈的头文件例如以下: #ifndef CSTOCK_H_ #define CS ...
- Window上python 开发--1.搭建开发环境
事实上在开发python最好在ubuntu环境下,简单也便于扩展各个package.可是我的linux的电脑临时不在身边.还的我老婆的电脑win7没办法啊. 因为python的跨平台性.在window ...
- oc3--类方法1
// // main.m // 第一个OC类-方法 #import <Foundation/Foundation.h> /* C语言中函数分为声明和实现,OC中定义类, 就是在写类的声明和 ...
- oc2---类
// main.m // 第一个OC类,OC中的类其实本质就是一个结构体, 所以p这个指针其实就是指向了一个结构体,创建一个对象就是创建一个结构体指针, #import <Foundation/ ...