1. 禁止右键点击
2. 隐藏搜索文本框文字view plaincopy to clipboardprint?
3. 在新窗口中打开链接
4. 检测浏览器
5. 预加载图片
6. 页面样式切换
7. 列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
8. 动态控制页面字体大小
用户可以改变页面字体大小
9. 返回页面顶部功能
11.获得鼠标指针XY值
12. 验证元素是否为空
13. 替换元素
14. jQuery延时加载功能view plaincopy to clipboardprint?
15. 移除单词功能view plaincopy to clipboardprint?
16. 验证元素是否存在于Jquery对象集合中
17. 使整个DIV可点击view plaincopy to clipboardprint?
18.ID与Class之间转换当改变Window大小时,在ID与Class之间切换
19. 克隆对象view plaincopy to clipboardprint?
20. 使元素居屏幕中间位置view plaincopy to clipboardprint?
21. 写自己的选择器view plaincopy to clipboardprint?
22. 统计元素个数view plaincopy to clipboardprint?
23. 使用自己的 Bulletsview plaincopy to clipboardprint?
24. 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.
25. 禁用Jquery(动画)效果
26. 与其他Javascript类库冲突解决方案view plaincopy to clipboardprint?
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xiaoping8411/archive/2010/03/29/5429751.aspx
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
2. 隐藏搜索文本框文字view plaincopy to clipboardprint?
$(document).ready(function() {
$("input.text1").val("Enter your search text here");
textFill($('input.text1'));
});
function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(''); }
});
input.blur( function(){
if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
});
}
3. 在新窗口中打开链接
$(document).ready(function() {
//Example 1: Every link will open in a new window
$('a[href^="http://"]').attr("target", "_blank");
//Example 2: Links with the rel="external" attribute will only open in a new window
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
});
// how to use
<A href="http://www.opensourcehunter.com" rel=external>open link</A>
4. 检测浏览器
注: 在版本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
}
});
5. 预加载图片
$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};
// how to use
$.preloadImages("image1.jpg");
});
6. 页面样式切换
$(document).ready(function() {
$("a.Styleswitcher").click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
// how to use
// place this in your header
<LINK href="default.css" type=text/css rel=stylesheet>
// 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>
});
7. 列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
$(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"));
});
});
8. 动态控制页面字体大小
用户可以改变页面字体大小
$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase the font size(bigger font0
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease the font size(smaller font)
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});
9. 返回页面顶部功能
$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to
<A name=top></A>
// the link
<A href="#top">go to top</A>
});
11.获得鼠标指针XY值
$(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>
});
12. 验证元素是否为空
$(document).ready(function() {
if ($('#id').html()) {
// do something
}
});
13. 替换元素
$(document).ready(function() {
$('#id').replaceWith('
<DIV>I have been replaced</DIV>
');
});
14. jQuery延时加载功能view plaincopy to clipboardprint?
$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});
15. 移除单词功能view plaincopy to clipboardprint?
$(document).ready(function() {
var el = $('#id');
el.html(el.html().replace(/word/ig, ""));
});
16. 验证元素是否存在于Jquery对象集合中
$(document).ready(function() {
if ($('#id').length) {
// do something
}
});
17. 使整个DIV可点击view plaincopy to clipboardprint?
$(document).ready(function() {
$("div").click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find("a").attr("href"); return false;
});
// how to use
<DIV><A href="index.html">home</A></DIV>
});
18.ID与Class之间转换当改变Window大小时,在ID与Class之间切换
$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$('body').addClass('large');
}
else {
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
});
19. 克隆对象view plaincopy to clipboardprint?
$(document).ready(function() {
var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>
});
20. 使元素居屏幕中间位置view plaincopy to clipboardprint?
$(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();
});
21. 写自己的选择器view plaincopy to clipboardprint?
$(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');
});
});
22. 统计元素个数view plaincopy to clipboardprint?
$(document).ready(function() {
$("p").size();
});
23. 使用自己的 Bulletsview plaincopy to clipboardprint?
$(document).ready(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("‒ ");
// how to use
ul.Replaced { list-style : none; }
});
24. 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.
//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>
25. 禁用Jquery(动画)效果
$(document).ready(function() {
jQuery.fx.off = true;
});
26. 与其他Javascript类库冲突解决方案view plaincopy to clipboardprint?
$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xiaoping8411/archive/2010/03/29/5429751.aspx