最实用、最常用的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 ...
随机推荐
- 必知必会JVM垃圾回收——对象搜索算法与回收算法
垃圾回收(GC)是JVM的一大杀器,它使程序员可以更高效地专注于程序的开发设计,而不用过多地考虑对象的创建销毁等操作.但是这并不是说程序员不需要了解GC.GC只是Java编程中一项自动化工具,任何一个 ...
- HDU 5289 Assignment rmq
Assignment 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5289 Description Tom owns a company and h ...
- #iOS问题记录# UIWebView滑动到底部
最近看Tmall的iOS APP,在Tmall的商品简介页面,当拖动到最底部时,会提示继续向上拖动,“查看图文详情”: 觉得这个设计挺好的.闲来无事,自己UIWebView模仿一下,问题是检查UIWe ...
- Linux中KVM虚拟机是什么
概念: Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器进行 ...
- Inno Setup入门(十六)——Inno Setup类参考(2)
Inno Setup入门(十六)——Inno Setup类参考(2) http://379910987.blog.163.com/blog/static/33523797201112755641236 ...
- sqlite 增加字段语句
ALTER TABLE `table1` ADD `AAAA` VARCHAR( 10 ) NOT NULL ; ALTER TABLE 'IPC_FGUID' ADD 'iPassageway' V ...
- express-session的简单使用说明
我们知道Internet 通过协议分为stateful和stateless两类,而http是stateless协议,客户端发送请求到服务端建立一个连接,请求得到响应后连接即中断,服务器端不会记录状态, ...
- asp.net 分布式应用开发
Net Framework推出的许多新技术为上述任务的实现提供了相对简单的解决方案.其中,基于SOAP的Web Service在处理分布式应用时具有比传统的DCOM/CORBA明显的优点,结合基于We ...
- 解决新浪微博API调用限制 突破rate_limit_status瓶颈
新浪微博开放平台API的调用和TWITTER接口一样,都是受限的,以小时为单位进行限定. 他有两个限制原则 1.用户不登录基于IP的限制,每小时1000次 2.用户登录了基于用户的限制,每小时1000 ...
- JS的数组相关知识
创建数组方法一: var a1=new Array(5); console.log(a1.length); console.log(a1); //[] ,数组是空的 var a2=new Array( ...