很实用的JQuery代码片段(转)
1 元素屏幕居中
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px");
this.css("left",($(window).width()-this.width())/2+$(window).scrollLeft()+"px");
return this;
}
$("#myDiv").center();
2 获取页面路径相关参数
//值:http://42du.cn/list#jq
var url = document.URL;
//值:http:
var protocol = location.protocol;
//值:42du.cn
var host = location.host;
//值:jq
var hashP = document.URL.split('#')[1];
3 删除内联样式
$("*[style]").attr("style", "");
4 长度限制并截取
var $elem = $("#title");
if($elem.text().length > 30) {
$elem.text($elem.text().substr(0, 27)+"...");
}
5 外链新窗口打开
$("a[@href^='http']").attr('target','_blank');
6 测试JQuery与其它库冲突情况
//测试冲突代码
$("#jqtest").click( function() {
alert("jQuery is working!");
});
//避免冲突
var $jq = jQuery.noConflict();
$jq("#jqtest").click( function() {
alert("jQuery is working!");
});
7 加载JQuery即使CDN掉线
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/media/js/jquery.js"><\/script>')</script>
8 加载遮罩层,点击移除
$('<div id="overlay"></div>')
.css({
position : 'fixed',
top : 0,
left : 0,
right : 0,
bottom : 0,
opacity : 0.6,
background : 'black',
display : 'none'
})
.appendTo('body')
.fadeIn('normal')
.click(function () {
$(this).fadeOut('normal', function () {
$(this).remove();
})
});
9 元素固顶
//注意调整边界值
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#navbar').css({'position' : 'fixed', 'top' : 0});
} else {
$('#navbar').css({'position' : 'relative', 'top' : 'none'});
}
});
10 禁止右键菜单
$(document).bind('contextmenu', function () {
return false;
})
11 对象插件模版代码
(function($){
var MyPlugin = function(element, options) {
var elem = $(element);
var obj = this;
var settings = $.extend({param: 'defaultValue'}, options || {});
// 公有方法
this.publicMethod = function(){
console.log('public method called!');
};
// 私有方法
var privateMethod = function() {
console.log('private method called!');
};
};
$.fn.myplugin = function(options) {
return this.each(function(){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('myplugin')) return;
// pass options to plugin constructor
var myplugin = new MyPlugin(this, options);
// Store plugin object in this element's data
element.data('myplugin', myplugin);
});
};
})(jQuery);
很实用的JQuery代码片段(转)的更多相关文章
- 十条很实用的jQuery代码片段
本文转自:http://developer.51cto.com/art/201604/509093.htm 作者:核子可乐译来源:51CTO 原文标题:10 jQuery Snippets for E ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- 一些实用的JQuery代码片段收集
本文将展示50个非常实用的JQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够 ...
- 12 个非常实用的 jQuery 代码片段
jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助. 导航菜单背景切换效果 ...
- 几个非常实用的JQuery代码片段
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用). ...
- js动态判断密码强度&&实用的 jQuery 代码片段
// 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 一些实用的JQuery代码片段收集(筛选,搜索,样式,清除默认值,多选等)
//each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { ...
- 很棒的jQuery代码片段分享
jQuery实现的内链接平滑滚动 不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动 $('a[href^="#"]').bind('click.smoot ...
随机推荐
- 对mysql数据库表的相关操作
虫师博客(Python使用MySQL数据库(新)): https://www.cnblogs.com/fnng/p/3565912.html 1.更改表的结构,增加一个字段放置新增的属性 alter ...
- [BZOJ 1566] 管道取珠
Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1566 Solution: 思路十分精奇的一道题目 题目要求的是$\sum_{i=1}^k ...
- BZOJ 3524 [Poi2014]Couriers(可持久化线段树)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3524 [题目大意] 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个 ...
- [CF418E]Tricky Password
题意:有一个无限行$n$列的数表$a_{i,j}$,对于第$i\geq2$行,$a_{i,j}$为$a_{i-1,j}$在$a_{i-1,1\cdots j}$中出现的次数,要维护这个数表,支持修改第 ...
- 【数学期望】【高斯消元】bzoj3143 [Hnoi2013]游走
和hdu5955很像.也是注意从结点1出发,其概率要在方程左侧+1. 边的期望和点的期望之间转换巧妙 http://blog.csdn.net/thy_asdf/article/details/473 ...
- 【权值分块】bzoj1208 [HNOI2004]宠物收养所
不多说.比pb_ds还是要快不少的. #include<cstdio> #include<algorithm> #include<cmath> using name ...
- python3开发进阶-Django框架学习前的小项目(一个简单的学员管理系统)
''' 自己独立写一个学员管理系统 表结构: 班级表: -id -grade_name 学生表: -id -student_name -grade 关联外键班级表 老师表: -id -teacher_ ...
- 移植u-boot-2012.4到Tiny6410_1G_Nandflash
Uboot-2012.4的启动流程: 自从Uboot-2010后的Uboot在文件结构和启动流程方面都有非常大的改变,所以移植Uboot-2012.4的时候还是费了我不少时间, 首先在编译Uboot的 ...
- 重大新闻:腾讯大杀器来了,QQ浏览器微信版推出
今日,腾讯在推出windows桌面版的微信后,又发布了一个重量级产品:QQ浏览器微信版 我们在PC端用微信又多了一种方式,而且比windows桌面版本更加友好,更加方便. 我相信:对于我们绝大多数办公 ...
- NHibernate官方文档中文版——持久化类(Persistent Classes)
持久化类是一个应用程序中的类,主要用来实现业务逻辑(例如,在电商应用中的客户和订单类).持久化类,就像它的名字一样,生命周期短暂并且用来持久化的据库对象实例. 如果这些类的构造能够依照一些简单的原则, ...