2024年前端最新实战：京东购物车静态界面实现(1)，Web前端面试题高级

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

function delete_shop(span) {

if (confirm(“确认删除吗!”)) {

if (span.parents()[2].children.length === 2) {

span.parents()[2].remove()

} else {

span.parents()[1].remove()

}

}

}

function add_shop(tag) {

let $shop_li = $(“#shops_li”)

let parents = tag.parents()

let res = parents[2].children[1];

let insertHtml = `

<img src=${parents[2].children[0].children[0].src}

alt=“”

style=“height:80px;width:80px”>

${res.children[0].children[0].textContent}

0.3mg*10片

${res.children[1].children[0].textContent}

-

1

+

${res.children[1].children[0].textContent}

<span οnclick=“delete_shop($(this))”>删除

移入关注

`

if ($shop_li.length !== 0) {

$shop_li.append(insertHtml)

} else {

insertHtml = `

• 京东自营

  ${insertHtml}

  `

  console.log(insertHtml);

  $(“#shops_ul”).append(insertHtml)

  }

  }

  /----------头部样式----------/

  header {

  width: 100%;

  height: 25px;

  line-height: 25px;

  background: #e3e4e5;

  border-bottom: solid 1px #ddd;

  }

  header .header_nav {

  /background-color: red;/

  height: 100%;

  font-size: 8px;

  color: #999999;

  position: relative;

  }

  header ul {

  display: flex;

  }

  header ul.left {

  position: absolute;

  left: 0;

  }

  header ul.right {

  position: absolute;

  right: 0;

  }

  header ul li {

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 8px;

  }

  header ul li.home {

  cursor: pointer;

  }

  header ul li.home:hover {

  color: red;

  }

  header .down {

  margin-left: 5px;

  font-size: 14px;

  border-right: 1px solid #ccc;

  margin-right: 5px;

  }

  header .down_none {

  border-right: none

  }

  header .right_span {

  cursor: pointer;

  }

  header .right_span:hover {

  color: red;

  }

  /----------主体样式----------/

  article .article_top {

  height: 90px;

  /background-color: red;/

  display: flex;

  align-items: center;

  position: relative;

  }

  article .logo {

  display: block;

  margin-top: 2px;

  width: 134px;

  height: 42px;

  background: url(//misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png) no-repeat 0 0;

  background-size: 134px 42px;

  text-indent: -20000px;

  }

  article .search {

  background: #c91623;

  height: 24px;

  overflow: hidden;

  position: absolute;

  right: 0;

  display: flex;

  align-items: center;

  }

  article .search .itxt {

  border: 1px solid #c91623;

  height: 22px;

  line-height: 18px;

  width: 260px;

  outline: none

  }

  article .search .button {

  display: inline-block;

  vertical-align: top;

  width: 48px;

  height: 24px;

  background: #c91623;

  text-align: center;

  color: #fff;

  font-weight: 700;

  font-size: 12px;

  cursor: pointer;

  }

  article .article_position {

  margin-top: 10px;

  font-size: 13px;

  position: relative;

  height: 30px;

  display: flex;

  align-items: center;

  }

  article .article_position .left {

  color: #e2231a;

  font-weight: bold;

  position: absolute;

  left: 0;

  }

  article .article_position .right {

  display: flex;

  align-items: center;

  position: absolute;

  right: 0;

  }

  article .article_position .right .po {

  border: 1px solid #CECBCE;

  margin-left: 5px;

  padding: 1px;

  }

  article .article_show_info {

  margin-top: 20px;

  position: relative;

  background-color: #F3F3F3;

  height: 40px;

  display: flex;

  align-items: center;

  font-size: 12px;

  }

  article .article_show_info .info_select_all {

  padding-left: 10px;

  flex: 2;

  }

  article .article_show_info .info_goods {

  padding-left: 20px;

  flex: 12;

  }

  article .article_show_info .info_price {

  flex: 2.5;

  }

  article .article_show_info .info_count {

  flex: 3;

  }

  article .article_show_info .info_sum {

  flex: 2;

  }

  article .article_show_info .info_operate {

  flex: 2.5;

  }

  article .article_cart {

  height: 100%;

  font-size: 12px;

  }

  article .article_cart li .article_cart_top {

  display: flex;

  padding: 10px 0 5px 10px;

  box-shadow: 0 1px 5px #888888;

  margin-top: 10px;

  }

  article .article_cart li .article_cart_top span {

  margin-left: 10px;

  background-color: #DA0012;

  color: #Fff;

  padding: 1px;

  border-radius: 3px;

  }

  article .article_cart li .article_cart_content {

  height: 100px;

  display: flex;

  padding: 0 30px 0 10px;

  border: 1px solid #c5c5c5;

  }

  article .article_cart li .article_cart_content .article_cart_checkbox {

  width: 20px;

  padding-top: 5px;

  }

  article .article_cart li .article_cart_content .article_cart_goods {

  width: 300px;

  display: flex

  }

  article .article_cart li .article_cart_content .article_cart_goods .goods_img {

  padding: 0;

  margin-top: 3px;

  }

  article .article_cart li .article_cart_content .article_cart_goods .goods_msg {

  padding: 10px 0 0 20px;

  cursor: pointer;

  }

  article .article_cart li .article_cart_content .article_cart_goods .goods_msg:hover {

  color: red;

  }

  article .article_cart li .article_cart_content .article_cart_txt {

  padding-top: 10px;

  margin-left: 40px;

  }

  article .article_cart li .article_cart_content .article_cart_price {

  padding-top: 10px;

  margin-left: 140px;

  }

  article .article_cart li .article_cart_content .article_cart_count {

  display: flex;

  width: 80px;

  padding-top: 10px;

  margin-left: 50px;

  }

  article .article_cart li .article_cart_content .article_cart_count button {

  height: 16px;

  width: 16px;

  display: flex;

  align-content: center;

  justify-content: center;

  border: 1px solid #cbcbcb;

  }

  article .article_cart li .article_cart_content .article_cart_count button.left {

  line-height: 11px;

  }

  article .article_cart li .article_cart_content .article_cart_count div {

  width: 30px;

  height: 14px;

  font-size: 10px;

  display: flex;

  justify-content: center;

  border: 1px solid #cbcbcb;

  }

  article .article_cart li .article_cart_content .article_cart_sum {

  padding-top: 10px;

  margin-left: 50px;

  font-weight: bold;

  }

  article .article_cart li .article_cart_content .article_cart_operate {

  padding-top: 10px;

  margin-left: 45px;

  display: flex;

  flex-direction: column;

  }

  article .article_cart li .article_cart_content .article_cart_operate span {

  cursor: pointer;

  margin-bottom: 5px;

  }

  article .article_cart li .article_cart_content .article_cart_operate span:hover {

  color: red

  }

  article .article_settle {

  box-sizing: content-box;

  margin-top: 30px;

  height: 50px;

  border: 1px solid #c5c5c5;

  font-size: 12px;

  position: relative;

  }

  article .article_settle .settle_left {

  position: absolute;

  left: 0;

  height: 100%;

  display: flex;

  align-items: center;

  }

  article .article_settle .settle_left .article_cart_checkbox {

  margin-left: 10px;

  }

  article .article_settle span {

  margin-left: 15px;

  cursor: pointer;

  }

  article .article_settle span:hover {

  color: red;

  }

  article .article_settle .settle_right {

  position: absolute;

  right: 0;

  display: flex;

  }

  article .article_settle .settle_right .settle_right_select {

  color: #9c9698;

  cursor: pointer;

  position: absolute;

  right: 200px;

  width: 100px;

  margin-top: 3px;

  }

  article .article_settle .settle_right .settle_right_select span {

  padding: 0 1px;

  margin: 0;

  color: #E64347;

  font-weight: bold;

  }

  article .article_settle .settle_right .settle_right_price {

  color: #9c9698;

  margin-left: 20px;

  position: absolute;

  right: 80px;

  width: 100px;

  margin-top: 3px;

  }

  article .article_settle .settle_right .settle_right_price span {

  padding: 0 1px;

  margin: 0;

  color: #E64347;

  font-weight: bold;

  }

  article .article_settle .settle_right .settle {

  height: 52px;

  background-color: #E64347;

  position: absolute;

  right: 0;

  width: 90px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  font-weight: bold;

  font-size: 18px;

  cursor: pointer;

  margin-top: -1px;

  }

  article .article_recommend {

  height: 100%;

  /background-color: red;/

  }

  article .article_recommend .recommend_top {

  margin: 10px 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  }

  article .article_recommend .recommend_top div:first-child {

  margin: 5px 0 3px 0;

  }

  article .article_recommend .recommend_top div:first-child .line {

  color: #f1f1f1;

  }

  article .article_recommend .recommend_top div:first-child .content {

  font-weight: bold;

  font-size: 14px;

  }

  article .article_recommend .recommend_top div:first-child .content i {

  font-size: 18px;

  color: #E64347;

  }

  article .article_recommend .recommend_top div:last-child {

  margin-top: 5px;

  font-size: 12px;

  Vue 面试题

  1.Vue 双向绑定原理
  2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
  3.你是如何理解 Vue 的响应式系统的?
  4.虚拟 DOM 实现原理
  5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
  6.Vue 中 key 值的作用？
  7.Vue 的生命周期
  8.Vue 组件间通信有哪些方式?
  9.watch、methods 和 computed 的区别?
  10.vue 中怎么重置 data?
  11.组件中写 name 选项有什么作用？
  12.vue-router 有哪些钩子函数?
  13.route 和 router 的区别是什么？
  14.说一下 Vue 和 React 的认识，做一个简单的对比
  15.Vue 的 nextTick 的原理是什么？
  16.Vuex 有哪几种属性?
  17.vue 首屏加载优化
  18.Vue 3.0 有没有过了解？
  19.vue-cli 替我们做了哪些工作？
  …
  

  算法

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  1. 冒泡排序
  2. 选择排序
  3. 快速排序
  4. 二叉树查找: 最大值、最小值、固定值
  5. 二叉树遍历
  6. 二叉树的最大深度
  7. 给予链表中的任一节点，把它删除掉
  8. 链表倒叙
  9. 如何判断一个单链表有环
  10. 给定一个有序数组，找出两个数相加为一个目标数
      …
      

  由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

  7;

  }

  article .article_recommend .recommend_top div:last-child {

  margin-top: 5px;

  font-size: 12px;

  Vue 面试题

  1.Vue 双向绑定原理
  2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
  3.你是如何理解 Vue 的响应式系统的?
  4.虚拟 DOM 实现原理
  5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
  6.Vue 中 key 值的作用？
  7.Vue 的生命周期
  8.Vue 组件间通信有哪些方式?
  9.watch、methods 和 computed 的区别?
  10.vue 中怎么重置 data?
  11.组件中写 name 选项有什么作用？
  12.vue-router 有哪些钩子函数?
  13.route 和 router 的区别是什么？
  14.说一下 Vue 和 React 的认识，做一个简单的对比
  15.Vue 的 nextTick 的原理是什么？
  16.Vuex 有哪几种属性?
  17.vue 首屏加载优化
  18.Vue 3.0 有没有过了解？
  19.vue-cli 替我们做了哪些工作？
  …
  [外链图片转存中…(img-cNA66v6Q-1715616536652)]

  算法

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  1. 冒泡排序
  2. 选择排序
  3. 快速排序
  4. 二叉树查找: 最大值、最小值、固定值
  5. 二叉树遍历
  6. 二叉树的最大深度
  7. 给予链表中的任一节点，把它删除掉
  8. 链表倒叙
  9. 如何判断一个单链表有环
  10. 给定一个有序数组，找出两个数相加为一个目标数
      …
      [外链图片转存中…(img-912B5RDZ-1715616536653)]

  由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666