Ajax学习笔记第4天

news2024/11/19 14:36:52

做决定之前仔细考虑，一旦作了决定就要勇往直前、坚持到底！

【1 模仿百度招聘】

整个流程展示：

027.gif

1.文件目录

028.png

2.页面效果展示及代码

  • data中的page1数据展示

029.png

2.1 主页 index.html:index里面代码部分解释

  • underscore.js :模板页面的相关代码
<!-- 引入页面模板【页面呈现的东西类似时】 -->
<script src="js/underscore.js"></script>
<script type="text/template" id="template">
<div class="rowInfo">
 <div class="row">
   <div class="col col2"><%=name%></div>
   <div class="col"><%=postType%></div>
   <div class="col"><%=workPlace%></div>
   <div class="col"><%=recruitNum%></div>
   <div class="col"><%=publishDate%></div>
   <div class="col" >
     <!-- 用来存放倒三角符号 -->
     <span class="icon"></span>
   </div>
 </div>
 <div class="infoDetail">
   <p>工作职责：</p>
   <p>
     <%=workContent%>
   </p>
   <p>职位要求</p>
   <p>
     <%=serviceCondition%>
   </p>
   <div class="btn">
     <a href="#" class="left">申请职位</a>
     <a href="#" class="right">收藏职位</a>
   </div>
 </div>
</div>
</script>
  • 页面渲染：jQuery框架
第1部分代码：先获取节点
  • jQuery选择器：

class选择器：$(".class")

id选择器：$("#id")

  • $("#id").text()

jQuery：html()方法会识别html标签，text()方法会那内容直接当成字符串，并不会识别html标签。

console.log($id); // 打印的是整个id="id"里面的东西，是一个字符串了

第3部分代码：再发送请求 
// jQuery的get请求
// data：就是url返回来的数据data ={xxx}
$.get("data/page1.json", function (data)
{
// data.rowCount:共有多少条数据
$("#rowCount").html(data.rowCount)
// var b = $("#rowCount").html(data.rowCount)
// console.log(b);

// underscore中的遍历方法 _.each(list,function(){}),遍历 list 中的所有元素，按顺序用每个元素当做参数调用 function 函数
// 得到数据遍历，渲染页面
_.each(data.postList, function (dictionary)
{
// dictionary:是遍历数组data.postList中的每一条数据

// console.log(dictionary);
// 将每一条数据都传给RowDom函数
new RowDom(dictionary)
// this = > window
// console.log(this==window);//true
})
})
第2部分代码：最后再执行 
string.replace(/.*\-(.*)\-.*/g, function (match, $1)
    {
      // match匹配：符合正则条件的被捕获的值
      // 并返回给string
      return $1;
    })

  • “.*”表示任意字符有0个或多个

  • . 代表任意字符，后面的 * 代表 前面的任意字符有0个或多个

  • \代表转译符，-这个符号不能直接出现在表达式里，必须被\转译符后才能变成一个普通的字符-

  • 括号代表它被捕获了，相当于被复制了，还没被粘贴

  • letter-spacing: 
//==========第2部分=============//  
function RowDom (dictionary)
{
  // 【this-->构造函数RowDom创建的实例对象，每个this都不同】
  // console.log(this); 
  // console.log(this == window);//false
  // console.log(this == RowDom);//false
  this.dictionary = dictionary;
  // 修订字典项
  // 如果有符号短横 -，进入判断
  if (this.dictionary.postType.indexOf("-") != -1) {
    // “.*”表示任意字符有0个或多个
    // . 代表任意字符，后面的 * 代表 前面的任意字符有0个或多个
    // \代表转译符，-这个符号不能直接出现在表达式里，必须被\转译符后才能变成一个普通的字符-，
    // 括号代表它被捕获了，相当于被复制了，还没被粘贴
    this.dictionary.postType = this.dictionary.postType.replace(/.*\-(.*)\-.*/g, function (match, $1)
    {
      // match匹配：符合正则条件的被捕获的值
      // 并返回给postType
      return $1;
    })
  }
  // 解析模板
  // 将数据传给模板函数解析，解析完的字符串模板【带数据的】
  var domStr = compiledFun(this.dictionary);
  // console.log(domStr);

  // 将解析的模板设置为dom
  // 选到 id="template"里面的的dom节点rowInfo
  this.$dom = $(domStr);
  // console.log(this.$dom,'dom')

  // 获取自己的点击按钮
  //在dom节点rowInfo 里查找icon find() ,后代选择器
  this.$tableBtn = this.$dom.find(".icon");
  // 给按钮设置两种状态-打开1-关闭0;
  this.state = 0;
  // 按钮里的this的值会发生改变，在按钮里取不到new RowDom()，所以此处要self = this;就可以在按钮里取到了
  var self = this;
  // 设置按钮的显示和隐藏的状态
  this.$tableBtn.click(function ()
  {
    $(this).removeClass();
    // 点击后，判断是不是关闭状态0，是的话，就打开，并且state=1[打开]
    if (self.state == 0) {
      // 将按钮设置为打开状态
      // 图标变换
      $(this).addClass("bottomIcon");
      self.state = 1;
      // 打开详情
      self.$dom.find(".infoDetail").css({ "display": "block" })
    } else {
      // 将按钮变成关闭状态
      $(this).addClass("icon");
      self.state = 0;
      // 关闭详情
      self.$dom.find(".infoDetail").css({ "display": "none" })
    }
  })
  // 追加节点上树
  $jobTable.append(this.$dom)
}


<script src="js/jquery.min.js"></script>
<script>
//==========第1部分=============//    
// 获取节点【jQuery的类class选择器--.】
var $jobTable = $(".jobBody");
// 获取节点【jQuery的id选择器--#】
// 获取模板字符串
var $templateStr = $("#template").text();
// jQuery：html()方法会识别html标签，text()方法会那内容直接当成字符串，并不会识别html标签。
// console.log($templateStr);
// 打印的是整个id="template"里面的东西，是一个字符串了
// 设置模板编译函数
var compiledFun = _.template($templateStr);
// console.log(compiledFun);

