最实用、最常用的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 ...
随机推荐
- bzoj 3384: [Usaco2004 Nov]Apple Catching 接苹果
双倍经验题... -->1750 dp!! 3384: [Usaco2004 Nov]Apple Catching 接苹果 Time Limit: 1 Sec Memory Limit: 12 ...
- php读取超大文件fseek
function readMaxFile($fp , $start = 0) { $tag = "\n"; $i = 0; $content = ''; while($i < ...
- 【spring boot】使用注解@ConfigurationProperties读取配置文件时候 报错 org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'rocketmqAutoConfiguration': Unsatisfied dependenc
如题,配置文件如下: #注册中心配置 eureka: instance: instanceId: ${spring.application.name}:${random.int} hostname: ...
- Linux用来抗衡Win的那些桌面环境
作为一个 Linux 的爱好者,参加了 9 月 22 日 Linux Deepin 在北京举行的用户与开发者大会(给大家一个链接).名为参加会议,实为打酱油.但 Linux Deepin 团队的一些理 ...
- [Android Pro] java.lang.IllegalStateException: Fragment(XXFragment) not attached to Activity异常
转载:http://blog.csdn.net/winson_jason/article/details/20357435 下边两个问题,是在开发中碰到的一些关于Fragment的偶发性的问题,今天时 ...
- redigo简单理解
package main import ( "fmt" "github.com/gomodule/redigo/redis") func main() { // ...
- xss的高级利用
以往对XSS的利用大多数都是针对于挂马,钓鱼,盗cookie等,这些方式并没有真正发挥到XSS的作用,因为很少人能了解XSS的实质,会话劫持,浏览器劫持,XSS能做到的东西远远超乎我们的想象. 一 X ...
- tag subshader shaderlab
unity的黑科技 https://docs.unity3d.com/Manual/SL-SubShaderTags.html 这里 reflectCamera.RenderWithShader(re ...
- jQuery对象的序列化详解
一.param() 方法创建数组或对象的序列化表示. 该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用. 语法: jQuery.param(object,traditional) ob ...
- Linux C高级编程——文件操作之系统调用
Linux C高级编程文件操作之系统调用 宗旨:技术的学习是有限的,分享的精神是无限的. 库函数是一些完毕特定功能的函数.一般由某个标准组织制作公布,并形成一定的标准.使用库函数编 ...