jquery 常用小方法

最新推荐文章于 2024-09-12 18:22:06 发布
最新推荐文章于 2024-09-12 18:22:06 发布
阅读量753 收藏
点赞数
分类专栏： jquery 文章标签： jquery function html stylesheet javascript 浏览器

1、新窗口打开链接 
XHTML 1.0 Strict 版本不支持 target="_blank" 属性，而使用 JQuery 能很好地解决这个问题，实现新窗口打开网页：

复制代码  代码如下:

$('a[@rel$='external']').click(function(){  
this.target = "_blank";  
});  

/*  
Usage:  
<a href="http://www.mangguo.org/" rel="external">mangguo.org</a>  
*/


2. 获得匹配元素的总数 
以下代码将返回匹配元素的数目： 

$('element').size(); 

3. 预加载图像 
当使用 Javascript 处理图像载入时，可以使用图像实现预加载：

复制代码  代码如下:

jQuery.preloadImages = function()  
{  
for(var i = 0; i").attr("src", arguments[i]);  
}  
};  

// Usage  
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");


4. 检测浏览器 
根据不同浏览器加载不同 CSS 能防止因浏览器差异造成的样式表渲染差异，使用 JQuery 可以轻松实现：

复制代码  代码如下:

//A. Target Safari  
if( $.browser.safari ) $("#menu li a"). css教程("padding", "1em 1.2em" );  

//B. Target anything above IE6  
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );  

//C. Target IE6 and below  
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above  
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );


5. 字符串替换 
用 JQuery 能对文本内容中的特定字符串进行替换操作：

复制代码  代码如下:

var el = $('#id');  
el.html(el.html().replace(/word/ig, ""));


6. 列高度相等 
用 CSS 实现两列高度相等并不容易，JQuery 能帮你解决：

复制代码  代码如下:

function equalHeight(group) {  
tallest = 0;  
group.each(function() {  
thisHeight = $(this).height();  
if(thisHeight > tallest) {  
tallest = thisHeight;  
}  
});  
group.height(tallest);  
}  

/*  
Usage:  
$(document).ready(function() {  
equalHeight($(".recent-article"));  
equalHeight($(".footer-col"));  
});  
*/


7. 字体大小重设 
字体大小重设是一个非常常用的功能：

www.111cn.net 代码如下:

$(document).ready(function(){  
// Reset Font Size  
var originalFontSize = $('html').css('font-size');  
$(".resetFont").click(function(){  
$('html').css('font-size', originalFontSize);  
});  
// Increase Font Size  
$(".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 Font Size  
$(".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;   www.111cn.net
});  
});


8. 禁用右键菜单 
有许多 JavaScript 代码段可禁用右键菜单，但 JQuery 使操作变得更容易：

复制代码  代码如下:

$(document).ready(function(){  
$(document).bind("contextmenu",function(e){  
return false;  
});  
});

9、让两个并列的div自适应高度

<div id=”main”><div id=”left”></div> <div id=”right”></div></div>

JS代码：

