2016年第2周读书笔记与工作笔记 scrollIntoView()与datalist元素

 

这一周主要是看了html5网页开发实例与javascript 高级程序设计，供以后翻阅查找。 

 

html5网页开发实例第1章与第二章的2.1部分：

 

第1章内容：

html5在w3c的发展史、

浏览器的兼容问题、

搭建开发h5的浏览器环境、

h5在移动应用开发领域的前景

我主要看了【搭建开发h5的浏览器环境】， 因为工作中主要的用来调试代码的工具是chrome，而这篇文章也在讲解这款浏览器强大的开发工具，讲解了chrome提供的8大组工具：

Elements:  这个工具主要是用于查看chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果，我通常用来调试CSS样式；

Network:   可以看到页面向服务器请求了哪些资源，花了多少时间以及资源大小，是否请求成功，请求成功后的返回值；

Sources：    几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。我主要是使用断点功能来调试JS的报错问题，可以使用一些快捷键：

• 快速确定某一行：ctrl+G;
• 快速查找文本：ctrl+F;
• JS的路径一步步走下去的话，不过这个快捷健不会跳进函数内部，按  F10;
• 如果一个函数包含着另一个函数的话，可以按  F11  进入函数包去查看代码，也可以点击图标对代码进行跟踪;

Watch :    它的作用是为目前断点添加表达式，我主要用来查找断点中是否有值。需要注意的是这个功能必须谨慎使用，因为这可能会导致你写下的监控代码段会不断地被执行，所以要把调试后的代码要删除。

 

第2章 2.1内容：

最新的交互元素、

页面结构、

其它标签元素

 

我主要了解在【其它标签元素】中的datalist元素，它与input元素配合使用，文本框使用datalist的数据进行提示时，将input的list属性设置为指向datalist的id属性，当用户在文本框中输入“南”时，则在输入框的下方自动出现补全提示，效果如，百度的搜索框。

<input list = 'province' />
<datalist id = 'province'>
　　<option value='背景'>
　　<option value='南湖社区'>
　　<option value='上海市'>
</datalist>

　　mark   元素用于标记文本，比如高亮显示，和span用法相似：<mark>南湖社区</mark>

      video  元素，视频元素，在网页中加入一段视频：  <video src='视频地址' controls='controls' preload='preload'></video>

     controls    是否显示vidio的默认控件，如前进、停止、声音控制等；

      preload    页面加载时自动进行视频加载；

 

 

    javascript 高级程序设计  第11章  第12章

    第11章  DOM扩展  内容

    selector()方法、

    html5 数据属性 焦点方法、

    专有扩展 滚动

 

     我主要了解了selector()方法与滚动。

     selector()方法  调用它时，会在文档元素中查找匹配的元素，而通过Element调用queryselector()方法时，只会在该元素的后代查找匹配的元素。这个匹配的元素是一个CSS选择符。

      selector()方法属于selectorAPI，它让开发人员能够基于css选择器从Dom中取得元素。

     

//取得类为btn的所有的元素

var btns = document.querySelectorAll('btn');

//取得类为btn的第一个元素

var btns = document.querySelector('.btn');

 

　　比较详细的了解滚动scrollIntoView()，是因为最近在做手机端报表，图表大于2个，就会产生滚动效果。需要注意的是：scrollIntoView() 、 scrollIntoViewIfNeeded()是作用于对象元素的容器，而scrollByLines() 、 scrollByPages()是作用于元素本身。

而上面的这四种方法中，只有scrollIntoView()是唯一一个所有浏览器都支持的方法，也是最常用的方法。

 

     DOM的滚动  scrollIntoView() 

     DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器为了实现相应的效果，作为ElementHTML扩展的存在，定义了如下的方法：

 

•      scrollIntoView()    滚动浏览器容器或容器，以方便在当前容器的可见区域内看见该元素，参数为alignWithTop，如果alignWithTop结果为true或者省略它，元素本身会尽可能的滚动到与容器顶部齐平的位置；
•      scrollByLines(lineCount)      将元素内容滚动到指定的行数的高度，lineCount的值可以为正值或是负值。大部分浏览器不支持，不过chrome是支持的；
•      scrollByPages(pageCount)      将元素滚动到指定的页面高度，具体的高度由元素的高度决定；

 

    第12章  DOM2和DOM3  内容

   

    DOM2和DOM3的变化、

    操作样式的DOM API、

    DOM的遍历与范围

 

    这节的内容大概的浏览了一下，文章的内容在理解上有点困难，总结为DOM2定义了一些模块，是为了增加DOM1，DOM2的核心内容与HTML文档没有实际的意义；DOM2的样式模块主要针对操作元素的样式信息而开发，总结为：

•     每个样式都有一个关联的style对象，用于修改行内样式
•     要确定每个元素的计算样式，可以使用getComputedStyle()方法，但是IE不支持
•     可以通过document.styleSheets集合访问样式表

 

 

    这里是这个周的工作笔记：

这个周主要工作内容是手机端报表的制作与修改,实现日期与数据的联动效果，代码与效果参考：