Ajax学习笔记第4天

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

【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.mfbz.cn/a/110544.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2023最新版本 FreeRTOS教程 -1-标准库移植FreeRTOS

2023最新版本 FreeRTOS教程 -1-标准库移植FreeRTOS

源码下载 官网下载驱动 点击直达 源码剪裁 剪裁之后的图片,找我免费获取 添加进MDK 配置滴答定时器 全部工程获取 查看下方头像
阅读更多...
微服务框架SpringcloudAlibaba+Nacos集成RabbiMQ

微服务框架SpringcloudAlibaba+Nacos集成RabbiMQ

目前公司使用jeepluscloud版本&#xff0c;这个版本没有集成消息队列&#xff0c;这里记录一下&#xff0c;集成的过程&#xff1b;这个框架跟ruoyi的那个微服务版本结构一模一样&#xff0c;所以也可以快速上手。 1.项目结构图&#xff1a; 配置类的东西做成一个公共的模块 …
阅读更多...
省市区三级联动查询redis（通过python脚本导入数据）

省市区三级联动查询redis（通过python脚本导入数据）

最近工作有一个工作需求是实现省市区联动&#xff0c;点击省下拉框&#xff0c;选中一个省&#xff0c;然后再选市&#xff0c;最后选区&#xff0c;当然最重要的首先自然是数据了&#xff0c;没数据怎么测试接口&#xff0c;我数据是在 https://hxkj.vip/demo/echartsMap/ 这里…
阅读更多...
小程序request请求封装

小程序request请求封装

以上为本人的项目目录 1.首先在utils中创建request.js文件封装request请求&#xff0c;此封装带上了token&#xff0c;每次请求都会自带token&#xff0c;需要你从后端获取后利用wx.setStorageSync(token,返回的token),不使用的话就是空。 直接复制即可&#xff0c;需要改一下…
阅读更多...
关于 MapboxGL 在 Vue 中的简单使用

关于 MapboxGL 在 Vue 中的简单使用

前言问题 关于我为什么使用了 在线的 js引入方法&#xff0c;而不是使用 npm 直接下载依赖问题&#xff0c;之前有一篇文章讲过原因&#xff1a;关于 Vue-iClient-MapboxGL 的使用注意事项 网上提供的 vue-iclient-mapboxgl 比较多&#xff0c;但是我这里使用的是 iclient-su…
阅读更多...
视频剪辑达人教您：如何运用嵌套合并技巧制作固定片尾

视频剪辑达人教您：如何运用嵌套合并技巧制作固定片尾

在视频剪辑的过程中&#xff0c;嵌套合并技巧是一种非常实用的技术&#xff0c;可以帮助您将多个素材叠加在一起&#xff0c;制作出更加丰富多彩的视频。本文将由视频剪辑达人为您详细介绍如何运用云炫AI智剪嵌套合并技巧制作固定片尾&#xff0c;让您的视频剪辑水平更上一层楼…
阅读更多...
【Apache Flink】Flink DataStream API的基本使用

【Apache Flink】Flink DataStream API的基本使用

Flink DataStream API的基本使用 文章目录 前言1. 基本使用方法2. 核心示例代码3. 完成工程代码pom.xmlWordCountExample测试验证 4. Stream 执行环境5. 参考文档 前言 Flink DataStream API主要用于处理无界和有界数据流 。 无界数据流是一个持续生成数据的数据源&#xff0…
阅读更多...
vue引入字体

vue引入字体

假定已经下了字体包 1、在src/assets文件夹下新建一个font文件夹&#xff0c;放入字体文件与配置文件 这个与两个字体&#xff0c;优设标题黑和DIN字体&#xff0c;font.css用于给字体取名&#xff0c;将字体引入网站。 font-face { font-family: YouSheBiaoTiHei; src: url(…
阅读更多...
美术如何创建 skybox 贴图资源？

美术如何创建 skybox 贴图资源？

文章目录 目的PS手绘Panorama To CubemapPS手绘Pano2VRSkybox & Cubemap Tutorial (Maya & Photoshop)Unity 中使用 ReflectionProbe 生成 Cubemap 然后再 PS 调整PS直接手绘 cubemapBlender 导入 Panorama&#xff0c;然后烘焙到 cubemap&#xff0c;再导入unity中使用…
阅读更多...
动态表单生成Demo(Vue+elment)

动态表单生成Demo(Vue+elment)

摘要&#xff1a;本文将介绍如何使用vue和elment ui组件库实现一个简单的动态表单生成的Demo。主要涉及两个.vue文件的书写&#xff0c;一个是动态表单生成的组件文件&#xff0c;一个是使用该动态表单生成的组件。 1.动态表单生成组件 这里仅集成了输入框、选择框、日期框三种…
阅读更多...
字符集详解

