Software_programming_web_frontEnd

2019-12-11

================================================================

git@github.com:CZiJun/tech-web-artDesign.git

路径 文件的引用

css 放在 head link 标签

js 放在 </body> body 结束标签之前

 

 

 

 

 

 

 

 

 

=======================================================================

onClick = function(this)  会传入相当于  decoument.getElementById("xx") 或其他定位效果

 

 

==================

 JS: event = "Javascript statement(s) "

 事件处理机制。 在给 某个元素添加了事件处理函数后，一旦事件发生，相应的 JavaScript 代码就会得到执行。

被调用的 JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数。

例如，给上图中的链接添加 onclick 事件处理函数，并让这个处理函数所触发的JS代码返回布尔值 true 或 false.

当这个链接被点击时，如果那段 JS 代码返回的值是true， onclick事件处理函数就认为“这个链接被点击了”，

反之，如果返回的值是false,  onclick 事件处理函数就认为“这个链接没有被点击”。

==================

JS 函数在页面加载 时执行，需要使用 window 的 onload 事件处理函数

注意调用的时函数名不带括号；

 =============================================================================

DOM  childNodes， nodeType

节点树上 任何一个元素的所有子元素，是一个包含这个元素全部子元素的数组

element.childNodes

例如  var body_child_elements = document.getElementsByTags("body")  -- 数组

var body_node = body_child_elements[0]

注意： childNodes 属性返回的数组包含所有类型的几点，不仅仅是元素节点，甚至于 空格和换行符也会被解释为节点，也被包含

在此数组中。

使用 nodeType 来过滤， 一共12种整数值，3种有价值

1. element node 

2. attribute node

3. text node

==============================================================================

 

==============================================================================

改变一个一个 textNode 节点的值，使用 DOM 提供的 nodeValue 属性

node.nodeValue 

  

该属性获取某DOM 对象的值 时，得到的并不是包含在段落里的文本，将会时一个 null 值，

<p> 元素本身的 nodeValue 属性是一个空值，真正需要的时<p> 元素所包含的文本的值。

包含在 <p> 元素里的文本时另一种节点，它是<p>元素的第一个子节点。

因此需要的是它的第一个子节点的 nodeValue 属性值。

let pNode = document.getElementById("imgReplace");

pNode.chidleNodes[0].nodeValue

 =================================================

DOM    firstChild lastChild  属性

childeNodes[0]    firstChild

childeNodes[ node.length-1 ]    ->  lastChild

 

 ==============================================================

CSS :

 

 

margin: 设置外边距， 值 1~ 4

  透明背景

 

 1 body {
 2     font-family: "Arial",serif;
 3     color:#333;
 4     background-color: #ccc;
 5     margin: 1em 10%;
 6 }
 7 h1{
 8     color:#333;
 9     background-color: transparent;
10 }
11 a{
12     color:#c60;
13     background-color: transparent;
14     font-weight: bold;
15     text-decoration: none;
16 }
17 ul{
18     padding:0;
19 }
20 li{
21     float:left;
22     padding:1em;
23     list-style: none;
24 }
25 img{
26     display:block;
27     clear:both;
28 }

 

2019-12-15  13:20:23

Ajax 

Web 页面涉及大量的页面刷新，请求发送，服务器根据操作再返回新页面。

Ajax 可以做到只更新页面中的一小部分，而不必再次加载整个页面了。

 

Ajax 主要优势是对请求以异步方式发送到服务器，而服务器不会用整个页面来响应请求，会在后台发送请求，于此同时用户还能继续浏览页面

并与页面交互。脚本则可以按需加载和创建页面内容。

 1 function getHTTPObject(){
 2     if(typeof XMLHttpRequest == "undefined"){
 3         XMLHTTPRequest = function(){
 4             try{
 5                 return new ActiveXObject("Msxml2.XMLHTTP.6.0");
 6             }catch(e){}
 7             try{
 8                 return new ActiveXObject("Msxml2.XMLHTTP.3.0");
 9             }catch(e){}
10             try{
11                 return new ActiveXObject("Msxml.XMLHTTP");
12             }catch(e){}
13 
14             return false;
15         }
16     }    
17     return new XMLHttpRequest();
18 }        
 1 function getNewContent(){
 2     var request = getHTTPObject();
 3     if(request){
 4         request.open("GET","simulateServerResponse.txt",true);
 5         request.onreadystatechange = function(){
 6             if(request.readyState == 4){
 7                 var para = document.createElement("p");
 8                 var txt = document.createTextNode(request.responseText);
 9                 para.appendChild(txt);
10                 document.getElementById('new').appendChild(para);
11             }
12         };
13         requst.send(null);
14     }else{
15         alert("Sorry, your browser doesn't support XMLHttpRequest");
16     }
17 }
18 
19 addLoadEvent(getNewContent);

 

Ajax 的核心就是 XMLHttpReqeust, 这个对象充当着浏览器中脚本（客户端） 与服务器之间的中间人角色，

以往的请求都是由浏览器发出，而JS 通过此对象可以自己发送请求，同时也自己处理响应。

XMLHttpRequest 最有用的是 open 方法，用来指定服务器上将要访问的文件，指定请求类型：

GET, POST, SEND, 第三个参数用于指定请求是否以异步方式发送和处理。

 

 onreadystatechange 是一个事件处理函数，会在服务器给 XMLHttpRequest 对象送回响应的时候被触发执行。

在 onreadystatechane 指定函数引用时，不要在函数名后加括号，

加括号标识立即调用函数，而我们只想把函数自身的引用（而不是函数结果） 赋值给其。

 

服务器在向 XMLHttpRequest 对象发回响应时，该对象由许多属性可用，浏览器会在不同阶段更新 readyState属性的值，

0 表示未初始化

1 表示正在加载

2 表示加载完毕

3 表示正在交互

4 表示完成

只要 readyState 属性的值变成了4， 就可以访问服务器发送回来的数据了。

 

访问服务发回的数据要通过俩属性完成。

1. responseText 属性，该属性用于保存文本字符串形式的数据。

2. responseXML 属性，用于保存 Content-Type 头部中指定为 "text/xml" 的数据。

其实是一个 DocumentFragment 对象，可以使用各种 DOM 方法来处理这个对象。也是XMLHttpRequest

种“XML” 命名的缘故。

 

使用 Ajax 要注意同源策略，使用 XMLHttpRequest 对象发送的请求只能访问与其所在的HTML处于同于域中的数据。

不能向其他域发送请求。 跨域请求只支持 HTTP 协议。

 

异步注意 异步性，如果存在依赖性，注意 顺序性 coding. 

 

posted @ 2019-12-11 07:46  君子之行  阅读(3)  评论(0)  编辑  收藏  举报