JS DOM编程艺术笔记

(1.第四章P58 展示效果有疑问,为什么是这样子的?是不是涉及到浮动与清除的问题?

2.如何分离javascript代码,就不用使用onclick等内嵌事件处理函数了,做到“平稳退化”

    if(某个元素=xxx){

    xxx.onclick=function(){}

}


例1:JS代码与HTML文档分离

3.HTML文档全部加载完毕时将触发一个window.onload函数,例1中使用这个函数可以保证所有的标签都被遍历到,防止文档还不完整时脚本就开始加载。

4.对象检测,检查浏览器是否支持某个方法


例2.对象检测

5.性能优化

    5.1尽量少访问DOM和尽量减少标记,例如重复搜索整个DOM树查找某个匹配元素,可以先查找一次,将其保存在某个变量中,然后循环重用该结果。

    5.2合并和放置脚本。

    5.3压缩脚本,精简副本的文件名最好加上min字样,例scriptName.min.js。

6.共享onload的两种解决方案


例3.共享onload事件

7.动态创建标记,creatElement,appendChild,creatTextNode方法  

creatElement方法创建元素节点

appendChild方法插入文档节点树

creatTextNode方法将文本放入元素中

insertBefore将一个新元素插入到一个现有元素的前面。insertBefore(newElement,targetElement)


例4.创建标记

DOM本身没有提供insertAfter,但是可以利用已有的insertBefore和其他方法来编写insertAfter函数(功能:把一个节点插入到另一个节点之后)


例5.编写insertAfter函数

8.CSS-DOM

    8.1当我们在JS中引用一个中间带减号的CSS属性时,DOM要求我们用驼峰命名法,简单的直接加减号进去会      报错。


例6.带减号的CSS-DOM使用方式

    8.2CSS-DOM无法处理外部样式表中声明的样式,只能处理包含在HTML代码中用style属性声明的样式。但是可以通过JS来更新覆盖原来的样式。

9.用Javascript实现动画效果

    9.1parseInt可以把字符串里的数值信息提取出来。例:parseInt("39 steps"),返回数值39。  

    9.2js中使用‘+’号作为连接符。在JS中字符型常量使用引号,不加引号的为变量。

    9.3CSS的overflow属性用来处理一个元素的尺寸超出其容器尺寸的情况。还可以通过overflow属性告诉浏览器是否需要显示滚动条。

    9.4Math.ceil(number) 这将把浮点数Number向“大于”方向舍入为与之最接近的整数;

         Math.floor(number) 这将把浮点数向“小于”方向舍入为与之最接近的整数;

         Math.round(number) 这将把任意浮点数舍入为与之最接近的整数;

10.HTML5

    10.1canvas

    10.2video

    ①video如果想要创建自定义控件,记得在<video>元素中添加control属性

    例:<video src="movie.ogv" control> 

    ②addEventListener(type,function,boolean)第三参数是一个布尔值,如果是true表示在捕获阶段调用,如果是false表示在冒泡阶段调用。

    问题:video例子中最后按钮没办法点击

    10.3表单

      ①如果没有使用Modernizr,可以使用以下JS函数来检查

          如果使用Modernizr,例如:If(!inputSupportsType('date')){//生成日期选择器的脚本}

表单函数1


表单函数2

11.综合示例

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容