A-A+

读书笔记

2015年10月15日 日志 暂无评论 阅读 94 次

百度前端学院

bootstrap reset.css::

http://cdn.bootcss.com/meyer-reset/2.0/reset.min.css

自适应

http://ife.baidu.com/review/detail?workId=2296

::http://www.siyuweb.com/website/web/javascript/1711.html

https://github.com/amfe/lib-flexible

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

demo

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->

 

JS中级:DOMBOMEVENT

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <ul id="ul1" style="border:1px solid red"><li>11</li><li>22</li><li>33</li><li>44</li></ul>
  9. <script>
  10.     window.onload = function(){
  11.         var oUl =document.getElementById("ul1");
  12. //        子节点列表
  13.         console.log(" 子节点列表"+oUl.childNodes.length);
  14. //        元素.attributes: 只读 属性 属性列表集合
  15. //        标准下:只包含文本和元素类型的几点,也会包含非法嵌套的子节点
  16. //        非标准下:只包含元素类型的节点,ie7x下不会包含非法嵌套子节点
  17. //        childNodes 只包含一级节点,不包含后辈孙级节点
  18. //        第一个属性节点的值
  19.         console.log(oUl.attributes[1].value); //border:1px solid red
  20. //        第0个属性节点的 名称
  21.         console.log(oUl.attributes[0].name);  //id
  22. //        节点类型
  23.         console.log(oUl.attributes[0].nodeType);  //id
  24.         for(var i=0;i<oUl.childNodes.length;i++){
  25. //     不加会有空格,换行的节点(严格模式)
  26. //            oUl.childNodes[i].style.background ="red";
  27.             if(oUl.childNodes[i].nodeType ==1){
  28.                 oUl.childNodes[i].style.background ="red";
  29.             }
  30.         }
  31.     }
  32.     //        children
  33.     //        标准下:只包含元素类型的几点
  34.     //        非标准下:只包含元素类型的节点
  35.     console.log("children"+oUl.children.length);
  36.     for(var i=0;i<oUl.childNodes.length;i++){
  37. //    不需要判断 不加会有空格,换行的节点(严格模式)
  38.         oUl.childNodes[i].style.background ="red";
  39.     }
  40. </script>
  41. </body>
  42. </html>

 

