经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
前端之JQuery
来源：cnblogs　　作者：suguangti　　时间：2019/6/5 8:50:11　　对本文有异议

摘要：

  • jQuery初识

  • jQuery具体使用方法

  • jQuery初识

  1. jQuery介绍：
    jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
    使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
  2. 为何要用JQuery？
    #     jQuery是一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
    #     丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
    #     链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
    #    事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
    #    Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通    信。
    #    跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
    #    插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗  口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
  3. jQuery的版本介绍、下载和安装：
    #    版本： 
    1. 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
    2. 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
    3. 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
    4. 维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
    版本介绍

    # 下载和安装：
    下载链接：jQuery官网
    如何使用：进入官网>[Download jQueryv3.4.1]>[Download the compressed, production jQuery 3.4.1]
    打开后Ctrl+A 复制所有代码，进入pycharm，新建一个js文件，粘贴进去，保存为jQuery-3.4.1.js。
    每次在HTML文件head中调用：<script src="jQuery-3.4.1.js"></script>（当然，该文件应该在运行的HTML文件的同一级目录）。

  4. jQuery对象：
    jQuery对象就是通过jQuery包装DOM对象后产生的对象， 它是jQuery独有的，也就是说只有jQuery可以使用里面的方法，不能与DOM对象的方法混用，jQuery对象无法使用DOM对象的任何方法，DOM对象也不能使用jQuery对象里面的方法。
    约定俗成：声明一个jQuery对象变量的时候变量名开头要加上$。
     jQuery方法示例：

    1. $('#id1').html();

 　　　开头用$，代表这是一个jQuery方法，括号里面“#id1”选择id=‘id1‘的标签，而“$('#id1')”代表的就是jQuery对象，后面用点的形式使用其方法，比如.html().获取id值为id1的标签的
　　　 HTML代码。
　　    该方法的作用等同于DOM方法中：document.getElemengtById('id1').innerHTML;可以看出，jQUery的使用是对DOM方法的简化，可能一段JS代码看不出来，但是如果随着代
　　    代码的增多，这种去繁为简的操作会大大增加效率和代码的易读性。（jQuery的方法只要对比DOM方法一下就很容易搞清楚）　

　　    

　　    

