【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 系统菜单与自定义菜单
Android 系统菜单与自定义菜单实现方法如下:系统菜单显示DefaultMenu.java package com.wxz.menu; import com.wxz.menu.R; import ...
- form-validation--表单验证插件
基于jquery的validationEngine表单验证插件,根据官网提示,该插件支持IE6-8,Chrome浏览器,火狐,Safari,Opera 10,但由于有使用到了css3的阴影和圆角样式, ...
- 给Angularjs配上Requirejs
给Angularjs配上Requirejs 需要考虑的事情: 1.js.css.template都按需加载,js主要就controller: * js和css都可以用requirejs和它的插件解决, ...
- oracle存储过程代码覆盖率统计工具
目前针对于高级语言如C++,JAVA,C#等工程都有相关的代码覆盖率统计工具,但是对于oracle存储过程或者数据库sql等方面的项目,代码覆盖率统计和扫描工具相对较少. 因此针对这种情况,设计了代码 ...
- ASP.NET Web Api构建基于REST风格的服务实战系列教程
使用ASP.NET Web Api构建基于REST风格的服务实战系列教程[十]——使用CacheCow和ETag缓存资源 系列导航地址http://www.cnblogs.com/fzrain/p/3 ...
- 尝试使用Memcached
尝试使用Memcached遇到的狗血问题 乘着有时间,尝试下利用Memcached进行分布式缓存,其中遇到了不少问题及狗血的事情,开篇记录下,希望对您有帮助. 我之前的项目为:Asp.Net MV ...
- IP包头
上图为IP报头的结构图,下图为捕捉的IP数据包
- ASP.NET MVC中使用Unity进行依赖注入的三种方式
在ASP.NET MVC中使用Unity进行依赖注入的三种方式 2013-12-15 21:07 by 小白哥哥, 146 阅读, 0 评论, 收藏, 编辑 在ASP.NET MVC4中,为了在解开C ...
- MD5算法-爬虫学习(五)
在实现爬虫的时候,我们使用Hash结构去存储我们用过的URL的时候,有些URL可能长度很长,为了更加节省空间,我们就要对URL进行压缩,帮它减减肥,这个我们介绍这个MD5算法,可以对URL进行有效的压 ...
- 园 首页 新随笔 联系 管理 订阅 订阅 RTSP协议转换RTMP直播协议
RTSP协议转换RTMP直播协议 RTSP协议也是广泛使用的直播/点播流媒体协议,最近实现了一个RTSP协议转换RTMP直播协议的程序,为的是可以接收远端设备或服务器的多路RTSP直播数据,实时转换为 ...