javascript Dom  编程

知识概要:

(1)Dom是什么?

(2)Dom结构模型

(3)XML DOM和 HTML DOM

(4)NODE接口的特性和方法

(5)DOM结点的常用属性

(6)DOM结点的常见操作

1.Dom是什么?

document object model  文档对象模型

是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.

分类

DOM Core

XML DOM

HTML DOM

XML介绍

2.Dom结构模型

Dom树形结构图如下

XML DOM 定义了访问和处理 XML 文档的标准方法

HTML文档格式 符合XML语法标准,所以可以使用XML DOM API

在XML DOM每个元素 都会被解析为一个节点Node,而常用的节点类型又分为

元素节点  Element

属性节点  Attr

文本节点  Text

文档节点  Document

HTML DOM 定义了针对 HTML文档的对象,可以说是一套 更加适用于 JavaScript 技术开发 的API

HTML DOM是对XML DOM的扩展

进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM

Node结点的特性和方法:

特性/方法

类型/返回类型

说    明

nodeName

String

节点的名字;根据节点的类型而定义

nodeValue

String

节点的值;根据节点的类型而定义

nodeType

Number

节点的类型常量值之一

ownerDocument

Document

指向这个节点所属的文档

firstChild

Node

指向在childNodes列表中的第一个节点

lastChild

Node

指向在childNodes列表中的最后一个节点

childNodes

NodeList

所有子节点的列表

parentNode

Node

返回一个给定节点的父节点。

previousSibling

Node

指向前一个兄弟节点;如果这个节点就是第一个兄弟节

点,那么该值为null

nextSibling

Node

指向后一个兄弟节点;如果这个节点就是最后一个兄弟节

点,那么该值为null

hasChildNodes()

Boolean

当childNodes包含一个或多个节点时,返回真

attributes

NamedNodeMap

包含了代表一个元素的特性的Attr对象;仅用于Element节点

appendChild(node)

Node

将node添加到childNodes的末尾

removeChild(node)

Node

从childNodes中删除node

replaceChild(newnode, oldnode)

Node

将childNodes中的oldnode替换成newnode

insertBefore(newnode, refnode)

Node

在childNodes中的refnode之前插入newnode

DOM 节点常用属性

nodeName

如果节点是元素节点,nodeName返回这个元素的名称

如果是属性节点,nodeName返回这个属性的名称

如果是文本节点,nodeName返回一个内容为#text 的字符串

nodeType

Node.ELEMENT_NODE     ---1    -- 元素节点

Node.ATTRIBUTE_NODE  ---2    -- 属性节点

Node.TEXT_NODE             ---3    -- 文本节点

nodeValue

如果给定节点是一个属性节点,返回值是这个属性的值

如果给定节点是一个文本节点,返回值是这个文本节点内容

如果给定节点是一个元素节点,返回值是 null

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title> DOM </title>
  5.  
  6. </head>
  7.  
  8. <body>
  9. <h1 id="h1">明天休息</h1>
  10. <script>
  11. alert(document.getElementById("h1").innerHTML);
  12. //alert(document.getElementById("h1").innerText);
  13. //alert(document.getElementById("h1").firstChild.nodeValue);
  14. //alert(document.getElementById("h1").lastChild.nodeValue);
  15. //alert(document.getElementById("h1").childNodes[0].nodeValue);
  16. //alert(document.getElementById("h1").textContent);//IE不好使,firefox好使
  17. </script>
  18. </body>
  19. </html>

DOm取值.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title> 取li的文本值 </title>
  5. <script>
  6. function getLi(){
  7. //1.找到bj的结点
  8. var bjNode = document.getElementById("bj");
  9. //2.找所有子结点
  10. var bjChildNodessww = bjNode.childNodes;
  11. //3遍历
  12. for(var i=0;i<bjChildNodessww.length;i++){
  13. var t = bjChildNodessww[i];
  14. alert(t.nodeName+","+t.nodeValue+","+t.nodeType);
  15. }
  16.  
  17. }
  18. </script>
  19. </head>
  20.  
  21. <body>
  22. <ul>
  23. <li id="bj" value="beijing">
  24. 北京
  25. <h1>海淀</h1>
  26. 奥运
  27. </li>
  28. <li id="sh" value="shanghai">
  29. 上海
  30. </li>
  31. <br/>
  32. <input type="button" value="li取值" onclick="getLi()"/>
  33. </ul>
  34.  
  35. </body>
  36. </html>

