<1> CSS_DOM

1,structural layer

2,presentation layer

3,behavior layer

style也是一个属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <p id="text" style="background-color: #222222;color: white;">Hello World</p>
  9. <script src="cp_10.js"></script>
  10. </body>
  11. </html>

js:

  1. function someTest() {
  2.     var text = document.getElementById('text');
  3.     console.log(typeof text,"text:",text);
  4.     console.log(typeof text.nodeName , "nodeName:",text.nodeName);
  5.     console.log(typeof text.style ,"style:",text.style);
  6.  
  7. }
  8. someTest();

output:

获取样式属性:

color="white"

alert(text.style.color); 

color:#cc6600;

<2>设置样式的各种方法:

<p style="....."> </p>

这样的并不好，需要外部文件分离:

如果要设置文档所有的<p> 元素CSS:

  1. p{
  2.     background-color: #333333;
  3.     color: white;
  4. }

如果要设置文档id为text的<p>元素 CSS:

  1. p#text{
  2.     background-color: #333333;
  3.     color: white;
  4. }

如果要设置文档id为text的元素CSS:

  1. #text{
  2.     background-color: #333333;
  3.     color: white;
  4. }

如果要设置文档class为textClass的元素CSS:

  1. .textClass{
  2.     background-color: #333333;
  3.     color: white;
  4. }

但是这样的方式在DOM中会无法获取样式,不过在DOM里设置可以.

  1. window.onload= function () {
  2.     var text = document.getElementById('text');
  3.     text.style.backgroundColor="#222222";
  4.     text.style.color = "white";
  5. }

<3>只设置h1下一个节点的样式:

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>This is a Test</h1>
  9. <p>"HelloWorld"</p>
  10. <h1> <em>Test</em> Houdini VFX </h1>
  11. <p>"HelloWorld"</p>
  12. <script src="cp_10_03.js"></script>
  13. </body>
  14. </html>

js:

  1. var headers = document.getElementsByTagName('h1');
  2. for(var i=0;i<headers.length;i++){
  3.     console.log(headers[i],"**type is*:" , headers[i].nodeType);
  4.     console.log('nextSibling:',headers[i].nextSibling.nodeType , "data is:" , headers[i].nextSibling);
  5.     //console.log("getNextElement:",getNextElement(headers[i].nextSibling));
  6.     var elm = getNextElement(headers[i].nextSibling);
  7.     console.log("Find element :" , elm);
  8.     elm.style.color = "#888888";
  9.     elm.style.backgroundColor = "black";
  10.     elm.style.fontWeight = "bold";
  11.  
  12. }
  13.  
  14. function getNextElement(node)
  15. {
  16.     if(node.nodeType===1){
  17.         return node;
  18.     }
  19.     if(node.nextSibling){
  20.         return getNextElement(node.nextSibling);
  21.     }
  22.     return null;
  23. }

<4> 表格:

HTML:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" media="screen" href="cp_11_01.css">
  7. </head>
  8. <body>
  9.  
  10. <table>
  11.     <caption>Types</caption>
  12.     <thead>
  13.     <tr>
  14.         <th>Houdini</th>
  15.         <th>Support</th>
  16.     </tr>
  17.     </thead>
  18.  
  19.     <tbody>
  20.     <tr>
  21.         <td>Dop</td>
  22.         <td>Yes</td>
  23.     </tr>
  24.     <tr>
  25.         <td>Animation</td>
  26.         <td>Yes</td>
  27.     </tr>
  28.     <tr>
  29.         <td>Compile JIT</td>
  30.         <td>Yes</td>
  31.     </tr>
  32.     <tr>
  33.         <td>Rop</td>
  34.         <td>Yes</td>
  35.     </tr>
  36.     <tr>
  37.         <td>Cop</td>
  38.         <td>Yes</td>
  39.     </tr>
  40.     <tr>
  41.         <td>FileSystem</td>
  42.         <td>No</td>
  43.     </tr>
  44.     </tbody>
  45.  
  46.     <tfoot>
  47.     <tr>
  48.         <td>suggestions</td>
  49.         <td>strongly recommend</td>
  50.     </tr>
  51.     </tfoot>
  52.  
  53. </table>
  54.  
  55. </body>
  56. </html>

