diff --git a/JavaScript/教程/DOM对象.md b/JavaScript/教程/DOM对象.md new file mode 100644 index 00000000..caf583b0 --- /dev/null +++ b/JavaScript/教程/DOM对象.md @@ -0,0 +1,196 @@ +\>简介 + +\>\>document object +model:文档对象模型,将HTML文档呈现为带有元素、属性和文本的树结构,成为节点树 + +\>\>三种DOM结点; + +> 元素节点:\\\(tag) + +> 文本节点:\\\\ + +> 属性节点:元素属性\其中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. **\\** + +2. **\**JavaScript**\** + +3. **\**JavaScript**\** + +4. **\** + +5. **\** + +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 = "\hello\"; + +11. ip[1].innerText = "\hello\"; + +12. } + +13. **\** + +14. **\\** + +![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. **\\** + +2. **\**JavaScript**\** + +3. **\** + +4. **\** + +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. **\** + +13. **\\** + +\>显示和隐藏 + +> 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. **\\** + +2. **\**你可以把我隐藏,也可以让我显示哦\~**\** + +3. **\** + +4. **\** + +5. **\** + +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. **\** + +15. **\\** diff --git a/JavaScript/教程/DOM对象三.md b/JavaScript/教程/DOM对象三.md new file mode 100644 index 00000000..4c4297db --- /dev/null +++ b/JavaScript/教程/DOM对象三.md @@ -0,0 +1,99 @@ +\>页面尺寸 + +\>\>宽高尺寸 + +> 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. **\** + +2. **\** + +3. **\** + +4. **\**event**\** + +5. **\** + +6. \#box { + +7. width: 100px; + +8. height: 100px; + +9. background-color: aquamarine; + +10. position: absolute; + +11. } + +12. **\** + +13. **\** + +14. **\** + +15. **\\** + +16. **\** + +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. **\** + +34. **\** + +35. **\** diff --git a/JavaScript/教程/DOM对象二——节点与遍历.md b/JavaScript/教程/DOM对象二——节点与遍历.md new file mode 100644 index 00000000..2b592a1c --- /dev/null +++ b/JavaScript/教程/DOM对象二——节点与遍历.md @@ -0,0 +1,306 @@ +\>父子节点 + +\>\>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. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\** + +5. **\** + +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 + "**\**"); + +13. li_num++; + +14. } + +15. else{ + +16. document.write("**\**"); + +17. console.log("这是一个空节点,不用理他"); + +18. } + +19. } + +20. document.write("子节点数目:" + childNodes.length + "**\**"); + +21. document.write("li 子节点数目:" + li_num + "**\**"); + +22. document.write("文本子节点数目:" + (childNodes.length - li_num)); + +23. **\** + +24. **\\** + +//补充节点的属性还有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. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\**二娃**\** + +5. **\**三娃**\** + +6. **\** + +7. **\** + +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. **\** + +28. **\\** + +//虽然觉得这是史上最无聊的程序,但还是含泪贴上了 + +\>创建节点方法 + +> 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. **\** var newinp = + document.createElement("input"); + +2. alert(newinp); + +3. var newtext = document.createTextNode("text"); + +4. alert(newtext);**\** + +\>添加删除节点 + +> 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. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\** + +5. **\** + +6. **\** + +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. **\** + +29. **\\** + +//有很多需要注意的地方,等吃饭回来补充 + +> 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. **\\** + +2. **\** + +3. **\**二娃**\** + +4. **\** + +5. **\** + +6. **\** + +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. **\** + +16. **\\** + +\>替换子节点(克隆替换) + +> 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. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\**二娃**\** + +5. **\** + +6. **\** + +7. **\** + +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. **\** + +17. **\\** diff --git a/JavaScript/教程/DOM简介.md b/JavaScript/教程/DOM简介.md new file mode 100644 index 00000000..e206b51e --- /dev/null +++ b/JavaScript/教程/DOM简介.md @@ -0,0 +1,155 @@ +\>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."); + +使用事件节点 + +\ + +添加元素 + +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能返回数组的长度 diff --git a/JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png b/JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png new file mode 100644 index 00000000..3de64dc3 Binary files /dev/null and b/JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png differ diff --git a/JavaScript/教程/media/0b65a5c473aad3b4addc35c7f1e79e89.png b/JavaScript/教程/media/0b65a5c473aad3b4addc35c7f1e79e89.png new file mode 100644 index 00000000..47595748 Binary files /dev/null and b/JavaScript/教程/media/0b65a5c473aad3b4addc35c7f1e79e89.png differ diff --git a/JavaScript/教程/media/32ed381aeecf1527d86e15829f232641.png b/JavaScript/教程/media/32ed381aeecf1527d86e15829f232641.png new file mode 100644 index 00000000..2eb3cb8d Binary files /dev/null and b/JavaScript/教程/media/32ed381aeecf1527d86e15829f232641.png differ diff --git a/JavaScript/教程/media/41b23d86a383cc654da42e8957b33725.png b/JavaScript/教程/media/41b23d86a383cc654da42e8957b33725.png new file mode 100644 index 00000000..2d8d1857 Binary files /dev/null and b/JavaScript/教程/media/41b23d86a383cc654da42e8957b33725.png differ diff --git a/JavaScript/教程/media/75813153285d5ceb04c812e98c3b33a1.png b/JavaScript/教程/media/75813153285d5ceb04c812e98c3b33a1.png new file mode 100644 index 00000000..5703ee34 Binary files /dev/null and b/JavaScript/教程/media/75813153285d5ceb04c812e98c3b33a1.png differ diff --git a/JavaScript/教程/media/a287b11ce3f0470882a238120c33a6bb.png b/JavaScript/教程/media/a287b11ce3f0470882a238120c33a6bb.png new file mode 100644 index 00000000..9436e3ee Binary files /dev/null and b/JavaScript/教程/media/a287b11ce3f0470882a238120c33a6bb.png differ diff --git a/JavaScript/教程/初识JavaScript.md b/JavaScript/教程/初识JavaScript.md new file mode 100644 index 00000000..6ac724be --- /dev/null +++ b/JavaScript/教程/初识JavaScript.md @@ -0,0 +1,162 @@ +**\>变量与数据类型** + +\>\>定义: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编码的顺序排列 diff --git a/JavaScript/教程/对CSS的认识.md b/JavaScript/教程/对CSS的认识.md new file mode 100644 index 00000000..df3f2a99 --- /dev/null +++ b/JavaScript/教程/对CSS的认识.md @@ -0,0 +1,21 @@ +\>css的三种样式的定义方法 + +\>\>标签选择:使用html标签,对html中所有标签起作用 + +.\>\>器类别选择器:.类名,调用时:class = “类名”。 + +\>\>ID选择器 \#id,调用时:id = “ID符号” + +\>选择器的分类及关系 + +子代选择器:只能选择下一层的自带,使用\>来执行 + +后代选择器:也称包含选择器,选择特定元素或元素组的后代,中间用空格 隔开 + +伪类选择器:a:hover,a:link,a:visited,input:focus + +通用选择器:\*匹配所有的代码 + +群组选择器:,使用逗号隔开,相同的样式属性的几个元素 + +相邻同胞选择器:+表示与前者相邻的后者的格式 diff --git a/JavaScript/教程/浏览器对象.md b/JavaScript/教程/浏览器对象.md new file mode 100644 index 00000000..c5c4efb8 --- /dev/null +++ b/JavaScript/教程/浏览器对象.md @@ -0,0 +1,197 @@ +\>浏览器对象 + +\>\>以浏览器为对象,调用浏览器对象的属性和方法。如: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. **\\** + +2. **\** + +3. **\** + +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. **\** + +12. **\\** + + //实现了简单的时间及时输出 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683) +[copy](http://blog.csdn.net/estom_yin/article/details/51890683) + +1. **\\** + +2. **\** + +3. **\** + +4. **\** + +5. **\** + +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. **\** + +23. **\\** + +根据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. **\\** + +2. **\** + +3. **\** + +4. **\** + +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. **\** + +15. **\\** + + //实现了settimeout的函数的调用,注意,器低一个参数值可以是函数,也可以是普通行为,上述代码即为普通行为,需要加引号,而函数只需要写函数名,没有参数的话可以不加括号。 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683) +[copy](http://blog.csdn.net/estom_yin/article/details/51890683) + +1. **\\** + +2. **\** + +3. **\** + +4. **\** + +5. **\** + +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. **\** + +23. **\\** + + //实现了按秒计数器,可以开始和结束。 + + PS:有一个不明白的地方,在代码执行的时候,发现setIntervel(clock,1000);setTimeout(“startCount()”, + 1000)两个时间设定同样是调用两个函数,前者直接使用了函数名,而后者却有引号,函数名和括号。为什么? diff --git a/JavaScript/教程/浏览器对象二.md b/JavaScript/教程/浏览器对象二.md new file mode 100644 index 00000000..d9c5df67 --- /dev/null +++ b/JavaScript/教程/浏览器对象二.md @@ -0,0 +1,39 @@ +\>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:屏幕宽度 diff --git a/JavaScript/教程/程序控制结构和函数.md b/JavaScript/教程/程序控制结构和函数.md new file mode 100644 index 00000000..63bb274f --- /dev/null +++ b/JavaScript/教程/程序控制结构和函数.md @@ -0,0 +1,61 @@ +\>程序控制结构简写 + +\>\>if-else条件判断选择 + +if(判断条件){分支1} + +else {分支2} + +\>\>switch多项选择结构,注意关键字default、break; + +switch(选择变量){ + +case 1:分支1;break; + +case 2:分支2;break; + +case 3:分支3break; + +default:分支4 + +} + +\>\>for(初始化;循环条件;循环控制){ + +循环体; + +} + +\>\>while(判断语句){循环体} + +\>\>关键字continue(退出本次循环开始新的循环) + +\>\>关键字break(退出整个循环) + +\>JS中的函数 + +\>\>函数的定义: + +function fun(){函数体} + +\>\>函数调用 + +函数名(实际参数); + +\>\>参数传递 + +可以传递任意数量的参数, 不用声明参数类型 + +\>\>函数返回值 + +可以返回任意类型的返回值。 + +\>\>函数声明,是函数在任何地方都可以定义 + +\>\>函数作用域,全局函数,对象的函数 + +\>\>this:函数体中this说明当前函数方法的作用域。可以是全局作用域,可以是整个windows对象,可能用于指向函数外部的变量。 + +\>\>call(this的指向, 变量):可以改变当前函数中this的指向 + +\>\>apply(this的指向,数组):改变当前函数中this的指向 diff --git a/JavaScript/教程/网页交互事件.md b/JavaScript/教程/网页交互事件.md new file mode 100644 index 00000000..6dda18e5 --- /dev/null +++ b/JavaScript/教程/网页交互事件.md @@ -0,0 +1,482 @@ +\>JS与HTML的关联 + +**\>\>**内部关联: + +> \