　  jQuery语法基本语法格式：$(’选择器‘).action（’具体操作‘）

  • jQuery基本选择器：id class tag

    1. $('#id');     //id选择器
    2. $('.className');   //类选择器
    3. $('tagNmae');   //标签选择器
      $('div.c1');    //查找有c1类的div标签
      $('*');   //所有元素选择器
      $('#id,.className,tagName');  //组合选择器
      $('x y');  //查找x的所有后代里的y
      $('x > y')  //查找x的儿子里的y
      $('x + y')  //查找x所有紧挨着它的且在下面的同级里的y
      $('x ~ y')  //查找x后面的所有兄弟里的y

  • jQuery基本筛选器/has

    1. 筛选器：顾名思义找到标签后再根据一些条件筛选过滤
    2. 以找到div标签为例：在div标签内进一步筛选：
    3. $('div:first')  //第一个标签
    4. $('div:last')  //最后一个标签
    5. $('div:eq(index)')  // 索引等于index的那个标签
    6. $('div:even')   //匹配索引是奇数的所有标签，从0开始计数
    7. $('div:odd')   //匹配索引是偶数的所有标签，从0开始计数
    8. $('div:gt(index)')   //匹配所有大于index索引值的元素
    9. $('div:lt(index)')   //匹配所有大于index索引值的元素
    10. $('div:not(选择器)')   // 移除所有满足not条件选择器的标签
    11. $('div:has(选择器)')  // 选取所有包含一个或多个条件选择器的标签

    示例：

    1. $("div:has(h1)")        // 找到所有后代中有h1标签的div标签
    2. $("div:has(.c1)")       // 找到所有后代中有c1样式类的div标签
    3. $("li:not(.c1)")          // 找到所有不包含c1样式类的li标签
    4. $("li:not(:has(a))")    // 找到所有后代中不含a标签的li标签

  • jQuery操作类属性

    1. [attribute]
    2. [attribute=value]// 属性等于
    3. [attribute!=value]// 属性不等于
    5. 示例：
    6. $("input[type='checkbox']");       //取到checkbox类型的input标签
    7. $("input[type != 'text']");        //取到不是text类型的input标签

  • jQuery模态框示例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>模态框_仿</title>
    6.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    7.     <style>
    8.         .cover0 {
    9.             position: fixed;
    10.             left: 0;
    11.             right: 0;
    12.             top: 0;
    13.             bottom: 0;
    14.             background-color: rgba(176,176,176,0.5);
    15.             z-index: 888;
    16.         }
    17.         .modal0 {
    18.             width: 400px;
    19.             height: 200px;
    20.             background-color: white;
    21.             position: fixed;
    22.             left: 50%;
    23.             top: 50%;
    24.             margin-left: -200px;
    25.             margin-top: -100px;
    26.             z-index: 999;
    27.         }
    28.         .hide {
    29.             display: none;
    30.         }
    31.     </style>
    32. </head>
    33. <body>
    34.     <button>弹弹弹</button>
    35.     <div class="cover0 hide" id="d1"></div>
    36.     <div class="modal0 hide" id="d2">
    37.         <form action="">
    38.             <p><label for="i10">username: <input type="text" id="i10"></label></p>
    39.             <p><label for="i20">password: <input type="password" id="i20"></label></p>
    40.             <p><input type="submit" value="登录"></p>
    41.         </form>
    42.         <button class="close0">关闭</button>
    43.     </div>
    44.     <script>
    45. 　　     //点击弹按钮事件发生，取消模态框的hide类属性，模态框显现
    46.         $('button:first').on('click',function(){
    47.             $("#d1").removeClass('hide');
    48.             $("#d2").removeClass('hide');
    49.         });
    50.         // 点击关闭按钮事件发生，增加模态框的hide类属性，模态框隐藏
    51.         $('button:last').on('click',function(){
    52.             $("#d1").addClass('hide');
    53.             $("#d2").addClass('hide');
    54.         })
    56.     </script>
    57. </body>
    58. </html>

  • jQuery表单筛选器

    1. :text
    2. :password
    3. :file
    4. :radio
    5. :checkbox
    7. :submit
    8. :reset
    9. :button
    11. 例子：
    12. $(":checkbox")    //找到所有的checkbox

