重新整理JavaScript笔记

JavaScript/13Dom.md

@@ -1,18 +0,0 @@
-# Dom 相关的常用的操作
-
-需要知道哪里可以查询到这些东西
-
-
-## 1 基础操作
-
-### 五种节点类型
-
-
-* 文档是一个文档节点。
-* 所有的HTML元素都是元素节点。
-* 所有 HTML 属性都是属性节点。
-* 文本插入到 HTML 元素是文本节点。are text nodes。
-* 注释是注释节点。
-
-
-### 创建操作

JavaScript/Ajax/1 ajax.md

@@ -12,7 +12,11 @@ AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览
 ### 原理 
 异步的JavaScript和XML。创建快速动态网页技术。在后台与服务器进行少量的数据交换，实现网页的异步更新。
 
-
 * 使用JS创建XMLHTTPRequest对象，发送HTTPRequest内容。
 * 使用JS处理被返回的数据，更新页面内容。
 
+
+
+### ajax的多种实现方式
+
+![1705132223204](image/1705132223204.png)

JavaScript/Ajax/2 xhr.md

@@ -61,4 +61,4 @@ xmlhttp.onreadystatechange=function()
         document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
 }
-```
+```

JavaScript/Ajax/3 axios.md

@@ -0,0 +1,387 @@
+## 1 是什么
+
+Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
+
+参考文件：javaguide.cn/java/concurrent/aqs.html#aqs-介绍
+
+## 2 怎么用
+
+
+### 安装
+使用 npm:
+```
+$ npm install axios
+```
+
+使用 bower:
+```
+$ bower install axios
+```
+使用 cdn:
+```
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+```
+
+### 执行 GET 请求
+```js
+// 为给定 ID 的 user 创建请求
+axios.get('/user?ID=12345')
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+
+// 上面的请求也可以这样做
+axios.get('/user', {
+    params: {
+      ID: 12345
+    }
+  })
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+```
+
+### 执行 POST 请求
+```js
+axios.post('/user', {
+    firstName: 'Fred',
+    lastName: 'Flintstone'
+  })
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+```
+
+### 执行多个并发请求
+
+```js
+function getUserAccount() {
+  return axios.get('/user/12345');
+}
+
+function getUserPermissions() {
+  return axios.get('/user/12345/permissions');
+}
+
+axios.all([getUserAccount(), getUserPermissions()])
+  .then(axios.spread(function (acct, perms) {
+    // 两个请求现在都执行完成
+  }));
+```
+
+### 添加配置
+```
+可以通过向 axios 传递相关配置来创建请求
+
+axios(config)
+// 发送 POST 请求
+axios({
+  method: 'post',
+  url: '/user/12345',
+  data: {
+    firstName: 'Fred',
+    lastName: 'Flintstone'
+  }
+});
+// 获取远端图片
+axios({
+  method:'get',
+  url:'http://bit.ly/2mTM3nY',
+  responseType:'stream'
+})
+  .then(function(response) {
+  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
+});
+```
+
+
+## 2 配置内容
+
+### 请求配置
+
+```js
+{
+   // `url` 是用于请求的服务器 URL
+  url: '/user',
+
+  // `method` 是创建请求时使用的方法
+  method: 'get', // default
+
+  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
+  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
+  baseURL: 'https://some-domain.com/api/',
+
+  // `transformRequest` 允许在向服务器发送前，修改请求数据
+  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
+  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
+  transformRequest: [function (data, headers) {
+    // 对 data 进行任意转换处理
+    return data;
+  }],
+
+  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
+  transformResponse: [function (data) {
+    // 对 data 进行任意转换处理
+    return data;
+  }],
+
+  // `headers` 是即将被发送的自定义请求头
+  headers: {'X-Requested-With': 'XMLHttpRequest'},
+
+  // `params` 是即将与请求一起发送的 URL 参数
+  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
+  params: {
+    ID: 12345
+  },
+
+   // `paramsSerializer` 是一个负责 `params` 序列化的函数
+  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
+  paramsSerializer: function(params) {
+    return Qs.stringify(params, {arrayFormat: 'brackets'})
+  },
+
+  // `data` 是作为请求主体被发送的数据
+  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
+  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
+  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
+  // - 浏览器专属：FormData, File, Blob
+  // - Node 专属： Stream
+  data: {
+    firstName: 'Fred'
+  },
+
+  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
+  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
+  timeout: 1000,
+
+   // `withCredentials` 表示跨域请求时是否需要使用凭证
+  withCredentials: false, // default
+
+  // `adapter` 允许自定义处理请求，以使测试更轻松
+  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
+  adapter: function (config) {
+    /* ... */
+  },
+
+ // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
+  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
+  auth: {
+    username: 'janedoe',
+    password: 's00pers3cret'
+  },
+
+   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
+  responseType: 'json', // default
+
+  // `responseEncoding` indicates encoding to use for decoding responses
+  // Note: Ignored for `responseType` of 'stream' or client-side requests
+  responseEncoding: 'utf8', // default
+
+   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
+  xsrfCookieName: 'XSRF-TOKEN', // default
+
+  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
+  xsrfHeaderName: 'X-XSRF-TOKEN', // default
+
+   // `onUploadProgress` 允许为上传处理进度事件
+  onUploadProgress: function (progressEvent) {
+    // Do whatever you want with the native progress event
+  },
+
+  // `onDownloadProgress` 允许为下载处理进度事件
+  onDownloadProgress: function (progressEvent) {
+    // 对原生进度事件的处理
+  },
+
+   // `maxContentLength` 定义允许的响应内容的最大尺寸
+  maxContentLength: 2000,
+
+  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
+  validateStatus: function (status) {
+    return status >= 200 && status < 300; // default
+  },
+
+  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
+  // 如果设置为0，将不会 follow 任何重定向
+  maxRedirects: 5, // default
+
+  // `socketPath` defines a UNIX Socket to be used in node.js.
+  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
+  // Only either `socketPath` or `proxy` can be specified.
+  // If both are specified, `socketPath` is used.
+  socketPath: null, // default
+
+  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
+  // `keepAlive` 默认没有启用
+  httpAgent: new http.Agent({ keepAlive: true }),
+  httpsAgent: new https.Agent({ keepAlive: true }),
+
+  // 'proxy' 定义代理服务器的主机名称和端口
+  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
+  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
+  proxy: {
+    host: '127.0.0.1',
+    port: 9000,
+    auth: {
+      username: 'mikeymike',
+      password: 'rapunz3l'
+    }
+  },
+
+  // `cancelToken` 指定用于取消请求的 cancel token
+  // （查看后面的 Cancellation 这节了解更多）
+  cancelToken: new CancelToken(function (cancel) {
+  })
+}
+```
+
+
+### 响应结构
+
+
+某个请求的响应包含以下信息
+```js
+
+{
+  // `data` 由服务器提供的响应
+  data: {},
+
+  // `status` 来自服务器响应的 HTTP 状态码
+  status: 200,
+
+  // `statusText` 来自服务器响应的 HTTP 状态信息
+  statusText: 'OK',
+
+  // `headers` 服务器响应的头
+  headers: {},
+
+   // `config` 是为请求提供的配置信息
+  config: {},
+ // 'request'
+  // `request` is the request that generated this response
+  // It is the last ClientRequest instance in node.js (in redirects)
+  // and an XMLHttpRequest instance the browser
+  request: {}
+}
+
+
+
+axios.get('/user/12345')
+  .then(function(response) {
+    console.log(response.data);
+    console.log(response.status);
+    console.log(response.statusText);
+    console.log(response.headers);
+    console.log(response.config);
+  });
+```
+
+
+## 3 特殊处理
+
+### 全局的 axios 默认值
+```js
+axios.defaults.baseURL = 'https://api.example.com';
+axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+```
+
+### 自定义实例默认值
+
+```js
+// Set config defaults when creating the instance
+const instance = axios.create({
+  baseURL: 'https://api.example.com'
+});
+
+// Alter defaults after instance has been created
+instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+```
+### 配置的优先顺序
+
+配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：
+
+```
+// 使用由库提供的配置的默认值来创建实例
+// 此时超时配置的默认值是 `0`
+var instance = axios.create();
+
+// 覆写库的超时默认值
+// 现在，在超时前，所有请求都会等待 2.5 秒
+instance.defaults.timeout = 2500;
+
+// 为已知需要花费很长时间的请求覆写超时设置
+instance.get('/longRequest', {
+  timeout: 5000
+});
+```
+### 拦截器
+在请求或响应被 then 或 catch 处理前拦截它们。
+```js
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  }, function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  });
+
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+    // 对响应数据做点什么
+    return response;
+  }, function (error) {
+    // 对响应错误做点什么
+    return Promise.reject(error);
+  });
+```
+如果你想在稍后移除拦截器，可以这样：
+```
+const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
+axios.interceptors.request.eject(myInterceptor);
+```
+可以为自定义 axios 实例添加拦截器
+```
+const instance = axios.create();
+instance.interceptors.request.use(function () {/*...*/});
+```
+### 错误处理
+```js
+axios.get('/user/12345')
+  .catch(function (error) {
+    if (error.response) {
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+      console.log(error.response.data);
+      console.log(error.response.status);
+      console.log(error.response.headers);
+    } else if (error.request) {
+      // The request was made but no response was received
+      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+      // http.ClientRequest in node.js
+      console.log(error.request);
+    } else {
+      // Something happened in setting up the request that triggered an Error
+      console.log('Error', error.message);
+    }
+    console.log(error.config);
+  });
+```
+可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。
+```js
+axios.get('/user/12345', {
+  validateStatus: function (status) {
+    return status < 500; // Reject only if the status code is greater than or equal to 500
+  }
+})
+```

