最实用、最常用的jQuery代码片段
2020-11-25 04:54
标签:style blog class code java ext 最实用、最常用的jQuery代码片段,搜素材,soscw.com 最实用、最常用的jQuery代码片段 标签:style blog class code java ext 原文地址:http://www.cnblogs.com/yiliweichinasoft/p/3705279.html 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=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=‘/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 $("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代码片段