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. 礼物(BFS)

    礼物 时间限制: 1 Sec  内存限制: 64 MB提交: 39  解决: 4[提交][状态][讨论版] 题目描述 给出一个n行m列的点阵,“.”表示可通行格子,“#”表示不可通行格子,“K”表示国 ...

  2. RabbitMQ (一) 简介和基本概念

    原文:https://blog.csdn.net/vbirdbest/article/details/78577043 一.简介 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...

  3. POJ 3177 Redundant Paths(边双连通分量)

    [题目链接] http://poj.org/problem?id=3177 [题目大意] 给出一张图,问增加几条边,使得整张图构成双连通分量 [题解] 首先我们对图进行双连通分量缩点, 那么问题就转化 ...

  4. python3 开发面试题(去重保持原来的顺序)6.2

    """ l1 = [11, 2, 3, 22, 2, 4, 11, 3] 去重并保持原来的顺序 """ #方式一 for 循环方法 l1 = ...

  5. 显示图案 Exercise06_06

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:显示图案 * 输入一个数 5 1 2 1 3 2 1 4 3 2 1 5 ...

  6. js常用功能总结

    1,手机号的校验 //手机号的判断 function checktel() { //手机号不为空,格式校验 var tel = $(".uidbtp").val(); if(tel ...

  7. HTML5 Boilerplate笔记(3)

    HTML5 Boilerplate项目网址:https://github.com/h5bp/html5-boilerplate

  8. 【tomcat】FileNotFoundException: C:\Program Files\Java\apache-tomcat-8.5.11-geneshop3\webapps\ROOT\index.html (拒绝访问。)

    新装系统后,tomcat启动起来 提示如下错误: Caused by: java.io.FileNotFoundException: C:\Program Files\Java\apache-tomc ...

  9. Ext js 应用例子

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. Coherence的NameService

    Coherence*Extend模式下客户端需要连接一个或多个proxy Server从而接入集群,在一些比较大型的环境中,Proxy Server往往比较多,一旦修改起来需要修改每个配置文件,在Co ...