扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery返回定位插件的详细介绍
  • 771

0
分享到

jQuery返回定位插件的详细介绍

2024-04-02 19:04:59 771人浏览 安东尼
摘要

本篇内容介绍了“Jquery返回定位插件的详细介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、jQu

本篇内容介绍了“Jquery返回定位插件的详细介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、jQuery 提供开发者开发插件的几种模式

1.$.extend();     //这个方法是绑定在$上面的。可以通过$直接调用

2.$.fn.方法名     //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用

3.$.widget   //通过jQuery UI 部件工厂模式创建。

二、插件的开发过程

1.$.extend();

这个方法其实很简单，只是像$上面添加了一个静态的方法而已。主要用途是对插件api的扩展.

eg:

//$.extend();为了防止，变量和方法之间的相互污染，我们采用闭包的模式。
  (function($,factory){
    var obj = factory();
    $.extend({
      sayHelloWorld:obj.firstApply,
    })
    $.secondApply = obj.secondApply;
  })(jQuery,function(){
    var obj = {
      firstApply(){
        console.log('hello world');
      },
      secondApply(){
        console.log('直接绑定到$上');
      },
    };
     return obj;
  });
  $.sayHelloWorld();//hello world
  $.secondApply(); //直接绑定到$上
   

2.$.fn.方法名。   (方法名 其实就是插件名)。

a.插件结构

<div id="app">app</div>
//$.fn.插件名字 (logText);
  (function($,factory){

    $.fn.logText = factory();
  })(jQuery,function(){
    var logText = function(){
      console.log(this.text());
      return this;
    }
    return logText;
  });
　　$("#app").logText(); //app  通过DOM元素之间调用该方法。并返回该对象。这也是jQuery实现链式操作的技巧。
  var h = $("#app").logText().height(); // app
  console.log(h); //18
 //这样就可以自定义方法了。

在jQuery插件的开发过程中，其实主要是通过第二种模式($.fn.插件名)开发的。因为jQuery的强大之处就是对Dom的操作.

b.一个插件的强大之处就是参提供周全的参数。以及方便使用者对参数进行扩展。

<div id="app">app</div>
   //$.fn.插件名字 (myPuglin);
  (function(global,$,factory){
    var common = factory(); //封装插件使用到的函数。
    $.fn.myPuglin = function(opts){  //插件的名称
      var defaults = {}; //默认的api
      opts = $.extend(defaults,opts || {}); //对api的拓展
      
      console.log(opts.hello);

      return this;
    }
  })(window,jQuery,function(){
    var common = {
      a(opt){
        return opt;
      },
    };
    return common;
  });
  $("#app").myPuglin({hello:'hello world'}); //hello world

准备工作已经完毕。那么下面会一个插件为列子，来讲解

