zoukankan      html  css  js  c++  java
  • js学习12-《JS DOM 编程艺术》笔记

    学习了下《JS DOM 编程艺术》,做个学习总结:
    1.字符串中放单引号双引号:
    建议:
    字符串中放单引号,则用双引号包含字符串

     1 var s1="It's my doy"; 

    字符串中放双引号,则用单引号包含字符串
     1 var s2='He said "hi!" '; 
    其他使用进行转义

    2.==和===
    === :严格比较。不仅比较值,还比较类型
    == :不严格比较,转换类型一致比较

    3.JS语言里对象的三种类型
    3.1内建对象:javascript提供的对象 Math Array
    3.2宿主对象:浏览器对象。如document,window
    3.3用户自定义对象:..

    4.获取文档中的对象
     1 document.getElementById("p1");   

     1 document.getElementByTagName("input");  

     1 document.getElementByClassName("classname1 classname2");//备注:此时name顺序不重要,可乱序 

    5.获取某对象属性
    <html lang="zh-cn"></html>
    eg:

      var html=document.getElementsByTagName("html");//html为数组 

      html[0].getAttribute("title");//此时结果为null,代表没有值 

      html[0].title;//此时结果为”“;可能存在兼容问题,为旧版本web文档处理方式 

    6.event事件返回false,可使默认行为不被触发
    eg:

    1 <a href="www.baidu.com" onclick="return false">onclick</a>//此时点击该链接,跳转到百度页面的事件不会触发

    7.获取某节点的子节点 

    var child=document.getElementsByTagName("body")[0].childNodes; 

    child.length;

    child[0].nodeType;//返回结果为1 2 3 的数字。其中:1-元素节点,2-属性节点,3-文本节点 

    8.获取某文本节点的值
    element.nodeValue;
    eg:

     1 <body>
     2 ********test nodeType,nodeValue*******
     3 <p>hello jermy</p>
     4 <script type="text/javascript">
     5 function tag(tagname){
     6 return document.getElementsByTagName(tagname)[0];
     7 }
     8 var p1=tag("p");
     9 var t1=p1.firstChild;//等价于p1.childNodes[0]
    10 document.write("p1.nodeType="+p1.nodeType+";p1.nodeValue="+p1.nodeValue+"<br/>");
    11 document.write("t1.nodeType="+t1.nodeType+";t1.nodeValue="+t1.nodeValue);
    12 </script>
    13 </body>

    9.伪协议(备注:此方法不建议使用)
    <a href=“javascript:prop()” ></a>//此处点击a链接,在支持伪协议的浏览器直接运行,不支持伪协议浏览器将报错。支持伪协议但是被用户禁用js的浏览器中将do nothing。

    网站设计关注点:平稳退化


    11.换行string

     1 document.getElementById("demo").innerHTML = "Hello 2 Dolly!"; 

    12.自启动:

     1 (function () { 2 document.getElementById("demo").innerHTML = "Hello! I called myself"; 3 }()); 

    或者:

     1 (function () { 2 document.getElementById("demo").innerHTML = "Hello! I called myself"; 3 })(); 

    13.闭包的例子

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <p>Counting with a local variable.</p>
     6 
     7 <button type="button" onclick="myFunction()">Count!</button>
     8 
     9 <p id="demo">0</p>
    10 
    11 <script>
    12 var add = (function () {
    13 var counter = 0;
    14 return function () {return counter += 1;}
    15 })();
    16 
    17 function myFunction(){
    18 document.getElementById("demo").innerHTML = add();
    19 }
    20 </script>
    21 
    22 </body>
    23 </html>

    14. hijax理解:渐进增强的使用ajax

    15. 动态向页面添加标记的方法:
    document.write innerHTML(看到innerHTML想到了innerText,请移步查看区别)

    http://www.cnblogs.com/luckyflower/p/3974423.html

    16. 样式文件的结构
    @import url(layout.css)
    @import url(color.css)
    @import url(typography.css)
    三个分离的样式文件可以存储在一个basic.css文件之中,在页面中直接link该basic.css

    17. 颜色
    不论在哪个地方使用颜色,注意前景色+背景色,否则会容易丢失。

    18.  px,em ...
    px:像素点
    em:根据当前字体font大小来的一个相对值

    19. 事件

    和用户进行交互的唯一手段。有addeventListener等(后续补充)

  • 相关阅读:
    你的服务器和网站为什么会被反复入侵
    MAC 查看当前安装的JDK位置
    Jmeter高并发测试
    解密AndroidManifest.xml、AXMLPrinter2.jar源码下载
    Win10家庭版如何启用本地组策略
    SQLFlow使用中的注意事项--设置篇
    Sqlflow 之隐私政策(Privacy plolicy)介绍
    血缘关系分析工具SQLFLOW--实践指南
    Oracle SQL 性能优化利器
    SQLFlow数据流分析工具的job功能介绍
  • 原文地址:https://www.cnblogs.com/luckyflower/p/3974391.html
Copyright © 2011-2022 走看看