9 款实用的 jQuery/CSS3 插件推荐 - 看引擎 KENGINE | 看看新闻网 IT资讯
9 款实用的 jQuery/CSS3 插件推荐
今天要向大家分享9款非常给力的jQuery/CSS3经典插件，插件包括CSS3图片特效、jQuery动画菜单、jQuery时尚登录表单等，一起来看看这些jQuery插件，希望大家喜欢。
1. CSS3图片重力感应特效
这是一款应用重力感应的CSS3图片特效，点击“START”即可开始模拟重力感应，同时甩动图片还可以看到更酷的图片效果。
2. jQuery圆盘抽奖特效
这又是一款jQuery圆盘抽奖插件，点击中间“点击抽奖”按钮即可开始抽奖，这款抽奖插件可以在抽奖结束后显示抽奖结果。
3. 很可爱的CSS3动画下拉菜单
这款CSS3下拉菜单样式非常新颖，每一个菜单项有一个非常可爱的小图标，鼠标滑过小图标时即可展开二级菜单项。
4. jQuery样式切换器插件switcher
这是一款基于jQuery的在线样式切换插件，可以切换背景颜色和背景图片，效果很出色。
5. jQuery网上商城左侧分类下拉菜单
很多网上商城的商品种类繁多，商城会在左侧展示一个纵向下拉菜单，这款下拉菜单非常大气。
6. jQuery弹出层登录和全屏注册表单
这是一款很漂亮的jQuery登录和注册表单，点击登录时弹出一个登录窗口并伴随动画效果，注册页面则是全屏显示，非常时尚的jQuery表单。
7. jQuery/CSS3响应式全屏焦点图
这是一款基于jQuery和CSS3的相应式焦点图,该焦点图是全屏展示的,切换时播放多种绚丽的动画效果。
8. jQuery多条件筛选插件代码
这是一款基于jQuery的多条件查询插件，可以选择日期、单选框、多选框、文本框等。
9. jQuery带小图标Tab选项卡插件
这是一款竖向Tab jQuery插件，该Tab的插件的特点不仅可以竖向展示，而且Tab选项卡带有漂亮的小图标。
投递这篇资讯
声明：本文系ITeye网站发布的原创资讯，严禁任何网站转载本文，否则必将追究法律责任！
资讯来源：
No tags for this post.
除非注明，本站文章均为原创或编译，转载请注明： 文章来自
分享给朋友：
查看全部：jQuery实现多条件筛选 - 推酷
jQuery实现多条件筛选
我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。
查看演示 下载源码
首先，我们将查询条件分类，在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。
&ul class=&select&&
&li class=&select-list&&
&dl id=&select1&&
&dt&上装：&/dt&
&dd class=&select-all selected&&&a href=&#&&全部&/a&&/dd&
&dd&&a href=&#&&针织衫&/a&&/dd&
&dd&&a href=&#&&毛呢外套&/a&&/dd&
&dd&&a href=&#&&T恤&/a&&/dd&
&dd&&a href=&#&&羽绒服&/a&&/dd&
&dd&&a href=&#&&棉衣&/a&&/dd&
&dd&&a href=&#&&卫衣&/a&&/dd&
&dd&&a href=&#&&风衣&/a&&/dd&
&li class=&select-list&&
&dl id=&select2&&
&dt&裤装：&/dt&
&dd class=&select-all selected&&&a href=&#&&全部&/a&&/dd&
&dd&&a href=&#&&牛仔裤&/a&&/dd&
&dd&&a href=&#&&小脚/铅笔裤&/a&&/dd&
&dd&&a href=&#&&休闲裤&/a&&/dd&
&dd&&a href=&#&&打底裤&/a&&/dd&
&dd&&a href=&#&&哈伦裤&/a&&/dd&
&li class=&select-result&&
&dt&已选条件：&/dt&
&dd class=&select-no&&暂时没有选择过滤条件&/dd&
布置好内容后，给页面内容加上css样式以及加载相关js。
&link rel=&stylesheet& type=&text/css& href=&css/style.css&&
&script type=&text/javascript& src=&js/jquery.js&&&/script&
&script type=&text/javascript& src=&js/script.js&&&/script&
当用户点击任意条件时，标记当前选中状态，相邻条件取消选中状态，并且更新已选条件容器内容，请看代码：
$(document).ready(function(){
$(&#select1 dd&).click(function () {
$(this).addClass(&selected&).siblings().removeClass(&selected&);
if ($(this).hasClass(&select-all&)) {
$(&#selectA&).remove();
var copyThisA = $(this).clone();
if ($(&#selectA&).length & 0) {
$(&#selectA a&).html($(this).text());
$(&.select-result dl&).append(copyThisA.attr(&id&, &selectA&));
$(&#select2 dd&).click(function () {
$(this).addClass(&selected&).siblings().removeClass(&selected&);
if ($(this).hasClass(&select-all&)) {
$(&#selectB&).remove();
var copyThisB = $(this).clone();
if ($(&#selectB&).length & 0) {
$(&#selectB a&).html($(this).text());
$(&.select-result dl&).append(copyThisB.attr(&id&, &selectB&));
$(&#selectA&).live(&click&, function () {
$(this).remove();
$(&#select1 .select-all&).addClass(&selected&).siblings().removeClass(&selected&);
$(&#selectB&).live(&click&, function () {
$(this).remove();
$(&#select2 .select-all&).addClass(&selected&).siblings().removeClass(&selected&);
$(&.select dd&).live(&click&, function () {
if ($(&.select-result dd&).length & 1) {
$(&.select-no&).hide();
$(&.select-no&).show();
实际应用中，我们要结合后端程序，实现帅选条件时，页面响应的内容也会变化，有兴趣的同学可以尝试下。
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见页面导航：
→ 正文内容 多条件选择器,相对选择器,层次选择器
jquery 中多条件选择器,相对选择器,层次选择器的区别
jquery 中多条件选择器,相对选择器,层次选择器的区别介绍，需要的朋友可以参考下
一、Jquery常用的过滤选择器如下所示： 1、:first，选取第一个元素，比如$("div:first")选取第一个div元素 2、:last，选取最后一个元素，比如$("div:last")选取最后一个div元素 3、:not(选择器)，选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4、：even/：odd，选取索引为偶数/奇数的元素，比如$("div:even"),选取索引号为偶数的所有div元素 5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号)，选取等于索引号/大于索引号/小于索引号的元素，比如$("div:lt(3)"),选取索引号小于3的所有div元素 注意： 过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础，即过滤的逐级性，比如 $("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4) 二，重点 多条件选择器 多条件选择器：$("p,div,span,menuitem"),同时选择p标签,div标签,和拥有menuitem样式的span标签元素 注意选择器表达式中的空格不能多不能少，易错！ 相对选择器 只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下
代码如下: &table id="table1"& &tr&&td&dsds&/td&&td&dsfdef&/td&&/tr& &tr&&td&dsds&/td&&td&dsfdef&/td&&/tr& &tr&&td&dsds&/td&&td&dsfdef&/td&&/tr& &tr&&td&dsds&/td&&td&dsfdef&/td&&/tr& &tr&&td&dsds&/td&&td&dsfdef&/td&&/tr& &/table&
那么可以用如下的js代码操作td的背景色 $("td", $(this)).css("background", "red"),这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素
代码如下: &script type="text/javascript"& $(function () { $("#table1 tr").click(function () { $("td", $(this)).css("background", "red"); }); }); &/script&
层次选择器： 1 $("#div li")获取div下的所有li元素（后代，子，子的子....） 2 $("#div & li")获取div下的直接li子元素//注意空格 3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素，不常用。 3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素，不常用。 细节区别在于（易错点）： 多条件选择器：$("p,div,span,menuitem"),相对选择器：$("td", $(this)).css("background", "red")",层次选择器：$("#div li")获取div下的所有li元素（后代，子，子的子....） 三者的区别是： 多条件选择器：在一个“”内有逗号区分， 相对选择器：2个元素分开 ， 层次选择器在一个“”内以空格区分
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910jquery带日历多条件筛选特效
在线预览！jquery教程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者
评价文档：
jquery教程
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：260.50KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢}