【6】锋利的 jQuery 笔记
1. 代码技巧
1. 利用 id, class 实现同级隐藏显示
效果如下:
2. 字体放大效果
效果图:
3. tab 切换
效果图:
4. 切换样式
添加 Cookie
效果图:
5. 编写插件
1. jQuery 提供了两个用于扩展 jQuery 功能的方法。
jQuery.fn.extend() 和 jQuery.extend() 两种
6. 表格隔行换色插件
7. 全局插件
8. 扩展选择器
我的测试 jQuery 版本是 jQ1.7, 不支持 1.9+
9. 图片轮播
10. 超链接提示
11. 图片滚动效果
12. 复选框操作
复选框的思路:
1. 定义一个 flag 变量, 默认为 true
2. 循环复选框组, 当有没选中的项时, 把 flag 的值设置为 false
3. 根据变量 flag 的值来设置 id 为 CheckedAll 的复选框是否选中
如果 flag 为 true, 说明复选框组都被选中
如果 flag 为 false, 说明复选框至少有一个未被选中。
13. 点击小图切换大图路径
14. 产品尺寸切换
15. 下拉价格联动
16. 星级评分
html 结构:
CSS:
.rating{
overflow:hidden;
width:80px;
height:16px;
margin:0 0 20px 0;
padding:;
list-style:none;
clear:both;
position:relative;
background: url(../../images/star-matrix.gif) no-repeat 0 0;
}
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
ul.rating li {
cursor: pointer;
float:left;
text-indent:-999em;
}
ul.rating li a {
position:absolute;
left:;
top:;
width:16px;
height:16px;
text-decoration:none;
z-index:;
}
ul.rating li.one a {left:}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
z-index:;
width:80px;
height:16px;
overflow:hidden;
left:;
background: url(../../images/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}
17. 输入框
18. 获取文本焦点2
19. 回到顶部
20. 获取鼠标位置
21. 元素居中小栗子
【6】锋利的 jQuery 笔记的更多相关文章
- jQuery总结或者锋利的jQuery笔记二
第三章 jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) , 层次选择器(div ul),(div> ...
- 锋利的jQuery笔记
首先分清jQuery对象和DOM对象,这两者可相互转化,如: var $cr=$("#cr"); //jquery对象 var cr=$cr[0] ; //DOM对象 var cr ...
- jQuery总结或者锋利的jQuery笔记一
在线测试脚本网站 层次 选择器要多花时间看看. 第一章: hover = enter+leave jQuery对象 jQuery产生的对象时jQuery独有的,只能自己调用 var $c=$(&q ...
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 《锋利的jQuery》读书笔记(DOM+事件)
前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //.... ...
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
- JQuery笔记汇总
jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...
- jQuery笔记总结
来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一 ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
随机推荐
- 国内外最全面和主流的JS框架与WEB UI库
当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同浏览器的兼容性也不需要程序员操心,有了这些优点,当然大家 ...
- Remoting接口测试工具
动手写一个Remoting接口测试工具 基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本 ...
- [转载]John Burkardt搜集的FORTRAN源代码
Over the years, I have collected, modified, adapted, adopted or created a number of software package ...
- DefaultModelBinder
Asp.net MVC的Model Binder工作流程以及扩展方法(3) - DefaultModelBinder Default Binder是MVC中的清道夫,把守着Model Binder中的 ...
- 4 MySQL与PHP连接
目录: 1. 连接概述2. 创建php文件进行MySQL连接3. 查看连接效果 1. 连接概述 上文讲述了LAMP开发模型,并且使用AppServ进行安装.这时候就要体现优势了.本节将介绍在直接使用P ...
- CSLA .NET是一个.NET软件开发框架
CSLA .NET是一个.NET软件开发框架,帮助开发者“为Windows.Web.面向服务和工作流等应用构建强大和可维护的业务逻辑层”. CSLA是Component-based, Scalable ...
- window wamp下xhprof的安装使用,Graphviz配置
在新的工作安排下来前赶紧把手上工作优化下,本来是靠xdebug+grindview来的,不过还是麻烦,就换上这个轻量级的性能测试了.网上搜的大多都是lamp环境下的,wamp下的倒是不多,而且不好用, ...
- [转]Resolving kernel symbols
原:http://ho.ax/posts/2012/02/resolving-kernel-symbols/ KXLD doesn't like us much. He has KPIs to mee ...
- [转]Top 10 DTrace scripts for Mac OS X
org link: http://dtrace.org/blogs/brendan/2011/10/10/top-10-dtrace-scripts-for-mac-os-x/ Top 10 DTra ...
- IOS学习之路二十二(UIAlertView获得文本框内容及添加北京图片)
今天写项目要用到警告框带输入框的,于是就自己做了个小demo. 效果图大体如下: 下面简单介绍一下UIAlertView alertViewStyle属性有以下三种选项: UIAlertViewSt ...