3.工作中经常用到的列表到详情。返回来需要保留该位置的插件。(返回定位) savePositon();  $.fn.savePosition

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-Scalable=no">
  <title>Title</title>
  <style>
    @media screen and (max-width: 319px) {
      html {
        font-size: 85.33333px; } }
    @media screen and (min-width: 320px) and (max-width: 359px) {
      html {
        font-size: 85.33333px; } }
    @media screen and (min-width: 360px) and (max-width: 374px) {
      html {
        font-size: 96px; } }
    @media screen and (min-width: 375px) and (max-width: 383px) {
      html {
        font-size: 100px; } }
    @media screen and (min-width: 384px) and (max-width: 399px) {
      html {
        font-size: 102.4px; } }
    @media screen and (min-width: 400px) and (max-width: 413px) {
      html {
        font-size: 106.66667px; } }
    @media screen and (min-width: 414px) {
      html {
        font-size: 110.4px; } }
    
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h2,
    h3,
    h4,
    h5,
    h6,
    h7,
    pre,
    code,
    fORM,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td,
    header,
    hgroup,
    nav,
    section,
    article,
    aside,
    footer,
    figure,
    fiGCaption,
    menu,
    button {
      margin: 0;
      padding: 0; }
    li{
      list-style: none;
    }
    #app{
      width: 100%;
      max-width: 640px;
     }
    li {
      height: 1.2rem;
      width: 100%;
      border-bottom: 1px solid #cccccc;
      text-align: center;
      line-height: 1.2rem;
      font-size: 20px;
    }
  </style>
  <script src="Http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
  <div id="app">
    <ul>
      <li data-page="1" data-url="http://baidu.com?id=1">第一页 第1个li</li>
      <li data-page="1" data-url="http://baidu.com?id=2">第一页 第2个li</li>
      <li data-page="1" data-url="http://baidu.com?id=3">第一页 第3个li</li>
      <li data-page="1" data-url="http://baidu.com?id=4">第一页 第4个li</li>
      <li data-page="1" data-url="http://baidu.com?id=5">第一页 第5个li</li>
      <li data-page="1" data-url="http://baidu.com?id=6">第一页 第6个li</li>
      <li data-page="1" data-url="http://baidu.com?id=7">第一页 第7个li</li>
      <li data-page="1" data-url="http://baidu.com?id=8">第一页 第8个li</li>
      <li data-page="1" data-url="http://baidu.com?id=9">第一页 第9个li</li>
      <li data-page="1" data-url="http://baidu.com?id=10">第一页 第10个li</li>
      <li data-page="1" data-url="http://baidu.com?id=11">第一页 第11个li</li>
      <li data-page="1" data-url="http://baidu.com?id=12">第一页 第12个li</li>
      <li data-page="1" data-url="http://baidu.com?id=13">第一页 第13个li</li>
      <li data-page="1" data-url="http://baidu.com?id=14">第一页 第14个li</li>
      <li data-page="1" data-url="http://baidu.com?id=15">第一页 第15个li</li>

      <li data-page="2" data-url="http://baidu.com?id=16">第二页 第1个li</li>
      <li data-page="2" data-url="http://baidu.com?id=17">第二页 第2个li</li>
      <li data-page="2" data-url="http://baidu.com?id=18">第二页 第3个li</li>
      <li data-page="2" data-url="http://baidu.com?id=19">第二页 第4个li</li>
      <li data-page="2" data-url="http://baidu.com?id=20">第二页 第5个li</li>
      <li data-page="2" data-url="http://baidu.com?id=21">第二页 第6个li</li>
      <li data-page="2" data-url="http://baidu.com?id=22">第二页 第7个li</li>
      <li data-page="2" data-url="http://baidu.com?id=23">第二页 第8个li</li>
      <li data-page="2" data-url="http://baidu.com?id=24">第二页 第9个li</li>
      <li data-page="2" data-url="http://baidu.com?id=25">第二页 第10个li</li>
      <li data-page="2" data-url="http://baidu.com?id=26">第二页 第11个li</li>
      <li data-page="2" data-url="http://baidu.com?id=27">第二页 第12个li</li>
      <li data-page="2" data-url="http://baidu.com?id=28">第二页 第13个li</li>
      <li data-page="2" data-url="http://baidu.com?id=29">第二页 第14个li</li>
      <li data-page="2" data-url="http://baidu.com?id=30">第二页 第15个li</li>
    </ul>
  </div>
