您的位置:首页 > Web前端 > JQuery

常用的jQuery代码片段

2015-12-25 17:18 696 查看
// 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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: