Jquery使用小技巧(1)
来源:互联网 发布:开淘宝怎么上传照片 编辑:程序博客网 时间:2024/05/01 16:50
1. 禁止右键点击
$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; });});
2. 隐藏搜索文本框文字
$(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. 检测浏览器
$(document).ready(function() {// Target Firefox 2 and aboveif ($.browser.mozilla && $.browser.version >= "1.8" ){ // do something} // Target Safariif( $.browser.safari ){ // do something} // Target Chromeif( $.browser.chrome){ // do something} // Target Caminoif( $.browser.camino){ // do something} // Target Operaif( $.browser.opera){ // do something} // Target IE6 and belowif ($.browser.msie && $.browser.version <= 6 ){ // do something} // Target anything above IE6if ($.browser.msie && $.browser.version > 6){ // do something}});
5. 预加载图片
$(document).ready(function() {jQuery.preloadImages = function(){ for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { 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 rel=stylesheet type=text/css href="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>});
7. 列高度相同
$(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 }});
英文原文:http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/
0 0
- Jquery使用小技巧(1)
- jquery使用小技巧
- jquery使用小技巧
- Jquery使用小技巧
- jquery 使用小技巧
- Jquery使用小技巧
- jQuery使用小技巧
- jquery mobile使用小技巧
- Jquery使用小技巧汇总
- 26个 jQuery 使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26 个 JQuery 使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 研究相关的博客
- Tomcat 8(八)Tomcat解析server.xml的工具—Digester
- 选择排序
- UNIX LINUX 系统 命令
- ARM汇编程序中学ARM程序的结构和混合编程
- Jquery使用小技巧(1)
- [C++]inline函数
- 数组、List以及Map的遍历
- JDK概述
- B - Break Standard Weight
- 阶乘小结
- shell script 统计文本中字符串的出现的频率及按频率的多少从高到低输出_面试算法题之一
- Node学习笔记——模块和包
- Java设计模式透析之 —— 模板方法(Template Method)