</body>
<script type="text/javascript">
  
  (function(global,$,factory){
    var keepScrollTop = 0; //用于最后保存的滚动条的位置
    var tool =factory();
    $.fn.savePosition = function(options){
      var dataPage,loGo,objLogo,prevNum,containerHeight = 0,scrollTopDistance = 0,elIndex = 0,
       prevHeight = 0,prevCountPage = 0,prevCountPageDistance = 0,prevDistance = 0,
       prevPageScrollDistance = 0;
      var elements = this;
      var defaults = {
        container:$(window),  //滚动的容器
        logo:"data-url",   // 用于计算在这个容器中的每个LI中的唯一标识量。一般为去详情的连接
        currentPage:"data-page",  //点击当前的li的页码
        pageResize:30,        //与后台交互的每页返回的数量。 默认是30,
        goToDetailElement:$(".go-detail") ,  //滚动的每个列的总对象
        nodeLi:"", //元素节点
        getPageNum:"getPageNum",       //1表示单页数据，2表示双页数据。设置是请求单页数据还是双页数据的标识量。放在URL上。
        urlPageNum:"pageNum",        //用于放到URL上面的参数标识表示当前是几页. pageNum = currentPage  //返回来的时候用这个参数来判断是不是需要滚动
      };
      var settings = $.extend(defaults,options || {});
      dataPage = elements.attr(settings.currentPage);  //求出点击对象位于哪一个页码
      logo = elements.attr(settings.logo);   //求出当前对象的唯一标识量
      containerHeight = parseInt(settings.container.outerHeight());  //容器的高度
      scrollTopDistance = parseInt(settings.container.scrollTop()); //滚动的距离
      elements.parent().find(""+ settings.nodeLi + "["+settings.currentPage + "=" + dataPage +"]").each(function(index, obj){
        objLogo = $(obj).attr(settings.logo);
        elIndex = index;
        if(logo == objLogo){
          prevNum = elements.prevAll().length;
          prevHeight = tool.getDistance(elements.parent().children(),prevNum - elIndex);
          prevCountPage = parseInt(prevNum / settings.pageResize);
          if(scrollTopDistance < prevHeight){
            elements.parent().children().each(function(index,target){
              if(prevCountPage > 0 ){
                if(index < (prevCountPage - 1) * settings.pageResize){
                  prevCountPageDistance += parseInt($(target).outerHeight());
                };
              };
            });
            tool.changeUrlPar(settings.urlPageNum,dataPage - 1);     //当前的页数
            tool.changeUrlPar(settings.getPageNum,2);       //获取双页数据
            keepScrollTop = scrollTopDistance - prevCountPageDistance;          //请求双页数据 向上 减 1;
          }else{
            prevDistance = tool.getDistance(elements.parent().children(),(prevCountPage + 1) * settings.pageResize);
            prevPageScrollDistance = tool.getDistance(elements.parent().children(),prevCountPage * settings.pageResize);
            if(prevDistance < (scrollTopDistance + containerHeight)){
              tool.changeUrlPar(settings.urlPageNum,dataPage);    //点击对象位于当前的页数
              tool.changeUrlPar(settings.getPageNum,2);        //请求双页数据
              keepScrollTop = scrollTopDistance - prevPageScrollDistance;
            }else{
              tool.changeUrlPar(settings.urlPageNum,dataPage);    //点击对象位于当前的页数
              tool.changeUrlPar(settings.getPageNum,1);  //请求单页数据
              keepScrollTop = scrollTopDistance - prevPageScrollDistance;
            };
          };
        };
      });
      tool.setSessionStorage("keepScrollTop",keepScrollTop);   //保存滚动条的位置
      return this;
    };
    $.getSessionStorage = function(opt){
      opt = sessionStorage.getItem(opt);
      return opt;
    };
  })(window,jQuery,function(){
    var tool = {
      changeUrlPar(arg, val){  //改变URL参数
        function changeU(destiny, par, par_value) {
          var pattern = par+'=([^&]*)';
          var replaceText = par+'='+par_value;
          if (destiny.match(pattern))
          {
            var tmp = '/\\'+par+'=[^&]*/';
            tmp = destiny.replace(eval(tmp), replaceText);
            return (tmp);
          }
          else {
            if (destiny.match('[\?]'))
            {
              return destiny+'&'+ replaceText;
            }
            else
            {
              return destiny+'?'+replaceText;
            }
          }
          return destiny+'\n'+par+'\n'+par_value;
        }
        var hash = window.location.hash;
        history.replaceState(null,'',location.pathname+location.search);
        url = window.location.href;
        var newUrl = changeU(url,arg,val) + hash;
        history.replaceState(null,'',newUrl);
        return false;
      },
      removeUrlPar(options){
        history.replaceState(null,'',location.pathname+location.search);
        var newParamStr = "";
        var quotes = window.location.href.indexOf("?");
        if(quotes != -1){
          var WEBUrl = window.location.href.split("?")[0];
          var paramsStr = window.location.href.split("?")[1].toString();
          if(paramsStr.indexOf("&") != -1){
            var pageIndex = paramsStr.indexOf(options);
            if(pageIndex != -1){
              var pageArr = paramsStr.split("&");
              for(var i = 0; i < pageArr.length; i++){
                if(pageArr[i].match(options)){
                  pageArr.splice(i,1);
                };
              };
              newParamStr = pageArr.join("&");
            }else{
              newParamStr = paramsStr;
            } ;

          }else{
            if(paramsStr.match(options)){
              newParamStr = "";
            }else {
              newParamStr = paramsStr;
            };
          };
          history.replaceState(null,'',webUrl + "?" + newParamStr);
        }else{
          history.replaceState(null,'',w.location.href);
        }
      },
      getDistance(obj,maxNum){
        var h = 0;
        obj.each(function(index,target){
          if(index < maxNum){
            h += parseInt($(target).outerHeight());
          }
        });
        return h;
      },
      setSessionStorage(keyName,opt){
        sessionStorage.setItem(keyName,opt);
        console.log(opt)
      },
    }

    return tool;
  })
  $("li").on("click",function(){
    $(this).savePosition({pageResize:15});
    
    var _herf = $(this).attr("data-url");
    window.location.href = _herf;
  });
  //当我们初始化的时候
  var pageNum = 1,getPageNum = 2; //这两个数的值是从URL中获取的。只有从详情返回来 时候，才有

  if(!!pageNum && !!getPageNum){
    //其中还有很多判定，肯定是先获取数据在滚动。。。
    $(window).scrollTop($.getSessionStorage('keepScrollTop'));
  }else{

  }