//==========第2部分=============//  
function RowDom (dictionary)
{
 // 【this-->构造函数RowDom创建的实例对象，每个this都不同】
 // console.log(this); 
 // console.log(this == window);//false
 // console.log(this == RowDom);//false
 this.dictionary = dictionary;
 // 修订字典项
 // 如果有符号短横 -，进入判断
 if (this.dictionary.postType.indexOf("-") != -1) {
   // “.*”表示任意字符有0个或多个
   // . 代表任意字符，后面的 * 代表 前面的任意字符有0个或多个
   // \代表转译符，-这个符号不能直接出现在表达式里，必须被\转译符后才能变成一个普通的字符-，
   // 括号代表它被捕获了，相当于被复制了，还没被粘贴
   this.dictionary.postType = this.dictionary.postType.replace(/.*\-(.*)\-.*/g, function (match, $1)
   {
     // match匹配：符合正则条件的被捕获的值
     // 并返回给postType
     return $1;
   })
 }
 // 解析模板
 // 将数据传给模板函数解析，解析完的字符串模板
 var domStr = compiledFun(this.dictionary);
 // console.log(domStr);

 // 将解析的模板设置为dom
 // 选到 id="template"里面的的dom节点rowInfo
 this.$dom = $(domStr);
 // console.log(this.$dom,'dom')

 // 获取自己的点击按钮
 //在dom节点rowInfo 里查找icon find() ,后代选择器
 this.$tableBtn = this.$dom.find(".icon");
 // 给按钮设置两种状态-打开1-关闭0;
 this.state = 0;
 // 按钮里的this的值会发生改变，在按钮里取不到new RowDom()，所以此处要self = this;就可以在按钮里取到了
 var self = this;
 // 设置按钮的显示和隐藏的状态
 this.$tableBtn.click(function ()
 {
   $(this).removeClass();
   // 点击后，判断是不是关闭状态0，是的话，就打开，并且state=1[打开]
   if (self.state == 0) {
     // 将按钮设置为打开状态
     // 图标变换
     $(this).addClass("bottomIcon");
     self.state = 1;
     // 打开详情
     self.$dom.find(".infoDetail").css({ "display": "block" })
   } else {
     // 将按钮变成关闭状态
     $(this).addClass("icon");
     self.state = 0;
     // 关闭详情
     self.$dom.find(".infoDetail").css({ "display": "none" })
   }
 })
 // 追加节点上树
 $jobTable.append(this.$dom)
}

//==========第3部分=============//  
// jQuery的get请求
// data：就是url返回来的数据data ={xxx}
$.get("data/page1.json", function (data)
{
 // data.rowCount:共有多少条数据
 $("#rowCount").html(data.rowCount)
 // var b = $("#rowCount").html(data.rowCount)
 // console.log(b);

 // underscore中的遍历方法 _.each(list,function(){}),遍历 list 中的所有元素，按顺序用每个元素当做参数调用 function 函数
 // 得到数据遍历，渲染页面
 _.each(data.postList, function (dictionary)
 {
   // dictionary:是遍历数组data.postList中的每一条数据

   // console.log(dictionary);
   // 将每一条数据都传给RowDom函数
   new RowDom(dictionary)
   // this = > window
   // console.log(this==window);//true
 })
})
</script>

完整index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入外部样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>Document</title>
</head>

<body>
  <div class="warp">
    <!-- 第一栏 -->
    <div class="info">
      <h2>职位信息</h2>
      <p>共有<span id="rowCount">0</span>个职位</p>
    </div>
    <!-- 第二栏 -->
    <div class="jobBox">
      <!-- 工作顶部栏，职位名称 -->
      <div class="jobHeader">
        <div class="row">
          <div class="col col2">职位名称</div>
          <div class="col">职位类别</div>
          <div class="col">工作地点</div>
          <div class="col">招聘人数</div>
          <div class="col">更新时间</div>
          <div class="col"></div>
        </div>
      </div>
      <!-- 具体工作职位 -->
      <div class="jobBody">

      </div>
    </div>
  </div>
  <!-- 引入页面模板【页面呈现的东西类似时】 -->
  <script src="js/underscore.js"></script>
  <script type="text/template" id="template">
    <div class="rowInfo">
      <div class="row">
        <div class="col col2"><%=name%></div>
        <div class="col"><%=postType%></div>
        <div class="col"><%=workPlace%></div>
        <div class="col"><%=recruitNum%></div>
        <div class="col"><%=publishDate%></div>
        <div class="col" >
          <!-- 用来存放倒三角符号 -->
          <span class="icon"></span>
        </div>
      </div>
      <div class="infoDetail">
        <p>工作职责：</p>
        <p>
          <%=workContent%>
        </p>
        <p>职位要求</p>
        <p>
          <%=serviceCondition%>
        </p>
        <div class="btn">
          <a href="#" class="left">申请职位</a>
          <a href="#" class="right">收藏职位</a>
        </div>
      </div>
    </div>
  </script>
  <script src="js/jquery.min.js"></script>
  <script>
    // 获取节点【jQuery的类class选择器--.】
    var $jobTable = $(".jobBody");
    // 获取节点【jQuery的id选择器--#】
    // 获取模板字符串
    var $templateStr = $("#template").text();
    // jQuery：html()方法会识别html标签，text()方法会那内容直接当成字符串，并不会识别html标签。
    // console.log($templateStr);
    // 打印的是整个id="template"里面的东西，是一个字符串了
    // 设置模板编译函数
    var compiledFun = _.template($templateStr);
    // console.log(compiledFun);

    function RowDom (dictionary)
    {
      // 【this-->构造函数RowDom创建的实例对象，每个this都不同】
      // console.log(this); 
      // console.log(this == window);//false
      // console.log(this == RowDom);//false
      this.dictionary = dictionary;
      // 修订字典项
      // 如果有符号短横 -，进入判断
      if (this.dictionary.postType.indexOf("-") != -1) {
        // “.*”表示任意字符有0个或多个
        // . 代表任意字符，后面的 * 代表 前面的任意字符有0个或多个
        // \代表转译符，-这个符号不能直接出现在表达式里，必须被\转译符后才能变成一个普通的字符-，
        // 括号代表它被捕获了，相当于被复制了，还没被粘贴
        this.dictionary.postType = this.dictionary.postType.replace(/.*\-(.*)\-.*/g, function (match, $1)
        {
          // match匹配：符合正则条件的被捕获的值
          // 并返回给postType
          return $1;
        })
      }
      // 解析模板
      // 将数据传给模板函数解析，解析完的字符串模板
      var domStr = compiledFun(this.dictionary);
      // console.log(domStr);

      // 将解析的模板设置为dom
      // 选到 id="template"里面的的dom节点rowInfo
      this.$dom = $(domStr);
      // console.log(this.$dom,'dom')

      // 获取自己的点击按钮
      //在dom节点rowInfo 里查找icon find() ,后代选择器
      this.$tableBtn = this.$dom.find(".icon");
      // 给按钮设置两种状态-打开1-关闭0;
      this.state = 0;
      // 按钮里的this的值会发生改变，在按钮里取不到new RowDom()，所以此处要self = this;就可以在按钮里取到了
      var self = this;
      // 设置按钮的显示和隐藏的状态
      this.$tableBtn.click(function ()
      {
        $(this).removeClass();
        // 点击后，判断是不是关闭状态0，是的话，就打开，并且state=1[打开]
        if (self.state == 0) {
          // 将按钮设置为打开状态
          // 图标变换
          $(this).addClass("bottomIcon");
          self.state = 1;
          // 打开详情
          self.$dom.find(".infoDetail").css({ "display": "block" })
        } else {
          // 将按钮变成关闭状态
          $(this).addClass("icon");
          self.state = 0;
          // 关闭详情
          self.$dom.find(".infoDetail").css({ "display": "none" })
        }
      })
      // 追加节点上树
      $jobTable.append(this.$dom)
    }

    // jQuery的get请求
    // data：就是url返回来的数据data ={xxx}
    $.get("data/page1.json", function (data)
    {
      // data.rowCount:共有多少条数据
      $("#rowCount").html(data.rowCount)
      // var b = $("#rowCount").html(data.rowCount)
      // console.log(b);

      // underscore中的遍历方法 _.each(list,function(){}),遍历 list 中的所有元素，按顺序用每个元素当做参数调用 function 函数
      // 得到数据遍历，渲染页面
      _.each(data.postList, function (dictionary)
      {
        // dictionary:是遍历数组data.postList中的每一条数据
        
        // console.log(dictionary);
        // 将每一条数据都传给RowDom函数
        new RowDom(dictionary)
        // this = > window
        // console.log(this==window);//true
      })
    })
  </script>