JavaScript/Ajax/4 fetch.md

@@ -0,0 +1,55 @@
+## 1 简介
+
+参考文件：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
+
+## 2 使用
+### 基本用法
+
+```js
+// Example POST method implementation:
+async function postData(url = "", data = {}) {
+  // Default options are marked with *
+  const response = await fetch(url, {
+    method: "POST", // *GET, POST, PUT, DELETE, etc.
+    mode: "cors", // no-cors, *cors, same-origin
+    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: "same-origin", // include, *same-origin, omit
+    headers: {
+      "Content-Type": "application/json",
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: "follow", // manual, *follow, error
+    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: JSON.stringify(data), // body data type must match "Content-Type" header
+  });
+  return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData("https://example.com/answer", { answer: 42 }).then((data) => {
+  console.log(data); // JSON data parsed by `data.json()` call
+});
+
+```
+
+
+### 上传文件
+
+```js
+const formData = new FormData();
+const fileField = document.querySelector('input[type="file"]');
+
+formData.append("username", "abc123");
+formData.append("avatar", fileField.files[0]);
+
+fetch("https://example.com/profile/avatar", {
+  method: "PUT",
+  body: formData,
+})
+  .then((response) => response.json())
+  .then((result) => {
+    console.log("Success:", result);
+  })
+  .catch((error) => {
+    console.error("Error:", error);
+  });
+```

JavaScript/Ajax/5 jquery.md

@@ -0,0 +1,74 @@
+## 1 load
+
+### load方法
+jQuery load() 方法是简单但强大的 AJAX 方法。
+
+load() 方法从服务器加载数据，并把返回的数据放入被选元素中
+
+```
+$(selector).load(URL,data,callback);
+
+$("#div1").load("demo_test.txt");
+```
+
+### load回调参数
+
+可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
+
+responseTxt - 包含调用成功时的结果内容
+statusTXT - 包含调用的状态
+xhr - 包含 XMLHttpRequest 对象
+
+```
+$("button").click(function(){
+  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
+    if(statusTxt=="success")
+      alert("外部内容加载成功!");
+    if(statusTxt=="error")
+      alert("Error: "+xhr.status+": "+xhr.statusText);
+  });
+});
+```
+
+## 2 GET方法
+GET - 从指定的资源请求数据.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
+```
+$.get(URL,callback);
+
+$("button").click(function(){
+  $.get("demo_test.php",function(data,status){
+    alert("数据: " + data + "\n状态: " + status);
+  });
+});
+```
+## 3 POST方法
+
+POST - 向指定的资源提交要处理的数据.POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据
+
+```
+$.post(URL,data,callback);
+
+$("button").click(function(){
+    $.post("/try/ajax/demo_test_post.php",
+    {
+        name:"菜鸟教程",
+        url:"http://www.runoob.com"
+    },
+    function(data,status){
+        alert("数据: \n" + data + "\n状态: " + status);
+    });
+});
+```
+
+
+## 2 GET JSON方法
+GET - 从指定的资源请求数据.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
+```
+$.getJSON(URL,callback);
+
+$("button").click(function(){
+  $.get("demo_test.php",function(data,status){
+    alert("数据: " + data + "\n状态: " + status);
+  });
+});
+```

JavaScript/JavaScript/13 Dom.md

