dom编程艺术一些笔记

注意点阶段1、脚本只有类定义首字母大写,其他都小写,单词之间用下划线隔开,函数命名以fun_为前缀,全局变量,首字符:_开头

书本上的:

1.在命名变量时,用下划线分隔各个单词,在命名函数时,从第二个单词开始把每个单词的第一个字母写成大写形式。(驼峰命名规则)
2.变量区分大小写
3.函数内是局部变量,函数外的全局变量,全局变量在函数内声明可以改成局部变量
4.包含在对象里的数据可以通过两种形式访问:属性和方法。属性是隶属于某个特定对象的变量,方法是只有某个特定对象才能调用的函数。组合成一个数据实体。
5.内建对象 有数组 math   date等 new一个实例 宿主对象包括form image element等获取网页上表单,图像和各种表单元素等信息。
6.对象分为三种类型:用户自定义对象,内建对象,宿主对象。最基础的是window对象,这个对象的属性和方法统称为bom。
7.文档对象类型dom
8.getelementbyclassname 是h5提供的,按类名 同时匹配里面的 顺序无关,有没有其他的类名也无关。
9.文档中每个元素节点都是对象
10.节点分成文本节点 属性节点元素节点

1、javascript:伪协议。放在a链接中不支持平稳退化。比如<a href="javascrpit:showpic(‘images/coffee.jpg’);return false;"title="a">coffee<a>
2、如果想用JavaScript想给某一网页添加行为,就不应该让JavaScript代码对这个网页的结构有任何依赖。
根据结构化程序设计理论:程序应该只有一个出口和一个入口。但是如果股份拘泥于这个原则往往会使程序变得难以阅读。如果一个函数有多个出口,只要这些出口集中出现在函数的开头部分,就是可以接受的。
3、共享onload事件。如果需要再页面加载时得到执行,可以创建一个匿名函数,然后绑定onload事件,window.οnlοad=function(){....}.但是弹性最佳解决方案可以用函数addloadevent,它只有一个参数:打算在页面执行完毕时执行的函数的名字。代码如下:function addloadevent(func){var oldonload = window.onload;if(typeof window.onload!='function'){window.οnlοad=func;}wlse{window.οnlοad=function(){oldonload();func();}}}
4、nodename属性总是返回一个大写字母的值,即使在html文档里是小写字母。
5、键盘访问,onclick是指用户用鼠标来点击这个链接,我们是用onkeypress事件处理函数专门来处理键盘事件。但是每个按键都会触发它。最好不要使用它,其实onclick已经够用,键盘enter可以触发它。
6.html-dom和dom core ,html-dom只能用来处理web文档。简化文档操作。比如啊a.setattribute("src",source);用html-dom可以a.src=source;
7、document.write()方法是在页面输出某些个字符串。mime类型application/xhtml+xml与document。write不兼容,浏览器呈现这种XHTML文档时,根本不会去执行document.write方法。应该避免在body部分乱用<script>标签,避免使用document.write方法。
8、innerhtml属性用来添加一大块的段落信息,比document.write()方法推进,因为分离。但是两者都是html专有属性,不能用于任何其它标记语言文档。浏览器在呈现mime类型application/xhtml+xml时会忽略掉innerhtml属性。
9、dom方法。1\ creatment(nodename)方法创造元素节点。eg:createlement("p"). 2\appendchild()方法,创建子节点  a.appendchild(变量)。3、createtextnode();创建文本 eg:createtextnode("hello world");
10、 insertbefore()方法,这个方法将把一个新元素插入到一个现有的元素的前面。需要三个条件1、新元素2、目标元素(targetelement)3、父元素。语法如下:parenrtelement.insertbefore(newelement,targetelement).targetelement的parentnode属性就是它。
11、insertafter函数,不是系统自带的。我们可以自己编写。function insertafter ( newelement,targetelement){var parent =targetelement.parentnode;if(parent.lastchild==targetelement){parent.appentchild(newelement)}else{parent.insertbefore(newelement,targetelement.nextsibling);}}  目标的下一个元素则是目标元素的nextsibling属性。
12、ajax,用于概括异步加载页面内容的技术。主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求。不会影响到用户的请求,但是它依赖于JavaScript,所以可能会有浏览器不支持它,而搜索引擎蜘蛛也不会抓取到有关的内容。
13、ajax技术的核心就是xmlhttprequest对象,js可以通过这个对象自己发送和响应请求。虽然对这个对象的标准还很新,但是几乎所有的浏览器都支持,但是问题是,不同的浏览器实现的方式不太一样。 所以不得不写代码分支。ie中创建新的对象要使用下列代码: var request = new activexobject("msxml2.xmlhttp.3.0");其他浏览器则基于xmlhttprequest来创建对象 var request = new xmlhttprequest(); 麻烦的是不同ie版本的xmlhttp对象也不完全相同。 所以可以使用函数。为了兼容所以的浏览器要这样写.... 116
14、xmlhttprequest对象有许多的方法,其中最有用的是open。它用来指定服务器上将要访问的文件,置顶请求类型:get、post或send 服务器在向xmlhttprequest对象发回响应时,该对象有许多属性可用,浏览器会在不同阶段更新readystate属性的值,它有5个可能的值:0 未初始化,1正在加载,2加载完毕,3正在交互,4完成。只有变成了4,就可以访问服务器发回的数据了。访问服务器发送回来的数据要通过两个属性来完成。一个是responsexml用于保存....118....
15、dom的两项原则:逐渐增强,平稳退化。
16、有些浏览器会把title属性的内容显示为弹出式的提示框,另一些浏览器则会把他们显示在状态栏里。有些浏览器会把alt属性的内容显示为弹出式的提示框,这就导致了对alt属性的广泛滥用。这个属性的原本用途是在突变不可用时用一段描述文字来解释这个位置的图片。
17、<abbr>标签是缩略语,<acronym>是首字母缩略词,在title中显示具体内容。在h5中已经全部用<abbr>标签。有些浏览器会把文档中的缩略语显示为带有下划线或下划点的文本。早期的ie版本不支持。
18、html5的文档声明:<!doctype html>这个文档声明同时支持HTML和XHTML。
19、cite属性,浏览器会完全忽视cite属性的存在....(后面还没看)
 20、style属性是一个对象。当需要引用中间带减号的css属性时,dom要求使用驼峰命名法,css属性font-family变成dom属性fontFamily.不管css属性名字里对应着多少连字符,一律使用驼峰命名法来命名。