遍历option文本

  1. <span style="font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title> 得到所有的option的文本 </title>
  5.  
  6. </head>
  7.  
  8. <body>
  9. <select name="edu" id="edu">
  10. <option value="本科">本科^^</option>
  11. <option value="专科">专科^^</option>
  12. <option value="高中">高中^^</option>
  13. <option value="小学">小学^^</option>
  14. <option value="幼儿园">幼儿园^^</option>
  15. </select>
  16. <script>
  17. /* //1.找到edu
  18. var eduNode = document.getElementById("edu");
  19. //2.得到孩子们
  20. var eduChildNodesw = eduNode.childNodes;
  21. //3.遍历孩子们
  22. for(var i=0;i<eduChildNodesw.length;i++){
  23. alert(eduChildNodesw[i].innerHTML);
  24. }
  25. */
  26. var eduNode = document.getElementsByTagName("option");
  27.  
  28. //3.遍历孩子们
  29. for(var i=0;i<eduNode.length;i++){
  30. alert(eduNode[i].innerHTML);
  31. }
  32. </script>
  33. </body>
  34. </html></span>

DOM节点常见操作

DOM 获取节点

DOM 改变节点

DOM 删除节点

DOM 替换节点

DOM 创建节点

DOM 添加节点

结点替换:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>结点替换</title>
  5. <script>
  6. function changeNode(){
  7. //1.找到bj结点
  8. var bjNodess = document.getElementById("bj");
  9. //2.找到game结点,还要复制结点cloneNode(true);//true代表子结点也克隆
  10. var gameNodess = document.getElementById("game").cloneNode(true);
  11. //3.替换
  12. bjNodess.replaceNode(gameNodess);
  13. //bjNodess.parentNode.replaceChild(gameNodess,bjNodess);需要替换的放后面
  14. }
  15. </script>
  16. </head>
  17.  
  18. <body>
  19. <ul >
  20. <li id="bj" onclick="changeNode()">北京</li>
  21. <li>湖南</li>
  22. <li>山东</li>
  23. </ul>
  24. <ul>
  25. <li id="game"><p>灰机</p></li>
  26. <li>抓泥鳅</li>
  27. <li>斗地主</li>
  28. </ul>
  29.  
  30. </body>
  31. </html>

添加结点:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title> New Document </title>
  5. <script>
  6. function addOptions(){
  7. //1.找到select标签
  8. var ss = document.getElementsByTagName("select")[0];
  9. //2.添加一个option结点
  10. var optionss = document.createElement("option");
  11. //3.添加一个文本结点,小学
  12. //var xs = document.createTextNode("小学");
  13. optionss.innerHTML="小学";
  14. //4.搞关系
  15. //optionss.appendChild(xs);
  16. ss.appendChild(optionss);
  17.  
  18. }
  19. </script>
  20. </head>
  21.  
  22. <body>
  23. <input type="button" value="添加选项" onclick="addOptions()"/>
  24. <select>
  25. <option>本科</option>
  26. <option>专科</option>
  27. <option>高中</option>
  28. <option>初中</option>
  29. </select>
  30.  
  31. </body>
  32. </html>