CSS:

  1. body{
  2.     font-family: Consolas;
  3.     background-color: #333333;
  4.     color:white;
  5. }
  6.  
  7. table{
  8.     margin: auto;  /*set this will show table in center*/
  9.     border: 3px solid #699;
  10. }
  11.  
  12. caption{
  13.     margin: auto;
  14.     padding: 0.2em;
  15.     font-size: 1.2em;
  16.     font-weight: bold;
  17. }
  18. th{
  19.     font-weight:normal;
  20.     font-style: italic;
  21.     text-align: left;
  22.     border: 1px dotted #699;
  23.     background-color: #9cc;
  24.     color:black;
  25. }
  26. th,td{
  27.     width: 10em;
  28.     padding:0.5em;
  29. }
  30.  
  31. tr:hover{
  32.     background-color: #cccccc;
  33. }
  34.  
  35. /*
  36. tr:nth-child(odd){
  37.     background-color: #9cc;
  38. }
  39. tr:nth-child(even){
  40.     background-color: #922;
  41. }
  42. */

要做一个奇偶颜色交替变换CSS带了一种:

  1. tr:nth-child(odd){
  2.     background-color: #9cc;
  3. }
  4. tr:nth-child(even){
  5.     background-color: #922;
  6. }

但是 thread标签里的也被改了:因为thread第一个是0...然后从<tbody> </tbody>开始正常了。。。到最后的<tfoot><tfoot>又抽风。。解决重复的问题必须用javascript

正确姿势的javascript:

  1. function addUniqueColor(){
  2.     var tables = document.getElementsByTagName('table');
  3.     if(tables.length<1)return false;
  4.     for(var i=0;i<tables.length;i++){
  5.         var current_table = tables[i];
  6.  
  7.         // only set <tbody></tbody>
  8.         var tbodys = current_table.getElementsByTagName('tbody');
  9.         if (tbodys.length<1)
  10.             continue;
  11.         // find tbody's tr
  12.         for(var j=0;j<tbodys.length;j++){
  13.             var current_tbody = tbodys[j];
  14.             var targetTrs = current_tbody.getElementsByTagName('tr');
  15.             if(targetTrs.length<1) continue;
  16.             var odd = false;
  17.             for(var k=0;k<targetTrs.length;k++){
  18.                 if(odd === false) {
  19.                     targetTrs[k].style.backgroundColor = '#444444';
  20.                     odd = true;
  21.                 }
  22.                 else
  23.                 {
  24.                     targetTrs[k].style.backgroundColor = '#222222';
  25.                     odd = false;
  26.                 }
  27.  
  28.             }
  29.         }
  30.     }
  31. }

不过Hover丢失了,解决办法用事件:

书中给的方法:

elm.onmouseover = function(){}

elm.onmouseout = function(){}

根据qml命名使用也一样...

elm.onmouseenter= function(){}

elm.onmouseleave= function(){}