@@ -0,0 +1,214 @@
+# Dom 相关的常用的操作
+
+## 1 基础操作
+
+### 五种节点类型
+
+* 文档是一个文档节点。
+* 所有的HTML元素都是元素节点。
+* 所有 HTML 属性都是属性节点。
+* 文本插入到 HTML 元素是文本节点。are text nodes。
+* 注释是注释节点。
+
+### DOM的组成
+
+- 核心 DOM - 针对任何结构化文档的标准模型
+- XML DOM - 针对 XML 文档的标准模型
+- HTML DOM - 针对 HTML 文档的标准模型
+
+### 节点关系
+
+- 在节点树中，顶端点被称为根
+- 每个节点都有父节点
+- 一个节点可拥有任意数量的子节点
+- 同胞是拥有相同父节点的结点
+
+### 节点操作
+
+可以通过JS等脚本语言对HTML_DOM进行访问
+
+所有的HTML元素都被定义为对象，而编程接口则是对象的方法和对象的属性
+
+方法是能够执行的动作（添加或修改元素节点）
+
+属性是能够获取或设置的值（节点的名称或内容）
+
+## 2 文档节点
+
+### document object
+
+model：文档对象模型，将HTML文档呈现为带有元素、属性和文本的树结构，成为节点树。三种DOM结点;
+
+* 元素节点：`<html\>\<body\>\<p\>(tag)`
+* 文本节点：````<li></li>```````<script><css>```
+* 属性节点：元素属性 `<a href = "http://">`其中href即为元素的属性
+
+![713150815405.png](media/41b23d86a383cc654da42e8957b33725.png)
+
+![724101446557.png](media/75813153285d5ceb04c812e98c3b33a1.png)
+
+#### 节点属性
+
+* nodeName：
+
+  * 元素节点的 nodeName 与标签名相同
+  * 属性节点的 nodeName 是属性的名称
+  * 文本节点的 nodeName 永远是#text
+  * 文档节点的 nodeName 永远是#document
+* nodeType：
+
+  * 节点类型1-\>元素节点；
+  * 2-\>属性节点；
+  * 3-\>文本节点
+* nodeValue：节点值，元素节点返回null，属性节点返回属性值，文本节点返回文本内容
+
+  * 元素节点的 nodeValue 是 undefined 或 null
+  * 文本节点的 nodeValue 是文本自身
+  * 属性节点的 nodeValue 是属性的值
+* childNodes：返回子节点数组（只有元素节点有子节点）
+* firstChild：返回第一个子节点
+* lastChild：返回最后一个子节点
+* nextSibling：返回下一个兄弟节点
+* previousSibling：返回节点的上一个兄弟节点
+* parentNode：返回节点的父节点。
+
+### 节点方法
+
+document对象的节点方法
+
+* write()：写入内容到文档
+* getElementBYId()：返回指定ID的元素
+* getElementsByTagName()：返回带有制定标签名的所有元素（是一个数组）
+* get/setAttribute('key', 'value')：返回设置属性节点
+
+其他元素的结点方法：
+
+| 节点方法                         | 说明                           |
+| -------------------------------- | ------------------------------ |
+| createElenment('tafName')        | 创建元素节点                   |
+| createTextNode(‘text’)         | 创建文本节点                   |
+| appendChild(o)                   | 在父节点末尾附加子节点         |
+| reateDocumentFragment()          | 创建文档片段                   |
+| removeChild(oP)                  | 删除节点                       |
+| replaceChild(newOp,targetOp)     | 替换节点                       |
+| insertBefore(newOp,targerOp)     | 已有的子节点前插入一个新的节点 |
+| insertAfter(newOp,targetOp)      | 已有的子节点后插入一个新的节点 |
+| get/setAttribute('key', 'value') | 设置或得到属性节点             |
+| clonNode(true/false)             | 复制节点                       |
+
+元素内容
+
+* innerHTML（替换时包括其中的html标签）
+* innerText（替换时只有其中的文本内容）
+
+元素样式
+
+方法：
+
+* style属性，能够创建新的属性并赋值
+* className属性，只能改变标签的类属性，使用已经有的类来改变标签的属性
+
+语法：
+
+* object.style.property = new style;
+* object.style.className = "class"
+
+## 3 页面设置
+
+### 页面尺寸
+
+宽高尺寸
+
+* clientWidth / clientHeight窗口的宽度高度
+* scrollWidth / scrollHeight文档内容的高度宽度
+* offsetWidth / offsetHeight文档内容的高度宽度
+
+坐标位置
+
+* scrollleft / scrollTop滚轴的水平便宜距离，垂直偏移距离
+* offsetLeft / offsetTop对象与页面的边距
+* event.clientX / event.clientY事件触发时，鼠标指针对窗口的水平垂直坐标(event为时间)
+
+> 注意事项：documentElement是整个节点树的根节点root，即html标签，document.body也是document能直接调用的属性标签
+
+语法：
+
+* object.offsetLeft/oobject.offsetTop
+
+## 4 节点遍历
+
+
+### 父子节点
+
+childNode
+
+* 使用语法：elementNode.childNodes
+
+> 注意事项：空白节点会被浏览器但顾总文本节点
+
+firstChild lastChild
+
+* 使用语法：node.firstChild node.lastChild
+
+parentNode
+
+* 使用语法:elementNode.parentNode
+
+## 5 节点操作
+
+### 主要方法
+
+| 方法                     | 描述                                                            |
+| ------------------------ | --------------------------------------------------------------- |
+| getElementById()         | 返回带有指定 ID 的元素。                                        |
+| getElementsByTagName()   | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
+| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。                      |
+| appendChild()            | 把新的子节点添加到指定节点。                                    |
+| removeChild()            | 删除子节点。                                                    |
+| replaceChild()           | 替换子节点。                                                    |
+| insertBefore()           | 在指定的子节点前面插入新的子节点。                              |
+| createAttribute()        | 创建属性节点。                                                  |
+| createElement()          | 创建元素节点。                                                  |
+| createTextNode()         | 创建文本节点。                                                  |
+| getAttribute()           | 返回指定的属性值。                                              |
+| setAttribute()           | 把指定属性设置或修改为指定的值。                                |
+
+属性：
+
+innerHTML //元素节点的文本值
+
+parentNode//元素节点的父节点
+
+childNodes//元素节点的子节点
+
+atrributes//元素节点的属性节点
+
+nodeName属性规定节点的名称（只读）
+
+nodeValue规定节点的值
+
+### nodeType属性返回节点的类型
+
+| 元素类型 | NodeType |
+| -------- | -------- |
+| 元素     | 1        |
+| 属性     | 2        |
+| 文本     | 3        |
+| 注释     | 8        |
+| 文档     | 9        |
+
+> 在这里，将html中的各个部分解析成节点的概念，有助于通过结点树建立节点关系模型，非常好，而且简单。然后，有将html中各个部分，定义成对象，并且定义了对象的属性和方法，能够很轻松的完成对元素的访问和操作。提到对象，联系C++中的知识，可以知道，对象，主要包括数据成员和成员函数，前者就是对象的属性，后者是对象的方法。然后再说一下这里的DOM的理解，文档对象模型。简单的说，就是讲整个html文档中的所有元素，定义成节点和对象的过程并且通过这种定义，简化并且系统的表达了对html的访问和操作。
+
+### DOM中相关的事件
+
+.onclick=function(){displayDate()};
+
+onclick="displayDate()"
+
+onload="checkCookies()"
+
+onchange="upperCase()"
+
+onmouseover onmouseout
+
+onmousedown onmouseup

JavaScript/教程/DOM对象.md

