[JavaScript知识库]js-day17项目笔记

项目笔记

网站逻辑: 从哪里来 就到哪里去

首页点击登录 登陆后返回首页

列表点击登录 登陆后返回列表页

解决:

在跳转页面的时候 增加页面标识符 作用标志上一个页面是谁

使用哈希值

#1 首页

#2 列表

#3 视频详情

#4 视频播放

#5 登录

#6 注册

数据渲染

\1. 数据渲染

请求数据

\2. 将页面组成部分注释

小单元被备注

\3. 根据数据生成html片段 渲染到父元素中

具体渲染过程

1. 获取元素

   var ban_ul = document.querySelector('.banner ul');

   var ban_p = document.querySelector('.banner p');

2. 生成页面片段 使用字符串保留页面片段 最后在渲染

   var ulstr = '', pstr = '';

   // 将 bannerData 数组中的每一个数据生成li

   for(var i = 0; i < bannerData.length; i++){

   // console.log(bannerData[i]);

   // 一个li所有的内容

   ulstr += '<li></li>';

   pstr += '?<i class="iconfont icon-left"></i>?' + bannerData[i].title + '';

   }

3. 赋值到父元素

   ban_ul.innerHTML = ulstr;

   ban_p.innerHTML = pstr;

4. 初始化页面: 给默认要显示的元素添加类名

   var ban_lis = document.querySelectorAll('.banner li');

   var ban_spans = document.querySelectorAll('.banner span');

   // console.log(ban_lis, ban_spans);

   // 给第一个子元素添加类名

   ban_lis[0].className = 'active';

   ban_spans[0].className = 'active';

localStorage: 电脑内存

只能存储字符串 如果存储复杂数据类型 默认转换成字符串之后 在做存储

只要不手动清除 数据就一直存在

数组包对象 ? 单纯对象 ? 前后端数据交互的时候进行使用 1. 将json格式的字符串转成js数据: JSON.parse(数据); 2. 将js数据转成json格式的字符串 JSON.stringify(数据);

 <script>
 ? ? ? ? ? ?console.log(localStorage); // 对象
 ? ? ? ? ? ?// 存储
 ? ? ? ? ? ?// localStorage.属性名 = 属性值;
 ? ? ? ? ? ?localStorage.firstName = '迪丽';
 ? ? ? ? ? ?
 ? ? ? ? ? ?// localStorage.setItem(属性名, 属性值);
 ? ? ? ? ? ?localStorage.lastName = '热巴';
 ? ? ? ? ? ?console.log(localStorage);
?
 ? ? ? ? ? ?// 取值
 ? ? ? ? ? ?// . [] localStorage.属性名  localStorage['属性名']
 ? ? ? ? ? ?console.log(localStorage.firstName);
 ? ? ? ? ? ?console.log(localStorage['lastName']);
?
 ? ? ? ? ? ?// localStorage.getItem('属性名');
 ? ? ? ? ? ?console.log(localStorage.getItem('firstName'));
?
?
 ? ? ? ? ? ?// 清除
 ? ? ? ? ? ?// 设置成空字符串
 ? ? ? ? ? ?localStorage.firstName = '';
?
 ? ? ? ? ? ?// 删除: localStorage.removeItem('属性名');
 ? ? ? ? ? ?localStorage.removeItem('lastName');
?
 ? ? ? ? ? ?// 批量清空 
 ? ? ? ? ? ?localStorage.clear();
?
 ? ? ? ? ? ?console.log(localStorage);
?
?
?
 ? ? ? ? ? ?/* 
 ? ? ? ? ? ? ?  数组包对象
 ? ? ? ? ? ? ?  单纯对象
 ? ? ? ? ? ? ?  前后端数据交互的时候进行使用
 ? ? ? ? ? ? ?  1. 将json格式的字符串转成js数据:
 ? ? ? ? ? ? ? ? ?  JSON.parse(数据);
 ? ? ? ? ? ? ?  2. 将js数据转成json格式的字符串
 ? ? ? ? ? ? ? ? ?  JSON.stringify(数据);
 ? ? ? ? ?  */
 ? ? ? ? ? ?var data = [{
 ? ? ? ? ? ? ? ?name: '李四',
 ? ? ? ? ? ? ? ?age: 33,
 ? ? ? ? ? ? ? ?tip: '提示'
 ? ? ? ? ?  },{
 ? ? ? ? ? ? ? ?name: '李四1',
 ? ? ? ? ? ? ? ?age: 33,
 ? ? ? ? ? ? ? ?tip: '提示'
 ? ? ? ? ?  },{
 ? ? ? ? ? ? ? ?name: '李四2',
 ? ? ? ? ? ? ? ?age: 33,
 ? ? ? ? ? ? ? ?tip: '提示'
 ? ? ? ? ?  }];
 ? ? ? ? ? ?localStorage.list = JSON.stringify(data);
 ? ? ? ? ? ?console.log(localStorage);
?
 ? ? ? ? ? ?var d = localStorage.list;
 ? ? ? ? ? ?console.log(d);
 ? ? ? ? ? ?console.log(JSON.parse(d));
 ? ? ? ?</script>

版心

html大致格式为
 ?  <header>
 ? ? ?  <div class="main">
 ? ? ?  </div>
 ?  </header>
 ?  <main>
 ? ? ?  <div class="main">
 ? ? ?  </div>
 ?  </main>
 ?  <footer>
 ? ? ?  <div class="main"></div>
 ?  </footer>
?
?

css代码使用通配符选择器 选中所有名字为mian的div;
* div.main {
 ?width: 1180px;
 ?margin: 0 auto;
 ?overflow: hidden;
}