常用的jQuery代码片段_jquery常用片段-优快云博客

本文深入探讨了JavaScript库jQuery的核心功能，包括元素选择、样式切换、对象属性设定、事件绑定等，并展示了如何利用jQuery实现图片预览、元素定位、样式动态改变等高级特性。同时，介绍了jQuery的插件架构和动态效果实现，以及如何通过jQuery进行页面重定向和隐藏显示元素。此外，还分享了jQuery在不同浏览器环境下的兼容性处理和跨域资源访问策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 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);