几个非常实用的JQuery代码片段

一时失言乱红尘 2022-01-16 02:23 247阅读 0赞

![20190613212136579.png][]

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可，jQuery已经成为最流行的javascript库，下面给大家推荐几款常用的JQuery代码。前端学习qun：784前面783后面012，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力

\#1、管理搜索框的值

现在各大网站都有搜索框，而搜索框通常都有默认值，当输入框获取焦点时，默认值消失。而一旦输入框失去焦点，而输入框里又没有输入新的值，输入框里的值又会恢复成默认值，如果往输入框里输入了新值，则输入框的值为新输入的值。这种特效用JQuery很容易实现：

$("#searchbox")
       .focus(function(){$(this).val('')})
       .blur(function(){
           var $this = $(this);
          // '请搜索...'为搜索框默认值
          ($this.val() === '')? $this.val('请搜索...') : null;
     });

\#2、反序访问JQuery对象里的元素

在某些场景下，我们可能需要反序访问通过JQuery选择器获取到的页面元素对象，这个怎么实现呢？看下面代码：

//要掌握JQuery对象的get方法 以及数组的reverse方法即可
    var arr = $('#nav').find('li').get().reverse();
    $.each(arr,function(index,ele){
         .... ...
     });

\#3、克隆table header到表格的最下面

为了让table具有更好的可读性，我们可以将表格的header信息克隆一份到表格的底部，这种特效通过JQuery就很容易实现：

var $tfoot = $('<tfoot></tfoot>'); 
    $($('thead').clone(true, true).children().get().reverse()).each(function(){
        $tfoot.append($(this));
    });
    $tfoot.insertAfter('table thead');

\#4、使用JQuery重绘图片的大小

关于图片大小的重绘，你可以在服务端来实现，也可以通过JQuery在客户端实现。

$(window).bind("load", function() {
         // IMAGE RESIZE
         $('#product_cat_list img').each(function() {
              var maxWidth = 120;
              var maxHeight = 120;
              var ratio = 0;
              var width = $(this).width();
              var height = $(this).height();
    
              if(width > maxWidth){
               ratio = maxWidth / width;
               $(this).css("width", maxWidth);
               $(this).css("height", height * ratio);
               height = height * ratio;
              }
              var width = $(this).width();
              var height = $(this).height();
              if(height > maxHeight){
               ratio = maxHeight / height;
               $(this).css("height", maxHeight);
               $(this).css("width", width * ratio);
               width = width * ratio;
              }
         });
         //$("#contentpage img").show();
         // IMAGE RESIZE
    });

\#5、滚动时动态加载页面内容

有些网站的网页内容不是一次性加载完毕的，而是在鼠标向下滚动时动态加载的，这是怎么做到的呢？看下面代码：

[20190613212136579.png]: /images/20220115/2bd9acd24f8b480391ffb8a1832e3abc.png?