html里特意增加了两个表格，测试代码准确性：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" media="screen" href="cp_11_01.css">
  7. </head>
  8. <body>
  9.  
  10. <table>
  11.     <caption>Types</caption>
  12.     <thead>
  13.     <tr>
  14.         <th>Houdini</th>
  15.         <th>Support</th>
  16.     </tr>
  17.     </thead>
  18.  
  19.     <tbody>
  20.     <tr>
  21.         <td>Dop</td>
  22.         <td>Yes</td>
  23.     </tr>
  24.     <tr>
  25.         <td>Animation</td>
  26.         <td>Yes</td>
  27.     </tr>
  28.     <tr>
  29.         <td>Compile JIT</td>
  30.         <td>Yes</td>
  31.     </tr>
  32.     <tr>
  33.         <td>Rop</td>
  34.         <td>Yes</td>
  35.     </tr>
  36.     <tr>
  37.         <td>Cop</td>
  38.         <td>Yes</td>
  39.     </tr>
  40.     <tr>
  41.         <td>FileSystem</td>
  42.         <td>No</td>
  43.     </tr>
  44.     </tbody>
  45.  
  46.     <tfoot>
  47.     <tr>
  48.         <td>suggestions</td>
  49.         <td>strongly recommend</td>
  50.     </tr>
  51.     </tfoot>
  52.  
  53. </table>
  54.  
  55. <table>
  56.     <caption>Types</caption>
  57.     <thead>
  58.     <tr>
  59.         <th>Maya</th>
  60.         <th>Support</th>
  61.     </tr>
  62.     </thead>
  63.  
  64.     <tbody>
  65.     <tr>
  66.         <td>Dop</td>
  67.         <td>No</td>
  68.     </tr>
  69.     <tr>
  70.         <td>Animation</td>
  71.         <td>Yes</td>
  72.     </tr>
  73.     <tr>
  74.         <td>Compile JIT</td>
  75.         <td>No</td>
  76.     </tr>
  77.     <tr>
  78.         <td>Rop</td>
  79.         <td>No</td>
  80.     </tr>
  81.     <tr>
  82.         <td>Cop</td>
  83.         <td>No</td>
  84.     </tr>
  85.     <tr>
  86.         <td>FileSystem</td>
  87.         <td>No</td>
  88.     </tr>
  89.     </tbody>
  90.  
  91.     <tfoot>
  92.     <tr>
  93.         <td>suggestions</td>
  94.         <td>Not recommend</td>
  95.     </tr>
  96.     </tfoot>
  97.  
  98. </table>
  99.  
  100. <script src="cp_11_01.js"></script>
  101. </body>
  102. </htm

js:

  1. function addUniqueColor(){
  2.     var odd = {"falseColor":'#444444', "trueColor":"#222222" , "hoverColor":"#cccccc"};
  3.     var tables = document.getElementsByTagName('table');
  4.     if(tables.length<1)return false;
  5.     for(var i=0;i<tables.length;i++){
  6.         var current_table = tables[i];
  7.  
  8.         // only set <tbody></tbody>
  9.         var tbodys = current_table.getElementsByTagName('tbody');
  10.         if (tbodys.length<1)
  11.             continue;
  12.         // only find tbody's tr
  13.         for(var j=0;j<tbodys.length;j++){
  14.             var current_tbody = tbodys[j];
  15.             var targetTrs = current_tbody.getElementsByTagName('tr');
  16.             if(targetTrs.length<1) continue;
  17.             var state = false;
  18.             var mapping = [];
  19.             for(var k=0;k<targetTrs.length;k++) {
  20.                 // give unique color
  21.                 if(state === false) {
  22.                     targetTrs[k].style.backgroundColor = odd.falseColor;
  23.                     mapping[k] = odd.falseColor;
  24.                     // set the leave event also follow default color
  25.                     targetTrs[k].onmouseleave = function () {
  26.                         this.style.backgroundColor = odd.falseColor;
  27.                     };
  28.                     state = true;
  29.                 }
  30.                 else {
  31.                     targetTrs[k].style.backgroundColor = odd.trueColor;
  32.                     // set the leave event also follow default color
  33.                     targetTrs[k].onmouseleave = function () {
  34.                         this.style.backgroundColor = odd.trueColor;
  35.                     };
  36.                     state = false;
  37.                 }
  38.  
  39.                 // set the enter event
  40.                 targetTrs[k].onmouseenter = function () {
  41.                     onMouseIn(this,odd);
  42.                 };
  43.             }
  44.         }
  45.     }
  46.  
  47. }
  48.  
  49. function addOnLoadEvent(func) {
  50.     var oldEvent = window.onload ;
  51.     if(typeof window.onload !== "function"){
  52.         window.onload = func;
  53.     }
  54.     else{
  55.         window.onload = function () {
  56.             oldEvent();
  57.             func();
  58.         }
  59.     }
  60. }
  61.  
  62. function onMouseIn(node , odd) {
  63.     console.log('mouse In:',node ,odd);
  64.     node.style.backgroundColor = odd.hoverColor;
  65. }
  66.  
  67. addOnLoadEvent(addUniqueColor);