@@ -1,196 +0,0 @@
-\>简介
-
-\>\>document object
-model：文档对象模型，将HTML文档呈现为带有元素、属性和文本的树结构，成为节点树
-
-\>\>三种DOM结点;
-
->   元素节点：\<html\>\<body\>\<p\>(tag)
-
->   文本节点：\<li\>\</li\>\<script\>\<css\>
-
->   属性节点：元素属性\<a href = "http://"\>其中href即为元素的属性
-
-![713150815405.png](media/41b23d86a383cc654da42e8957b33725.png)
-
-\>\>节点属性：
-
->   nodeName：
-
->   1\. 元素节点的 nodeName 与标签名相同
-
->   2\. 属性节点的 nodeName 是属性的名称
-
->   3\. 文本节点的 nodeName 永远是\#text
-
->   4\. 文档节点的 nodeName 永远是\>\#document
-
->   nodeType：节点类型1-\>元素节点；2-\>属性节点；3-\>文本节点
-
->   nodeValue：节点值，元素节点返回null，属性节点返回属性值，文本节点返回文本内容
-
->   1\. 元素节点的 nodeValue 是 undefined 或 null
-
->   2\. 文本节点的 nodeValue 是文本自身
-
->   3\. 属性节点的 nodeValue 是属性的值
-
->   childNodes：返回子节点数组（只有元素节点有子节点）
-
->   firstChild：返回第一个子节点
-
->   lastChild：返回最后一个子节点
-
->   nextSibling：返回下一个兄弟节点
-
->   previousSibling：返回节点的上一个兄弟节点
-
->   parentNode：返回节点的父节点。
-
-\>\>节点方法（是document对象的节点方法）
-
->   write()：写入内容到文档
-
->   getElementBYId()：返回指定ID的元素
-
->   getElementsByTagName()：返回带有制定标签名的所有元素（是一个数组）
-
->   get/setAttribute('key', 'value')：返回设置属性节点
-
-\>\>其他元素的结点方法：
-
-| 节点方法                         | 说明                           |
-|----------------------------------|--------------------------------|
-| createElenment('tafName')        | 创建元素节点                   |
-| createTextNode(‘text’)           | 创建文本节点                   |
-| appendChild(o)                   | 在父节点末尾附加子节点         |
-| reateDocumentFragment()          | 创建文档片段                   |
-| removeChild(oP)                  | 删除节点                       |
-| replaceChild(newOp,targetOp)     | 替换节点                       |
-| insertBefore(newOp,targerOp)     | 已有的子节点前插入一个新的节点 |
-| insertAfter(newOp,targetOp)      | 已有的子节点后插入一个新的节点 |
-| get/setAttribute('key', 'value') | 设置或得到属性节点             |
-| clonNode(true/false)             | 复制节点                       |
-
-\>元素内容
-
->   innerHTML（替换时包括其中的html标签）
-
->   innerText（替换时只有其中的文本内容）
-
->   修改p标签的这两个值会得到不同的结果
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
-[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<p\>**JavaScript**\</p\>**
-
-3.  **\<p\>**JavaScript**\</p\>**
-
-4.  **\<input** type="button" id="inp" value="click"**\>**
-
-5.  **\<script** type="text/javascript"**\>**
-
-6.  var inp = document.getElementById('inp');
-
-7.  inp.onclick = function(){
-
-8.  var ip = document.getElementsByTagName('p');
-
-9.  alert(ip[0].innerHTML);
-
-10. ip[0].innerHTML = "\<i\>hello\</i\>";
-
-11. ip[1].innerText = "\<i\>hello\</i\>";
-
-12. }
-
-13. **\</script\>**
-
-14. **\</body\>\</span\>**
-
-![713160404053.png](media/a287b11ce3f0470882a238120c33a6bb.png)
-
-![713160410069.png](media/04d4031de63e53c5addd72792a6b60bd.png)
-
-\>元素样式
-
->   方法：
-
->   style属性，能够创建新的属性并赋值
-
->   className属性，只能改变标签的类属性，使用已经有的类来改变标签的属性
-
->   语法：
-
->   object.style.property = new style;
-
->   object.style.className = "class"
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
-[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<h2** id="ih"**\>**JavaScript**\</h2\>**
-
-3.  **\<input** type="button" id="inp" value="click"**\>**
-
-4.  **\<script** type="text/javascript"**\>**
-
-5.  var inp = document.getElementById("inp");
-
-6.  inp.onclick = function () {
-
-7.  var oh = document.getElementById("ih");
-
-8.  oh.style.color = "red";
-
-9.  oh.style.width = "300px";
-
-10. oh.style.backgroundColor = "\#CCC";
-
-11. }
-
-12. **\</script\>**
-
-13. **\</body\>\</span\>**
-
-\>显示和隐藏
-
->   display = none 或者block
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
-[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<p** id="ip"**\>**你可以把我隐藏，也可以让我显示哦\~**\</p\>**
-
-3.  **\<input** type="button" id="ihide" value="hide"**\>**
-
-4.  **\<input** type="button" id="ishow" value="show"**\>**
-
-5.  **\<script** type="text/javascript"**\>**
-
-6.  var op = document.getElementById("ip");
-
-7.  var inp = document.getElementsByTagName("input");
-
-8.  inp[0].onclick = function () {
-
-9.  op.style.display = "none";
-
-10. }
-
-11. inp[1].onclick = function () {
-
-12. op.style.display = 'block';
-
-13. }
-
-14. **\</script\>**
-
-15. **\</body\>\</span\>**

JavaScript/教程/DOM对象三.md

@@ -1,99 +0,0 @@
-\>页面尺寸
-
-\>\>宽高尺寸
-
->   clientWidth / clientHeight窗口的宽度高度
-
->   scrollWidth / scrollHeight文档内容的高度宽度
-
->   offsetWidth / offsetHeight文档内容的高度宽度
-
-\>\>坐标位置
-
->   scrollleft / scrollTop滚轴的水平便宜距离，垂直偏移距离
-
->   offsetLeft / offsetTop对象与页面的边距
-
->   event.clientX /
->   event.clientY事件触发时，鼠标指针对窗口的水平垂直坐标(event为时间)
-
-//注意事项：documentElement是整个节点树的根节点root，即html标签，document.body也是document能直接调用的属性标签
-
-语法：
-
->   object.offsetLeft/oobject.offsetTop
-
-\>拖拽功能的实现
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51900581)
-[copy](http://blog.csdn.net/estom_yin/article/details/51900581)
-
-1.  **\<html\>**
-
-2.  **\<head\>**
-
-3.  **\<meta** charset="UTF-8"**\>**
-
-4.  **\<title\>**event**\</title\>**
-
-5.  **\<style\>**
-
-6.  \#box {
-
-7.  width: 100px;
-
-8.  height: 100px;
-
-9.  background-color: aquamarine;
-
-10. position: absolute;
-
-11. }
-
-12. **\</style\>**
-
-13. **\</head\>**
-
-14. **\<body\>**
-
-15. **\<div** id="box"**\>\</div\>**
-
-16. **\<script** type="text/javascript"**\>**
-
-17. var oDiv = document.getElementById("box");
-
-18. oDiv.onmousedown = function(ev){
-
-19. var oEvent = ev;
-
-20. var disX = oEvent.clientX-oDiv.offsetLeft;
-
-21. var disY = oEvent.clientY-oDiv.offsetTop;
-
-22. document.onmousemove = function(ev){
-
-23. oEvent = ev;
-
-24. oDiv.style.left = oEvent.clientX - disX +"px";
-
-25. oDiv.style.top = oEvent.clientY - disY +"px";
-
-26. }
-
-27. document.onmouseup = function(){
-
-28. document.onmousemove = null;
-
-29. document.onmouseup = null;
-
-30. }
-
-31. }
-
-32. 
-
-33. **\</script\>**
-
-34. **\</body\>**
-
-35. **\</html\>**

JavaScript/教程/DOM对象二——节点与遍历.md

@@ -1,306 +0,0 @@
-\>父子节点
-
-\>\>childNode
-
->   使用语法：elementNode.childNodes
-
->   注意事项：空白节点会被浏览器但顾总文本节点
-
-\>\>firstChild lastChild
-
->   使用语法：node.firstChild node.lastChild
-
-\>\>parentNode
-
->   使用语法:elementNode.parentNode
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
-[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<ul** id="father"**\>**
-
-3.  **\<li\>**大娃**\</li\>**
-
-4.  **\</ul\>**
-
-5.  **\<script** type="text/javascript"**\>**
-
-6.  var li_num = 0;
-
-7.  var childNodes = document.getElementById("father").childNodes;
-
-8.  for(var i = 0; i **\<** **childNodes.length**; i++){
-
-9.  document.write("节点名：" + childNodes[i].nodeName + " ");
-
-10. document.write("节点类型：" + childNodes[i].nodeType + " ");
-
-11. if(childNodes[i].nodeType == 1){
-
-12. document.write("我是" + childNodes[i].innerHTML + "**\<br\>**");
-
-13. li_num++;
-
-14. }
-
-15. else{
-
-16. document.write("**\<br\>**");
-
-17. console.log("这是一个空节点，不用理他");
-
-18. }
-
-19. }
-
-20. document.write("子节点数目：" + childNodes.length + "**\<br\>**");
-
-21. document.write("li 子节点数目：" + li_num + "**\<br\>**");
-
-22. document.write("文本子节点数目：" + (childNodes.length - li_num));
-
-23. **\</script\>**
-
-24. **\</body\>\</span\>**
-
-//补充节点的属性还有title！
-
-\>兄弟节点
-
->   previousSibling nextSibling
-
->   使用语法：
-
->   nodeobject.nextSibling / previousSibling
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
-[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<ul** id="father"**\>**
-
-3.  **\<li** title="force_max"**\>**大娃**\</li\>**
-
-4.  **\<li** id="second_children"**\>**二娃**\</li\>**
-
-5.  **\<li** title="fire"**\>**三娃**\</li\>**
-
-6.  **\</ul\>**
-
-7.  **\<script** type="text/javascript"**\>**
-
-8.  function getprenode(node){
-
-9.  var prenode = node.previousSibling;
-
-10. while(prenode && prenode.nodeType != 1){
-
-11. prenode = prenode.previousSibling;
-
-12. }
-
-13. return prenode;
-
-14. }
-
-15. function getnextnode(node){
-
-16. var nextnode = node.nextSibling;
-
-17. while(nextnode && nextnode.nodeType != 1){
-
-18. nextnode =nextnode.nextSibling;
-
-19. }
-
-20. return nextnode;
-
-21. }
-
-22. var second_children = document.getElementById("second_children");
-
-23. var first_children = getprenode(second_children);
-
-24. var third_children = getnextnode(second_children);
-
-25. alert(first\_children.innerHTML+first_children.title);
-
-26. alert(third\_children.innerHTML+third_children.title);
-
-27. **\</script\>**
-
-28. **\</body\>\</span\>**
-
-//虽然觉得这是史上最无聊的程序，但还是含泪贴上了
-
-\>创建节点方法
-
->   createElement('tagName'):创建节点
-
->   crreateTextNode("text")：穿件文本节点
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
-[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
-
-1.  **\<span** style="font-size:14px;"**\>** var newinp =
-    document.createElement("input");
-
-2.  alert(newinp);
-
-3.  var newtext = document.createTextNode("text");
-
-4.  alert(newtext);**\</span\>**
-
-\>添加删除节点
-
->   nodeobject.appendChild(newnode)：父节点末尾添加
-
->   nodeobject.removeChild(node)：删除节点
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
-[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<ul** id="father"**\>**
-
-3.  **\<li\>**大娃**\</li\>**
-
-4.  **\</ul\>**
-
-5.  **\<input** type="button" id="createbtn" value="祭出紫金葫芦"**\>**
-
-6.  **\<script** type="text/javascript"**\>**
-
-7.  function createnode(){
-
-8.  var btn = document.createElement("input");
-
-9.  btn.setAttribute("type", "button");
-
-10. btn.setAttribute("name", "紫金葫芦");
-
-11. btn.setAttribute("value", "吸进去");
-
-12. btn.setAttribute("onclick", "removenode()");
-
-13. document.body.appendChild(btn);
-
-14. }
-
-15. function removenode(){
-
-16. var fnode = document.getElementById("father");
-
-17. var nodes = fnode.childNodes;
-
-18. for(var i = 0; i **\<** **nodes.length**; i++){
-
-19. if(nodes[i] && nodes[i].nodeType == 1){
-
-20. var rm = fnode.removeChild(nodes[i]);
-
-21. rm = null;
-
-22. break;
-
-23. }
-
-24. }
-
-25. }
-
-26. var createbtn = document.getElementById("createbtn");
-
-27. createbtn.onclick = createnode;
-
-28. **\</script\>**
-
-29. **\</body\>\</span\>**
-
-//有很多需要注意的地方，等吃饭回来补充
-
->   appendChild()方法的主体必须使父节点，而且只能添加到节点对类的末尾
-
-\>插入节点
-
->   fnode.insertBefore(newnode，node)：可以指定插如节点的位置（在node之前）返回值是插入的节点
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
-[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<ul** id="father"**\>**
-
-3.  **\<li\>**二娃**\</li\>**
-
-4.  **\</ul\>**
-
-5.  **\<input** type="button" id="add-btn" value="add"**\>**
-
-6.  **\<script** type="text/javascript"**\>**
-
-7.  function addnode(){
-
-8.  var fnode = document.getElementById("father");
-
-9.  var newnode = document.createElement("li");
-
-10. newnode.innerHTML = "大娃";
-
-11. fnode.insertBefore(newnode, fnode.childNodes[0]);
-
-12. }
-
-13. var add = document.getElementById("add-btn");
-
-14. add.onclick = addnode;
-
-15. **\</script\>**
-
-16. **\</body\>\</span\>**
-
-\>替换子节点（克隆替换）
-
->   fonde.replaceChild(newnode, oldnode) //返回值是被替换的节点
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
-[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<ul** id="father"**\>**
-
-3.  **\<li** id="first"**\>**大娃**\</li\>**
-
-4.  **\<li\>**二娃**\</li\>**
-
-5.  **\</ul\>**
-
-6.  **\<input** type="button" id="replace-btn" value="replace"**\>**
-
-7.  **\<script** type="text/javascript"**\>**
-
-8.  function replacenode(){
-
-9.  var oldnode = document.getElementById("first");
-
-10. var newnode = document.createElement("li");
-
-11. newnode.innerHTML = "金刚葫芦娃";
-
-12. oldnode.parentNode.replaceChild(newnode, oldnode);
-
-13. }
-
-14. var replace = document.getElementById("replace-btn");
-
-15. replace.onclick = replacenode;
-
-16. **\</script\>**
-
-17. **\</body\>\</span\>**

JavaScript/教程/DOM简介.md

@@ -1,155 +0,0 @@
-\>DOM树（document_object_moudule）
-
-![724101446557.png](media/75813153285d5ceb04c812e98c3b33a1.png)
-
-\>\>DOM定义
-
-是w3c文档对象模型，是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容、结构和样式。
-
-\>\>DOM的组成
-
--   核心 DOM - 针对任何结构化文档的标准模型
-
--   XML DOM - 针对 XML 文档的标准模型
-
--   HTML DOM - 针对 HTML 文档的标准模型
-
-\>DOM节点（通过结点树的方法指明了各个元素之间的关系）
-
-\>\>文档节点、元素节点、文本节点、属性节点、注释节点
-
-\>\>所有的结点都可以通过JS进行访问、所有的HTML元素节点都可以别修改，也可以创建删除节点
-
-\>\>节点关系
-
--   再节点树中，顶端点被称为根
-
--   每个节点都有父节点
-
--   一个节点可拥有任意数量的子节点
-
--   同胞是拥有相同父节点的结点
-
-\>DOM方法（通过定义类的对象的方法，实现了访问结点）
-
-\>\>编程接口
-
-可以通过JS等脚本语言对HTML_DOM进行访问
-
-所有的HTML元素都被定义为对象，而编程接口则是对象的方法和对象的属性
-
-方法是能够执行的动作（添加或修改元素节点）
-
-属性是能够获取或设置的值（节点的名称或内容）
-
-\>\>常用的HTML_DOM方法和属性
-
-方法：
-
-访方法id,tagName,ClassName
-
-修改方法修改内容、修改样式、修改属性、创建节点、删除节点。
-
-修改内容
-
-document.getElementById("p1").innerHTML="New text!";
-
-修改样式
-
-document.getElementById("p2").style.color="blue";
-
-创建节点
-
-var node=document.createTextNode("This is new.");
-
-使用事件节点
-
-\<input type="button" onclick="document.body.style.backgroundColor='lavender';"
-value="Change background color" /\>
-
-添加元素
-
-para.appendChild(node);
-
-element.insertBefore(para,child);
-
-删除元素
-
-parent.removeChild(child);
-
-替换元素
-
-parent.replaceChild(para,child);
-
-| 方法                     | 描述                                                            |
-|--------------------------|-----------------------------------------------------------------|
-| getElementById()         | 返回带有指定 ID 的元素。                                        |
-| getElementsByTagName()   | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
-| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。                      |
-| appendChild()            | 把新的子节点添加到指定节点。                                    |
-| removeChild()            | 删除子节点。                                                    |
-| replaceChild()           | 替换子节点。                                                    |
-| insertBefore()           | 在指定的子节点前面插入新的子节点。                              |
-| createAttribute()        | 创建属性节点。                                                  |
-| createElement()          | 创建元素节点。                                                  |
-| createTextNode()         | 创建文本节点。                                                  |
-| getAttribute()           | 返回指定的属性值。                                              |
-| setAttribute()           | 把指定属性设置或修改为指定的值。                                |
-
-属性：
-
-innerHTML //元素节点的文本值
-
-parentNode//元素节点的父节点
-
-childNodes//元素节点的子节点
-
-atrributes//元素节点的属性节点
-
-nodeName属性规定节点的名称（只读）
-
-nodeValue规定节点的值
-
-nodeType属性返回节点的类型
-
-| 元素类型 | NodeType |
-|----------|----------|
-| 元素     | 1        |
-| 属性     | 2        |
-| 文本     | 3        |
-| 注释     | 8        |
-| 文档     | 9        |
-
-\>\>说一下自己的理解
-
-在这里，将html中的各个部分解析成节点的概念，有助于通过结点树建立节点关系模型，非常好，而且简单。
-
-然后，有将html中各个部分，定义成对象，并且定义了对象的属性和方法，能够很轻松的完成对元素的访问和操作。
-
-提到对象，联系C++中的知识，可以知道，对象，主要包括数据成员和成员函数，前者就是对象的属性，后者是对象的方法。
-
-然后再说一下这里的DOM的理解，文档对象模型。简单的说，就是讲整个html文档中的所有元素，定义成节点和对象的过程
-
-并且通过这种定义，简化并且系统的表达了对html的访问和操作。
-
-\>DOM中相关的事件
-
-.onclick=function(){displayDate()};
-
-onclick="displayDate()"
-
-onload="checkCookies()"
-
-onchange="upperCase()"
-
-onmouseover onmouseout
-
-onmousedown onmouseup
-
-\>DOM
-
-var x = document.getElementsByTagName("p")
-
-返回是节点数组
-
-x.length能返回数组的长度

JavaScript/教程/初识JavaScript.md

@@ -1,162 +0,0 @@
-**\>变量与数据类型**
-
-\>\>定义：JavaScript，是一种脚本语言（编程语言，用来控制软件应用程序，以文本（ASCIIS）形式保存，在需要时被调用进行解释或编译），广泛应用于客户端网页开发，现在服务端也有应用NODEJS。动态、弱类型、基于原型的语言。像大多数编程语言一样，有变量、类型、流程控制
-
-\>\>变量名称规则：字母下划线或美元符开头，大小写敏感，不允许使用js的关键字或者保留字作为文件名（作为解释性语言的一大优势就是不用考虑变量类型，提前分配孔家，编译过程中，分配空间就行）
-
-\>\>变量类型：整型，浮点型，字符型，字符串。
-
-\>\>变量定义：var 变量名；
-
-（感觉像是C的私生子，有些地方不是那么严格，更加灵活变通）
-
-**\>变量运算**
-
-\>\>自增自减运算
-
-\>\>简化运算。
-
-\>\>字符串之间可以直接进行加法运算，表示连接。
-
-\>\>字符串可以和其它类型的变量加法，表示转换成字符串类型，并连接。
-
-\>数组
-
-\>\>用于存放多个各种类型的数据，便于访问
-
-\>\>数组的定义：
-
-var arr = new array()//参数是数组长度
-
-var arr = [‘a'，'b','c'];//可以直接使用数组内的元素定义
-
-\>\>数组支持嵌套，多重数组（有点类似于存有多种数据的广义表）
-
-\>\>数组一定有length属性，arr.length等于键名中最大值加一。
-
-\>\>数组的长度可以直接在定义数组的时候给出
-
-\>\>数组的定义函数：参数可以是数组，也可以是变量初始化数组中的数据。
-
-\>\>数组的长度可以在任意时候添加，不会出现越界，这就是解释性语言的好处。
-
-**\>对象**
-
-\>\>定义：带有自己的属性和方法的数据类型。含有多个键值对。
-
-var o = {
-
-p:"hello"
-
-}
-
-var 变量声明，o 变量名称，p 键名（属性名）， hello 键值（属性值），
-冒号分隔。数据对象的大括号包含，最后加分号。当键名不符合标识符的条件时，必须加引号
-
-\>\>创建语句：
-
-var ogj1 = {};
-//大括号，只是声明了这是个对象，但不能说明这个对象属于哪一个类（类和类的对象的理念）
-
-var obj2 = new Object(); //相当于调用对象的构造函数，然后形成一个新的对象
-
-var obj3 = Object.create(null);//想当于调用一个已知对象的构造函数
-
-\>\>对象的引用,如果不同的变量指向同一个对象，他们都称作这个对象的引用，也就是说这些对象指向同一个内存地址，修改其中一个变量的属性，会影响到其他的变量。
-
-\>\>对象属性访的问方式： 对象名.对象的属性。objectName.propertyName //数据成员
-
-\>\>对象方法的访问方式：objectName.methodName(); //成员函数
-
-\>时间类的对象定义：
-
-var now = new Data(); //定义了一个时间对象now
-
-now.setTime（); // 设定时间
-
-now.getTime(); //得到完整的时间
-
-now.getFullYear(); //的到年份
-
-now.getMonth(); //得到月份
-
-now.getData(); //得到日期几号
-
-now.getHours(); //得到小时
-
-now.getMinutes(); //得到分钟
-
-now.getSeconds(); //得到秒
-
-now.getDay(); //星期
-
-\>string类的 对象的使用
-
-对象的定义：
-
-var mystr = “i like javascript”;
-
-var mystr = new String("some string");
-
-对象的访问：
-
-string.toUpperCase();
-
-string.toLowerCase();
-
-string.charAt(number); //返回指定的单个字符
-
-string.indexOf(substring, startpos); //在字符串中寻找子串
-
-string.split(separator, limit);
-//将字符串分割为字符串数组,separator是分割符，limit是分割次数
-
-string.substring(startpos,stoppos);
-//截取子串，参数分别是起止下标（终止与stop-1）
-
-string.substr(startpos, length);
-//截取指定长度的子串，参数分别是起始值、子串长度
-
-\>Math对象(本身就是一个对象而不是类)
-
-\>\>对象成员的使用
-
-Math.PI //圆周率
-
-Math.abs() //绝对值
-
-Math.ceil()/floor()/round() //分别是向上取整，向下取整，四舍五入。
-
-random(); //返回0到1之间的随机数（包含0不包含1）
-
-Math.min() / Math.max(); //返回指定数值中最低值
-
-\>数组类的对象使用
-
-\>\>数组对象的定义方法：
-
-var 数组名 = new Array();
-
-var 数组名 = new Array();
-
-var 数组名 = [元素1，元素2，元素3,,,,,]
-
-\>\>数组对象的使用
-
-数组名[下标] = 值
-
-\>\>数组对象的属性
-
-arr.length //数组的长度
-
-arr.concat(arr1, arr2,arr3.....)
-//链接多个数组,不改变数组对象arr，返回值是多个数组的连续
-
-arr.join(separator); //separator是指分割符。
-
-arr.reverse(); //倒序，arr被改变
-
-arr.slice(start, end);
-//返回子数组，不包含end，负数表示从末尾开始想前数，不修改原来的数组
-
-arr.sort(方法函数); //如果不指定函数，按Unicode编码的顺序排列

JavaScript/教程/对CSS的认识.md

@@ -1,21 +0,0 @@
-\>css的三种样式的定义方法
-
-\>\>标签选择：使用html标签，对html中所有标签起作用
-
-.\>\>器类别选择器：.类名，调用时：class = “类名”。
-
-\>\>ID选择器 \#id，调用时：id = “ID符号”
-
-\>选择器的分类及关系
-
-子代选择器：只能选择下一层的自带，使用\>来执行
-
-后代选择器：也称包含选择器，选择特定元素或元素组的后代，中间用空格&nbsp隔开
-
-伪类选择器：a：hover，a：link，a：visited，input：focus
-
-通用选择器：\*匹配所有的代码
-
-群组选择器：，使用逗号隔开，相同的样式属性的几个元素
-
-相邻同胞选择器：+表示与前者相邻的后者的格式

JavaScript/教程/浏览器对象.md

@@ -1,197 +0,0 @@
-\>浏览器对象
-
-\>\>以浏览器为对象，调用浏览器对象的属性和方法。如：window.setinterval(clock,
-100) and widow.navigator，可以省略window。
-
-\>\>函数的参数是另外一个函数时，只写另外一个函数的名字（待定）。
-
-\>计时器
-
-\>\>分类：
-
->   一次性计时器：尽在指定的延迟时间后触发一次行为
-
->   间隔性触发计时器：每隔一定时间触发一次
-
-\>\>常用函数：
-
->   setTimeout(代码行为， 延时时间)：制定的毫秒数后调用函数或计算表达式
-
->   clearTinmeout(时间设定函数的ID)：取消有setTimeout()设置的timeout
-
->   setIntervel(代码， 交互时间)：按照指定的周期来调用函数或计算表达式
-
->   代码：要调用的函数或执行的代码串（行为）；交互时间：周期性执行行为的时间；返回值为函始时钟的id值。
-
->   clearInterval(时间设定函数的ID)：取消由setIntervel()设置的timeout
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
-[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
-
-1.  **\<span** style="font-size:18px;"**\>\<body\>**
-
-2.  **\<input** type="text" id="clock" size="50"**\>**
-
-3.  **\<script** type="text/javascript"**\>**
-
-4.  function clock(){
-
-5.  var time = new Date();
-
-6.  var attime = time.getHours() + ':' + time.getMinutes() + ':' +
-    time.getSeconds();
-
-7.  document.getElementById("clock").value = attime;
-
-8.  
-
-9.  }
-
-10. setInterval(clock, 100);
-
-11. **\</script\>**
-
-12. **\</body\>\</span\>**
-
-    //实现了简单的时间及时输出
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
-[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
-
-1.  **\<span** style="font-size:18px;"**\>\<body\>**
-
-2.  **\<input** type="text" id="clock"**\>**
-
-3.  **\<input** type="button" id="istart" value="Start"**\>**
-
-4.  **\<input** type="button" id="istop" value="Stop"**\>**
-
-5.  **\<script** type="text/javascript"**\>**
-
-6.  var setid;
-
-7.  var time;
-
-8.  var attime;
-
-9.  function clock(){
-
-10. time = new Date();
-
-11. attime = time.getHours() + ":" + time.getMinutes() + ":" +
-    time.getSeconds();
-
-12. document.getElementById("clock").value = attime;
-
-13. }
-
-14. var istart = document.getElementById("istart");
-
-15. istart.onclick = function(){
-
-16. setid = setInterval(clock, 100);
-
-17. }
-
-18. var istop = document.getElementById("istop");
-
-19. istop.onclick = function(){
-
-20. clearInterval(setid);
-
-21. }
-
-22. **\</script\>**
-
-23. **\</body\>\</span\>**
-
-根据setIntervel返回的id值取消时钟的设置。
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
-[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
-
-1.  **\<span** style="font-size:18px;"**\>\<body\>**
-
-2.  **\<input** type="text" id="inum"**\>**
-
-3.  **\<input** type="button" id="ialt" value="Start"**\>**
-
-4.  **\<script** type="text/javascript"**\>**
-
-5.  var inum = document.getElementById("inum");
-
-6.  var ialt = document.getElementById("ialt");
-
-7.  ialt.onclick = function () {
-
-8.  setTimeout("inum.value = 1", 1000);
-
-9.  setTimeout("inum.value = 2", 2000);
-
-10. setTimeout("inum.value = 3", 3000);
-
-11. setTimeout("inum.value = 4", 4000);
-
-12. setTimeout("alert('666')", 5000);
-
-13. }
-
-14. **\</script\>**
-
-15. **\</body\>\</span\>**
-
-    //实现了settimeout的函数的调用，注意，器低一个参数值可以是函数，也可以是普通行为，上述代码即为普通行为，需要加引号，而函数只需要写函数名，没有参数的话可以不加括号。
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
-[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
-
-1.  **\<span** style="font-size:18px;"**\>\<body\>**
-
-2.  **\<input** type="text" id="count"**\>**
-
-3.  **\<input** type="button" id="istart" value="Start"**\>**
-
-4.  **\<input** type="button" id="istop" value="Stop"**\>**
-
-5.  **\<script** type="text/javascript"**\>**
-
-6.  var seti;
-
-7.  var num = 0;
-
-8.  function startCount(){
-
-9.  document.getElementById('count').value = num;
-
-10. num = num + 1;
-
-11. seti = setTimeout("startCount()", 1000);
-
-12. 
-
-13. }
-
-14. var istart = document.getElementById("istart");
-
-15. istart.onclick = function (){
-
-16. startCount();
-
-17. }
-
-18. var istop = document.getElementById("istop");
-
-19. istop.onclick = function(){
-
-20. clearTimeout(seti);
-
-21. }
-
-22. **\</script\>**
-
-23. **\</body\>\</span\>**
-
-    //实现了按秒计数器，可以开始和结束。
-
-    PS：有一个不明白的地方，在代码执行的时候，发现setIntervel（clock，1000）；setTimeout（“startCount()”,
-    1000）两个时间设定同样是调用两个函数，前者直接使用了函数名，而后者却有引号，函数名和括号。为什么？

JavaScript/教程/浏览器对象二.md

@@ -1,39 +0,0 @@
-\>location对象
-
-\>\>作用：用于获取或设置窗体的URL，并且可用于解析URL
-
-\>\>语法：location.[属性\|方法]
-
-\>\>对象属性：
-
-![713143941392.png](media/32ed381aeecf1527d86e15829f232641.png)
-
-\>\>对象方法：
-
->   assign()：加载新的文档
-
->   reload()：重新加载当前文档
-
->   replace()：用心的文档替换当前的文档
-
-\>navigator对象
-
-\>\>作用：包含浏览器信息和操作系统版本
-
-\>\>对象属性
-
-![713145201241.png](media/0b65a5c473aad3b4addc35c7f1e79e89.png)
-
-\>screen对象
-
-\>\>作用：半酣了关于屏幕的信息，高度宽度、颜色深度
-
-\>\>属性：
-
->   screen.height：返回屏幕分辨率的高
-
->   screen.whidth：返回屏幕分辨率的宽
-
->   screen.availWidth：屏幕的宽度
-
->   screen.availHeight：屏幕宽度

JavaScript/教程/程序控制结构和函数.md

@@ -1,75 +0,0 @@
-## 程序控制结构简写
-
-### if-else条件判断选择
-```
-if（判断条件）{分支1}
-else {分支2}
-```
-### switch多项选择结构，注意关键字default、break；
-```
-switch(选择变量){
-
-case 1:分支1;break;
-
-case 2:分支2;break;
-
-case 3:分支3break;
-
-default:分支4
-
-}
-```
-
-### for循环
-
-```
-for(初始化；循环条件；循环控制){
-
-循环体；
-
-}
-```
-
-### while循环
-
-```
-while(判断语句){循环体}
-```
-* 关键字continue(退出本次循环开始新的循环)
-
-* 关键字break（退出整个循环）
-
-## 2 JS中的函数
-
-### 函数的定义：
-```
-function fun(){函数体}
-```
-### 函数调用
-```
-函数名（实际参数）；
-```
-### 参数传递
-```
-可以传递任意数量的参数， 不用声明参数类型
-```
-### 函数返回值
-```
-可以返回任意类型的返回值。
-```
-### 函数声明
-```
-是函数在任何地方都可以定义
-```
-### 函数作用域
-```
-全局函数，对象的函数
-```
-### this
-* 函数体中this说明当前函数方法的作用域。可以是全局作用域，可以是整个windows对象，可能用于指向函数外部的变量。
-
-### call
-* call(this的指向， 变量)：可以改变当前函数中this的指向
-
-### apply
-* apply(this的指向，数组)：改变当前函数中this的指向

JavaScript/教程/网页交互事件.md

@@ -1,482 +0,0 @@
-\>JS与HTML的关联
-
-**\>\>**内部关联：
-
->   \<script type = "text/javascript"\>
-
->   javascript 语言
-
->   \</script\>
-
-**\>\>**位置：对页面初始化的JS必须放在开头。
-
->   通过事件调用执行的JS对位置没有特殊要求
-
-**\>\>**外部关联：
-
->   定义一个.js文件
-
->   \<script src = "script.js"\>
-
->   \</script\>
-
-\>JS与事件绑定
-
-**\>\>**间接绑定（函数名绑定）：元素.事件 = 函数名；
-
->   将想要出发的行为写在一个函数里面，然后再将这个函数名赋值给元素的事件属性。
-
->   在这里共提到三个名词：
-
->   元素——指网页上的一个时间单位
-
->   事件——指发生在元素身上的事（作为元素的一个属性）
-
->   行为——指发生时间后带来的动作后果（写在了函数里）
-
->   function func(){}
-
->   btn.onclick = func;
-
-**\>\>**直接绑定（匿名函数绑定）：元素.事件 = function（）{函数体}
-
->   将想要出发的行为，直接作为事件的函数。
-
->   btn.onclick = function(){}；
-
-**\>\>**前者适合单一行为的绑定，后者适合多行为绑定和带参数函数行为的绑定。
-
-\>JS对网页的操作
-
-**\>\>**document.write()//直接向HTML中写内容
-
-**\>\>**alert（字符串变量）//弹窗，在点击“确定”按钮前不能进行其他任何操作。通常用于调试程序。
-
-**\>\>**doucument.getElementById("id_value")//通过id获取元素（具有唯一性）,id_value为id属性的值
-
->   简单说，就是通过函数获取某个元素的id赋值给JS自身的变量，然后对这个id的变量进行操作，就相当于对HTML标签进行操作。
-
-**\>\>**doucument.getElementsByTagName(TagName)//返回带有制定标签名的元素对象的集合（一个数组）。返回元素的顺序，使他们在文档中出现的顺序。TagName,是HTML标签。
-
-**\>\>**id.innerHTML 或 TagName.innerName//可以返回显示标签内部的内容。
-
-**\>\>**id.value 或 TagName.value//访问input的标签的值
-
-\>鼠标事件
-
-**\>\>**元素.onclick = 函数名；鼠标单击事件，某个元素的onclick属性。
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  **\<span** style="font-size:18px;"**\>\<body\>**
-
-2.  **\<p** id="pid"**\>**JavaScript**\</p\>**
-
-3.  **\<button** id="btn"**\>**click**\</button\>**
-
-4.  **\<script** type="text/javascript"**\>**
-
-5.  var btn = document.getElementById("btn");
-
-6.  btn.onclick = hello;
-
-7.  function hello(){
-
-8.  var pid = document.getElementById("pid");
-
-9.  pid.innerHTML = "Hello!";
-
-10. }
-
-11. **\</script\>**
-
-12. **\</body\>\</span\>**
-
-    //有一个botton对象，id为btn，这是元素
-
-    //修改btn.onclick属性为函数hello，这是触发事件与行为的联系。
-
-    //函数hello执行的时候将id为pid的标签内容修改，这是行为
-
-**\>\>**鼠标动作
-
->   onclick 鼠标点击
-
->   onmousedown 鼠标按下
-
->   onmouseup 鼠标松开
-
->   onmouseover 鼠标悬停
-
->   onmouseout 鼠标离开
-
->   onmouseup & onmousedown
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<p id="pid"\>JavaScript\</p\>
-
-3.  \<button id="btn"\>click\</button\>
-
-4.  \<script type="text/javascript"\>
-
-5.  var btn = document.getElementById("btn");
-
-6.  btn.onmousedown = down;
-
-7.  btn.onmouseup = up;
-
-8.  function up() {
-
-9.  var pid = document.getElementById("pid");
-
-10. pid.innerHTML = "up";
-
-11. }
-
-12. function down() {
-
-13. var pid = document.getElementById("pid");
-
-14. pid.innerHTML = "down";
-
-15. }
-
-16. \</script\>
-
-17. \</body\>\</span\>
-
->   onmouseover & onmouseout
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<p id="pid"\>JavaScript\</p\>
-
-3.  \<button id="btn"\>click\</button\>
-
-4.  \<script type="text/javascript"\>
-
-5.  var btn = document.getElementById("btn");
-
-6.  btn.onmouseover = over;
-
-7.  btn.onmouseout = out;
-
-8.  function over() {
-
-9.  var pid = document.getElementById("pid");
-
-10. pid.innerHTML = "over";
-
-11. }
-
-12. function out() {
-
-13. var pid = document.getElementById("pid");
-
-14. pid.innerHTML = "out";
-
-15. }
-
-16. \</script\>
-
-17. \</body\>\</span\>
-
-\>文本框事件
-
->   onfocus 输入框聚焦
-
->   onblur 输入框模糊
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<p id="pid"\>JavaScript\</p\>
-
-3.  \<input id="input"\>
-
-4.  \<script type="text/javascript"\>
-
-5.  var inp = document.getElementById("input");
-
-6.  inp.onfocus = focus;
-
-7.  inp.onblur = blur;
-
-8.  function focus() {
-
-9.  var pid = document.getElementById("pid");
-
-10. pid.innerHTML = "focus";
-
-11. }
-
-12. function blur() {
-
-13. var pid = document.getElementById("pid");
-
-14. pid.innerHTML = "blur";
-
-15. }
-
-16. \</script\>
-
-17. \</body\>\</span\>
-
-    onselect文本框被选中
-
-    onchange 改变文本框的内容出发事件
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<p id="pid"\>JavaScript\</p\>
-
-3.  \<input id="input" value="change me\~"\>
-
-4.  \<script type="text/javascript"\>
-
-5.  var inp = document.getElementById("input");
-
-6.  inp.onselect = select;
-
-7.  inp.onchange = change;
-
-8.  function select() {
-
-9.  var pid = document.getElementById("pid");
-
-10. pid.innerHTML = "select";
-
-11. }
-
-12. function change() {
-
-13. var pid = document.getElementById("pid");
-
-14. pid.innerHTML = "change";
-
-15. }
-
-16. \</script\>
-
-17. \</body\>\</span\>
-
-**\>\>**确认框
-
->   语法：confirm（str）
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<input id="input" type="button" value="点击我"\>
-
-3.  \<script type="text/javascript"\>
-
-4.  function rec(){
-
-5.  var message = confirm("Do you like me?");
-
-6.  **if**(message == true)
-
-7.  {
-
-8.  document.write("么么哒！\~");
-
-9.  }
-
-10. **else**
-
-11. {
-
-12. document.write("泥奏凯！");
-
-13. }
-
-14. }
-
-15. var inp = document.getElementById("input");
-
-16. inp.onclick = rec;
-
-17. \</script\>
-
-18. \</body\>\</span\>
-
-**\>\>**提问框
-
->   语法：prompt(str1,str2)
-
->   说明：str1显示在消息对话框中不可修改；str2显示在文本框中的默认内容可修改
-
->   返回值：确定-\>返回文本框中输入的内容；取消-\>返回null
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<input id="input" type="button" value="点击我"\>
-
-3.  \<script type="text/javascript"\>
-
-4.  function rec(){
-
-5.  var score; // score变量，用来存储用户输入的成绩值。
-
-6.  score = prompt("Your score?");
-
-7.  **if**(score \>= 90)
-
-8.  {
-
-9.  document.write("你很棒！");
-
-10. }
-
-11. **else** **if**(score \>= 75)
-
-12. {
-
-13. document.write("不错哦！");
-
-14. }
-
-15. **else** **if**(score \>= 60)
-
-16. {
-
-17. document.write("要加油！");
-
-18. }
-
-19. **else**
-
-20. {
-
-21. document.write("要努力了哦！");
-
-22. }
-
-23. }
-
-24. var inp = document.getElementById("input");
-
-25. inp.onclick = rec;
-
-26. \</script\>
-
-27. \</body\>\</span\>
-
-\>网页的属性设置
-
-**\>\>**element.getAttribute(name)//element是待设定元素对象id或者标签名，name是属性的名字。
-
-**\>\>**element.setAttribute(name,value)//element是id或者标签的名字（待设定元素对象），name是属性名，value是新的属性值
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<p id="pid" title="JavaScript"\>JavaScript\</p\>
-
-3.  \<button id="btn"\>click\</button\>
-
-4.  \<script type="text/javascript"\>
-
-5.  var btn = document.getElementById("btn");
-
-6.  btn.onclick = attr;
-
-7.  function attr() {
-
-8.  var pid = document.getElementById("pid");
-
-9.  alert(pid.getAttribute("id"));
-
-10. alert(pid.getAttribute("title"));
-
-11. pid.setAttribute("title", "hello");
-
-12. alert(pid.getAttribute("title"));
-
-13. }
-
-14. \</script\>
-
-15. \</body\>\</span\>
-
-**\>\>**window.open(URL,\<窗口方式\>，\<参数字符串\>)//URL打开的网址路径，打开方式可以是"_top",
-"_blank", "_self"。
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<body\>
-
-2.  \<input id="input" type="button" value="点击我，打开新窗口！"\>
-
-3.  \<script type="text/javascript"\>
-
-4.  function windowOpen(){
-
-5.  window.open('http://www.jisuanke.com', '_blank', 'width = 600, height = 400,
-    top = 100, left = 0');
-
-6.  }
-
-7.  var inp = document.getElementById("input");
-
-8.  inp.onclick = windowOpen;
-
-9.  \</script\>
-
-10. \</body\>\</span\>
-
-**\>\>**windows.onload 当页面加载或者刷新时会出现相应的函数。
-
-**[python]** [view
-plain](http://blog.csdn.net/estom_yin/article/details/51888110)
-[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
-
-1.  \<span style="font-size:18px;"\>\<head\>
-
-2.  \<meta charset="UTF-8"\>
-
-3.  \<title\>load\</title\>
-
-4.  \<script type="text/javascript"\>
-
-5.  window.onload = load;
-
-6.  function load() {
-
-7.  alert("load");
-
-8.  }
-
-9.  \</script\>
-
-10. \</head\>\</span\>