</body>

</html>

2.2 css/index.css

body{
  background: #eee;
  font-family: "-apple-system";
}
.warp{
  width:1100px;
  margin: 30px auto;
  color: #666;
  padding-top: 10px;
  font-size: 13px;
}
.warp .info {
  padding: 0 8px;
  /* 弹性布局 ,父级元素设置弹性布局，所有子元素灵活布局*/
  display: flex;
  /* 子元素：水平两端对齐 */
  justify-content: space-between;
}
.warp .info h2{
  font-size: 14px;
  color: #333;
}
.warp .info span{
  font-size: 16px;
  color: #fc7753;
}
.warp .jobBox{
  background: #fff;
  padding: 10px 0;
}

.warp .jobBox .jobHeader{
  color: #333;
  font-weight: 800;
  border-bottom: 1px solid #f5f5f5;
  
}
.warp .jobBox .row{
  /* 子元素弹性布局 */
  display: flex;
}
.warp .jobBox .row .col{
  /* 每个col子类：占据3【比如宽度】 */
  flex: 3;
}
.warp .jobBox .row .col2{
  /* 每个col2子类：占据6【比如宽度】 */
  flex: 6;
}
.warp .jobBox .jobHeader .row{
  /* 内边距：上下固定12px,左右1100*3%=33px */
  padding: 12px 3%;
}
.warp .jobBox .jobBody{
  /* 内边距：上下固定0px,左右1100*1%=11px */
  padding: 0 1%;
}
.warp .jobBox .jobBody .row{
  /* 内边距：上下固定12px,左右1100*3%=33px */
  padding: 12px 2%;
}

/* .col:last-child:选中最后一个子元素 */
.warp .jobBox .row .col:last-child{
  /* 文本内容，靠右显示 */
  text-align: right;
  /* 占据比例为1，即除了最后一个col元素外，其他col占比3 */
  flex: 1;
}
/* 给icon容器设置背景图片 */
.warp .jobBox .jobBody .icon{
  /* 让行内元素span以行内形式排列，以块级形式展示  */
  /* 设置以后，可以给行内元素设置宽高，不然就是让内容撑高的，此处就是让padding撑开的一个图标大小的元素容器*/
  display: inline-block;
  /* 上10px,右21px */
  padding: 10px 21px 0 0;
  /* 不重复 向左移动28px,向上移动146px*/
  background: url("../images/banner-icon.png") no-repeat -28px -146px;
}
/* 当鼠标放在icon上面时，只改变背景图片的位置，让它显示出自己想要的一个图标 */
.warp .jobBox .jobBody .icon:hover{
  background-position: -81px -146px;
}
/* icon点击事件触发 ：添加的类bottomIcon */
.warp .jobBox .jobBody .bottomIcon {
  /* 让行内元素span以行内形式排列，以块级形式展示  */
  /* 设置以后，可以给行内元素设置宽高，不然就是让内容撑高的，此处就是让padding撑开的一个图标大小的元素容器*/
  display: inline-block;
  /* 上10px,右21px */
  padding: 10px 21px 0 0;
  /* 不重复 向左移动2px,向上移动146px*/
  /* .. 从此页面返回上一级 */
  background: url("../images/banner-icon.png") no-repeat -2px -146px;
}
/* 当鼠标放在bottomIcon上面时，只改变背景图片的位置，让它显示出自己想要的一个图标 */
.warp .jobBox .jobBody .bottomIcon:hover{
  background-position: -54px -146px;
}
.warp .jobBox .jobBody .rowInfo{
  border-bottom: 2px dotted #f5f5f5;
}
.warp .jobBox .jobBody .rowInfo .infoDetail{
  padding: 15px 2%;
  display: none;
}
.warp .jobBox .jobBody .rowInfo .infoDetail p {
  line-height: 36px;
}

.warp .jobBox .jobBody .rowInfo .infoDetail .btn a{
  padding: 8px 16px;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  /* 兼容内核为webkit和moz的浏览器 */
  -webkit-transition: .3s;
  -moz-transition: .3s;
  /* transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒）0.3s */
  transition: .3s;
  /* 没有下划线 */
  text-decoration: none;
}