JavaScript DOM编程艺术中文版

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="zh-cn">
  4.     <meta charset="UTF-8">
  5.     <title>中国建筑企业联合会</title>
  6. </head>
  7. <body>
  8. <p title="段落的标题" >中国建筑企业联合会</p>
  9. <ul id="box">
  10.     <li class="cp1">产品1</li>
  11.     <li class="cp1">中国2</li>
  12.     <li>中国3</li>
  13. </ul>
  14. <p id="tit">段落</p>
  15. <p title="底部">底部</p>
  16. <ul>
  17.     <li>
  18.         <a href="images/1.jpg" title="A fireworks display" onclick="change(this);return false;">Fireworks</a>
  19.     </li>
  20.     <li>
  21.         <a href="images/2.jpg" title="A cup of black coffee"  onclick="change(this);return false;">Coffee</a>
  22.     </li>
  23.     <li>
  24.         <a href="images/3.jpg" title="A red, red rose"  onclick="change(this);return false;">Rose</a>
  25.     </li>
  26.     <li>
  27.         <a href="images/4.jpg" title="The famous clock"  onclick="change(this);return false;">Big Ben</a>
  28.     </li>
  29. </ul>
  30. <img src="images/placeholder.gif" id="ppic">
  31. <p id="des">这是描述</p>
  32. <a href="JavaScript:newwindow('http://www.baidu.com');">js伪协议</a>
  33. <a href="#" onclick="newwindow('http://www.baidu.com'); return false">js伪协议</a>
  34. <a href="http://www.baidu.com" onclick="newwindow('http://www.baidu.com'); return false">js伪协议</a>
  35. <a href="http://www.baidu.com" onclick="newwindow(this.getAttriblue('href')); return false">js伪协议</a>
  36. <a href="http://www.baidu.com" onclick="newwindow(this.href); return false">js伪协议</a>
  37. <a href="http://www.baidu.com" class="aaa">class样式aaa标签</a>
  38. <script>
  39. // alert(typeof document.getElementById("box"))
  40. //alert(document.getElementsByTagName("li").length)
  41. //通过类名获取
  42. document.getElementsByClassName("cp1").length;
  43. var item =document.getElementsByTagName("li");
  44. //    for(var i=0;i<item.length;i++){
  45. //        alert(typeof item[i])
  46. //    }
  47. //页面内共有多少个节点
  48. document.getElementsByTagName("*").length;
  49. //    元素box内含有多少个节点
  50.    var item2= document.getElementById("box");
  51.     item2.getElementsByTagName("*").length;
  52. //    元素box内含有多少个类名为cp1的节点
  53.     item2.getElementsByClassName("cp1").length;
  54. //解决IE8之类不支持getElementsByClassName
  55. if (!document.getElementsByClassName) {
  56.     document.getElementsByClassName = function (className, element) {
  57.         var children = (element || document).getElementsByTagName('*');
  58.         var elements = new Array();
  59.         for (var i = 0; i < children.length; i++) {
  60.             var child = children[i];
  61.             var classNames = child.className.split(' ');
  62.             for (var j = 0; j < classNames.length; j++) {
  63.                 if (classNames[j] == className) {
  64.                     elements.push(child);
  65.                     break;
  66.                 }
  67.             }
  68.         }
  69.         return elements;
  70.     };
  71. }
  72. //    getAttribute() 方法返回指定属性名的属性值。如果您希望以 Attr 对象返回属性,请使用 getAttributeNode。
  73.     var ppp = document.getElementsByTagName("p");
  74.     for (var i = 0; i < ppp.length; i++) {
  75.         ppp[i].getAttribute("title")
  76.     }
  77. //    setAttributesetAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。
  78. var tit= document.getElementById("tit");
  79. tit.setAttribute("title","修改后的标题");
  80. tit.getAttribute("title");
  81.    var body_elemt = document.getElementsByTagName("body")[0];
  82. //childNodes 获取所有子元素
  83.          body_elemt.childNodes.length;
  84. //nodeType 节点属性   1.元素节点 2.属性节点 3.文本节点
  85.     body_elemt.nodeType; // 1
  86. //nodeValue 获取节点的值
  87.     body_elemt.nodeValue;
  88. // node.firstchild 等价 node.chilidNodes[0]
  89. //node.lastchild    等价 node.childNodes[node.childNodes.length-1]
  90. function change(whichpic){
  91.         var s =whichpic.getAttribute("href");
  92.          var place = document.getElementById("ppic");
  93.         place.setAttribute("src",s);
  94.          var title =whichpic.getAttribute("title");
  95.         var des= document.getElementById("des");
  96. //    des.setAttribute("");
  97. //    p元素本身没有节点值,需要找到它包含的文本的节点值
  98. //    des.childNodes[0].nodeValue; // 1
  99.     des.firstChild.nodeValue = title;
  100. }
  101. //    javascript 为协议
  102.     function newwindow(url){
  103.         window.open(url,"新建的窗口","height=200;width=200")
  104.     }
  105.     window.onload =newfunction;
  106.     var link =document.getElementsByClassName("aaa");
  107.     function newfunction(){
  108.         for(i=0;i<link.length;i++){
  109.             link[i].onclick= function(){
  110.                 newwindow(this.getAttribute("href"));
  111.                 return false;
  112.             }
  113.         }
  114.     }
  115. //    判断是否支持该方法
  116.     if(!getElementById) return false;
  117. //    charat()charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法.
  118. </script>
  119. </body>
  120. </html>

1-6: 美术馆 demo:

 