21、style属性只返回内嵌样式,只有把css style属性插入到标记中,才可以用dom style属性去查询那些信息。dom style 属性不能用来检索在外部css文件里声明的样式.
22、style对象的属性的值必须放在引号里,单引号双引号均可。如果忘记引号,js会把等号右边的值解释为一个变量。
 23、在实践中,用css来设置这类样式的难度往往会很大,如果文档需要定期的编剧和更新,这个就成为一个很大的工作负担。                                24、hover只有一部分浏览器支持。css伪类并不是都支持。
25、classname属性是一个可读/可写的属性 但是不足在于它在设置某个元素的属性时是替换而不是追加。但是可以用a.chassname+="intro";
 26、把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象。

1position的默认值是static,意思是有关元素將按照它们在标记里出现的先后顺序出现在浏览器窗口。
2.settimeout(“function”,interval)函数。后一个参数是时间毫秒。绝大时候将它赋值给一个变量。如果想取消某个正在等待执行的函数,必须事先可以用一个名为cleartimeout(variable)调用返回值的变量。
3.parseint可以把字符串里的数值信息取出来,如果把一个数字开头的字符串传递给这个函数,它將返回一个数值:parseint(string)返回值通常是整数如果需要的是浮点数就用parsefloat函数。
4p180
5.设置参数使函数脱离出来称为函数抽象化。

