首页 > 代码库 > 最实用、最常用的jQuery代码片段
最实用、最常用的jQuery代码片段
1 // chinacoder.cn JavaScript Document 2 3 $(document).ready(function() { 4 5 //.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 6 7 // 使用has()来判断一个元素是否包含特定的class或者元素 8 $("input").has(".email").addClass("email_icon"); 9 10 //使用jQuery切换样式 11 $("link[media=‘screen‘]").attr(‘href‘, ‘Alternative.css‘); 12 13 //设置IE指定的功能 14 if ($.browser.msie) { /*Internet Explorer is a sadist.*/ }; 15 16 //创建元素时使用对象来定义属性 17 var e = $("", { href: "#", class: "a-class another-class", title: "..." }); 18 19 //使用过滤器过滤多属性 20 var elements = $(‘#someid input[type=sometype][value=http://www.mamicode.com/somevalue]‘).get(); 21 22 //隐藏包含特定值的元素 23 $("p.value:contains(‘thetextvalue‘)").hide(); 24 25 //关闭右键的菜单 26 $(document).bind(‘contextmenu‘,function(e){ return false; }); 27 28 //指定时间后自动隐藏或者关闭元素( 29 setTimeout(function() { $(‘.mydiv‘).hide(‘blind‘, {}, 500)}, 5000); 30 //And here‘s how you can do it with 1.4 using the delay() feature (this is a lot like sleep) 31 $(".mydiv").delay(5000).hide(‘blind‘, {}, 500); 32 33 //元素屏幕居中 34 jQuery.fn.center = function () { 35 this.css(‘position‘,‘absolute‘); 36 this.css(‘top‘, ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + ‘px‘); 37 this.css(‘left‘, ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + ‘px‘); 38 return this; 39 } 40 //Use the above function as: $(‘#gbin1div‘).center(); 41 42 //使用 jQuery 判断对象是否隐藏 43 if(!$("#demo").is(":visible")){ 44 45 } 46 if($("#demo2").css("visibility") == "hidden" ){ 47 48 } 49 50 //使用 jQuery 重定向页面 51 window.location.replace("http://www.baidu.com"); 52 window.location.href = "http://www.baidu.com" ; 53 54 //Google AJAX 库加载 jQuery 的最好方法 55 if (typeof jQuery == ‘undefined‘) { 56 document.write(unescape("%3Cscript src=http://www.mamicode.com/‘/js/jquery-1.7.2.min.js‘ type=‘text/javascript‘%3E%3C/script%3E")); 57 } 58 59 //jQuery实现图片预览 60 xOffset = 10; 61 yOffset = 30; 62 $("#imglist").find("img").hover(function(e) { 63 $("<img id=‘imgshow‘ src=http://www.mamicode.com/‘" + this.src + "‘ />").appendTo("body"); 64 $("#imgshow") .css("top", (e.pageY - xOffset) + "px") 65 .css("left", (e.pageX + yOffset) + "px") 66 .fadeIn("fast"); 67 }, function() { 68 $("#imgshow").remove(); 69 }); 70 71 $("#imglist").find("img").mousemove(function(e) { 72 $("#imgshow") .css("top", (e.pageY - xOffset) + "px") 73 .css("left", (e.pageX + yOffset) + "px") 74 }); 75 76 //翻转 77 $(‘.banner‘).find(‘a‘).hover(function(){ 78 $(this).find(‘.img1‘).stop().animate({‘width‘:0,‘left‘:‘116px‘},110,function(){ 79 $(this).hide().next().show(); 80 $(this).next().animate({‘width‘:‘232px‘ , ‘left‘:‘0‘},110); 81 }); 82 },function(){ 83 $(this).find(‘.img2‘).animate({‘width‘:0,‘left‘:‘116px‘},110,function(){ 84 $(this).hide().prev().show(); 85 $(this).prev().animate({‘width‘:‘232px‘,‘left‘:‘0px‘},110); 86 }); 87 }); 88 89 90 91 }); 92 93 //插件架构 94 /* 95 * jQuery-anipadding-0.1.js 96 * Copyright (c) 2013 Nicky Yan http://www.chinacoder.cn 97 * Date: 2013-11-16 98 * 使用anipadding可以方便实现动态效果。先提供的功能有划过位移,鼠标移上高亮显示. 99 */ 100 (function($){ 101 $.fn.extend({ 102 yourname:function(options){ 103 var defaults = { 104 //参数 参数用逗号隔开 105 }; 106 var options = $.extend(defaults , options); //合并多个对象为一个 107 return this.each(function(){ 108 // var o = options ; 109 // var obj = $(this); 110 // var items = $("li a" , obj) ; 111 // code 112 }); 113 } 114 }); 115 })(jQuery);
原文来源:ChinaCoder关注前端开发、关注中国IT从业者 ? chinacoder.cn分享下最实用、最常用的jQuery代码片段
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。