【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]& ...
随机推荐
- 我的Android 4 学习系列之使用 Internet 资源
目录 连接Internet资源 分析XML资源 使用Download Manager下载文件 查询Download manager 使用Account Manager 对 Google App Eng ...
- SuspendLayout()了解方法
SuspendLayout()暂时挂起的布局逻辑控制(msdn),它ResumeLayout()在会同.我的理解是,使用SuspendLayout()让整个窗体站,等到所有的东西都设置齐全,然后Re ...
- MVC5搜索/查询 流程功能的实现
接着上次的篇幅,我们这篇手动来写一个查询的流程代码! 搜索/查询 流程功能的实现 那现在要做搜索(查询)功能我们第一步应该做什么呢!第一次是不是我们应该去Controller(控制器)里去搞一个搜索 ...
- C#单元测试工具包:MvcContrib
C#单元测试工具包:MvcContrib http://t.cn/hE67d https://mvccontrib.codeplex.com/documentation MVC Contrib Doc ...
- 线程:ThreadLocal实现线程范围内共享变量
在web应用中,一个请求(带有请求参数)就是一个线程,那么如何区分哪些参数属于哪个线程呢?比如struts中,A用户登录,B用户也登录,那么在Action中怎么区分哪个是A用户的数据,哪个是B用户的数 ...
- poj2187(未完、有错)
凸包求直径(socalled..) 采用Graham+Rotating_Calipers,Graham复杂度nlogn,RC算法复杂度n,所以时间复杂度不会很高. 学习RC算法,可到http://cg ...
- queue,指针求最短路的区别
这里以spfa为例://都用邻接表存边: 指针: int h=1,t=1; q[h]=x; while(h<=t){ int u=q[h]; vis[u]=0; for(int i=head[u ...
- Web.Config Transformation配置灵活的配置文件
使用Web.Config Transformation配置灵活的配置文件 发布Asp.net程序的时候,开发环境和发布环境的Web.Config往往不同,比如connectionstring等.如果常 ...
- iOS学习之路十三(动态调整UITableViewCell的高度)
大概你第一眼看来,动态调整高度是一件不容易的事情,而且打算解决它的第一个想法往往是不正确的.在这篇文章中我将展示如何使图表单元格的高度能根据里面文本内容来动态改变,同时又不必子类化UITableVie ...
- .net调用Outlook 批量发送邮件,可指定Outlook中的账号来发送邮件
.net调用Outlook 批量发送邮件,可指定Outlook中的账号来发送邮件 源码可以在我的资源列表中下载: MPOEMail http://download.csdn.net/my VS2012 ...