<4> Javascript DOM 动画API

一个简单的CSS , XY控制方法

  1. h1{
  2.     position: absolute;
  3.     top:60px;
  4.     left: 100px;
  5. }

转换成javascript

  1. function addLoadEvent(func) {
  2.     var oldEvent = window.onload;
  3.     if(typeof window.onload !== "function"){
  4.         window.onload = func;
  5.     }
  6.     else{
  7.         window.onload=function () {
  8.             oldEvent();
  9.             func();
  10.         }
  11.     }
  12. }
  13.  
  14. function positionMessage() {
  15.     if(!document.getElementById){return false;}
  16.     if(!document.getElementById('message')){return false;}
  17.     var elm = document.getElementById('message');
  18.     elm.style.position = 'absolute';
  19.     elm.style.top = '50px';
  20.     elm.style.left = '150px';
  21. }
  22.  
  23. addLoadEvent(positionMessage);

关键函数:

1.var handleNum = setTimeOut("function",time);

2,clearTimeOut(handleNum)

3,parseInt(),parseFloat()

js代码:假如一个movemessage函数，调用方法似乎放到positionMessage函数里，设置1000ms,也就是1秒后，会进入moveMessage()函数。

这段代码像一个时间事件一样从positionMessage() 函数跳入moveMessage()函数 ，并没有什么迭代过程。。。

  1. function addLoadEvent(func) {
  2.     var oldEvent = window.onload;
  3.     if(typeof window.onload !== "function"){
  4.         window.onload = func;
  5.     }
  6.     else{
  7.         window.onload=function () {
  8.             oldEvent();
  9.             func();
  10.         }
  11.     }
  12. }
  13.  
  14. function positionMessage() {
  15.     if(!document.getElementById){return false;}
  16.     if(!document.getElementById('message')){return false;}
  17.  
  18.     var elm = document.getElementById('message');
  19.     elm.style.position = 'absolute';
  20.     elm.style.top = '50px';
  21.     elm.style.left = '150px';
  22.  
  23.     var movement = setTimeout("moveMessage()",1000);
  24.     //clearTimeout(movement);
  25. }
  26.  
  27. function moveMessage() {
  28.     if(!document.getElementById){return false;}
  29.     if(!document.getElementById('message')){return false;}
  30.  
  31.     var elm = document.getElementById('message');
  32.     elm.style.position = 'absolute';
  33.     elm.style.top = '150px';
  34.     elm.style.left = '250px';
  35. }
  36.  
  37. addLoadEvent(positionMessage);

一个简单的动画:

将var movement = setTimeout("moveMessage()",10); 放入moveMessage()函数体呢，

就变成了每次执行moveMessage()，都会启用setTimeOut()函数。然后变成循环函数。

  1. function addLoadEvent(func) {
  2.     var oldEvent = window.onload;
  3.     if(typeof window.onload !== "function"){
  4.         window.onload = func;
  5.     }
  6.     else{
  7.         window.onload=function () {
  8.             oldEvent();
  9.             func();
  10.         }
  11.     }
  12. }
  13.  
  14. function positionMessage() {
  15.     if(!document.getElementById){return false;}
  16.     if(!document.getElementById('message')){return false;}
  17.  
  18.     var elm = document.getElementById('message');
  19.     elm.style.position = 'absolute';
  20.     elm.style.top = '50px';
  21.     elm.style.left = '150px';
  22.  
  23.     //var movement = setTimeout("moveMessage()",1000);
  24.     //clearTimeout(movement);
  25. }
  26.  
  27. function moveMessage() {
  28.     if(!document.getElementById){return false;}
  29.     if(!document.getElementById('message')){return false;}
  30.  
  31.     var elm = document.getElementById('message');
  32.     var xpos = parseInt(elm.style.left);
  33.     var ypos = parseInt(elm.style.top);
  34.     if(xpos === 200 && ypos === 200){
  35.         return true;
  36.     }
  37.  
  38.     if(xpos<200){xpos++;}
  39.     if(xpos>200){xpos--;}
  40.     if(ypos<200){ypos++;}
  41.     if(ypos>200){ypos--;}
  42.  
  43.     console.log("current position xy:",xpos,ypos);
  44.     elm.style.left = xpos + 'px';
  45.     elm.style.top = ypos + 'px';
  46.     var movement = setTimeout("moveMessage()",10);
  47. }
  48.  
  49. addLoadEvent(positionMessage);
  50. addLoadEvent(moveMessage);

