你的位置:首页 > Java教程

[Java教程]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集合访问样式表

 

 

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

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