.warp .jobBox .jobBody .rowInfo .infoDetail .btn a.left{
  background-color: #ec6738;
  margin-right: 10px;
}
.warp .jobBox .jobBody .rowInfo .infoDetail .btn a.right{
  background-color: #4090ff;
}
Ajax的单独分页

030.gif

pagination.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background: #eee;
    }

    .pageNav {
      margin: 100px;
      display: flex;
    }

    .pageNav span {
      padding: 10px 18px;
      font-size: 16px;
      color: #999;
      border-radius: 3px;
      background-color: #fff;
      margin: 0 3px;
      cursor: pointer;
    }

    .pageNav span.cur {
      color: #4090ff;
    }

    .pageNav span:hover {
      color: #4090ff;
    }

    .pageNav span.point {
      background: transparent;
      padding: 0 5px;
      cursor: default;
    }

    .pageNav span.point:hover {
      color: #999;
    }

    .pageNav span.point::before {
      content: "";
      display: block;
      height: 15%;
    }

    .pageNav .page i {
      display: inline-block;
      padding: 14px 9px 0 0;
      background: url(images/personalCenter-icons.png) -6px -1142px;
    }

    .pageNav .page:hover i {
      background-position: -35px -1142px;
    }

    .pageNav .next i {
      background-position: -17px -1142px;
    }

    .pageNav .next:hover i {
      background-position: -48px -1142px;
    }
  </style>
</head>

