最实用、最常用的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 ...
随机推荐
- 【hdu4734】【F(x)】数位dp + 小小的总结一下
(https://www.pixiv.net/member_illust.php?mode=medium&illust_id=65608478) Problem Description For ...
- python3-开发进阶Django中序列化以及rest_framework的序列化
一.django框架的序列化 直接上代码 1.这是app下的models.py from django.db import models # Create your models here. clas ...
- 浅谈分布式CAP定理
互联网发展到现在,由于数据量大.操作并发高等问题,大部分网站项目都采用分布式的架构.而分布式系统最大的特点数据分散,在不同网络节点在某些时刻(数据未同步完,数据丢失),数据会不一致. 在2000年,E ...
- 20 Inno Setup制作安装包的几个问题
系统开发好之后,通常需要制作成安装包,才能卖给用户.利用Inno Setup的向导可以制作简单的安装包,但是如果要做个好的安装包的话可能会遇到一些麻烦,今日终于抽空解决了,Inno Setup打包的一 ...
- TabControl控件和TabPage
TabControl控件和TabPageTabControl控件可以支持在一个控件里面放置多个选项卡,每个选项卡又可以放置多个控件 由于在控件属性窗口添加选项卡相对比较容易,下面说一下动态创建选项卡 ...
- VMware8安装MacOS 10.8
前一篇博客,介绍了如何利用VMware安装MacOS系统,虽然可以安装成功,但也有不友好的地方,如: 1)MacOS系统文件需要是ISO格式,不是原生的dmg格式: 2)每次开机都需要借助HJMac工 ...
- 新公司官网项目优化实践(Vue)
入职后接手website-html和website-mobile项目,发现项目加载速度不太理想,于是结合自己之前的经验对项目做了优化.此篇文章主要记录这次优化详情. 原始项目:开发环境:website ...
- java8 遍历数组的几种方式
java8 遍历数组的几种方式 2017年04月05日 09:15:46 阅读数:4640 风格色 2017-02-11 18:41 有如下一个String数组 String[] array = {& ...
- libev客户端
#include <ev.h> #include <stdio.h> #include <netinet/in.h> #include <stdlib.h&g ...
- 如何将redis中的数据导入到本地MongoDB和MySQL数据库
将redis中的数据导入到本地MongoDB数据库 创建一个process_items_mongodb.py文件(文件名自定义): #!/usr/bin/env python # -*- coding ...