</script>
</html>

这个返回定位的插件基本就开发完毕了。当然对于实际的项目中，还有很多的改动。比如返回的时候，一定要把设置的标志参数去掉。

“jQuery返回定位插件的详细介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！

--结束END--

本文标题: jQuery返回定位插件的详细介绍

本文链接: https://lsjlt.com/news/77679.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jQuery返回定位插件的详细介绍
    本篇内容介绍了“jQuery返回定位插件的详细介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、jQu...
    99+
    2024-04-02
  • jQuery中Ajax的详细介绍
    这篇文章主要介绍“jQuery中Ajax的详细介绍”，在日常操作中，相信很多人在jQuery中Ajax的详细介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jQuery中A...
    99+
    2024-04-02
  • CSS中元素定位方法的详细介绍
    这篇文章主要介绍“CSS中元素定位方法的详细介绍”，在日常操作中，相信很多人在CSS中元素定位方法的详细介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS中元素定位方法...
    99+
    2024-04-02
  • SpringMVC框架中@Controller类的方法的返回值的详细介绍
    目录 前言 1. 返回值类型为ModelAndView 2.  返回值为String(视图) 3.  返回值为void 4.  返回值为Object 5. 返回值为List  6. 返回值为String(数据) 前言 在SpringMV...
    99+
    2023-09-16
    spring java SpringMVC 返回值类型 Controller注解
  • win10hosts文件在哪win10hosts文件部位详细介绍
    hosts文件是管理方法用户的网络配置的文件之一，用户们假如要改动一些信息网络得话就必须在这儿进到开展改动，有的用户想要知道win10hosts文件在哪，下边就给用户们给予有关win10hosts文件部位详细介绍的具体内容，用户们下一次碰到...
    99+
    2023-07-19
  • win10x86是32位或是64位的详细介绍
    有客户在免费下载windows10系统软件发觉,有一个x86,那麼win10标准版x86是什么意思呢我们知道win10系统软件分成32位和64位系统软件,下边一起来看看win10x86是32位或是64位的详细介绍.电脑操作系统十位...
    99+
    2023-07-17
  • Android自定义控件属性详细介绍
     Android自定义控件属性详细介绍1. reference：参考某一资源ID。     （1）属性定义： <declare-styleable name = "名称"> ...
    99+
    2023-05-31
    android 自定义 控件
  • Jquery中$.ajax()方法参数的详细介绍
    这篇文章主要讲解了“Jquery中$.ajax()方法参数的详细介绍”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Jquery中$.ajax()方法参数的详...
    99+
    2024-04-02
  • android 自定义控件 自定义属性详细介绍
    自定义控件在android中无处不见，自定义控件给了我们很大的方便。比如说，一个视图为imageview ，imagebutton ,textview 等诸多控件的组合，用的地...
    99+
    2022-06-06
    自定义 自定义控件 属性 自定义属性 Android
  • Android Fragment的回退栈示例详细介绍
    Android  Fragment的回退栈 点开之后按一次回退键只返回一次 MainActivity 类 public class MainActivity ex...
    99+
    2022-06-06
    示例 fragment Android
  • win764位ghost下载纯净版的详细介绍
    番茄花园ghost Win7 64位ghost下载纯净版v2021.04实现了系统的全中文覆盖，高端的ghost封装技术制作包装系统并且全过程在离线环境下进行，内置了万能装机工具帮助用户进行装机作业，新手也能轻松的掌握，无需担忧，10分钟就...
    99+
    2023-07-10
  • Linux 文件权限的详细介绍
    linux 的优秀之处就在于它的多用户、多任务的系统。Linux 一般将文件可存取访问的身份分为 3 个类别，分别是 owner、group、others，且 3 种身份各有 read、write、execute 等权限...
    99+
    2022-06-04
    Linux 文件权限
  • mycat配置文件的详细介绍
    这篇文章主要为大家分享mycat的配置文件。文中还介绍了mycat常用的几个分片算法的计算过程和使用方法，希望大家通过这篇文章能有所收获。常用配置文件间的关系由上图可以看到 Mycat 的核心配置文件均采用...
    99+
    2024-04-02
  • djangosettings.py配置文件的详细介绍
    配置文件如下，下面对配置文件进行一一解释 """ Django settings for film1_manager project. Generated by 'django-a...
    99+
    2024-04-02
  • H5的事件属性详细介绍
    这篇文章主要介绍“H5的事件属性详细介绍”，在日常操作中，相信很多人在H5的事件属性详细介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”H5的事件属性详细介绍”的疑惑有所帮...
    99+
    2024-04-02
  • C#控件数组的详细介绍
    这篇文章主要介绍“C#控件数组的详细介绍”，在日常操作中，相信很多人在C#控件数组的详细介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”C#控件数组的详细介绍”的疑惑有所帮助！接下来，请跟着小编一起来学习吧...
    99+
    2023-06-17
  • Spring配置文件的详细介绍
    目录 1. Spring的配置文件的命名 2. Spring配置文件中有什么 3. set注入 4. 构造注入 1. Spring的配置文件的命名 答：Spring的配置文件是放在resources文件夹下面的，一般我们都会给他起一个...
    99+
    2023-09-18
    spring set注入 构造注入 bean标签 java
  • 详细介绍Spring的配置文件
    目录1. Spring的配置文件的命名2. Spring配置文件中有什么3. set注入4. 构造注入1. Spring的配置文件的命名 答：Spring的配置文件是放在resour...
    99+
    2022-11-13
    Spring 配置文件
  • jquery中的ajax同步和异步的详细介绍
    本篇内容主要讲解“jquery中的ajax同步和异步的详细介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery中的ajax同步和异步的详细介绍”吧!之...
    99+
    2024-04-02
  • 哪个win7系统稳定的详细介绍
    win7系统哪个版本最好用最稳定运行速度最快这个是很多win7系统爱好者最想知道的，win7系统的版本有很多，比如win7旗舰版，win7纯净版等，今天我来跟大家说说哪个win7系统稳定的介绍，大家一起来看吧。1、Windows 7 Sta...
    99+
    2023-07-12
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作