表格操作:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title> 表格操作 </title>
  5. <script>
  6. //--------------XML DOM--------------------------------------
  7. /*function addTR(){
  8. //1.取三个框的值
  9. var username = document.getElementById("username").value;
  10. var email = document.getElementById("email").value;
  11. var age = document.getElementById("age").value;
  12. //2.添加tr,td
  13. var trObj = document.createElement("tr");
  14. var tdUsername = document.createElement("td");
  15. var tdEmail = document.createElement("td");
  16. var tdAge = document.createElement("td");
  17. var tdOp = document.createElement("td");
  18. //3.添加td的内容
  19. tdUsername.innerHTML=username;
  20. tdEmail.innerHTML=email;
  21. tdAge.innerHTML=age;
  22. tdOp.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";
  23. //4.搞关系
  24. trObj.appendChild(tdUsername);
  25. trObj.appendChild(tdEmail);
  26. trObj.appendChild(tdAge);
  27. trObj.appendChild(tdOp);
  28.  
  29. //5.把tr添加到表格中
  30. document.getElementById("tabInfo").appendChild(trObj);
  31.  
  32. }
  33. function deleteRowss(obj){
  34. var trObjss = obj.parentNode.parentNode;//tr
  35. trObjss.parentNode.removeChild(trObjss);
  36. }*/
  37.  
  38. //---------------------HTML DOM---------------------------------
  39. /*function addTR(){
  40. //1.取三个框的值
  41. var username = document.getElementById("username").value;
  42. var email = document.getElementById("email").value;
  43. var age = document.getElementById("age").value;
  44. //2.添加tr,td
  45. var tabinfoss = document.getElementById("tabInfo");
  46. //在表格中添加一行
  47. var trss = tabinfoss.insertRow();
  48. var tdUsernamess = trss.insertCell();
  49. var tdEmailss = trss.insertCell();
  50. var tdAgess = trss.insertCell();
  51. var tdOpss = trss.insertCell();
  52. //3.添加td的内容
  53. tdUsernamess.innerHTML=username;
  54. tdEmailss.innerHTML=email;
  55. tdAgess.innerHTML=age;
  56. tdOpss.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";
  57.  
  58. }
  59. function deleteRowss(obj){
  60. //1.得到表格
  61. var tabinfoss = document.getElementById("tabInfo");
  62.  
  63. //2.找到当前行的索引 rowIndex
  64. var rowindexss = obj.parentNode.parentNode.rowIndex;
  65. //3.删除
  66. tabinfoss.deleteRow(rowindexss);//当前行的索引
  67. }*/
  68.  
  69. //--------------------------------------------------------------
  70. function addTR(){
  71. //1.取三个框的值
  72. var username = document.getElementById("username").value;
  73. var email = document.getElementById("email").value;
  74. var age = document.getElementById("age").value;
  75. //2.添加tr,td
  76. var tabinfoss = document.getElementById("tabInfo");
  77.  
  78. tabinfoss.innerHTML+="<tr><td>"+username+"</td><td>"+email+"</td><td>"+age+" </td><td><input type='button' value='删除' onclick='deleteRowss(this)'/></td></tr>";
  79. }
  80.  
  81. function deleteRowss(obj){
  82. //1.得到表格
  83. var tabinfoss = document.getElementById("tabInfo");
  84.  
  85. //2.找到当前行的索引 rowIndex
  86. var rowindexss = obj.parentNode.parentNode.rowIndex;
  87. //3.删除
  88. tabinfoss.deleteRow(rowindexss);//当前行的索引
  89. }
  90. </script>
  91. </head>
  92.  
  93. <body>
  94. <table align="center" cellpadding="10" cellspacing="3" >
  95. <tr>
  96. <td>姓名:<input type="text" id="username"/></td>
  97. <td>Email:<input type="text" id="email"/></td>
  98. <td>年龄:<input type="text" id="age"/></td>
  99. </tr>
  100. <tr>
  101. <td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/></td>
  102. </tr>
  103. </table>
  104.  
  105. <br/>
  106. <br/>
  107. <br/>
  108. <hr/>
  109.  
  110. <table id="tabInfo" align="center" width="500" border="1">
  111. <tr>
  112. <td>姓名</td>
  113. <td>Email</td>
  114. <td>年龄</td>
  115. <td>操作</td>
  116. </tr>
  117.  
  118. </table>
  119.  
  120. </body>
  121. </html>

  1. <title> 全选/反选/全不选 </title>
  2. <script>
  3. function checkAll(booleanVal){
  4. //1.根据名称得到一组值
  5. var hobbys = document.getElementsByName("hobby");
  6. for(var i=0;i<hobbys.length;i++){
  7. //hobbys[i].setAttribute("checked",booleanVal);//设置option的属性为booleanVal
  8. hobbys[i].checked=booleanVal;//另一种方式
  9. }
  10. }
  11. function reversess(){
  12. //1.根据名称得到一组值
  13. var hobbys = document.getElementsByName("hobby");
  14. for(var i=0;i<hobbys.length;i++){
  15. hobbys[i].checked=!hobbys[i].checked;//写法很巧妙
  16. }
  17. }
  18. </script>
  19. </head>
  20.  
  21. <body>
  22. <h1>请选择你的爱好:</h1>
  23. 全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
  24. <input type="checkbox" name="hobby" value="football"/>足球
  25. <input type="checkbox" name="hobby" value="basketball" />篮球
  26. <input type="checkbox" name="hobby" value="swim" />游泳
  27. <input type="checkbox" name="hobby" value="singing" />唱歌<br/>
  28.  
  29. <input type="button" value="全选" onclick="checkAll(true)" /> <input type="button" value="全不选" onclick="checkAll(false)" />
  30. <input type="button" value="反选" onclick="reversess()"/> </body>
  31.  
  32. </body>
  33. </html>