显示<a> 的缩略图,其中有一点使用了clearTimeOut() ,并且修改了moveElement()函数。其中的时间事件每次清理。

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="web_design.css"/>
  7. </head>
  8. <body>
  9.  
  10. <h1> Web Design</h1>
  11.  
  12. <ol id="linklist">
  13.     <li> <a href="#">structure</a> </li>
  14.     <li> <a href="#">presentation</a> </li>
  15.     <li> <a href="#">behavior</a> </li>
  16.  
  17. </ol>
  18.  
  19. <div id="slideshow">
  20.     <img src="data:images/topics.jpg" alt="building blocks of web design" id="preview"/>
  21. </div>
  22. <script src="web_design.js"></script>
  23. </body>
  24. </html>

js:

  1. function addLoadEvent(func) {
  2.     var oldFunc = window.onload;
  3.     if(typeof window.onload !== "function"){
  4.         window.onload = func;
  5.     }
  6.     else{
  7.         window.onload = function (ev) {
  8.             oldFunc();
  9.             func();
  10.         }
  11.     }
  12. }
  13.  
  14. function eventsLinks()
  15. {
  16.     var links = document.getElementsByTagName('a');
  17.     var preview = document.getElementById('preview');
  18.     if(!links)return false;
  19.     if(!preview) return false;
  20.  
  21.     console.log(links);
  22.     links[0].onmouseover = function () {
  23.         moveElement('preview',-100,0,0)
  24.     };
  25.     links[1].onmouseover = function () {
  26.         moveElement('preview',-200,0,0)
  27.     };
  28.     links[2].onmouseover =function () {
  29.         moveElement('preview',-300,0,0)
  30.  
  31.     };
  32.  
  33. }
  34.  
  35. function moveElement(elementID,final_x,final_y,phase) {
  36.     var elm = document.getElementById(elementID);
  37.     if(!elm)return false;
  38.  
  39.     // if have time handel clear it
  40.     if(elm.movement) clearTimeout(elm.movement);
  41.  
  42.     // if left and top attribute do not exist
  43.     if(!elm.style.left) elm.style.left = '0px';
  44.     if(!elm.style.top) elm.style.top = '0px';
  45.  
  46.     //
  47.     var xpos = parseInt(elm.style.left);
  48.     var ypos = parseInt(elm.style.top);
  49.     if(xpos === final_x && ypos===final_y) return true;
  50.     // x motion
  51.     if(xpos>final_x) xpos = xpos - Math.ceil((xpos - final_x) / 10);
  52.     if(xpos<final_x) xpos = xpos + Math.ceil((final_x - xpos) / 10);
  53.     // y motion
  54.     if(ypos>final_y) ypos = ypos - Math.ceil((ypos-final_y) / 10);
  55.     if(ypos<final_y) ypos = ypos + Math.ceil((final_y-ypos) / 10);
  56.  
  57.     elm.style.left = xpos + 'px';
  58.     elm.style.top  = ypos + 'px';
  59.  
  60.     var repeat = "moveElement('"+elementID+"',"+final_x+", "+final_y+" , "+phase+")";
  61.     console.log("repeat command:",repeat);
  62.     elm.movement  = setTimeout(repeat,phase);
  63. }
  64.  
  65. addLoadEvent(eventsLinks);

css:

  1. body{
  2.     font-family: Consolas;
  3. }
  4.  
  5. #slideshow{
  6.     width: 100px;
  7.     height:100px;
  8.     position: absolute;
  9.     overflow: hidden;
  10. }
  11. #preview{
  12.     left:0px;
  13.     top: 0px;
  14.     position: absolute;
  15. }

