很实用的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 ...
随机推荐
- POJ3026 Borg Maze(Prim)(BFS)
Borg Maze Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12729 Accepted: 4153 Descri ...
- Disjoint Sets
Disjoint Sets Disjoint Sets的意思是一堆集合們,它們相互之間都沒有交集.沒有交集是指:各個集合之間沒有擁有共同.相同的元素.中文稱作「分離集」. Disjoint Sets的 ...
- Gitlab运维
安装Gitlab 新建 /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] name=gitlab-ce baseurl=http://mirrors.tuna.t ...
- 前端面试题 vue
webpack 作用:webpack是把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别 ...
- 表(Table)
虽然我们已经将不同用途的物品保存在不同的仓库中了,但是在同一个仓库中数据的保存仍然存在问题.比如食品分为熟食.生肉.大米等,如果把他们随意的堆放在一起,就会造成我们无法很容易的对这些食品进行管理,当要 ...
- 微信小程序开发教程(一)准备
1.成为微信公众平台开发者 成为微信公众平台的开发者,是小程序开发的首要条件.只有成为微信公众平台的开发者,才可以使用公众平台的各种开发接口.如果你已经是开发者,则可以跳过本章. ①.进入微信公众平台 ...
- 【点分治】hdu5016 Mart Master II
点分治好题. ①手动开栈. ②dp预处理每个点被哪个市场控制,及其距离是多少,记作pair<int,int>数组p. ③设dis[u].first为u到重心s的距离,dis[u].seco ...
- Java高级架构师(一)第18节:X-gen所需service、web层模板
以X-gen的Controller为例: package $#modulePackge#.web; import org.springframework.beans.factory.annotatio ...
- Step by Step 使用HTML5开发一个星际大战游戏(2)
HTML5 Canvas Game: 玩家飞船 本系列博文翻译自以下文章 http://blog.sklambert.com/html5-canvas-game-the-player-ship/ L ...
- asp.net 二级域名(路由方式实现)
自从微软发布 ASP.NET MVC 和routing engine (System.Web.Routing)以来,就设法让我们明白你完全能控制URL和routing,只要与你的application ...