很实用的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 ...
随机推荐
- hihocoder Popular Products(STL)
Popular Products 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Given N lists of customer purchase, your tas ...
- [luogu3455]ZAP-Queries
有时候我们会遇到一类问题:求$f(n)$,当然它是不好直接计算的,但如果$F(n)=\sum\limits_{d|n}f(d)$或$F(n)=\sum\limits_{\substack{n|d\\d ...
- 【差分约束系统】【spfa】UVALive - 4885 - Task
差分约束系统讲解看这里:http://blog.csdn.net/xuezhongfenfei/article/details/8685313 模板题,不多说.要注意的一点是!!!对于带有within ...
- 【莫队算法】bzoj3289 Mato的文件管理
莫队算法,离线回答询问,按一定大小(sqrt(n*log(n))左右)将答案分块,按 ①左端点所在块②右端点 双关键字排序. 然后暴力转移. 转移的时候用树状数组. O(n*sqrt(n)*log(n ...
- HTML5无刷新实现跳转页面技术
window.onpopstate window.onpopstate是popstate事件在window对象上的事件句柄. 每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应w ...
- Eclipse新建java类的时候,自动创建注释
为形成个人的java代码风格,我们在项目组中进行开发的时候,可以对自己的代码进行一些格式上面的设置,具体如下: 方法一:Eclipse中设置在创建新类时自动生成注释 windows–>prefe ...
- grub
root (hd0,0) kernel /vmlinuz-2.6.32-573.8.1.el6.i686 ro root=/dev/mapper/VolGroup-lv_root nomodes ...
- Shell实现多级菜单系统安装维护脚本实例分享
Shell实现多级菜单系统安装维护脚本实例分享 这篇文章主要介绍了Shell实现多级菜单系统安装维护脚本实例分享,本文脚本用多级菜单实现管理WEB服务器.Mysql服务器.Nginx服器等,需要的朋友 ...
- 想使用gevent、mysql、sqlalchemy实现python项目协程异步达到并发的效果
如题,但是查看了很多资料,都说python这边的mysql不支持异步并发,只能阻塞进行,心塞30秒,暂时放弃这方面的研究 如果不操作数据库的化,比如请求url.操作文件,还是可以用gevent来异步实 ...
- servlet之request和response的使用区分
有的时候在写servlet程序时,我总是被一个方法该用request去调用.还是用response去调用而困惑.从而造成编程时间的延长. 我在区分request和response的使用时,使用的方法是 ...