...

Web从入门到放弃<5>的更多相关文章

  1. Web从入门到放弃<8>

    Ref: Cameron D. - HTML5, JavaScript and jQuery (Programmer to Programmer) - 2015 http://www.runoob.c ...

  2. Web从入门到放弃<7>

    从这章开始读<javascript高级程序设计> <1>typeof 返回字符串 / 类型 未定义:undefined 布尔:boolean 字符串:string 数值:num ...

  3. Web从入门到放弃<1>

    HTML大法: <01> <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. Web从入门到放弃<6>

     <1> Canvas. 1,灰度图: js: function showAsGray() { var imgNode = document.getElementById('img'); ...

  5. Web从入门到放弃<4>

    1,插入 如下html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. Web从入门到放弃<3>

    UI简单的美化全部来源于Bootstrap 知识来自<javascript dom编程艺术第二版> <1> 点击列表 页面不跳转图片刷新:  主要点: href如何点击完如何不 ...

  7. Web从入门到放弃<2>

    <添加debug-toolbar> django现在1.11是必须这么做: pip install django-debug-toolbar 设置1: INSTALLED_APPS = [ ...

  8. 后端API入门到放弃指北

    后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一 ...

  9. OpenStack从入门到放弃

    OpenStack从入门到放弃 目录: 为何选择云计算/云计算之前遇到的问题 什么是云计算 云服务模式 云应用形式 传统应用与云感知应用 openstack及其相关组件介绍 flat/vlan/gre ...

随机推荐

  1. Redis数据持久化、数据备份、数据的故障恢复

    1.redis持久化的意义----redis故障恢复 在实际的生产环境中,很可能会遇到redis突然挂掉的情况,比如redis的进程死掉了.电缆被施工队挖了(支付宝例子)等等,总之一定会遇到各种奇葩的 ...

  2. SpringBoot标准Properties

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  3. 从PyMongo看MongoDB Read Preference

      在CAP理论与MongoDB一致性.可用性的一些思考一文中提到,MongoDB提供了一些选项,如Read Preference.Read Concern.Write Concern,对MongoD ...

  4. GXOI/GZOI2019题解

    GXOI/GZOI2019题解 P5300 [GXOI/GZOI2019]与或和 一眼题.. 显然枚举每个二进制位,答案就变成了全1子矩阵数量. 这个xjb推推,单调栈一下就行了. #include& ...

  5. string find()函数

    链接 [https://www.cnblogs.com/wkfvawl/p/9429128.html]

  6. MongoDB系列：一、MongoDB和Redis区别

    简介 MongoDB更类似Mysql,支持字段索引.游标操作,其优势在于查询功能比较强大,擅长查询JSON数据,能存储海量数据,但是不支持事务. Mysql在大数据量时效率显著下降,MongoDB更多 ...

  7. Zabbix 3.0的前端默认在Centos 6上不支持

    由于PHP版本的原因,RHEL 6上的Zabbix前端不受支持. 由于Zabbix 3.0的要求是PHP 5.4.0或更高版本,而RHEL 6最新版本是5.3.3. 在大多数情况下,Zabbix服务器 ...

  8. 关于mysql主从架构master宕机后，请求转移问题解决办法

    mysql架构:一主一从 问题一:有两台mysql数据库,已做好主从.如果运行某一天master服务器mysql故障导致前端请求无法处理怎么办? 答:将前端需要数据库处理的请求转移到slave机上. ...

  9. [UOJ422][集训队作业2018]小Z的礼物——轮廓线DP+min-max容斥

    题目链接: [集训队作业2018]小Z的礼物 题目要求的就是最后一个喜欢的物品的期望得到时间. 根据$min-max$容斥可以知道$E(max(S))=\sum\limits_{T\subseteq ...

  10. this指针详解

    什么是this this是一个const指针,存的是当前对象的地址,指向当前对象,通过this指针可以访问类中的所有成员. 当前对象是指正在使用的对象,比如a.print(),a就是当前对象. 关于t ...