左移 全部移动
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>下拉列表,选项左移右移 </title>
  5. <script>
  6. function removeLeft(){
  7. //1.找左边的下拉列表
  8. var leftSelectObj = document.getElementById("left");
  9. //2.找左边下拉列表中选中的项
  10. var indexss = leftSelectObj.selectedIndex;//找到选中项的索引
  11. var selectedOptss = leftSelectObj.options[indexss];//找到了选中的option,<option>选项1</option>
  12. //3.找右边的下拉列表
  13. var rightSelectObj = document.getElementById("right");
  14. //4.移动
  15. //rightSelectObj.add(selectedOptss);//IE不支持,firefox支持
  16. rightSelectObj.appendChild(selectedOptss);
  17. }
  18.  
  19. function removeLeftAll(){
  20. //1.找左边的下拉列表
  21. var leftSelectObj = document.getElementById("left");
  22. var selectedOptAll = leftSelectObj.options;//左边所有选项
  23.  
  24. //2.找右边的下拉列表
  25. var rightSelectObj = document.getElementById("right");
  26.  
  27. //3.一边遍历左边选项,一边添加右边的选项
  28. var length = selectedOptAll.length;
  29. /*for(var i=0;i<length;i++){
  30. rightSelectObj.appendChild(selectedOptAll[i]);
  31. }*/
  32.  
  33. /*for(var i=selectedOptAll.length-1;i>=0;i--){
  34. rightSelectObj.appendChild(selectedOptAll[i]);
  35. }*/
  36. for(var i=0;i<length;i++){
  37. rightSelectObj.appendChild(selectedOptAll[0]);
  38. }
  39. }
  40. </script>
  41. </head>
  42.  
  43. <body>
  44. <table align="center">
  45. <tr>
  46. <td>
  47. <select size="10" id="left">
  48. <option>选项1</option>
  49. <option>选项2</option>
  50. <option>选项3</option>
  51. <option>选项4</option>
  52. <option>选项5</option>
  53. <option>选项6</option>
  54. <option>选项7</option>
  55. <option>选项8</option>
  56.  
  57. </select>
  58. </td>
  59. <td>
  60. <input type="button" value="--->" onclick="removeLeft()"/><br/>
  61. <input type="button" value="===>" onclick="removeLeftAll()"/><br/>
  62. <input type="button" value="<---" onclick=""/><br/>
  63. <input type="button" value="<===" onclick=""/><br/>
  64. </td>
  65. <td>
  66. <select size="10" id="right">
  67. <option>选项9</option>
  68. </select>
  69. </td>
  70. </tr>
  71. </table>
  72.  
  73. </body>
  74. </html>