<body>
  <div class="pageNav" id="pageNav">
    <span class="prev page">
      <i></i>
    </span>
    <span class="next page">
      <i></i>
    </span>
  </div>
  
  <script src="js/jquery.min.js"></script>
  <script>
    // 构造函数，传入一个总页码生成对应的分页器
    function Pager (pageAmount)
    {
      // 获取分页的根元素
      this.$dom = $("#pageNav");
      // 总页数
      this.pageAmount = pageAmount;

      // 上一页和下一页
      this.$prev = this.$dom.find(".prev");
      this.$next = this.$dom.find(".next");

      // 当前页数
      this.currentPage = 1;

      // 分情况设置页面逻辑
      this.pageTo()

      // eq(0) 选取第1个 .num 元素（索引号为 0）：
      // .addClass ：添加属性类
      $(".num").eq(0).addClass("cur");
      // 点击数字的状态
      var self = this;
      // 设置代理点击
      // 单击时，触发回调函数
      // delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序
      this.$dom.delegate(".num", "click", function ()
      {
        // 此时的this-->点击的那个元素【那个想跳转的页数】
        self.currentPage = Number($(this).html());
        // 清空所有的渲染dom
        // remove() 方法移除被选元素，包括所有的文本和子节点。
        // 该方法也会移除被选元素的数据和事件。
        $(".num").remove();
        $(".point").remove();
        // 重新设置页面逻辑【刷新页面】
        self.pageTo()
      });

      // 上一页的点击
      this.$prev.click(function ()
      {
        // 如果当前页数为小于等于1，则直接跳出点击逻辑
        if (self.currentPage <= 1) {
          return;
        }
        // 当前页数减一
        self.currentPage--;
        // 清空所有的渲染dom
        // remove() 方法移除被选元素，包括所有的文本和子节点。
        // 该方法也会移除被选元素的数据和事件。
        $(".num").remove();
        $(".point").remove();
        // 重新设置页面逻辑【刷新页面】
        self.pageTo()
      })
      // 上一页的点击
      this.$next.click(function ()
      {
        // 如果当前页数为大于等于总页数，则直接跳出点击逻辑
        if (self.currentPage >= self.pageAmount) {
          return;
        }
        // 当前页数加一
        self.currentPage++;
        // 清空所有的渲染dom
        // remove() 方法移除被选元素，包括所有的文本和子节点。
        // 该方法也会移除被选元素的数据和事件。
        $(".num").remove();
        $(".point").remove();
        // 重新设置页面逻辑【刷新页面】
        self.pageTo()
      })
    }

    Pager.prototype.pageTo = function (num)
    {
      // 总页数少于5页的时候
      if (this.pageAmount <= 5) {
        for (var i = this.pageAmount; i >= 1; i--) {
          // .prependTo(A):把内容子元素 添加至 父A元素里的开头位置【往下挤压】
          //  已经有了 class='num'
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 给对应点击的数字加cur
        $(".num").eq(this.currentPage - 1).addClass("cur").siblings().removeClass("cur");

      } else if (this.pageAmount > 5 && this.currentPage < 5) {
        // 当前的总页数大于5并且当前选中页面小于5
        $("<span class='point'>...</span>").prependTo(this.$dom)
        for (var i = 5; i >= 1; i--) {
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 加cur
        $(".num").eq(this.currentPage - 1).addClass("cur").siblings().removeClass("cur");
      } else if ((this.pageAmount >= 5 && this.currentPage >= 5) && (this.currentPage < this.pageAmount - 3)) {
        // 当前的总页数大于等于5并且当前的选中的页面大于等于5并且当前的选中的页数小于总页数减3
        $("<span class='num'>" + this.pageAmount + "</span>").prependTo(this.$dom);
        $("<span class='point'>...</span>").prependTo(this.$dom);
        for (var i = this.currentPage + 2; i >= this.currentPage - 2; i--) {
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 加cur
        $(".num").eq(2).addClass("cur").siblings().removeClass("cur");
        $("<span class='point'>...</span>").prependTo(this.$dom);
        $("<span class='num'>1</span>").prependTo(this.$dom);
      } else if ((this.pageAmount >= 5 && this.currentPage >= 5) && (this.currentPage >= this.pageAmount - 3)) {
        for (var i = this.pageAmount; i >= this.pageAmount - 4; i--) {
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 加cur
        $(".num").eq(this.currentPage - this.pageAmount - 1).addClass("cur").siblings().removeClass("cur");
        $("<span class='point'>...</span>").prependTo(this.$dom);
        $("<span class='num'>1</span>").prependTo(this.$dom);
      }
    }
  </script>
</body>

</html>

【2 模仿百度招聘完整代码（加了页面跳转）】—本地只有十条数据

效果展示

031.gif

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入外部样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>Document</title>
</head>

<body>
  <div class="warp">
    <!-- 第一栏 -->
    <div class="info">
      <h2>职位信息</h2>
      <p>共有<span id="rowCount">0</span>个职位</p>
    </div>
    <!-- 第二栏 -->
    <div class="jobBox">
      <!-- 工作顶部栏，职位名称 -->
      <div class="jobHeader">
        <div class="row">
          <div class="col col2">职位名称</div>
          <div class="col">职位类别</div>
          <div class="col">工作地点</div>
          <div class="col">招聘人数</div>
          <div class="col">更新时间</div>
          <div class="col"></div>
        </div>
      </div>
      <!-- 具体工作职位 -->
      <div class="jobBody">
        <!-- 分页 -->
      </div>
    </div>
  </div>
  <div class="pagination">
    <div class="pageNav" id="pageNav">
      <span class="prev page">
        <i></i>
      </span>
      <span class="next page">
        <i></i>
      </span>
    </div>
  </div>

  <!-- 引入页面模板【页面呈现的东西类似时】 -->
  <script src="js/underscore.js"></script>
  <script type="text/template" id="template">
    <div class="rowInfo">
      <div class="row">
        <div class="col col2"><%=name%></div>
        <div class="col"><%=postType%></div>
        <div class="col"><%=workPlace%></div>
        <div class="col"><%=recruitNum%></div>
        <div class="col"><%=publishDate%></div>
        <div class="col" >
          <!-- 用来存放倒三角符号 -->
          <span class="icon"></span>
        </div>
      </div>
      <div class="infoDetail">
        <p>工作职责：</p>
        <p>
          <%=workContent%>
        </p>
        <p>职位要求</p>
        <p>
          <%=serviceCondition%>
        </p>
        <div class="btn">
          <a href="#" class="left">申请职位</a>
          <a href="#" class="right">收藏职位</a>
        </div>
      </div>
    </div>
  </script>
  <script src="js/jquery.min.js"></script>
  <script>
    // 获取节点【jQuery的类class选择器--.】
    var $jobTable = $(".jobBody");
    // 获取节点【jQuery的id选择器--#】
    // 获取模板字符串
    var $templateStr = $("#template").text();
    // jQuery：html()方法会识别html标签，text()方法会那内容直接当成字符串，并不会识别html标签。
    // console.log($templateStr);
    // 打印的是整个id="template"里面的东西，是一个字符串了
    // 设置模板编译函数
    var compiledFun = _.template($templateStr);
    // console.log(compiledFun);

    function RowDom (dictionary)
    {
      // 【this-->构造函数RowDom创建的实例对象，每个this都不同】
      // console.log(this); 
      // console.log(this == window);//false
      // console.log(this == RowDom);//false
      this.dictionary = dictionary;
      // 修订字典项
      // 如果有符号短横 -，进入判断
      if (this.dictionary.postType.indexOf("-") != -1) {
        // “.*”表示任意字符有0个或多个
        // . 代表任意字符，后面的 * 代表 前面的任意字符有0个或多个
        // \代表转译符，-这个符号不能直接出现在表达式里，必须被\转译符后才能变成一个普通的字符-，
        // 括号代表它被捕获了，相当于被复制了，还没被粘贴
        this.dictionary.postType = this.dictionary.postType.replace(/.*\-(.*)\-.*/g, function (match, $1)
        {
          // match匹配：符合正则条件的被捕获的值
          // 并返回给postType
          return $1;
        })
      }
      // 解析模板
      // 将数据传给模板函数解析，解析完的字符串模板
      var domStr = compiledFun(this.dictionary);
      // console.log(domStr);

      // 将解析的模板设置为dom
      // 选到 id="template"里面的的dom节点rowInfo
      this.$dom = $(domStr);
      // console.log(this.$dom,'dom')

      // 获取自己的点击按钮
      //在dom节点rowInfo 里查找icon find() ,后代选择器
      this.$tableBtn = this.$dom.find(".icon");
      // 给按钮设置两种状态-打开1-关闭0;
      this.state = 0;
      // 按钮里的this的值会发生改变，在按钮里取不到new RowDom()，所以此处要self = this;就可以在按钮里取到了
      var self = this;
      // 设置按钮的显示和隐藏的状态
      this.$tableBtn.click(function ()
      {
        $(this).removeClass();
        // 点击后，判断是不是关闭状态0，是的话，就打开，并且state=1[打开]
        if (self.state == 0) {
          // 将按钮设置为打开状态
          // 图标变换
          $(this).addClass("bottomIcon");
          self.state = 1;
          // 打开详情
          self.$dom.find(".infoDetail").css({ "display": "block" })
        } else {
          // 将按钮变成关闭状态
          $(this).addClass("icon");
          self.state = 0;
          // 关闭详情
          self.$dom.find(".infoDetail").css({ "display": "none" })
        }
      })
      // 追加节点上树
      $jobTable.append(this.$dom)
    }
    // 分页pagination
    // 构造函数，传入一个总页码生成对应的分页器
    function Pager (pageAmount)
    {
      // 获取分页的根元素
      this.$dom = $("#pageNav");
      // 总页数
      this.pageAmount = pageAmount;

      // 上一页和下一页
      this.$prev = this.$dom.find(".prev");
      this.$next = this.$dom.find(".next");

      // 当前页数
      this.currentPage = 1;

      // 分情况设置页面逻辑
      this.pageTo()

      // eq(0) 选取第1个 .num 元素（索引号为 0）：
      // .addClass ：添加属性类
      $(".num").eq(0).addClass("cur");
      // 点击数字的状态
      var self = this;
      // 设置代理点击
      // 单击时，触发回调函数
      // delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序
      this.$dom.delegate(".num", "click", function ()
      {
        // 此时的this-->点击的那个元素【那个想跳转的页数】
        self.currentPage = Number($(this).html());
        // 清空所有的渲染dom
        // remove() 方法移除被选元素，包括所有的文本和子节点。
        // 该方法也会移除被选元素的数据和事件。
        $(".num").remove();
        $(".point").remove();
        // 重新设置页面逻辑【刷新页面】
        self.pageTo()
      });

      // 上一页的点击
      this.$prev.click(function ()
      {
        // 如果当前页数为小于等于1，则直接跳出点击逻辑
        if (self.currentPage <= 1) {
          return;
        }
        // 当前页数减一
        self.currentPage--;
        // 清空所有的渲染dom
        // remove() 方法移除被选元素，包括所有的文本和子节点。
        // 该方法也会移除被选元素的数据和事件。
        $(".num").remove();
        $(".point").remove();
        // 重新设置页面逻辑【刷新页面】
        self.pageTo()
      })
      // 上一页的点击
      this.$next.click(function ()
      {
        // 如果当前页数为大于等于总页数，则直接跳出点击逻辑
        if (self.currentPage >= self.pageAmount) {
          return;
        }
        // 当前页数加一
        self.currentPage++;
        // 清空所有的渲染dom
        // remove() 方法移除被选元素，包括所有的文本和子节点。
        // 该方法也会移除被选元素的数据和事件。
        $(".num").remove();
        $(".point").remove();
        // 重新设置页面逻辑【刷新页面】
        self.pageTo()
      })
    }

    Pager.prototype.pageTo = function (num)
    {
      // 总页数少于5页的时候
      if (this.pageAmount <= 5) {
        for (var i = this.pageAmount; i >= 1; i--) {
          // .prependTo(A):把内容子元素 添加至 父A元素里的开头位置【往下挤压】
          //  已经有了 class='num'
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 给对应点击的数字加cur
        $(".num").eq(this.currentPage - 1).addClass("cur").siblings().removeClass("cur");

      } else if (this.pageAmount > 5 && this.currentPage < 5) {
        // 当前的总页数大于5并且当前选中页面小于5
        $("<span class='point'>...</span>").prependTo(this.$dom)
        for (var i = 5; i >= 1; i--) {
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 加cur
        $(".num").eq(this.currentPage - 1).addClass("cur").siblings().removeClass("cur");
      } else if ((this.pageAmount >= 5 && this.currentPage >= 5) && (this.currentPage < this.pageAmount - 3)) {
        // 当前的总页数大于等于5并且当前的选中的页面大于等于5并且当前的选中的页数小于总页数减3
        $("<span class='num'>" + this.pageAmount + "</span>").prependTo(this.$dom);
        $("<span class='point'>...</span>").prependTo(this.$dom);
        for (var i = this.currentPage + 2; i >= this.currentPage - 2; i--) {
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 加cur
        $(".num").eq(2).addClass("cur").siblings().removeClass("cur");
        $("<span class='point'>...</span>").prependTo(this.$dom);
        $("<span class='num'>1</span>").prependTo(this.$dom);
      } else if ((this.pageAmount >= 5 && this.currentPage >= 5) && (this.currentPage >= this.pageAmount - 3)) {
        for (var i = this.pageAmount; i >= this.pageAmount - 4; i--) {
          $("<span class='num'>" + i + "</span>").prependTo(this.$dom)
        }
        // 加cur
        $(".num").eq(this.currentPage - this.pageAmount - 1).addClass("cur").siblings().removeClass("cur");
        $("<span class='point'>...</span>").prependTo(this.$dom);
        $("<span class='num'>1</span>").prependTo(this.$dom);
      }
      // 发送Ajax请求当前页码的json数据
      $.get("data/page" + this.currentPage + ".json", function (data)
      {
        // 改变dom模板
        // 改变之前，前移除旧的数据
        $(".rowInfo").remove();
        // underscore中的遍历方法 _.each(list,function(){}),遍历 list 中的所有元素，按顺序用每个元素当做参数调用 function 函数
        // 得到数据遍历，渲染页面
        _.each(data.postList, function (dictionary)
        {
          // dictionary:是遍历数组data.postList中的每一条数据
          // console.log(dictionary);
          // 将每一条数据都传给RowDom函数
          new RowDom(dictionary)
          // this = > window
          // console.log(this==window);//true
        })
      })
    }

    // jQuery的get请求
    // data：就是url返回来的数据data ={xxx}
    $.get("data/page1.json", function (data)
    {
      // data.rowCount:共有多少条数据
      // data.totalPage:共有多少页
      $("#rowCount").html(data.rowCount)
      // var b = $("#rowCount").html(data.rowCount)
      // console.log(b);

      // 初始化的时候new 一次分页，将总页数传给分页器
      new Pager(data.totalPage)
      // underscore中的遍历方法 _.each(list,function(){}),遍历 list 中的所有元素，按顺序用每个元素当做参数调用 function 函数
      // 得到数据遍历，渲染页面
      _.each(data.postList, function (dictionary)
      {
        // dictionary:是遍历数组data.postList中的每一条数据
        // console.log(dictionary);
        // 将每一条数据都传给RowDom函数
        new RowDom(dictionary)
        // this = > window
        // console.log(this==window);//true
      })
    })
  </script>
</body>

</html>

index.css

body{
  background: #eee;
  font-family: "-apple-system";
}
.warp{
  width:1100px;
  margin: 30px auto;
  color: #666;
  padding-top: 10px;
  font-size: 13px;
}
.warp .info {
  padding: 0 8px;
  /* 弹性布局 ,父级元素设置弹性布局，所有子元素灵活布局*/
  display: flex;
  /* 子元素：水平两端对齐 */
  justify-content: space-between;
}
.warp .info h2{
  font-size: 14px;
  color: #333;
}
.warp .info span{
  font-size: 16px;
  color: #fc7753;
}
.warp .jobBox{
  background: #fff;
  padding: 10px 0;
}

.warp .jobBox .jobHeader{
  color: #333;
  font-weight: 800;
  border-bottom: 1px solid #f5f5f5;
  
}
.warp .jobBox .row{
  /* 子元素弹性布局 */
  display: flex;
}
.warp .jobBox .row .col{
  /* 每个col子类：占据3【比如宽度】 */
  flex: 3;
}
.warp .jobBox .row .col2{
  /* 每个col2子类：占据6【比如宽度】 */
  flex: 6;
}
.warp .jobBox .jobHeader .row{
  /* 内边距：上下固定12px,左右1100*3%=33px */
  padding: 12px 3%;
}
.warp .jobBox .jobBody{
  /* 内边距：上下固定0px,左右1100*1%=11px */
  padding: 0 1%;
}
.warp .jobBox .jobBody .row{
  /* 内边距：上下固定12px,左右1100*3%=33px */
  padding: 12px 2%;
}

/* .col:last-child:选中最后一个子元素 */
.warp .jobBox .row .col:last-child{
  /* 文本内容，靠右显示 */
  text-align: right;
  /* 占据比例为1，即除了最后一个col元素外，其他col占比3 */
  flex: 1;
}
/* 给icon容器设置背景图片 */
.warp .jobBox .jobBody .icon{
  /* 让行内元素span以行内形式排列，以块级形式展示  */
  /* 设置以后，可以给行内元素设置宽高，不然就是让内容撑高的，此处就是让padding撑开的一个图标大小的元素容器*/
  display: inline-block;
  /* 上10px,右21px */
  padding: 10px 21px 0 0;
  /* 不重复 向左移动28px,向上移动146px*/
  background: url("../images/banner-icon.png") no-repeat -28px -146px;
}
/* 当鼠标放在icon上面时，只改变背景图片的位置，让它显示出自己想要的一个图标 */
.warp .jobBox .jobBody .icon:hover{
  background-position: -81px -146px;
}
/* icon点击事件触发 ：添加的类bottomIcon */
.warp .jobBox .jobBody .bottomIcon {
  /* 让行内元素span以行内形式排列，以块级形式展示  */
  /* 设置以后，可以给行内元素设置宽高，不然就是让内容撑高的，此处就是让padding撑开的一个图标大小的元素容器*/
  display: inline-block;
  /* 上10px,右21px */
  padding: 10px 21px 0 0;
  /* 不重复 向左移动2px,向上移动146px*/
  /* .. 从此页面返回上一级 */
  background: url("../images/banner-icon.png") no-repeat -2px -146px;
}
/* 当鼠标放在bottomIcon上面时，只改变背景图片的位置，让它显示出自己想要的一个图标 */
.warp .jobBox .jobBody .bottomIcon:hover{
  background-position: -54px -146px;
}
.warp .jobBox .jobBody .rowInfo{
  border-bottom: 2px dotted #f5f5f5;
}
.warp .jobBox .jobBody .rowInfo .infoDetail{
  padding: 15px 2%;
  display: none;
}
.warp .jobBox .jobBody .rowInfo .infoDetail p {
  line-height: 36px;
}

.warp .jobBox .jobBody .rowInfo .infoDetail .btn a{
  padding: 8px 16px;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  /* 兼容内核为webkit和moz的浏览器 */
  -webkit-transition: .3s;
  -moz-transition: .3s;
  /* transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒）0.3s */
  transition: .3s;
  /* 没有下划线 */
  text-decoration: none;
}

.warp .jobBox .jobBody .rowInfo .infoDetail .btn a.left{
  background-color: #ec6738;
  margin-right: 10px;
}
.warp .jobBox .jobBody .rowInfo .infoDetail .btn a.right{
  background-color: #4090ff;
}

/* 分页 */
.pagination{
  width: 1100px;
  display: flex;
  justify-content: center;
}
.pageNav {
  margin: 0 auto;
  display: flex;
}

.pageNav span {
  padding: 10px 18px;
  font-size: 16px;
  color: #999;
  border-radius: 3px;
  background-color: #fff;
  margin: 0 3px;
  cursor: pointer;
}

.pageNav span.cur {
  color: #4090ff;
}

.pageNav span:hover {
  color: #4090ff;
}

.pageNav span.point {
  background: transparent;
  padding: 0 5px;
  cursor: default;
}

.pageNav span.point:hover {
  color: #999;
}

.pageNav span.point::before {
  content: "";
  display: block;
  height: 15%;
}

.pageNav .page i {
  display: inline-block;
  padding: 14px 9px 0 0;
  background: url(../images/personalCenter-icons.png) -6px -1142px;
}

.pageNav .page:hover i {
  background-position: -35px -1142px;
}

.pageNav .next i {
  background-position: -17px -1142px;
}

.pageNav .next:hover i {
  background-position: -48px -1142px;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1149988.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

香橙派OrangePi Zero开发板的WiFi连接

香橙派OrangePi Zero开发板的WiFi连接

文章目录 调试串口连接连接WIFI设置开机自动连接自定义设置固定IP地址远程SSH连接 调试串口连接 1、准备一个 3.3v 的USB转TTL的模块&#xff0c;将开发板连接到电脑上 注意&#xff1a;引脚连接 a. USB 转 TTL 模块的 GND 接到开发板的 GND 上b. USB 转 TTL 模块的 RX 接到开…
阅读更多...
专业课改革，难度陡然提高，专业课122总分390+南京理工大学818南理工818上岸经验分享

专业课改革，难度陡然提高，专业课122总分390+南京理工大学818南理工818上岸经验分享

今年专业课相对较难&#xff0c;分数122&#xff0c;基本达到预期。南理工818是信号和数电两门课&#xff0c;各站一半。复试时间数电可能要更多一点&#xff0c;也比信号难拿分。今年专业课难度很大&#xff0c;基本超过不少985学校&#xff0c;大家要重视。 有条件的同学建议…
阅读更多...
建筑施工二维码预制件管理系统

建筑施工二维码预制件管理系统

随着科学经济技术的发展&#xff0c;二维码标识设备越来越受人们的喜爱&#xff0c;不仅仅是在人们日常购物时需要使用到&#xff0c;在建筑用预制构件中使用也非常普遍&#xff0c;在这里二维码相当于预制构件的身份证&#xff0c;替代了传统标识牌。 1、信息管理。通过凡尔码…
阅读更多...
倾斜摄影三维模型的顶层合并构建重要性分析

倾斜摄影三维模型的顶层合并构建重要性分析

倾斜摄影三维模型的顶层合并构建重要性分析 倾斜摄影超大场景的三维模型的顶层合并对于构建精确、完整且真实的三维模型具有重要的意义和应用价值。本文将从几个方面对其重要性进行浅析。 一、模型完整性与连贯性 倾斜摄影超大场景的三维模型的顶层合并可以将多个倾斜摄影数据…
阅读更多...
Tesseract-OCR的安装与环境变量配置

Tesseract-OCR的安装与环境变量配置

网盘链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;gtp1 中文包网盘链接&#xff1a;小蓝枣的资源仓库&#xff0c;提取码&#xff1a;8v8u 安装步骤&#xff1a;解压后直接“NEXT”&#xff0c;“NEXT”注意选择自己的安装路径。 安装后查看是否安装成功&#…
阅读更多...
libcurl库的网页爬虫程序

libcurl库的网页爬虫程序

示例代码&#xff1a; #include <curl/curl.h> #include <iostream> ​ int main() {CURL *curl;CURLcode res; ​curl_global_init(CURL_GLOBAL_DEFAULT); ​curl curl_easy_init();if(curl) {curl_easy_setopt(curl, CURLOPT_URL, "/");curl_easy_se…
阅读更多...
成本预算管理系统

成本预算管理系统

成本预算管理系统 功能介绍&#xff1a; 一 基本信息&#xff1a; 1、产品设置&#xff1a;产品的长、宽、高及面积计算公式的设置。 2、板材设置&#xff1a;板材类别、厚度、尺寸的设置 3、系统名称&#xff1a;风管系统的类别设置 4、公司信息&#xff1a;本公司的信息…
阅读更多...
如何在Android设备上检查应用程序使用情况，包括使用时间

如何在Android设备上检查应用程序使用情况，包括使用时间

你可能不知道自己花了多少时间在手机上。很可能你一天中有一半的时间都在盯着手机屏幕。如果你怀疑这一事实，你会很快核实的。在这篇文章中，我们将向你介绍如何在Android设备上检查应用程序的使用情况。 如何在Android上检查应用程序电池使用情况 你使用时间最长的应用程序…
阅读更多...
为什么会被【禅道】工具的公司提出QQ群的反思…………

为什么会被【禅道】工具的公司提出QQ群的反思…………

周末备份Gitlab的代码库&#xff0c;把Gitlab更新到了最新的16.5。顺带看了禅道官网出了最新版本18.8。但是禅道的升级更新并不顺利…………。 先说一下为什么用禅道这个工具&#xff1a; 再使用禅道这个工具前&#xff0c;使用过的工具有QC(Quality Center)、jira&#xff0…
阅读更多...
【c++|opencv】二、灰度变换和空间滤波---3.均值滤波

【c++|opencv】二、灰度变换和空间滤波---3.均值滤波

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 均值滤波 1. 均值滤波 #include <iostream> #include <opencv2/opencv.hpp> #include"Salt.h"using namespace cv; using names…
阅读更多...
Jetpack Compose | State状态管理及界面刷新

Jetpack Compose | State状态管理及界面刷新

我们知道Jetpack Compose&#xff08;以下简称Compose&#xff09;中的 UI 可组合项是通过Composable 声明的函数来描述的&#xff0c;如&#xff1a; Composable fun Greeting() {Text(text "init",color Color.Red,modifier Modifier.fillMaxWidth()) }上面的代…
阅读更多...
重磅！GPT-4又进化了！画图、插件、代码等能力被整合，超级智能体来了

重磅！GPT-4又进化了！画图、插件、代码等能力被整合，超级智能体来了

夕小瑶科技说 原创 作者 | 小戏、ZenMoore 就在今天&#xff01;OpenAI 闷声放了一个大招&#xff01; 还没有官宣&#xff0c;还没有发布会&#xff0c;也没有大肆报道与关注。OpenAI 这次仅仅以灰度测试的方式&#xff0c;给部分用户发布了一个可以说“整合了几乎所有可用工…
阅读更多...
CentOS 安装 Hadoop Local (Standalone) Mode 单机模式

CentOS 安装 Hadoop Local (Standalone) Mode 单机模式

CentOS 安装 Hadoop Local (Standalone) Mode 单机模式 Hadoop Local (Standalone) Mode 单机模式 1. 修改yum源 并升级内核和软件 curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repoyum clean allyum makecacheyum -y update2. 安…
阅读更多...
极智嘉(Geek+)携数款创新方案亮相CeMAT展会，再度展现硬核实力

极智嘉(Geek+)携数款创新方案亮相CeMAT展会，再度展现硬核实力

近日&#xff0c;CeMAT ASIA 2023盛大召开&#xff0c;全球仓储机器人引领者极智嘉(Geek)携旗下数款创新方案亮相&#xff0c;再次向各界展示了其在前沿科技、产品打磨上的硬实力。 首先是货架到人PopPick方案搭配VSW自动播种墙 在传统货到人拣选作业中&#xff0c;拣选员约有…
阅读更多...
converted from warning

converted from warning

converted from warning 关注微信&#xff1a;生信小博士 本地或者其它服务器跑同样的代码是正常的&#xff0c;只是有警告&#xff0c;但是在西柚云服务器上面运行会报错&#xff1f; 这是由于您两个环境使用的包版本不一样导致的&#xff0c;有如下解决方法 或者之前只是告警…
阅读更多...
【23真题】知识点覆盖全！有罕见判断题！

【23真题】知识点覆盖全！有罕见判断题！

今天分享的是23年烟台大学833的信号与系统试题及解析。 本套试卷难度分析&#xff1a;本套试题内容难度中等偏下&#xff0c;题目难度不大&#xff0c;但是题量较多&#xff0c;考察的知识点全面&#xff0c;比较多的考察了对信号波形以及频谱图的画法&#xff0c;值得注意的是…
阅读更多...
路由vue-router

路由vue-router

文章目录 一、前端路由的概念与原理1、 什么是路由2、SPA 与前端路由3、什么是前端路由4、前端路由的工作方式5、实现简易的前端路由 二、vue-router 的基本用法1、 什么是 vue-router2、 vue-router 安装和配置的步骤&#xff08;1&#xff09;在项目中安装 vue-router&#x…
阅读更多...
Ceph入门到精通-恢复BlueStore中对象数据

Ceph入门到精通-恢复BlueStore中对象数据

1.基本原理介绍 1.1 ceph中的对象(object) 在Ceph存储中&#xff0c;一切数据最终都会以对象(Object)的形式存储在硬盘&#xff08;OSD&#xff09;上&#xff0c;每个的Object默认大小为4M。 通过rados命令&#xff0c;可以查看一个存储池中的所有object信息&#xff0c;例如…
阅读更多...
SPI、IIC信号隔离

SPI、IIC信号隔离

除了时钟信号SCK不用接上拉&#xff0c;其他信号都需要接10K上拉电阻到3.3V电源。 一、SPI信号隔离&#xff1a; 二、 IIC信号隔离
阅读更多...
用例设计需遵循哪些规范标准？

用例设计需遵循哪些规范标准？

不同的人因经验、方法、技巧不同&#xff0c;同样的用例编写质量差异大。 大家平时编写用例都有遵循哪些规范标准呢&#xff1f; 虽然是一名开发&#xff0c;但是我们做需求时也需要和测试一起进行用例评审&#xff0c;总结一下我们公司在进行用例设计时的标准。 我们公司要求用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023