当前位置:  编程技术>WEB前端
本页文章导读:
    ▪读书笔记之html标签的语义的意义——《编写高质量的代码:Web前端开发的修炼之道》        之前看过的几本关于html的书,都在强调标签,以及标签的属性、表示方法、使用方法,让我误解为其实html就是标签堆积起来的,同样也让我认为不使用样式时html页面是没有任何样式的,.........
    ▪javascript重复绑定事件造成的后果      最近在修改百度地图开源的东西,想把里面耦合在一起的代码给拆分出来。拆解之后,发现了一些坑爹的问题。逻辑上没有问题的情况下,该出现的效果没有出现。然后就以为是代码哪里写得.........
    ▪DataTable学习笔记--基础函数变量[1]             如果有人用过jquery,而且用jquery去写一些有关于数据表格的前台页面,那么想必应该用过datatable这款控件,当然还有一款dataGridview的控件,也挺不错的,我是因为帮老师做.........

[1]读书笔记之html标签的语义的意义——《编写高质量的代码:Web前端开发的修炼之道》
    来源:    发布时间: 2013-11-06

  之前看过的几本关于html的书,都在强调标签,以及标签的属性、表示方法、使用方法,让我误解为其实html就是标签堆积起来的,同样也让我认为不使用样式时html页面是没有任何样式的,今天看了这本《编写高质量的代码:Web前端开发的修炼之道》才知道,原来关于html中的标签远不是这么回事。

  书中,列举标签的方式也有别于其他参考书,它并没有解释该标签表示什么意思,而是列出了标签、标签的英文全拼和中文翻译,这样我们看了全拼或者中文翻译后就一目了然地知道了标签的作用。作者这样列出标签的目的意在告诉我们其实每一个html标签都是有实际意义的,看到这样的文章的时候我瞬间就觉得html并不是枯燥乏味没有深度的了,反而觉得生动了。

  自打出现CSS后,table布局渐渐少了。而这种现象的主要原因是因为table样式一方面,代码量大,结构混乱;另一方面,table样式里的标签语义不明确,对搜索引擎不友好。可是,虽然可以用CSS任意控制标签的,但是如果忽略标签的语义,CSS使用不当的话还是会走上table布局的老路。所以作者认为前端开发者正确的做法应该是:先确定html,确定语义的标签,再来选择合适的css。如此,即便遇到浏览器兼容问题,也不会降低网页的可读性。

  作者通过从仅仅实现到html/css的完美配合距离告诉我们考虑到了标签的语义,才能更好地发挥css的作用,另外,对于无语义的div和span标签只有当页面内标签无法满足设计需要时,才会适当加以添加无语义标签来辅助实现。书中的几个例子也为我们列举了我们在网页中会遇到的一些个主要内容。

  最后总结:这本书还是值得一看的啦O(∩_∩)O~~

本文链接


    
[2]javascript重复绑定事件造成的后果
    来源:    发布时间: 2013-11-06

最近在修改百度地图开源的东西,想把里面耦合在一起的代码给拆分出来。拆解之后,发现了一些坑爹的问题。逻辑上没有问题的情况下,该出现的效果没有出现。然后就以为是代码哪里写得不对了,就一直找啊找的。在调试的时候发现,相应的事件被执行了两遍。瞬间就明白了,肯定在哪个地方重复绑定了事件。果然,真心脑残的绑定了两次事件。

平时在写代码的时候,如果发现绑定的事件触发了两次,那就要查看是否是绑定了两次事件了。别傻傻的先去查看代码哪里处处了,或者怀疑别人的api有问题。

此文仅记录本人开发的时候遇到的问题。最近修改的百度地图开源的东西,将会在项目发布后呈现给大家。本人菜鸟一个,希望大家指点。

