博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery实用代码片段(转)
阅读量:5787 次
发布时间:2019-06-18

本文共 7169 字,大约阅读时间需要 23 分钟。

1、把所有带有#的空链接换成不友情的链接

$('a[href="#"]').each(function() {           $(this).attr('href', 'javascript:void(0)')       });

2、jQuery全选与取消全选插件

(function($){       $.fn.checkall = function(options){           var defaults = {chname:"checkname[]", callback:null},               options = $.extend(defaults, options),               $obj = $(this),               $items = $("input[name='"+options.chname+"']"),               checkedItem = 0;           $items.click(function(){               if($items.filter(":checked").length === $items.length){                   $obj.attr("checked",true);               }else{                   $obj.removeAttr("checked");               }               checkedItem = $items.filter(":checked").length;               if(typeof options.callback === "function") options.callback(checkedItem);           });           return $obj.each(function(){               $(this).click(function(){                   if($(this).attr("checked")){                       $items.attr("checked",true);                   }else{                       $items.removeAttr("checked");                   }                   checkedItem = $items.filter(":checked").length;                   if(typeof options.callback === "function") options.callback(checkedItem);               });           });       }   })(jQuery);
JS
3、滚动条自动滚到顶部方法
$("html,body").animate({scrollTop: 0}, "slow");
4、滚动条自动滚到底部方法
var s = $("body").height()-$(window).height();   $("html,body").animate({scrollTop: s}, "slow");
5、jQuery自动根据图片高度宽度缩
jQuery.fn.ImageAutoSize = function(width,height){           $(“img”,this).each(function(){           var image = $(this);               if(image.width()>width){                   image.width(width);                   image.height(width/image.width()*image.height());               }               if(image.height()>height){                   image.height(height);                   image.width(height/image.height()*image.width());               }           });       }
调用:先引用上面的脚本或将上页的脚本放入自己的JS库,然后只要再加 $(function(){ $(“图片组所在的容器”).ImageAutoSize(限制最大宽,限制最大高);});
 
6、JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)
$("#IframeID").load(function() {        $(this).height($(this).contents().height());   })
有一点需要注意的,我也在调试的时候才发现的,耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定,否则不会执行。
以下是jQuery,load事件的概述
  • 在每一个匹配元素的load事件中绑定一个处理函数。
  • 如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

7. 使用jQuery来切换样式表

$("link[media='screen']").attr("href", "Alternative.css");

8.jQuery检测浏览器类型

(if( $.browser.safari))    (if ($.browser.msie && $.browser.version > 6 ))        (if ($.browser.msie && $.browser.version <= 6 ))            (if ($.browser.mozilla && $.browser.version >= '1.8' ))

9.jQuery验证某个元素是否为空