　　   表单对象属性

    1. :enabled
    2. :disabled
    3. :checked
    4. :selected
    6. 例子：
    7. <!DOCTYPE html>
    8. <html lang="en">
    9. <head>
    10.     <meta charset="UTF-8">
    11.     <title>Title</title>
    12.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    13. </head>
    14. <body>
    15. <form action="">
    16.     <p><label for="i1">username: <input type="text" id="i1"></label></p>
    17.     <p><label for="i2">password: <input type="password" id="i2"></label></p>
    18.     <p><input type="submit" value="登录" disabled></p>
    19. </form>
    20. <select name="" id="">
    21.     <option value="BeiJing">北京</option>
    22.     <option value="ShangHai" selected>上海</option>
    23.     <option value="WuHan">武汉</option>
    24. </select>
    25. </body>
    26. </html>
    28. 在google浏览器，console内
    29. $("input:enabled")[0];
    30. <input type="text" id="i1">
    31. $("input:enabled")[1];
    33. $(':selected')[0];
    34. <option value="ShangHai" selected="">上海</option>
    35. <input type="password" id="i2">

  • jQuery筛选器方法

  1. 查找下一个标签：
  2. 查找上一个元素：
  3. 父亲、儿子、兄弟元素：

  • jQuery之find方法、filter方法
    搜索所有与指定表达式匹配的标签，这个方法是找出正在处理的标签的后代标签的好办法

    1. $('div').find("p")
    3. 等价于：$("div p")
    1. $('div').filter(".c1")
    3. // 从结果集中过滤出有c1样式类的
    4. // 等价于 $("div.c1") 
  3. 补充 
    1. .first() // 获取匹配的第一个元素
    2. .last() // 获取匹配的最后一个元素
    3. .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
    4. .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
    5. .eq() // 索引值等于指定值的元素

 

  • jQuery左侧菜单（点击一个菜单，该菜单显示二级菜单，其它菜单的二级菜单收回）、包含jQuery链式操作

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>左侧菜单</title>
    6.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    7.     <style>
    8.         body {
    9.             margin: 0;
    10.             min-width: 1080px;
    11.         }
    13.         .hide {
    14.             display: none;
    15.         }
    16.         .left {
    17.             position: fixed;
    18.             top: 0;
    19.             left: 0;
    20.             width: 20%;
    21.             height: 100%;
    22.             background-color: rgb(100,100,100);
    23.  
    24.         }
    25.         .right {
    26.             position: absolute;
    27.             right: 0;
    28.             top: 0;
    29.             width: 80%;
    30.             height: 100%;
    31.             background-color: aquamarine;
    32.  
    33.         }
    34.         .menu {
    35.             color: white;
    36.         }
    37.         .title {
    38.             padding: 15px 5px;
    39.             text-align: center;
    40.         }
    41.     </style>
    42. </head>
    43. <body>
    44. <div class="left">
    45.     <div class="menu">
    46.         <div class="title">菜单一
    47.             <div class="items hide">
    48.                 <div>11111</div>
    49.                 <div>11111</div>
    50.                 <div>11111</div>
    51.             </div>
    52.         </div>
    53.         <div class="title">菜单二
    54.             <div class="items hide">
    55.                 <div>22222</div>
    56.                 <div>22222</div>
    57.                 <div>22222</div>
    58.             </div>
    59.         </div>
    60.         <div class="title">菜单三
    61.             <div class="items hide">
    62.                 <div>33333</div>
    63.                 <div>33333</div>
    64.                 <div>33333</div>
    65.             </div>
    66.         </div>
    67.     </div>
    68. </div>
    69.     <div class="right"></div>
    70.  
    71. <script>
    72.     $('.title').on('click',function () {
    73.        // $(this).children().removeClass('hide');
    74.        // $(this).siblings().children().addClass('hide');
    75.         //链式查找（在前面的位置继续查找）
    76.        $(this).children().removeClass('hide').parent().siblings().find('.items').addClass('hide');
    77.     })
    78. </script>
    79. </body>
    80. </html>

  • jQuery操作标签
    #样式操作：

    1. addClass(‘类名’);// 用jQuery对象添加指定的类名到该对象对应标签中
    2. removeClass(‘类名’);// 用jQuery对象移除指定的类名
    3. hasClass(‘类名’);// 用jQuery对象判断该标签内是否存在指定的类名
    4. toggleClass();// 用jQuery对象现判断指定类名是否有，如果有就移除，如果没有就添加。
    7. CSS样式设置:
    8. css("color","red")//DOM操作：tag.style.color="red"
    9. $("p").css("color", "red"); //将所有p标签的字体设置为红色

    #位置操作：

    1. offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
    2. position()// 获取匹配元素相对父元素的偏移
    3. scrollTop()// 获取匹配元素相对滚动条顶部的偏移
    4. scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
    7. offset()方法：相对于文档（document）的当前位置。
    9. position()方法：相对于相对于父级元素的位移。

    ## jQuery offset() 方法：

    1. 定义和用法
    2. offset() 方法设置或返回被选元素相对于文档的偏移坐标。
    3. 作用：
    4. ①当用于返回偏移时： 该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
    6. ②当用于设置偏移时： 该方法设置所有匹配元素的偏移坐标。
    8. 语法：
    10. 返回偏移坐标：
    11. $(selector).offset()
    13. 设置偏移坐标：
    14. $(selector).offset({top:value,left:value})
    16. 使用函数设置偏移坐标：
    17. $(selector).offset(function(index,currentoffset))
    18. (index - 返回集合中元素的 index 位置。
    19. currentoffset - 返回被选元素的当前坐标。)

    ## jQuery position() 方法：

    1. 定义和用法：
    2. position() 方法返回第一个匹配元素的位置（相对于它的父元素）。
    3. 该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
    5. 语法：
    6. $(selector).position()

    ## scrollTop()、scrollLeft()：
    jQuery对象的标签的滚动条（垂直滚动条(Top)、水平滚动条(Left)）:已经滚动过的距离
    这里需要注意，如果对象的标签没有滚动条那么返回的值是0。该方法常用在判断窗口对象








     

　　

 


　　



