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代码片段(转)的更多相关文章

  1. 十条很实用的jQuery代码片段

    本文转自:http://developer.51cto.com/art/201604/509093.htm 作者:核子可乐译来源:51CTO 原文标题:10 jQuery Snippets for E ...

  2. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  3. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  4. 一些实用的JQuery代码片段收集

    本文将展示50个非常实用的JQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够 ...

  5. 12 个非常实用的 jQuery 代码片段

    jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助. 导航菜单背景切换效果 ...

  6. 几个非常实用的JQuery代码片段

    jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用). ...

  7. js动态判断密码强度&&实用的 jQuery 代码片段

    // 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. 一些实用的JQuery代码片段收集(筛选,搜索,样式,清除默认值,多选等)

    //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { ...

  9. 很棒的jQuery代码片段分享

    jQuery实现的内链接平滑滚动 不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动 $('a[href^="#"]').bind('click.smoot ...

随机推荐

  1. Floyd【p1841】[JSOI2007]重要的城市

    Description 参加jsoi冬令营的同学最近发现,由于南航校内修路截断了原来通向计算中心的路,导致去的路程比原先增加了近一公里.而食堂门前施工虽然也截断了原来通向计算中心的路,却没有使路程增加 ...

  2. 第1天-html快速入门

    开发工具:HBuilder 创建项目: 在电脑本地磁盘创建项目目录,如"D:\project" 打开HBuilder,这个工具默认会创建一个项目,我们删掉即可,然后新建项目:&qu ...

  3. VS code 的变量设定

    文档来自https://code.visualstudio.com/docs/editor/variables-reference 预定义的变量有: ${workspaceFolder} - the ...

  4. [BZOJ 1293] 生日礼物

    Link: BZOJ 1293 传送门 Solution: 这题直接上尺取法就行了吧 先将每种颜色第一个放入优先队列,用$mx$维护当前的末尾位置 每次取出第一个颜色,更新答案.将其下一个放入队列中去 ...

  5. 【动态规划】bzoj3992 [Sdoi2015]序列统计 10分

    #include<cstdio> using namespace std; #define MOD 1004535809 int a[8001],f[1001][101],n,m,x,S; ...

  6. [POI2001]Peaceful Commission

    题目大意: 有n个国家要派代表开会,每个国家有两个代表可供选择. 有m对代表有仇,不能同时开会. 若每个国家只能派一个代表开会,问是否存在一种方案,使得每个国家都能正常参会? 如果有,输出字典序最小的 ...

  7. java源码阅读Object

    1 类注释 Class {@code Object} is the root of the class hierarchy. Every class has {@code Object} as a s ...

  8. Scala实战高手****第4课:零基础彻底实战Scala控制结构及Spark源码解析

    1.环境搭建 基础环境配置 jdk+idea+maven+scala2.11.以上工具安装配置此处不再赘述. 2.源码导入 官网下载spark源码后解压到合适的项目目录下,打开idea,File-&g ...

  9. Android性能调优篇之探索JVM内存分配

    开篇废话 今天我们一起来学习JVM的内存分配,主要目的是为我们Android内存优化打下基础. 一直在想以什么样的方式来呈现这个知识点才能让我们易于理解,最终决定使用方法为:图解+源代码分析. 欢迎访 ...

  10. CentOS7下nrpe3.0安装(转)

    本人菜鸟一枚,在学习nagios的时候碰到了很多问题,在网上找了很多相关的教程,都是老版本的,怎么装都不对,强迫症的我非要按装新版本,老版本的教程怎么搞都不行,只能自己研究了. 首先,下载nrpe3. ...