28、math.ceil(number),它可以返回不小于dist值的整数,把number向大于方向舍入与之最接近的整数。math.floor(number),它可以把任意浮点数向小于方向舍入为与之最接近的整数。round属性将把任意浮点数舍入与之最接近的整数:math.round(number)                                                                    29、HTML5的新变化:在结构层中添加了新的标记元素和更多的交互及媒体元素,很多新元素还都带有自己的JavaScript和dom api.在行为层,HTML5规定了DOM中每个新元素的交互方式,以及新的API。在行为层,规定了每个新元素的交互方式,以及新的api,例如,我们可以自定义<video>元素的控件,改变其播放方式。不仅是标记和行为,表现层同样也得到了改进。css3的多个模板囊括了高级选择器、渐变、变换和动画。
30、如果想使用Html5可以用modernizr进行检测,首先它会修改HTML的class属性,基于可用的HTML5特性添加额外的类名。要使用modernizr编写文档,通常都要给html元素添加一个no-js类:
<html class="no-js">  
使用modernizr非常简单,从http:www.modernizr.com/下载它,将在文档的<head>中添加该脚本;<script src="modernizr-1.5.min.js"></script>.一定要放在head,可以在加载其他标记前先加载它。
31、绘图空间:context在这里就是一个平面二维的绘图表面,其原点(0,0)位于<canvas>的左上角,在这个绘图表面的坐标系里,越往右x的值越大,越往下y的值越大。canvas跟flash一样,都不具备可访问性。
32、html5的<video>元素为在文档中嵌入影片以及影片交互定义了一种标准方式,同时也把嵌入操作简化成了一个标签。<video scr=""><a  href=""></a><!--不支持原生视频时的替换内容--></video> 同样音频用法<audio>标签。它们的问题在于网站对于编码方式的不一致。浏览器在显示video元素时,会为其添加一些与浏览器样式统一的标准播放控件。不管添加什么控件,都别忘了在video元素中添加control事件
33、addeventlistener方法是为对象添加时间处理函数的规范方法。之前我们使用的onclick之类的HTML-dom的on前缀属性。
34、h5中很多新表单元素、新输入控件类型和新的属性。控件包括:email:电子邮件   url:用于输入url   date:用于输入日期和时间; number:用于输入数值;range:用于生成滑动条;search:用于搜索框 tel:用于输入电话号码。color:用于选择颜色。一些新属性包括:autocomplete  autofocus  form  min max step  pattern placeholder required
35、string.indexof(substring),用于在字符串中寻找子字符串的位置,这个方法返回子字符串第一次出现的位置。我们在这里只想知道某个字符串是否被包含在另一个字符串里面,是否是当前url里的链接。如果没有匹配到将返回-1,如果返回其他值表示有匹配。
36、split方法可以提取每一部分的id值。var s=links[i].getattribute(“href”).split("#")[1];
37、html文档中的每个元素都是一个对象,每个元素都有nodename、nodetype之类的dom属性。文档中每个表单元素都是一耳光from对象,每个from对象都有一个elements.length属性。这个属性返回的是表单中包含的表单元素的个数。form.element.length,返回的是属于属于表单元素的元素,如input、textarea.
38、压缩代码工具:closure compiler工具。
39、使用js库存在的问题:1、库是别人编写的,可能因为不了解它的内部机制,因此很难调试bug或解决由它所导致的问题 2、要使用库,就要把它集成到脚本中。这样会加重页面加载的负担,挤占用户优先的带宽。3、混合使用多个库可能会造成冲突。
40、如何选择合适的库1、它具备你需要的所有的功能吗 2、它的功能是否比你想要的还多3、是否是模块化。4、它的支持情况怎么样5、它有文档吗 6、它的许可合适吗
41、jq之类的库中,方法连缀是一种特色,这些库特意设计了相应的方法,以便连缀。2、另一个语法是迭代。不少库都提供了方便对元素列表进行操作的循环结构。jq的each方法以及其他循环方法,会基于列表的每个元素来执行一个回调函数看,这个回调函数只接受元素在列表中的索引作为参数。
42、jq选择元素的方法:id的$('#elementid') 类名:$('.element-class') 带标签('tag')  库还支持一些css的选择器。有些库还提供了专有的选择器。例如jq:支持$('tag:even')和$('tag:odd')用于选择偶数和奇数元素。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值