1. 代码技巧

1. 利用 id, class 实现同级隐藏显示

效果如下:

2. 字体放大效果

效果图:

3. tab 切换

效果图:

4. 切换样式

添加 Cookie

效果图:

5. 编写插件

1. jQuery 提供了两个用于扩展 jQuery 功能的方法。

jQuery.fn.extend() 和 jQuery.extend() 两种

6. 表格隔行换色插件

JS Bin on jsbin.com

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 笔记的更多相关文章

  1. jQuery总结或者锋利的jQuery笔记二

    第三章  jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) ,  层次选择器(div ul),(div> ...

  2. 锋利的jQuery笔记

    首先分清jQuery对象和DOM对象,这两者可相互转化,如: var $cr=$("#cr"); //jquery对象 var cr=$cr[0] ; //DOM对象 var cr ...

  3. jQuery总结或者锋利的jQuery笔记一

      在线测试脚本网站 层次 选择器要多花时间看看. 第一章: hover = enter+leave jQuery对象 jQuery产生的对象时jQuery独有的,只能自己调用 var $c=$(&q ...

  4. 锋利的jQuery读书笔记---选择器

    前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...

  5. 《锋利的jQuery》读书笔记(DOM+事件)

    前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //.... ...

  6. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

  7. JQuery笔记汇总

    jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...

  8. jQuery笔记总结

    来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一 ...

  9. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

随机推荐

  1. 国内外最全面和主流的JS框架与WEB UI库

    当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同浏览器的兼容性也不需要程序员操心,有了这些优点,当然大家 ...

  2. Remoting接口测试工具

    动手写一个Remoting接口测试工具 基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本 ...

  3. [转载]John Burkardt搜集的FORTRAN源代码

    Over the years, I have collected, modified, adapted, adopted or created a number of software package ...

  4. DefaultModelBinder

    Asp.net MVC的Model Binder工作流程以及扩展方法(3) - DefaultModelBinder Default Binder是MVC中的清道夫,把守着Model Binder中的 ...

  5. 4 MySQL与PHP连接

    目录: 1. 连接概述2. 创建php文件进行MySQL连接3. 查看连接效果 1. 连接概述 上文讲述了LAMP开发模型,并且使用AppServ进行安装.这时候就要体现优势了.本节将介绍在直接使用P ...

  6. CSLA .NET是一个.NET软件开发框架

    CSLA .NET是一个.NET软件开发框架,帮助开发者“为Windows.Web.面向服务和工作流等应用构建强大和可维护的业务逻辑层”. CSLA是Component-based, Scalable ...

  7. window wamp下xhprof的安装使用,Graphviz配置

    在新的工作安排下来前赶紧把手上工作优化下,本来是靠xdebug+grindview来的,不过还是麻烦,就换上这个轻量级的性能测试了.网上搜的大多都是lamp环境下的,wamp下的倒是不多,而且不好用, ...

  8. [转]Resolving kernel symbols

    原:http://ho.ax/posts/2012/02/resolving-kernel-symbols/ KXLD doesn't like us much. He has KPIs to mee ...

  9. [转]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 ...

  10. IOS学习之路二十二(UIAlertView获得文本框内容及添加北京图片)

    今天写项目要用到警告框带输入框的,于是就自己做了个小demo. 效果图大体如下: 下面简单介绍一下UIAlertView alertViewStyle属性有以下三种选项:  UIAlertViewSt ...