捕捉滚动条离顶部的距离来判断返回顶部按钮的显示

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>位置相关示例之返回顶部</title>
  8.   <style>
  9.     .c1 {
  10.       width: 100px;
  11.       height: 200px;
  12.       background-color: red;
  13.     }
  15.     .c2 {
  16.       height: 50px;
  17.       width: 50px;
  19.       position: fixed;
  20.       bottom: 15px;
  21.       right: 15px;
  22.       background-color: #2b669a;
  23.     }
  24.     .hide {
  25.       display: none;
  26.     }
  27.     .c3 {
  28.       height: 100px;
  29.     }
  30.   </style>
  31. </head>
  32. <body>
  33. <button id="b1" class="btn btn-default">点我</button>
  34. <div class="c1"></div>
  35. <div class="c3">1</div>
  36. <div class="c3">2</div>
  37. <div class="c3">3</div>
  38. <div class="c3">4</div>
  39. <div class="c3">5</div>
  40. <div class="c3">6</div>
  41. <div class="c3">7</div>
  42. <div class="c3">8</div>
  43. <div class="c3">9</div>
  44. <div class="c3">10</div>
  45. <div class="c3">11</div>
  46. <div class="c3">12</div>
  47. <div class="c3">13</div>
  48. <div class="c3">14</div>
  49. <div class="c3">15</div>
  50. <div class="c3">16</div>
  51. <div class="c3">17</div>
  52. <div class="c3">18</div>
  53. <div class="c3">19</div>
  54. <div class="c3">20</div>
  55. <div class="c3">21</div>
  56. <div class="c3">22</div>
  57. <div class="c3">23</div>
  58. <div class="c3">24</div>
  59. <div class="c3">25</div>
  60. <div class="c3">26</div>
  61. <div class="c3">27</div>
  62. <div class="c3">28</div>
  63. <div class="c3">29</div>
  64. <div class="c3">30</div>
  65. <div class="c3">31</div>
  66. <div class="c3">32</div>
  67. <div class="c3">33</div>
  68. <div class="c3">34</div>
  69. <div class="c3">35</div>
  70. <div class="c3">36</div>
  71. <div class="c3">37</div>
  72. <div class="c3">38</div>
  73. <div class="c3">39</div>
  74. <div class="c3">40</div>
  75. <div class="c3">41</div>
  76. <div class="c3">42</div>
  77. <div class="c3">43</div>
  78. <div class="c3">44</div>
  79. <div class="c3">45</div>
  80. <div class="c3">46</div>
  81. <div class="c3">47</div>
  82. <div class="c3">48</div>
  83. <div class="c3">49</div>
  84. <div class="c3">50</div>
  85. <div class="c3">51</div>
  86. <div class="c3">52</div>
  87. <div class="c3">53</div>
  88. <div class="c3">54</div>
  89. <div class="c3">55</div>
  90. <div class="c3">56</div>
  91. <div class="c3">57</div>
  92. <div class="c3">58</div>
  93. <div class="c3">59</div>
  94. <div class="c3">60</div>
  95. <div class="c3">61</div>
  96. <div class="c3">62</div>
  97. <div class="c3">63</div>
  98. <div class="c3">64</div>
  99. <div class="c3">65</div>
  100. <div class="c3">66</div>
  101. <div class="c3">67</div>
  102. <div class="c3">68</div>
  103. <div class="c3">69</div>
  104. <div class="c3">70</div>
  105. <div class="c3">71</div>
  106. <div class="c3">72</div>
  107. <div class="c3">73</div>
  108. <div class="c3">74</div>
  109. <div class="c3">75</div>
  110. <div class="c3">76</div>
  111. <div class="c3">77</div>
  112. <div class="c3">78</div>
  113. <div class="c3">79</div>
  114. <div class="c3">80</div>
  115. <div class="c3">81</div>
  116. <div class="c3">82</div>
  117. <div class="c3">83</div>
  118. <div class="c3">84</div>
  119. <div class="c3">85</div>
  120. <div class="c3">86</div>
  121. <div class="c3">87</div>
  122. <div class="c3">88</div>
  123. <div class="c3">89</div>
  124. <div class="c3">90</div>
  125. <div class="c3">91</div>
  126. <div class="c3">92</div>
  127. <div class="c3">93</div>
  128. <div class="c3">94</div>
  129. <div class="c3">95</div>
  130. <div class="c3">96</div>
  131. <div class="c3">97</div>
  132. <div class="c3">98</div>
  133. <div class="c3">99</div>
  134. <div class="c3">100</div>
  135.  
  136. <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
  137. <script src="jquery-3.2.1.min.js"></script>
  138. <script>
  139.   $("#b1").on("click", function () {
  140.     $(".c1").offset({left: 200, top:200});
  141.   });
  144.   $(window).scroll(function () {
  145.     if ($(window).scrollTop() > 100) {
  146.       $("#b2").removeClass("hide");
  147.     }else {
  148.       $("#b2").addClass("hide");
  149.     }
  150.   });
  151.   $("#b2").on("click", function () {
  152.     $(window).scrollTop(0);
  153.   })
  154. </script>
  155. </body>
  156. </html>