字符集详解

常见字符集介绍 字符集基础知识&#xff1a; 计算机底层不可以直接存储字符的。 计算机中底层只能存储二进制(0、1) 。 二进制是可以转换成十进制的。 结论&#xff1a;计算机底层可以表示成十进制编号。计算机可以给人类字符进行编号存储&#xff0c;这套编号规则就是字符…
阅读更多...
国内内卷太严重，还不考虑一下在海外接单？那这几个平台你知道吗？

国内内卷太严重，还不考虑一下在海外接单？那这几个平台你知道吗？

作为一个程序员&#xff0c;在平台上接单赚点外快是再正常不过的事情了&#xff0c;但是现今国内各个平台都内卷比较严重&#xff0c;你是否考虑过去“外面的世界”看看&#xff1f; 如果想过&#xff0c;那么这几个外国的接单平台你都知道吗&#xff1f; 接下来就和我一起来看…
阅读更多...
超实用的企业防范数据泄露小技巧！

超实用的企业防范数据泄露小技巧！

超实用的企业防范数据泄露小技巧&#xff01; 小技巧1、加强员工培训&#xff0c;提高防范思想 及时向员工传达有关安全信息&#xff0c;加强员工意识、认识和执行安全措施&#xff0c;以防止数据泄露发生。 小技巧2、建立安全政策&#xff0c;明确处理流程 企业应该建立安…
阅读更多...
Tower for Mac—Git客户端 支持M1

Tower for Mac—Git客户端 支持M1

Tower是一款Mac OS X系统上的Git客户端软件&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助用户更加方便地管理和使用Git版本控制系统。以下是Tower的一些特点&#xff1a; 1. 界面友好&#xff1a;Tower的界面友好&#xff0c;使用户能够轻松地掌握软件的使用方法。 …
阅读更多...
MySQL扩展语句和约束方式

MySQL扩展语句和约束方式

一、扩展语句 复制&#xff0c;通过like这个语法直接复制bbb的表结构。只是复制表结构&#xff0c;不能复制表里面的数据 把bbb表里面的数据&#xff0c;复制到test&#xff0c;两个表数据结构要一致 创建一张表&#xff0c;test1,数据从bbb来&#xff0c;表结构也是bbb delete…
阅读更多...
数据库深入浅出，数据库介绍，SQL介绍，DDL、DML、DQL、TCL介绍

数据库深入浅出，数据库介绍，SQL介绍，DDL、DML、DQL、TCL介绍

一、基础知识&#xff1a; 1.数据库基础知识 数据(Data)&#xff1a;文本信息(字母、数字、符号等)、音频、视频、图片等&#xff1b; 数据库(DataBase)&#xff1a;存储数据的仓库&#xff0c;本质文件&#xff0c;以文件的形式将数据保存到电脑磁盘中 数据库管理系统(DBMS)&…
阅读更多...
csapp datalab

csapp datalab

知识点总结 1. 逻辑运算符关系 and&#xff08;与&#xff09;、or&#xff08;或&#xff09;和xor&#xff08;异或&#xff09;是逻辑运算符&#xff0c;用于对布尔值进行操作。它们可以在不同的逻辑表达式之间进行转换。下面是and、or和xor之间的转换规则&#xff1a; a…
阅读更多...
网络协议--TCP的未来和性能

网络协议--TCP的未来和性能

24.1 引言 TCP已经在从1200 b/s的拨号SLIP链路到以太数据链路上运行了许多年。在80年代和90年代初期&#xff0c;以太网是运行TCP/IP最主要的数据链路方式。虽然TCP在比以太网速率高的环境&#xff08;如T2电话线、FDDI及千兆比网络&#xff09;中也能够正确运行&#xff0c;但…
阅读更多...
AcWing第 127 场周赛 - AcWing 5283. 牛棚入住+AcWing 5284. 构造矩阵 - 模拟+快速幂+数学

AcWing第 127 场周赛 - AcWing 5283. 牛棚入住+AcWing 5284. 构造矩阵 - 模拟+快速幂+数学

AcWing 5283. 牛棚入住 题目数据范围不大&#xff0c;直接暴力模拟即可 按照题目所说的意思即可。 #include <math.h> #include <stdio.h> #include <algorithm> #include <cstring> #include <iostream> using namespace std; const int N 1…
阅读更多...
Spring Cloud之ElasticSearch的学习【详细】

Spring Cloud之ElasticSearch的学习【详细】

目录 ElasticSearch 正向索引与倒排索引 数据库与elasticsearch概念对比 安装ES、Kibana与分词器 分词器作用 自定义字典 拓展词库 禁用词库 索引库操作 Mapping属性 创建索引库 查询索引库 删除索引库 修改索引库 文档操作 新增文档 查找文档 修改文档 全量…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站