if ($("#Demo").html()) { //null;}

10. jQuery从集合中获得索引值

$("ul > li").click(function () {     var index = $(this).prevAll().length;});

11.jQuery选择被选中的option元素

$("#someElement").find("option:selected");

12. jQuery为选择器绑定方法

$("table").delegate("td", "hover", function(){     $(this).toggleClass("hover");});    //1.42版后,delegate替代live,因为它们提供了更好的上下文支持

13. jQuery自动滚动到页面中的某区域(可以看做一个小插件)

jQuery.fn.Autoscroll = function(sel) { $('html,body').animate(  {scrollTop: $(sel).offset().top},500 );}      //调用:$("#area_name").Autoscroll();

14. jQuery限制"TextArea"域中的字符数(可以看做一个小插件)

(function($) {jQuery.fn.maxLength = function(max){  this.each(function(){  var type = this.tagName.toLowerCase();  var inputType = this.type ? this.type.toLowerCase() : null;    if (type == "input" && inputType == "text" || inputType == "password") {   //应用标准的maxLength   this.maxLength = max;  }  else    if (type == "textarea") {    this.onkeypress = function(e){     var ob = e || event;     var keyCode = ob.keyCode;     var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;     return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);    };    this.onkeyup = function(){     if (this.value.length > max) {      this.value = this.value.substring(0, max);     }    };   } });})(jQuery);  //调用:$('#macoArea").maxLength(500);
JS

15. jQuery判断某个元素是否可见

if($("#macoArea").is(":visible") == "true") { //少年,别跑 }

16. jQuery元素居中显示(可以看做一个小插件)

(function($) { jQuery.fn.center = function () {  this.css('position','absolute');   this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');   this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');   return this; }})(jQuery);  //调用:$("#macoArea").center();

17. jQuery使用.siblings()选择同辈元素

// 少年,你是否这样操作过$('#nav li').click(function(){ $("#macoArea li").removeClass("current"); $(this).addClass("current");});//这样做是不是会更好呢$("#nav li").click(function(){ $(this).addClass("current").siblings().removeClass("current");});

18. jQuery操作复选框全选反选

var sta = false; //你懂,全局东东$('a').click(function() { $("input[type=checkbox]").attr("checked",!sta); sta = !sta;});

19. jQuery获得鼠标光标位置x和y

$(document).mousemove(function(e)} $(document).ready(function() {  $().mousemove(function(e){  $("#macoArea").html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); });});

20. jQuery解析XML

function ParseXml(xml) { $(xml).find("Node").each(function(){  $("#macoArea").append($(this).attr("Author") + ""); );}

21. jQuery判断图像是否被完全加载进来

$('#demoImg').attr("src", "demo.jpg").load(function() { alert("是的,你看到的是真的");});

22. jQuery让Cookie过期

var date = new Date();date.setTime(date.getTime() + (x * 60 * 1000));$.cookie("example", "foo", { expires: date });;

23. jQuery禁止鼠标右键

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

24.JQuery智能检测判断各种浏览器的类型及其版本信息,可以检测safari,chrome,firefox,ie等主流的浏览器的类型和版本。

$(function() {       if ($.browser.msie && ($.browser.version == "6.0")) {           alert("This is MS IE " + $.browser.version);       } else if ($.browser.msie && ($.browser.version == "7.0")) {           alert("This is MS IE " + $.browser.version);       } else if ($.browser.msie && ($.browser.version == "8.0")) {           alert("This is MS IE " + $.browser.version);       } else if ($.browser.msie && ($.browser.version == "9.0")) {           $("#browser").html("This is MS IE " + $.browser.version);       } else if ($.browser.safari) {           $("#browser").html("
JS

25. Jquery限制输入框内容长度,中文占2个字符长度

$(function() {           $("#txt").bind("keyup change",           function() {               var len = $(this).val();               var total = 0;               var han = 0;               for (i = 0; i < len.length; i++) {                   if (len[i].match(/[^\x00-\xff]/ig) != null) {                       han++;                   }                   total = len.length + han;               }               if (total <= 10) {                   $("#tip").html(total);               } else {                   $("#tip").html("最多10个字符").css({                       color: "#f40"                  });               }           })       })
JS

收集转载自:http://***

转载于:https://www.cnblogs.com/JoannaQ/p/3281699.html

你可能感兴趣的文章
NYOJ283对称排序
查看>>
接连遇到大牛
查看>>
[Cocos2d-x For WP8]矩形碰撞检测
查看>>
自己写spring boot starter
查看>>
花钱删不完负面消息
查看>>
JBPM之JPdl小叙
查看>>
Membership三步曲之进阶篇 - 深入剖析Provider Model
查看>>
前端优化及相关要点总结
查看>>
struts2中form提交到action中的中文参数乱码问题解决办法(包括取中文路径)
查看>>
25 个精美的手机网站模板
查看>>
C#反射实例应用--------获取程序集信息和通过类名创建类实例
查看>>
VC中实现文字竖排的简单方法
查看>>
会话标识未更新
查看>>
阿里架构师:程序员必须掌握的几项核心技术能力
查看>>
程序员常用的六大技术博客类
查看>>
Iceworks 2.8.0 发布,自定义你的 React 模板
查看>>
胖哥学SpringMVC:请求方式转换过滤器配置
查看>>
Kotlin 更加优雅的 Builder - 理解 with
查看>>
前端日拱一卒D6——字符编码与浏览器解析
查看>>
深入理解浏览器的缓存机制
查看>>