<script type=”text/javascript” src=”jquery-1[1].3.2.min.js”></script>
<script type=”text/javascript”>
if($(“#left”).height()-$(“#right”).height()<0){
  $(“#left”).css({height:$(“#right”).height()});
 }
else{
  $(“#right”).css({height:$(“#left”).height()});
 }
</script>


  • 禁止右键点击

        
    
    1. $(document).ready(function(){     
    2. $(document).bind("contextmenu",function(e){     
    3.    return false;     
    4.   });     
    5. });   

    隐藏搜索文本框文字

        
    
    1. $(document).ready(function() {     
    2. $("input.text1").val("Enter your search text here");     
    3.    textFill($('input.text1'));     
    4. });     
    5. function textFill(input){ //input focus text function     
    6.    var originalvalue = input.val();     
    7.    input.focus( function(){     
    8.  
    9. if( $.trim(input.val()) == originalvalue ){ input.val(''); }     
    10. });     
    11.  
    12. input.blur( function(){     
    13.     if( $.trim(input.val()) == '' ){ input.val(originalvalue); }     
    14. });     
    15. }    

    在新窗口中打开链接

        
    
    1. $(document).ready(function() {     
    2. //Example 1: Every link will open in a new window     
    3. $('a[href^="http://"]').attr("target", "_blank");     
    4. //Example 2: Links with the rel="external" attribute will only open in a new window     
    5. $('a[@rel$='external']').click(function(){     
    6.      this.target = "_blank";     
    7. });     
    8.  
    9. });     
    10. // how to use     
    11. <A href="http://www.opensourcehunter.com" rel=external>open link</A> 

    检测浏览器

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

        
    
    1. $(document).ready(function() {     
    2. // Target Firefox 2 and above     
    3.    if ($.browser.mozilla && $.browser.version >= "1.8" ){     
    4.     // do something     
    5.  
    6.    }     
    7. // Target Safari     
    8. if( $.browser.safari ){     
    9. // do something     
    10. }     
    11. // Target Chrome     
    12. if( $.browser.chrome){     
    13. // do something     
    14.  
    15. }     
    16. // Target Camino     
    17. if( $.browser.camino){     
    18. // do something     
    19.  
    20. }     
    21. // Target Opera     
    22. if( $.browser.opera){     
    23. // do something     
    24.  
    25. }     
    26. // Target IE6 and below     
    27. if ($.browser.msie && $.browser.version <= 6 ){     
    28. // do something     
    29.  
    30. }     
    31. // Target anything above IE6     
    32. if ($.browser.msie && $.browser.version > 6){     
    33. // do something     
    34. }     
    35. });   

    预加载图片

        
    
    1. $(document).ready(function() {     
    2.  
    3.   jQuery.preloadImages = function()     
    4.   {     
    5.      for(var i = 0; i").attr("src", arguments[i]);    
    6.  
    7.   }    
    8. };    
    9. // how to use    
    10. $.preloadImages("image1.jpg");     
    11. });   

    页面样式切换

        
    
    1. $(document).ready(function() {     
    2.  
    3. $("a.Styleswitcher").click(function() {     
    4.  //swicth the LINK REL attribute with the value in A REL attribute     
    5. $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));     
    6.  
    7.   });     
    8.  
    9. // how to use     
    10. // place this in your header     
    11.  
    12. <LINK href="default.css" type=text/css rel=stylesheet>     
    13. // the links     
    14. <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>     
    15. <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>     
    16. <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>     
    17. }); 
    
    
    
    
     
     
    • 

      
      
      
      列高度相同
      
      
      
      如果使用了两个CSS列，使用此种方式可以是两列的高度相同。
      
      
      
             
       
      1. $(document).ready(function() {     
      2.   function equalHeight(group) {     
      3.   tallest = 0;     
      4.   group.each(function() {     
      5.  
      6.   thisHeight = $(this).height();     
      7.  
      8.   if(thisHeight > tallest) {     
      9.  
      10.      tallest = thisHeight;     
      11.  
      12.   }     
      13.  
      14. });     
      15.  
      16. group.height(tallest);     
      17. }     
      18.  // how to use     
      19.  $(document).ready(function() {     
      20.  
      21.    equalHeight($(".left"));     
      22.  
      23.    equalHeight($(".right"));     
      24.  
      25.   });     
      26.  
      27. });   
      
      
      
      动态控制页面字体大小
      
      
      
             
       
      1. $(document).ready(function() {     
      2.  
      3.   // Reset the font size(back to default)     
      4.   var originalFontSize = $('html').css('font-size');     
      5.  
      6.   $(".resetFont").click(function(){     
      7.   $('html').css('font-size', originalFontSize);     
      8.  
      9. });     
      10.  
      11.   // Increase the font size(bigger font0     
      12.   $(".increaseFont").click(function(){     
      13.  
      14. var currentFontSize = $('html').css('font-size');     
      15. var currentFontSizeNum = parseFloat(currentFontSize, 10);     
      16. var newFontSize = currentFontSizeNum*1.2;     
      17.  
      18. $('html').css('font-size', newFontSize);     
      19.  
      20.    return false;     
      21.  
      22. });     
      23.  
      24. // Decrease the font size(smaller font)     
      25. $(".decreaseFont").click(function(){     
      26.  
      27. var currentFontSize = $('html').css('font-size');     
      28. var currentFontSizeNum = parseFloat(currentFontSize, 10);     
      29. var newFontSize = currentFontSizeNum*0.8;     
      30.  
      31. $('html').css('font-size', newFontSize);     
      32.   return false;     
      33.   });     
      34. });   
      
      
      
      返回页面顶部功能
      
      
      
             
       
      1. $(document).ready(function() {     
      2. $('a[href*=#]').click(function() {     
      3.    if (location.pathname.replace(/^///,'') == this.pathname.replace(/^///,'')     
      4.    && location.hostname == this.hostname) {     
      5.    var $target = $(this.hash);     
      6. $target = $target.length && $target     
      7.   || $('[name=' + this.hash.slice(1) +']');     
      8.   if ($target.length) {     
      9.  
      10. var targetOffset = $target.offset().top;     
      11.  
      12. $('html,body')     
      13.   .animate({scrollTop: targetOffset}, 900);     
      14.   return false;     
      15. }     
      16.  
      17. }     
      18. });     
      19.  
      20. // how to use     
      21. // place this where you want to scroll to     
      22.  
      23. <A name=top></A>   
      24.     
      25. // the link     
      26. <A href="#top">go to top</A>     
      27. });   
      
      
      
      获得鼠标指针XY值
      
      
      
             
       
      1.    $(document).ready(function() {     
      2.    $().mousemove(function(e){     
      3.      //display the x and y axis values inside the div with the id XY     
      4.    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);     
      5.  
      6. });     
      7.  
      8. // how to use     
      9.  
      10. <DIV id=XY></DIV>     
      11. });   
      
      
      
      验证元素是否为空
      
      
      
             
       
      1.   $(document).ready(function() {     
      2.     if ($('#id').html()) {     
      3.     // do something     
      4.   }     
      5. });   
      
      
      
      替换元素
      
      
      
             
       
      1. $(document).ready(function() {     
      2. $('#id').replaceWith('    
      3.   <DIV>I have been replaced</DIV>    
      4.   );     
      5. });   
      
     
     
    
    
    
    
    
    
    • jQuery延时加载功能
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.     window.setTimeout(function() {     
      4.  
      5.     // do something     
      6.  
      7.      }, 1000);     
      8.  
      9. });   
      
     
     
      移除单词功能
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.    var el = $('#id');     
      4.  
      5.    el.html(el.html().replace(/word/ig, ""));     
      6.  
      7. });   
      
     
     
      验证元素是否存在于jQuery对象集合中
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.    if ($('#id').length) {     
      4.  
      5.    // do something     
      6.  
      7. }     
      8. });   
      
     
     
      使整个DIV可点击
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.   $("div").click(function(){     
      4.  
      5.   //get the url from href attribute and launch the url     
      6.  
      7.      window.location=$(this).find("a").attr("href"); return false;     
      8.  
      9. });     
      10.  
      11. // how to use     
      12.  
      13. <DIV><A href="index.html">home</A></DIV>     
      14. });    
      15.  
      16. ID与Class之间转换当改变Window大小时，在ID与Class之间切换  
      17.  
      18. $(document).ready(function() {     
      19.  
      20.    function checkWindowSize() {     
      21.    if ( $(window).width() > 1200 ) {     
      22.  
      23.      $('body').addClass('large');     
      24.  
      25.    }     
      26.    else {     
      27.  
      28.       $('body').removeClass('large');     
      29.  
      30.         }     
      31.  
      32. }     
      33. $(window).resize(checkWindowSize);     
      34. });   
      
     
     
      克隆对象
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.   var cloned = $('#id').clone();     
      4.  
      5.   // how to use     
      6.  
      7. <DIV idid=id></DIV>     
      8. });   
      
     
     
      使元素居屏幕中间位置
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.   jQuery.fn.center = function () {     
      4.  
      5.   this.css("position","absolute");     
      6.  
      7.   this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");     
      8.  
      9.   this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");     
      10.  
      11.      return this;     
      12.  
      13. }     
      14.  
      15. $("#id").center();     
      16.  
      17. });   
      
     
     
      写自己的选择器
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.    $.extend($.expr[':'], {     
      4.  
      5.      moreThen1000px: function(a) {     
      6.  
      7.    return $(a).width() > 1000;     
      8.  
      9.   }     
      10.  
      11. });     
      12. $('.box:moreThen1000px').click(function() {     
      13.  
      14.   // creating a simple js alert box     
      15.  
      16.     alert('The element that you have clicked is over 1000 pixels wide');     
      17.  
      18.   });     
      19.  
      20. });   
      
     
     
      统计元素个数
      
     
     
            
      
      1. $(document).ready(function() {     
      2. $("p").size();     
      3. });   
      
     
     
      使用自己的Bullets
      
     
     
            
      
      1. $(document).ready(function() {     
      2.   $("ul").addClass("Replaced");     
      3.   $("ul > li").prepend("‒ ");     
      4.   // how to use     
      5.   ul.Replaced { list-style : none; }     
      6.  
      7. });   
      
     
     
      引用Google主机上的jQuery类库
      
     
     
            
      
      1. //Example 1     
      2. <SCRIPT src="http://www.google.com/jsapi"></SCRIPT>     
      3. <SCRIPT type=text/javascript>    
      4.    google.load("jquery", "1.2.6");    
      5.    google.setOnLoadCallback(function() {    
      6. // do something    
      7. });    
      8. </SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>     
      9.  
      10. // Example 2:(the best and fastest way)     
      11. <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>  
      
     
     
      禁用jQuery（动画）效果
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.    jQuery.fx.off = true;     
      4.  
      5. });   
      
     
     
      与其他JavaScript类库冲突解决方案
      
     
     
            
      
      1. $(document).ready(function() {     
      2.  
      3.   var $jq = jQuery.noConflict();     
      4.  
      5.   $jq('#id').show();     
      6.  
      7. }); 