省市级联:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title> 级联加载 </title>
  5. <script>
  6. var cityList = new Array();
  7. cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
  8. cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
  9. cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
  10. cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
  11. cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
  12. cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
  13. cityList['江苏省'] = ['南京市','苏州市','无锡市'];
  14. cityList['浙江省'] = ['杭州市','宁波市','温州市'];
  15. cityList['四川省'] = ['四川省','成都市'];
  16. cityList['海南省'] = ['海口市'];
  17. cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
  18. cityList['山东省'] = ['济南市','青岛市','烟台市'];
  19. cityList['江西省'] = ['江西省','南昌市'];
  20. cityList['广西省'] = ['柳州市','南宁市'];
  21. cityList['安徽省'] = ['安徽省','合肥市'];
  22. cityList['河北省'] = ['邯郸市','石家庄市'];
  23. cityList['河南省'] = ['郑州市','洛阳市'];
  24. cityList['湖北省'] = ['武汉市','宜昌市'];
  25. cityList['湖南省'] = ['湖南省','长沙市'];
  26. cityList['陕西省'] = ['陕西省','西安市'];
  27. cityList['山西省'] = ['山西省','太原市'];
  28. cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
  29. cityList['其他'] = ['其他'];
  30.  
  31. function changeCity(){
  32. //1.找到城市下拉列表
  33. var cityObj = document.getElementById("city");
  34. //2.找到省份选中的值
  35. var provinceVal = document.getElementById("province").value;
  36. //3.清空原有的城市列表
  37. cityObj.length=1;
  38. //3.遍历省份选中值的城市列表,一边遍历一边在城市列表中添加
  39. for(var i in cityList[provinceVal]){
  40. cityObj.add(new Option(cityList[provinceVal][i],cityList[provinceVal][i]));
  41. }
  42.  
  43. }
  44.  
  45. function loadProvince(){
  46. //1.找到省份
  47. var provinceObj = document.getElementById("province");
  48. provinceObj.length=1;
  49. //加强for循环
  50. for(var index in cityList){
  51. provinceObj.add(new Option(index,index));
  52. }
  53. }
  54. window.onload = loadProvince;
  55.  
  56. </script>
  57. </head>
  58.  
  59. <body>
  60. <select id="province" onchange="changeCity()">
  61. <option>--请选择省份--</option>
  62. </select>
  63.  
  64. <select id="city">
  65. <option>--请选择城市--</option>
  66. </select>
  67.  
  68. </body>
  69. </html>



javascript Dom 编程的更多相关文章

  1. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  3. JavaScript DOM 编程艺术(第2版)读书笔记(1)

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  4. JavaScript DOM编程艺术学习笔记(一)

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  5. JavaScript DOM编程艺术第一章:JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  6. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

  7. 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  8. 《JavaScript DOM 编程艺术》

    前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...

  9. JavaScript DOM编程艺术读后感(1)—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  10. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

随机推荐

  1. Ubuntu16.04下安装texlive

    Ubuntu 16.04下安装texlive的步骤如下: 1.下载texlive 打开终端输入:sudo apt-get install texlive-full  #下载这一过程会持续10-20分钟 ...

  2. python爬虫scrapy框架——人工识别登录知乎倒立文字验证码和数字英文验证码(2)

    操作环境:python3 在上一文中python爬虫scrapy框架--人工识别知乎登录知乎倒立文字验证码和数字英文验证码(1)我们已经介绍了用Requests库来登录知乎,本文如果看不懂可以先看之前 ...

  3. jenkins+gitlab+sonar+testng构建持续集成测试环境(配置干货篇)

    几个工具的安装部分就不在此介绍了! jenkins配置: 1.插件安装 2.root私钥配置 3.构建job配置 4.部署job配置 5.测试job配置 7.jenkins全局工具配置 8.jenki ...

  4. 从web图片裁剪出发:了解H5中的Blob

    刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...

  5. 团队作业2--需求分析&原型设计

    一.需求分析 1.用户采访 a.采访对象:   分别对本学院同学.其他专业同学.部分老师等总计15人进行了采访调研: b.采访截图:    c.采访总结: (1).功能需求   能够将所提供的四个数进 ...

  6. 【1414软工助教】团队作业6——展示博客(Alpha版本) 得分榜

    题目 团队作业6--展示博客(Alpha版本) 作业提交情况情况 为所欲为 团队没有提交,其余都按时提交. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2: ...

  7. 团队作业4——第一次项目冲刺 tHe LaSt dAy

    项目冲刺--终点 敏捷冲刺最后一天,没想到前一天就上榜了,我也很无奈啊. 那今天就老老实实写一篇博客好了. Mission 这次敏捷冲刺呢,我们主要做了前端页面,后台的数据库和添加了基本的增删查改的功 ...

  8. spring在扫描包中的注解类时出现Failed to read candidate component错误

    出现:org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate componen ...

  9. 201521123056《Java程序设计》 第2周学习总结

    1. 本周学习总结 String类: 不可变字符串型: 粗略介绍了枚举类型: 完全限定类名: 泛型数组列表的应用: 2. 书面作业 Q1.使用Eclipse关联jdk源代码,并查看String对象的源 ...

  10. 201521123036 《Java程序设计》第10周学习总结

    本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 ...