面向对象笔记

  1. <script>
  2.     var person = new Object();
  3.     person.name = "neo";
  4.     person.age ="30";
  5.     person.job ="sofe";
  6.     person.sayname = function(){
  7.         alert(this.name);
  8.     };
  9.     var person ={
  10.         name:"noe",
  11.         age:"29",
  12.         job:"sofe",
  13.         sayname:function(){
  14.             alert(this.name);
  15.         }
  16.     };
  17. ////设置为不可配置后,赋值无效
  18. //    var person ={};
  19. //    Object.defineProperty(person,"name",{
  20. //        writable:false,
  21. //        value:"neo"
  22. //    });
  23. //    alert(person.name);
  24. //    person.name = "greg";
  25. //    alert(person.name);
  26. //设置为不可配置后,删除无效
  27. //    var person ={};
  28. //    Object.defineProperty(person,"name",{
  29. //        writable:false,
  30. //        value:"neo"
  31. //    });
  32. //    alert(person.name);
  33. //    delete (person.name);
  34. //    alert(person.name);
  35. //设置为不可配置后,不能变回可配置,否则出错
  36. //    var person ={};
  37. //    Object.defineProperty(person,"name",{
  38. //        configurable:false,
  39. //        value:"neo"
  40. //    });
  41. //   抛出错误
  42. //    Object.defineProperty(person,"name",{
  43. //        configurable:true,
  44. //        value:"none"
  45. //    });
  46. //
  47. //    结果应该是2,为什么不对呢
  48. //   var book ={
  49. //       _year:2004,
  50. //           edition:1
  51. //   };
  52. //    Object.defineProperty(book,"year",{
  53. //        get:function(){
  54. //            return this._year;
  55. //        },
  56. //        set:function(newValue){
  57. //            if(newValue>2004){
  58. //                this._year = newValue;
  59. //                this.edithion += 1;
  60. //            }
  61. //        }
  62. //    });
  63. //    book.year =2005;
  64. //    alert(book.edition);
  65. //
  66. //工厂模式
  67. //    function createPerson(name,age,job){
  68. //        var o= new Object();
  69. //        o.name = name;
  70. //        o.age = age;
  71. //        o.job = job;
  72. //        o.sayName =function(){
  73. //            alert(this.name);
  74. //        }
  75. //        return o;
  76. //    }
  77. //    var person1 = createPerson("neo",29,"son");
  78. //    var person2 =createPerson("greg",28,"doc");
  79. //    构造函数模式
  80.     function Person(name,age,job){
  81.         this.name =name;
  82.         this.age = age;
  83.         this.job=job;
  84.         this.sayName = function(){
  85.             alert(this.name);
  86.         }
  87.     }
  88.     var person1 = new Person("neo",29,"son");
  89.     var person2 =new Person("greg",28,"doc");
  90. //constructor构造函数属性
  91. //    alert(1);
  92. //    alert(person1.constructor == Person);//true;
  93. //    alert(person2.constructor == Person);//true;
  94. //instanceof  person1.person2,及时Person的实例,也是Object 的实例.
  95. //    alert(person1 instanceof Object); //true;
  96. //    alert(person1 instanceof Person); //true;
  97. //    alert(person2 instanceof Object); //true;
  98. //    alert(person2 instanceof Person); //true;
  99. //讲构造函数当做函数调用
  100. //    当做构造函数调用。
  101.     var  person =new Person("neo",29,"siof");
  102.     person.sayName();//neo
  103. //    作为普通函数调用
  104.     Person("greg",20,"doc");
  105. //    函数调用后,this指向Global对象,
  106.     window.sayName();
  107. //    在另一个函数的作用域(不是很懂)
  108.     var o= new Object();
  109.     Person.call(o,"kar",28,"doc");
  110.     o.sayName();
  111. //    构造函数的问题
  112.     function Person (name,age,job){
  113.         this.name = name;
  114.         this.age = age;
  115.         this.job = job;
  116.         this.sayName = new F
  117.     }

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录