最实用、最常用的jQuery代码片段
// chinacoder.cn JavaScript Document
$(document).ready(function() {
//.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素
// 使用has()来判断一个元素是否包含特定的class或者元素
$("input").has(".email").addClass("email_icon");
//使用jQuery切换样式
$("link[media='screen']").attr('href', 'Alternative.css');
//设置IE指定的功能
if ($.browser.msie) { /*Internet Explorer is a sadist.*/ };
//创建元素时使用对象来定义属性
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
//使用过滤器过滤多属性
var elements = $('#someid input[type=sometype][value=somevalue]').get();
//隐藏包含特定值的元素
$("p.value:contains('thetextvalue')").hide();
//关闭右键的菜单
$(document).bind('contextmenu',function(e){ return false; });
//指定时间后自动隐藏或者关闭元素(
setTimeout(function() { $('.mydiv').hide('blind', {}, 500)}, 5000);
//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
$(".mydiv").delay(5000).hide('blind', {}, 500);
//元素屏幕居中
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;
}
//Use the above function as: $('#gbin1div').center();
//使用 jQuery 判断对象是否隐藏
if(!$("#demo").is(":visible")){
}
if($("#demo2").css("visibility") == "hidden" ){
}
//使用 jQuery 重定向页面
window.location.replace("http://www.baidu.com");
window.location.href = "http://www.baidu.com" ;
//Google AJAX 库加载 jQuery 的最好方法
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
//jQuery实现图片预览
xOffset = 10;
yOffset = 30;
$("#imglist").find("img").hover(function(e) {
$("<img id='imgshow' src='" + this.src + "' />").appendTo("body");
$("#imgshow") .css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")
.fadeIn("fast");
}, function() {
$("#imgshow").remove();
});
$("#imglist").find("img").mousemove(function(e) {
$("#imgshow") .css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")
});
//翻转
$('.banner').find('a').hover(function(){
$(this).find('.img1').stop().animate({'width':0,'left':'116px'},110,function(){
$(this).hide().next().show();
$(this).next().animate({'width':'232px' , 'left':'0'},110);
});
},function(){
$(this).find('.img2').animate({'width':0,'left':'116px'},110,function(){
$(this).hide().prev().show();
$(this).prev().animate({'width':'232px','left':'0px'},110);
});
});
});
//插件架构
/*
* jQuery-anipadding-0.1.js
* Copyright (c) 2013 Nicky Yan http://www.chinacoder.cn
* Date: 2013-11-16
* 使用anipadding可以方便实现动态效果。先提供的功能有划过位移,鼠标移上高亮显示.
*/
(function($){
$.fn.extend({
yourname:function(options){
var defaults = {
//参数 参数用逗号隔开
};
var options = $.extend(defaults , options); //合并多个对象为一个
return this.each(function(){
// var o = options ;
// var obj = $(this);
// var items = $("li a" , obj) ;
// code
});
}
});
})(jQuery);
原文来源:ChinaCoder关注前端开发、关注中国IT从业者 » chinacoder.cn分享下最实用、最常用的jQuery代码片段
最实用、最常用的jQuery代码片段的更多相关文章
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...
- 一些实用的JQuery代码片段收集
本文将展示50个非常实用的JQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够 ...
- 几个非常实用的JQuery代码片段
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用). ...
- 高效Web开发的10个jQuery代码片段(10 JQUERY SNIPPETS FOR EFFICIENT WEB DEVELOPMENT)
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
- 10个可以直接拿来用的JQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...
- 可以直接拿来用的15个jQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了15段非常实用的jQue ...
- 【转】jQuery代码片段备用
在CSDN看到的,记下备用.原文:http://www.csdn.net/article/2013-07-16/2816238-15-jquery-code-snippets-for-develope ...
随机推荐
- 【递推】【组合数】【容斥原理】UVA - 11806 - Cheerleaders
http://www.cnblogs.com/khbcsu/p/4245943.html 本题如果直接枚举的话难度很大并且会无从下手.那么我们是否可以采取逆向思考的方法来解决问题呢?我们可以用总的情况 ...
- gitHub 基础命令
设置开发人员信息 git config --global user.name "chen" git config --global user.email "xxxxx@q ...
- 通过dbf文件恢复oracle
可能有些人会由于各种原因经常重装系统,但是系统里面总是有一些比较重要的软件在重装后就不能用了.比如oracle数据库,众所周知数据库如果通过dmp导入导出麻烦不说,还很耗时,特别是像笔者一个数据库就有 ...
- 【Rocket MQ】RocketMQ 在windows7 64位安装使用 +RocketMQ管理界面的安装
参考地址:https://blog.csdn.net/yucaifu1989/article/details/80960018 参考地址:https://blog.csdn.net/u01204090 ...
- HTML5中表单验证的8种方法
HTML5中表单验证的8种方法 2012-4-21 11:00| 发布者: benben| 查看: 2765| 评论: 0 摘要: 前一篇,我们介绍了HTML5中新的表单特性和函数, 今天就继续来谈谈 ...
- 一些关于VC++开发的笔记
通常程序卡住了,主要有双方面的可能: (1)死循环了 (2)死锁了 要确定是否是死循环.能够通过调试器(经常使用Windbg)查看线程执行时间,假设隔了一段会儿两次查看的执行时间有非常大区别,那么非常 ...
- DevExpress 中 DateEdit 控件 格式化显示和编辑的日期格式为: yyyy-MM-dd
摘自: http://blog.sina.com.cn/s/blog_76b5256c0100zkwk.html 1需要显示的日期为2012年3月12日需要如下设置 Properties-Mask-E ...
- Hibernate连接MySQL
1 下载hibernate-3.6.0 Final.zip到任意目录,解压缩后得到hibernate目录 2 下载slf4j-1.7.13.zip到任意目录,解压缩后得到slf4j-1.7.13 3 ...
- 一个故事讲清NIO
假设某银行只有10个职员.该银行的业务流程分为以下4个步骤: 1) 顾客填申请表(5分钟): 2) 职员审核(1分钟): 3) 职员叫保安去金库取钱(3分钟): 4) 职员打印票据,并将钱和票据返回给 ...
- 实现淡入淡出效果的组件,继承自JComponent
由于仅贴出代码,供有缘人参考. import java.awt.AlphaComposite; import java.awt.Graphics; import java.awt.Graphics2D ...