Jquery常用技巧收集整理篇

时间：2021-10-25 03:42 编辑：来源：阅读：
扫一扫，手机访问

摘要：Jquery常用技巧收集整理篇

比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下：禁止右键点击

[url=http://www.opensourcehunter.com]

检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。

$(document).ready(function() { // Target Firefox 2 and above if ($.browser.mozilla && $.browser.version >= "1.8" ){ // do something } // Target Safari if( $.browser.safari ){ // do something } // Target Chrome if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something } // Target Opera if( $.browser.opera){ // do something } // Target IE6 and below if ($.browser.msie && $.browser.version <= 6 ){ // do something } // Target anything above IE6 if ($.browser.msie && $.browser.version > 6){ // do something } });

预加载图片

[url=default.css]// the links <A class=Styleswitcher href="#" rel=default.css>Default Theme</A> <A class=Styleswitcher href="#" rel=red.css>Red Theme</A> <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A> });

列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

[u]复制代码[/u][/url] 代码如下:

$(document).ready(function() { function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } // how to use $(document).ready(function() { equalHeight($(".left")); equalHeight($(".right")); }); });

动态控制页面字体大小

[url=#top]});

获得鼠标指针XY值

[u]复制代码[/u][/url] 代码如下:

$(document).ready(function() { $().mousemove(function(e){ //display the x and y axis values inside the div with the id XY $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); // how to use <DIV id=XY></DIV> });

验证元素是否为空

[url=index.html]});

ID与Class之间转换当改变Window大小时，在ID与Class之间切换

[u]复制代码[/u][/url] 代码如下:

$(document).ready(function() { function checkWindowSize() { if ( $(window).width() > 1200 ) { $('body').addClass('large'); } else { $('body').removeClass('large'); } } $(window).resize(checkWindowSize); });

克隆对象

[u]复制代码[/u] 代码如下:

$(document).ready(function() {
var cloned = $('#id').clone();
// how to use
<DIV idid=id></DIV>
});

使元素居屏幕中间位置

[u]复制代码[/u] 代码如下:

$(document).ready(function() {
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;
}
$("#id").center();
});

写自己的选择器

[u]复制代码[/u] 代码如下:

$(document).ready(function() {
$.extend($.expr[':'], {
moreThen1000px: function(a) {
return $(a).width() > 1000;
}
});
$('.box:moreThen1000px').click(function() {
// creating a simple js alert box
alert('The element that you have clicked is over 1000 pixels wide');
});
});

统计元素个数

[u]复制代码[/u] 代码如下:

$(document).ready(function() {
$("p").size();
});

使用自己的Bullets

[u]复制代码[/u] 代码如下:

$(document).ready(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("‒ ");
// how to use
ul.Replaced { list-style : none; }
});

引用Google主机上的jQuery类库

[u]复制代码[/u] 代码如下:

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// do something
});
</SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>
// Example 2:(the best and fastest way)
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>

禁用jQuery（动画）效果

[u]复制代码[/u] 代码如下:

$(document).ready(function() {
jQuery.fx.off = true;
});

与其他JavaScript类库冲突解决方案

[u]复制代码[/u] 代码如下:

$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});

全部评论(0)

上一篇：jquery插件之easing 动态菜单
下一篇：基于jquery的simpleValidate简易验证插件