View Code

#尺寸：

  1. Height()
  2. innerHeight()
  3. outerHeight()
  4. width()   
  5. innerwidth()
  6. outerwidth()

#文本操作：

  1. HTML代码：
  2. html()// 取得第一个匹配元素的html内容
  3. html(val)// 设置所有匹配元素的html内容
  5. 文本值：
  6. text()// 取得所有匹配元素的内容
  7. text(val)// 设置所有匹配元素的内容
  9. 值：
  10. val()// 取得第一个匹配元素的当前值
  11. val(val)// 设置所有匹配元素的值
  12. val([val1, val2])// 设置多选的checkbox、多选select的值

#属性操作：

  1. attr(attrName)// 返回第一个匹配元素的属性值
  2. attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
  3. attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
  4. removeAttr()// 从每一个匹配的元素中删除一个属性

 

#文档处理：

  1. $(A).append(B)// 把B追加到A
  2. $(A).appendTo(B)// 把A追加到B
  4. $(A).prepend(B)// 把B前置到A
  5. $(A).prependTo(B)// 把A前置到B
  7. $(A).after(B)// 把B放到A的后面
  8. $(A).insertAfter(B)// 把A放到B的后面
  10. $(A).before(B)// 把B放到A的前面
  11. $(A).insertBefore(B)// 把A放到B的前面
  13. remove()// 从DOM中删除所有匹配的元素。
  14. empty()// 删除匹配的元素集合中所有的子节点。
  16. replaceWith()
  17. replaceAll()
  19. clone()// 参数

 

  • 事件：

    #常用事件

    1. click(function(){...})
    2. hover(function(){...})
    3. blur(function(){...})
    4. focus(function(){...})
    5. change(function(){...})
    6. keyup(function(){...})

    #事件绑定：

    1. 事件绑定
    2. .on( events [, selector ],function(){})
    3. events： 事件
    4. selector: 选择器（可选的）
    5. function: 事件处理函数

    #移除事件：

    1. .off( events [, selector ][,function(){}])
    2. off() 方法移除用 .on()绑定的事件处理程序。
    4. events： 事件
    5. selector: 选择器（可选的）
    6. function: 事件处理函数

    #阻止后续事件执行：

    1. return false; // 常见阻止表单提交等
    2. e.preventDefault();

    #阻止事件冒泡：
    未完待续....




　　

原文链接：http://www.cnblogs.com/suguangti/p/10971059.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号