jQuery实现的简单小功能(实用)
1.返回顶部
使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画:
// Back to top
$('#top').click(function (e) {
e.preventDefault();
$('html,body').animate({scrollTop: }, );
});
2.图片预加载
如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('img').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
判断图片是否完全加载
$('img').load(function () {
console.log('image load successful');
});
自动修复损坏图片
$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});
3.Hover状态的类切换
1)
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
2)
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
4.Fade/Slide切换 实现第一次点击显示元素而第二次点击隐藏元素的效果
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
5.通过文本查找元素
var search = $('#search').val();
$('div:not(:contains("'+search+'"))').hide();
jQuery实现的简单小功能(实用)的更多相关文章
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- jQuery实现的简单分页功能的详细解析
分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...
- jQuery关于复选框的基本小功能
这里是我初步学习jquery后中巨做的一个关于复选框的小功能: 点击右边选项如果勾上,对应的左边三个小项全部选中,反之全不选, 左边只要有一个没选中,右边大项就取消选中,反之左边全部选中的话,左边大项 ...
- Laravel实用小功能
Laravel实用小功能 1.控制访问次数 laravel5.2的新特性,通过中间件设置throttle根据IP控制访问次数 原理:通过回传三个响应头X-RateLimit-Limit,X-RateL ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- JQuery的一些简单功能
JQuery js的缺点总结 1.入口函数只能有一个,如果出现多个,后面的会覆盖掉前面的 2.代码容错性差,容易出错,出错会导致后面的代码不执行 3.存在浏览器兼容性,比如innerText在火狐浏览 ...
- 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
- python实现简单的循环购物车小功能
python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...
- [经验共享] MapGIS实用小功能图解——由excel文件导成MapGIS点文件
项目小组的几个成员都是学地下水和环境的,对于GIS懂得不是很多,于是把一些我们经常用到的mapgis实用小功能做成帮助文档,方便大家使用,发布共享! 1.整理好EXCEL文件(注意X,Y坐标的正确性( ...
随机推荐
- jQuery如何给body绑定事件?
jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...
- 《征服 C 指针》摘录1:什么是空指针?区分 NULL、0 和 '\0'
一.什么是空指针? 空指针 是一个特殊的指针值. 空指针 是指可以确保没有向任何一个对象的指针.通常使用宏定义 NULL 来表示空指针常量值. 空指针 确保它和任何非空指针进行比较都不会相等,因此经常 ...
- Daily Scrum Meeting ——ThirdDay
一.Daily Scrum Meeting照片 二.Burndown Chart 三.项目进展 1.完成了github上的文档整理 Transcend/ActivityHelper 2.主界面侧滑框的 ...
- 【Python基础学习六】函数
1.创建函数 Python中函数的关键字def来定义. def fibs(num): f=[0,1] for i in range(1,num): f.append(f[-1]+f[-2]) retu ...
- HTML5和HTML4的主要区别 [转]
原文:http://www.cnblogs.com/jiangyehu1110/archive/2013/07/10/3182277.html 1. HTML5标准还在制定中 这头一个不同之处显而易见 ...
- 【krpano】高德地图导航插件(源码+介绍+预览)
简介 krpano可以利用js调用第三方网页版地图,因此可以实现导航效果,用来帮助用户导航到我们全景所在的位置. 效果截图如下,在手机端点击左侧按钮,便会对用户进行定位,跳转至高德地图进行导航 ...
- windows7 启用管理员账户
在虚拟机中安装了windows7,方便使用qq,使用百度云,office等常用的软件.虚拟机使用的oracle的VirtualBox,个人使用体验不错,最棒的功能是能将物理机中的磁盘映射到虚拟机中网络 ...
- Ruby基本类型
#!/usr/bin/ruby =begin Ruby支持的有5种类型的变量 全局变量:以$开头 未初始化的全局变量的值为0 并使用-w选项产生警告 全局变量的赋值会改变全局状态 不推荐使用全局变量 ...
- Maven 添加自定义 archetype
环境:jdk7 maven3.23 eclipse mars 关于maven是使用插件自带的还是单独下载的,应该都是可以的,但是要注意maven和jdk版本的问题,比如3.2.3版本的maven支持j ...
- POJ1288 Sly Number(高斯消元 dfs枚举)
由于解集只为{0, 1, 2}故消元后需dfs枚举求解 #include<cstdio> #include<iostream> #include<cstdlib> ...