最近天冷,工作有点忙,也有点懒,网站也怠慢了,分享下最实用、最常用的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);
【JQ】无限滚动条-jquery.infinitescroll.j
query多选下拉框插件 jquery-multiselect(
手机站jQuery自动完成插件autoComplete.js
热门源码