本文链接


    
[3]DataTable学习笔记--基础函数变量[1]
    来源:    发布时间: 2013-11-06

       如果有人用过jquery,而且用jquery去写一些有关于数据表格的前台页面,那么想必应该用过datatable这款控件,当然还有一款dataGridview的控件,也挺不错的,我是因为帮老师做一个项目,所以涉及到这个控件,当时就感觉挺强大的,我们用到了只是其中很少一部分功能,当初为了赶进度,也没有深入的去研究一下,那现在趁着刚开学课程很少,就花了点时间好好的研究了一些,接下来我应该会写几篇有关于datatable的学习笔记。

        因为国内资料很少,我也是下了官网的包,目前最新的DataTables-1.9.4,然后自己慢慢啃,都是英文,看得挺头疼的,我总结的也只是我认为重要的东西,最好的学习方法还是自己去DataTables-1.9.4\docs下看,如果有人也对这款控件有所研究,欢迎分享,如果我有地方说的不对也希望大家积极指正,反正就是一句话,大家一起学习进步。

        因为我是一边研究一边把一些重要的东西写在word上的,然后汇总分几篇发表的,所以格式什么的没太注意,可能大家会看得有点累,那进入正题:     

    DataTable下有四个命名空间(namespace),分别是defaults,ext,models,oApi。

        Defaults:主要是用于初始化表格的一些选项。

        Ext:extension object,提供额外的表格选项

        Models:类模型容器,These models define the objects that are used to hold the active state and configuration of the table

        oApi: 一些其他人开发的额外函数,Reference to internal functions for use by plug-in developers

        1个静态变量 version,3个静态方法:fnIsDataTable,fnTables,fnVersionCheck。

           22个方法:

$(sSelector, oOpts) → {object}

Perform a jQuery selector action on the table's TR elements

_(sSelector, oOpts) → {array}

Almost identical to $ in operation

fnAddData(mData, bRedraw) → {array}     bRedraw是个bool值

Add a single new row or multiple rows of data to the table

fnAdjustColumnSizing(bRedraw)

This function will make DataTables recalculate(重新计算) the column sizes

fnClearTable(bRedraw)

Quickly and simply clear a table

fnClose(nTr) → {int}

The exact opposite of 'opening' a row, this function will close any rows which are currently 'open'.

fnDeleteRow(mTarget, fnCallBack, bRedraw) → {array}

Remove a row for the table

fnDestroy(bRemove)

Completely remove the table from the DOM

fnDraw(bComplete)

Redraw the table

fnFilter(sInput, iColumn, bRegex, bSmart, bShowGlobal, bCaseInsensitive)

Filter the input based on data

fnGetData(mRow, iCol) → {array|object|string}

Get the data for the whole table, an individual row or an individual cell based on the provided parameters.

fnGetNodes(iRow) → {array|node}

Get an array of the TR nodes that are used in the table's body.

fnGetPosition(nNode) → {int}

Get the array indexes of a particular cell from it's DOM element and column index including hidden columns

fnIsOpen(nTr) → {boolean}

Check to see if a row is 'open' or not.

fnOpen(nTr, mHtml, sClass) → {node}

This function will place a new row directly after a row which is currently on display on the page, with the HTML contents that is passed into the function.

fnPageChange(mAction, bRedraw)

mAction   :string | int                     

Paging action to take: "first", "previous", "next" or "last" or page number to jump to (integer), note that page 0 is the first page.

Change the pagination - provides the internal logic for pagination in a simple API function

fnSetColumnVis(iCol, bShow, bRedraw)

Show a particular column

fnSettings() → {object}

Get the settings for a particular table for external manipulation

fnSort(iCol)

Sort the table by a particular column

fnSortListener(nNode, iColumn, fnCallback)

Attach a sort listener to an element for a given column

fnUpdate(mData, mRow, iColumn, bRedraw, bAction) → {int}

Update a table cell or row - this method will accept either a single value to update the cell with, an array of values with one element for each column or an object in the same format as the original data source.

fnVersionCheck(sVersion) → {boolean}

Provide a common method for plug-ins to check the version of DataTables being used, in order to ensure compatibility.

                           11个事件:

destroy

Destroy event, fired when the DataTable is destroyed by calling fnDestroy or passing the bDestroy:true parameter in the initialisation object.

draw

Draw event, fired whenever the table is redrawn on the page, at the same point as fnDrawCallback

filter

Filter event, fired when the filtering applied to the table (using the build in global global filter, or column filters) is altered.

init

DataTables initialisation complete event, fired when the table is fully drawn, including Ajax data loaded, if Ajax data is required.

page

Page change event, fired when the paging of the table is altered.

processing

Processing event, fired when DataTables is doing some kind of processing (be it, sort, filter or anything else).

sort

Sort event, fired when the sorting applied to the table is altered

stateLoaded

State loaded event, fired when state has been loaded from stored data and the settings object has been modified by the loaded data.

stateLoadParams

State load event, fired when the table is loading state from the stored data, but prior to the settings object being modified by the saved state - allowing modification of the saved state is required or loading of state for a plug-in

stateSaveParams

State save event, fired when the table has changed state a new state save is required.

xhr

Ajax (XHR) event, fired whenever an Ajax request is completed from a request to made to the server for new data

    &n

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3