friends
关注
专栏目录
jQuery的常用方法
Java721的博客
08-18 275
jQuery操作DOM 开发工具 Hbuilder官网 jQuery下官网 新建项目并引入js文件 01-jQuery选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery选择器</title> </head> <body> <h3>jQuery选择器</h3> <div
jQuery常见方法
weixin_50212969的博客
08-27 233
jQuery常用方法 jQuery入口函数 作用:等待文档中的标签加载完毕(不等待内容加载完毕),然后再执行入口函数中的代码 语法: `$(document).ready(function(){});`完整写法 `$(function(){});`简写 DOM入口函数 作用:等待文档中的标签和内容加载完毕,然后再执行入口函数中的代码 语法:`window.onload=function(){}` 区别 1.jQuery入口函数早于DOM入口函数执行 2.一个HTML文档中,最多只有一个DOM入口函数
jQuery: button实现target为_blank, 点击button弹出新窗口
红桃∩
05-31 4358
该方法可适用于跳转下载等 <button id="clickGo">跳转页面</button> $("#clickGo").click(function () { window.open('url', '_blank') });
jquery 在新窗口打开链接 (target=”blank”)
Ethan Woo 的博客
11-23 1610
数据迁移至www.chinaoc.com.cn，点击查看详细：  jquery 在新窗口打开链接 (target=”blank”)
打开新窗口的几种方式及target=_blank指定窗口名称
热门推荐
趴趴熊的博客
10-27 1万+
打开新窗口的几种方式及target=_blank指定窗口名称   打开新窗口的几种方式： 1.form提交到新窗口       ......   2.链接中打开新窗口 打开新窗口   3.按钮打开新窗口   使用 target="_blank"将每次都打开新窗口，若希望同一功能的页面在同一窗口中打开，可通过指定窗口名的方式，方法：只需将target="_blank"
jquery让div中所有的a标签的target属性为“_blank”
IT技术宅-北方的刀郎
03-21 7256
如何让div中所有的a标签的target属性为“_blank”2010-07-07 16:36巨大八爪鱼 | 分类：Html/Css | 浏览1092次 | 该问题已经合并到>>rt分享到：2010-07-07 17:15用Jquery：$(function(){$("div>a").attr("target","_blank");});或者直接写JS，长了点就不给你直接写了，告诉你思想先查找页面
JQuery给DIV 实现target 为_blank
ruru7989的专栏
08-30 947
JQuery给DIV 实现target 为_blank jQuery(div).click(function() { window.open('url','_blank') }) --- 以后再写
jQuery常用操作方法及常用函数总结
12-01
本文将详细解析jQuery中的常用操作方法和函数。 首先，jQuery选择器是其强大功能的核心之一。使用`$(“标签名”)`可以获取HTML元素，类似于JavaScript中的`document.getElementsByTagName()`。例如，`$("p")`会选取...
15个jquery常用方法、小技巧分享
10-24
标题中提到的“15个jquery常用方法、小技巧分享”，意味着本文将要围绕jQuery展开，介绍15个在开发过程中频繁使用的jQuery方法以及一些实用技巧。jQuery作为一个强大的JavaScript库，广泛应用于Web开发中，能够简化...
JQuery常用方法
09-10
### JQuery 常用方法详解 #### 一、JQuery简介及使用 1. **下载地址**：JQuery官网提供最新版本的下载链接，地址为http://jquery.com/。通常，JQuery会提供两种版本供用户下载：压缩版与未压缩版。其中，压缩版...
jquery 常用操作方法
12-01
操作下拉列表 添加选项列表 $(this).get(0).options.add(new Option(text,value)); 清空列表 $(this).get(0).options.length=0; 删除指定索引的选项 $(this).get(0).remove(index); 设定需要选中项的值 $(this).get...
Jquery常用的方法汇总
10-23
下面详细介绍jQuery的一些常用方法及其知识点。 1. jQuery优点 - 轻量级：相对于其他JavaScript库，jQuery在体积上更小，这有助于加快页面加载速度。 - 强大的选择器：提供了简洁的方式选择页面元素，包括基于ID...
HTML的块级元素与行内元素
m0_65178842的博客
09-06 565
块级元素通常会在新的一行开始，并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。
HTML 列表
qq_40107571的博客
09-06 420
HTML 列表
HTML、CSS实现树状图
p_s_p的博客
09-09 456
【代码】HTML、CSS实现树状图。
零基础上手WebGIS+智慧校园实例（长期更新#1）【html by js】
Asuna666w的博客
09-06 517
明天马上更新WebGIS的 1. 开发准备，2. 地图显示，3. 地图参数，4. 实时路况，5. 地图孔件6. 地图事件，7. 基于经纬度绘制点，8. 交互式绘制点，9， 实战作业-灵活的点标注之后代码+资料全部发到github里，希望大家能关注一下咱的Github。
【HTML】Html标签
最新发布
千里之行，始于足下
09-12 771
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
使用HTML
nice66660的博客
09-09 619
a>
零基础上手WebGIS+智慧校园实例（长期更新#2）【html by js】
Asuna666w的博客
09-07 1424
等下再更新一下1. WebGIS矢量图形的绘制（超级详细！！），2. WebGIS计算距离， 以及智慧校园实例 with 3个例子！！！！，尽情期待！！！之后代码+资料全部发到github里，希望大家能关注一下咱的Github进行WebGIS开发时，引入API是一个关键步骤，它允许开发者将地图服务和功能集成到自己的Web应用中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值