最实用、最常用的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 ...
随机推荐
- 倒置数组 Exercise07_12
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:倒置数组 * */ public class Exercise07_12 ...
- usaco-2.2.2Subset Sums 集合
01背包,对每个数至多取一次,为了避免重复,应倒序dp usaco-2.2.2Subset Sums 集合 时间限制: 1 Sec 内存限制: 128 MB 题目描述 对于从1到N的连续整集合合,能 ...
- AIM Tech Round (Div. 1) D. Birthday 数学 暴力
D. Birthday 题目连接: http://www.codeforces.com/contest/623/problem/D Description A MIPT student named M ...
- Android获取apk的版本及包名等信息
import android.app.Activity; import android.content.Context; import android.content.pm.ApplicationIn ...
- 【redis】2.redis可视化工具安装使用
redis可视化工具:Redis Desktop Manager 1.redis桌面管理工具[可视化工具]下载 下载地址:https://redisdesktop.com/download 2.点击安 ...
- linux图机界面机制
1.X WindowX Window 是由麻省理工学院(MIT)推出的窗口系统,简称X,它旨在建立不依赖于特定硬件系统的图形和文字显示窗口系统的标准.1987 年9 月,MIT 推出了X 系统的11 ...
- java中copy 一个list集合的方法
java将一个list里的数据转移到另外一个list,可以使用for语句,一次使用add方法,示例如下: ArrayList list1=new ArrayList(); list1.add(&quo ...
- Neural Networks for Machine Learning by Geoffrey Hinton (4)
一种能够学习家谱关系的简单神经网络 血缘一共同拥有12种关系: son, daughter, nephew, niece, father, mother, uncle, aunt, brother, ...
- rootkit后门之安装流程
1.首先是获得远程服务器的root权限 2.然后下载rootkit程序,本文用到的是mafix (下载前最好把杀毒软件关掉,基本上会报毒的!) 3.开始安装 tar -xvzf mafix.tar.g ...
- Eclipse代码布局怎么使用退格和缩进快捷键?
Eclipse代码布局怎么使用退格和缩进快捷键? 好的程序,不仅要运行快速准确,而且还要易于理解.研究表明,清晰的代码布局可以提高程序猿的理解能力.何为代码布局?其实就是代码的缩进.留白等.为了保证清 ...