Web学习之开篇

Web开发需要用到哪些技术?

这套系统介绍使用JavaScript来完成Web开发,我们在学习js之前需要了解一下相关HTML、CSS。
HTML:定义网页内容
CSS:描述网页的布局
JavaScript:网页的行为

HTML 学习

 HTML学习网站

  HTML不是编程语言,而是标记语言。类似Markdown一样也是标记语言(不要被吓到,这个语法很简单,此文就是Markdown写的)。
&empt; 注意先声明当前HTML版本,其次就通过标签内声明源文件,声明浏览器展示内容。
标签中通过声明文本标题、<meta>声明元数据,如定义王爷编码格式为utf-8等<br> <body>标签中涉及标题格式、段落格式<br> <a href="http://www.baidu.com"> 这是百度网地址 </a><br> <img src="/images/logo.png" width="258" height="39" /><br> <hr /> 画水平线<br> <font size="1">这是1号字体文本</font><br> <sub> 下标</sub> 和 <sup> 上标</sup><br> <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。<br> 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。<br> <link> 标签定义了文档与外部资源之间的关系。</p> <p><link rel="stylesheet" type="text/css" href="https://www.baidu.com/css/bcd<sub>bcmobile</sub>bcpc.9837752f.css"></p> <p>内联样式- 在HTML元素中使用"style" 属性<br> <p style="color:blue;margin-left:20px;">这是一个段落。</p><br> 内部样式表:</p> <pre><code><head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> </code></pre> <p>外部样式表:</p> <pre><code><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre> <p><table>表格标签<br> <tr>若干行<br> <td>单元格的内容</p> <pre><code><table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </code></pre> <p><div>定义块级<br> <span>组合文档的行内元素,内联元素<br> <form> 表单标签 里面经常包含的元素有,input输入的文本域、密码字段、单选按钮、复选框、提交按钮</p> <h3>CSS 学习</h3> <p> CSS学习网站<br> CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:<br> 选择器通常是您需要改变样式的 HTML 元素。<br> 每条声明由一个属性和一个值组成。<br> 在head标签中,通过style标签给不同的body、h、p等元素进行编辑。<br> css中id 选择器(指定特定id的样式)、class 选择器(指定一组元素的样式)<br> id是通过#来进行标记的<br> class通过一个点 . 来表示。也可以指定某个标签的所有元素使用某个样式例如:p.center。指定所有p元素使用<br> 外部样式表:很多页面时,外部样式表将是理想的选择<link rel="xxx"><br> 内部样式表:单个文档需要特殊的样式时,就应该使用内部样式表。< style ><br> 内联样式:内联样式会损失掉样式表的许多优势。请慎用这种方法<p style="color:sienna;margin-left:20px">这是一个段落。</p><br> 多重样式:<br> <strong>CSS盒子模型:</strong><br> Margin(外边距) - 清除边框外的区域,外边距是透明的。<br> Border(边框) - 围绕在内边距和内容外的边框。<br> Padding(内边距) - 清除内容周围的区域,内边距是透明的。<br> 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距<br> <strong>重要:</strong> 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和边距。<br> <strong>border-style:</strong> 默认无边框 none</p> <h3>JavaScript 学习</h3> <p>JavaScript 学习网站</p> <p>document.getElementById("demo").innerHTML = "段落已修改。"; 插入元素内容<br> 请使用 document.write() 仅仅向文档输出写内容。<br> 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。</p> <pre><code>//button 添加点击事件 <button onclick="myFunction()"> <script> function myFunction() { document.write(Date()); } </script> </code></pre> <p>写到控制台<br> console.log(c);</p> <p>数组<br> [40, 100, 1, 5, 25, 10]</p> <p>对象<br> {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}</p> <p>函数<br> function myFunction(a, b) { return a * b;}</p> <p>变量<br> var x, length</p> <p>= + - * / 运算<br> == != < > 判断</p> <p><strong>JavaScript 语句</strong><br> JavaScript 语句是发给浏览器的命令。</p> <p><strong>JavaScript 代码</strong><br> 浏览器按照编写顺序依次执行每条语句。</p> <p><strong>JavaScript 代码块</strong><br> JavaScript 可以分批地组合起来。<br> 代码块以左花括号开始,以右花括号结束。<br> 代码块的作用是一并地执行语句序列。</p> <p><strong>JavaScript 语句标识符</strong><br> try 实现错误处理,与 catch 一同使用。<br> catch 语句块,在 try 语句块执行出错时执行 catch 语句块。</p> <p>您可以在文本字符串中使用反斜杠对代码行进行换行</p> <p>提示:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。</p> <p>注释<br> 注释用于阻止其中一条代码行的执行(可用于调试)</p> <p><strong>JavaScript 数据类型</strong><br> 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。<br> 引用数据类型:对象(Object)、数组(Array)、函数(Function)。</p> <p><strong>JavaScript 对象</strong><br> 在 JavaScript中,几乎所有的事物都是对象。</p> <p>var person = {<br> firstName: "John",<br> lastName : "Doe",<br> id : 5566,<br> fullName : function()<br> {<br> return this.firstName + " " + this.lastName;<br> }<br> };</p> <p>对象属性<br> JavaScript 对象是键值对的容器</p> <p>访问对象属性<br> name=person.lastname;<br> 或<br> name=person["lastname"];</p> <p>访问对象方法<br> objectName.methodName()</p> <p><strong>JavaScript 函数</strong><br> 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。</p> <p>带参数函数 myFunction(argument1,argument2)</p> <p><strong>带有返回值的函数</strong><br> 函数将值返回调用它的地方</p> <pre><code>function myFunction() { var x=5; return x; } </code></pre> <p>注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。</p> <p>仅仅希望退出函数时 ,也可使用 return 语句</p> <p><strong>局部 JavaScript 变量</strong><br> 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。<br> 您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。<br> 只要函数运行完毕,本地变量就会被删除。</p> <p><strong>全局 JavaScript 变量</strong><br> 在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。</p> <p><strong>JavaScript 作用域</strong><br> 在 JavaScript 中, 对象和函数同样也是变量。<br> 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。<br> JavaScript 函数作用域: 作用域在函数内修改。</p> <p>变量在函数内声明,变量为局部作用域。<br> 局部变量:只能在函数内部访问。<br> 因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。<br> 局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。</p> <p><strong>JavaScript 全局变量</strong><br> 变量在函数外定义,即为全局变量。<br> 全局变量有 全局作用域: 网页中所有脚本和函数均可使用。</p> <p>如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。<br> 以下实例中 carName 在函数内,但是为全局变量。</p> <pre><code>// 此处可调用 carName 变量 function myFunction() { carName = "Volvo"; // 此处可调用 carName 变量 } </code></pre> <p><strong>JavaScript 事件</strong><br> HTML 事件是发生在 HTML 元素上的事情。<br> 当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。</p> <p><strong>HTML 事件</strong><br> HTML 事件可以是浏览器行为,也可以是用户行为。</p> <p>事件:<br> HTML 页面完成加载<br> HTML input 字段改变时<br> HTML 按钮被点击</p> <p>可以做的事情。在事件触发时 JavaScript 可以执行一些代码。<br> HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。</p> <p><code><some-HTML-element some-event='JavaScript 代码'></code><br> 或者 双引号<br> <code><some-HTML-element some-event="JavaScript 代码"></code></p> <p>举例:<br> JavaScript 代码将修改 id="demo" 元素的内容。<br> <code><button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button></code></p> <p>修改自身元素的内容 (使用 this.innerHTML):<br> <code><button onclick="this.innerHTML=Date()">现在的时间是?</button></code></p> <p><strong>常见的HTML事件</strong><br> onchange -----> HTML 元素改变<br> onclick -----> 用户点击 HTML 元素<br> onmouseover ----> 用户在一个HTML元素上移动鼠标<br> onmouseout ----> 用户从一个HTML元素上移开鼠标<br> onkeydown -----> 用户按下键盘按键<br> onload -----> 浏览器已完成页面的加载</p> <p><strong>JavaScript 可以做什么?</strong><br> 事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:</p> <ul> <li>页面加载时触发事件</li> <li>页面关闭时触发事件</li> <li>用户点击按钮执行动作</li> <li>验证用户输入内容的合法性</li> <li>等等 ...</li> </ul> <p>可以使用多种方法来执行 JavaScript 事件代码:</p> <ul> <li>HTML 事件属性可以直接执行 JavaScript 代码</li> <li>HTML 事件属性可以调用 JavaScript 函数</li> <li>你可以为 HTML 元素指定自己的事件处理程序</li> </ul> <p><strong>JavaScript 字符串</strong></p> <p>字符串长度:<br> 可以使用内置属性 length 来计算字符串的长度:</p> <p>特殊字符<br> 因为这样,以下实例 JavaScript 无法解析:<br> "We are the so-called "Vikings" from the north."</p> <p>可以使用反斜杠 () 来转义 "Vikings" 字符串中的双引号,如下:<br> "We are the so-called "Vikings" from the north."<br> charAt() ---> 返回指定索引位置的字符<br> charCodeAt() ---> 返回指定索引位置字符的 Unicode 值<br> concat() ---> 连接两个或多个字符串,返回连接后的字符串<br> fromCharCode() ---> 将 Unicode 转换为字符串<br> indexOf() ---> 返回字符串中检索指定字符第一次出现的位置<br> lastIndexOf() ---> 返回字符串中检索指定字符最后一次出现的位置<br> localeCompare() ---> 用本地特定的顺序来比较两个字符串<br> match() ---> 找到一个或多个正则表达式的匹配<br> replace() ---> 替换与正则表达式匹配的子串<br> search() ---> 检索与正则表达式相匹配的值<br> slice() ---> 提取字符串的片断,并在新的字符串中返回被提取的部分<br> split() ---> 把字符串分割为子字符串数组<br> substr() ---> 从起始索引号提取字符串中指定数目的字符<br> substring() ---> 提取字符串中两个指定的索引号之间的字符<br> toLocaleLowerCase() ---> 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射<br> toLowerCase() ---> 把字符串转换为小写<br> toString() ---> 返回字符串对象值<br> toUpperCase() ---> 把字符串转换为大写<br> trim() ---> 移除字符串首尾空白<br> valueOf() ----> 返回某个字符串对象的原始值</p> <p><strong>JavaScript 运算符</strong></p> <ul> <li> <ul> <li> <ul> <li>/ % ++ --</li> </ul></li> </ul></li> </ul> <p>用于字符串的 + 运算符<br> 如需把两个或多个字符串变量连接起来,请使用 + 运算符:</p> <p>或者把空格插入表达式中:<br> txt3=txt1+" "+txt2;</p> <p>对字符串和数字进行加法运算<br> 两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串,如下实例:<br> x=5+5;<br> y="5"+5;<br> z="Hello"+5;</p> <p>10<br> 55<br> Hello5</p> <p><strong>JavaScript 比较 和 逻辑运算符</strong><br> 比较和逻辑运算符用于测试 true 或者 false。</p> <p>比较运算符</p> <p>== 等于<br> === 绝对等于(值和类型均相等)<br> != 不等于<br> !== 不绝对等于(值和类型有一个不相等,或两个都不相等)</p> <blockquote> <p>大于<br> < 小于<br> = 大于或等于<br> <= 小于或等于</p> </blockquote> <p>逻辑运算符<br> && || !</p> <p>条件运算符<br> voteable=(age<18)?"年龄太小":"年龄已达到";</p> <p><strong>JavaScript if...Else 语句</strong><br> if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码<br> if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码<br> if...else if....else 语句- 使用该语句来选择多个代码块之一来执行<br> switch 语句 - 使用该语句来选择多个代码块之一来执行</p> <p>JavaScript switch 语句<br> 工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。</p> <pre><code>var d=new Date().getDay(); switch (d) { case 0:x="今天是星期日"; break; case 1:x="今天是星期一"; break; case 2:x="今天是星期二"; break; case 3:x="今天是星期三"; break; case 4:x="今天是星期四"; break; case 5:x="今天是星期五"; break; case 6:x="今天是星期六"; break; } </code></pre> <p>default 关键词<br> 使用 default 关键词来规定匹配不存在时做的事情:</p> <pre><code>var d=new Date().getDay(); switch (d) { case 6:x="今天是星期六"; break; case 0:x="今天是星期日"; break; default: x="期待周末"; } document.getElementById("demo").innerHTML=x; </code></pre> <p><strong>JavaScript for 循环</strong></p> <pre><code>for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); } </code></pre> <p><strong>不同类型的循环</strong></p> <ul> <li>for - 循环代码块一定的次数</li> <li>for/in - 循环遍历对象的属性</li> <li>while - 当指定的条件为 true 时循环指定的代码块</li> <li>do/while - 同样当指定的条件为 true 时循环指定的代码块</li> </ul> <pre><code>for (var i=0,len=cars.length; i<len; i++) { document.write(cars[i] + "<br>"); } </code></pre> <ul> <li>for/in - 循环遍历对象的属性,只是遍历对象内部的属性</li> </ul> <pre><code> var x; var txt=""; var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){ txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; </code></pre> <ul> <li>while - 当指定的条件为 true 时循环指定的代码块</li> </ul> <pre><code>while (i<5) { x=x + "The number is " + i + "<br>"; i++; } </code></pre> <ul> <li>do/while - 同样当指定的条件为 true 时循环指定的代码块</li> </ul> <pre><code> var x="",i=0; do{ x=x + "该数字为 " + i + "<br>"; i++; } while (i<5) document.getElementById("demo").innerHTML=x; </code></pre> <p><strong>JavaScript break 和 continue 语句</strong><br> break 语句用于跳出循环。<br> continue 用于跳过循环中的一个迭代。</p> <p><strong>JavaScript 标签</strong><br> 如需标记 JavaScript 语句,请在语句之前加上冒号:</p> <pre><code>label: statements </code></pre> <pre><code><script> cars=["BMW","Volvo","Saab","Ford"]; list:{ document.write(cars[0] + "<br>"); break list; document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); } </script> </code></pre> <p><strong>JavaScript typeof, null, 和 undefined</strong></p> <p>null是一个只有一个值的特殊类型。表示一个空对象引用。<br> var person = null; // 值为 null(空), 但类型为对象</p> <p>你可以设置为 undefined 来清空对象:<br> var person = undefined; // 值为 undefined, 类型为 undefined</p> <p>undefined 是一个没有设置值的变量。<br> 任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.</p> <p>null 和 undefined 的值相等,但类型不等:</p> <p>你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):<br> <code>return myArray.constructor.toString().indexOf("Array") > -1;</code></p> <p><strong>将数字转换为字符串</strong><br> String(x) // 将变量 x 转换为字符串并返回</p> <p>Number 方法 toString() 也是有同样的效果。<br> x.toString()<br> (123).toString()</p> <p>Date 方法<br> 将字符串转换为数字<br> Number("3.14") // 返回 3.14<br> Number 方法</p> <p>一元运算符 +<br> Operator + 可用于将变量转换为数字:</p> <p>将布尔值转换为数字<br> Number(false) // 返回 0<br> Number(true) // 返回 1</p> <p>d = new Date();<br> Number(d) // 返回 1404568027739<br> 日期方法 getTime() 也有相同的效果。</p> <p><strong>JavaScript 正则表达式</strong><br> 正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。<br> 搜索模式可用于文本搜索和文本替换。</p> <p><strong>什么是正则表达式?</strong><br> 正则表达式是由一个字符序列形成的搜索模式。<br> 当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。<br> 正则表达式可以是一个简单的字符,或一个更复杂的模式。<br> 正则表达式可用于所有文本搜索和文本替换的操作。</p> <p><strong>语法</strong><br> /正则表达式主体/修饰符(可选)<br> var patt = /runoob/i</p> <p>/runoob/i 是一个正则表达式。<br> runoob 是一个正则表达式主体 (用于检索)。<br> i 是一个修饰符 (搜索不区分大小写)。</p> <p>在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。</p> <p>search() 方法使用正则表达式</p> <pre><code> var str = "Visit Runoob!"; var n = str.search(/Runoob/i); document.getElementById("demo").innerHTML = n; </code></pre> <p>search() 方法使用字符串</p> <pre><code> var str = "Visit Runoob!"; var n = str.search("Runoob"); document.getElementById("demo").innerHTML = n; </code></pre> <p>replace() 方法使用正则表达式</p> <pre><code> var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob"); document.getElementById("demo").innerHTML = txt; </code></pre> <p>replace() 方法使用正则表达式</p> <pre><code> var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob"); document.getElementById("demo").innerHTML = txt; </code></pre> <p><strong>JavaScript 错误 - throw、try 和 catch</strong><br> try 语句测试代码块的错误。<br> catch 语句处理错误。<br> throw 语句创建自定义错误。<br> finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。</p> <p><strong>JavaScript try 和 catch</strong><br> catch 块会捕捉到 try 块中的错误,并执行代码来处理它。</p> <pre><code> try { adddlert("Welcome guest!"); } catch(err) { txt="本页有一个错误。\n\n"; txt+="错误描述:" + err.message + "\n\n"; txt+="点击确定继续。\n\n"; alert(txt); } </code></pre> <p>finally 语句<br> finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。</p> <p>Throw 语句<br> throw 语句允许我们创建自定义错误。<br> 如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。</p> <pre><code>function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值为空"; if(isNaN(x)) throw "不是数字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "错误: " + err; } } </code></pre> <p><strong>JavaScript 调试工具</strong><br> 浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。<br> mac 调起是按 option+command+i</p> <p><strong>console.log() 方法</strong><br> 如果浏览器支持调试,你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值</p> <p><strong>设置断点</strong><br> 在调试窗口中,你可以设置 JavaScript 代码的断点。<br> 在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。<br> 在检查完毕后,可以重新执行代码(如播放按钮)。</p> <p><strong>debugger 关键字</strong><br> debugger 关键字用于停止执行 JavaScript,并调用调试函数。<br> 注意前提条件: 调试环境</p> <p><strong>Undefined 不是 Null</strong><br> 在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。<br> 对象只有被定义才有可能为 null,否则为 undefined。<br> 如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。<br> <code>if (typeof myObj !== "undefined" && myObj !== null)</code></p> <p><strong>JavaScript 表单</strong><br> HTML 表单验证可以通过 JavaScript 来完成。<br> 以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:</p> <pre><code><html> <head> <meta charset="utf-8"> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html> </code></pre> <p><strong>数据验证</strong><br> <strong>服务端数据验证</strong>是在数据提交到服务器上后再验证。<br> <strong>客户端数据验证</strong>是在数据发送到服务器前,在浏览器上完成验证。</p> <p><strong>HTML 约束验证</strong><br> 约束验证是表单被提交时浏览器用来实现验证的一种算法。<br> HTML 输入属性<br> CSS 伪类选择器<br> DOM 属性和方法</p> <p>有关的查:HTML 输入属性<br> 有关的查: CSS 伪类</p> <p><strong>JavaScript 表单验证</strong><br> JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。</p> <ul> <li>验证表单数据是否为空?</li> <li>验证输入是否是一个正确的email地址?</li> <li>验证日期是否输入正确?</li> <li>验证表单输入内容是否为数字型?</li> </ul> <p><strong>JavaScript 验证 API</strong><br> 约束验证 DOM 方法:<br> checkValidity() ---> 如果 input 元素中的数据是合法的返回 true,否则返回 false。</p> <p>setCustomValidity() --->设置 input 元素的 validationMessage 属性,用于自定义错误提示信息的方法。<br> 使用 setCustomValidity 设置了自定义提示后,validity.customError 就会变成true,则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示.</p> <p><strong>约束验证 DOM 属性</strong><br> validity<br> validationMessage<br> willValidate</p> <p><strong>Validity 属性</strong><br> customError ---> 设置为 true, 如果设置了自定义的 validity 信息。<br> patternMismatch ---> 设置为 true, 如果元素的值不匹配它的模式属性。<br> rangeOverflow ---> 设置为 true, 如果元素的值大于设置的最大值。<br> rangeUnderflow ---> 设置为 true, 如果元素的值小于它的最小值。<br> stepMismatch ---> 设置为 true, 如果元素的值不是按照规定的 step 属性设置。<br> tooLong ---> 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。<br> typeMismatch ---> 设置为 true, 如果元素的值不是预期相匹配的类型。<br> valueMissing ---> 设置为 true,如果元素 (required 属性) 没有值。<br> valid ---> 设置为 true,如果元素的值是合法的。</p> <p><strong>JavaScript this 关键字</strong><br> 面向对象语言中 this 表示当前对象的一个引用。<br> 但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。</p> <ul> <li>在方法中,this 表示该方法所属的对象。</li> <li>如果单独使用,this 表示全局对象。</li> <li>在函数中,this 表示全局对象。</li> <li>在函数中,在严格模式下,this 是未定义的(undefined)。</li> <li>在事件中,this 表示接收事件的元素。</li> <li>类似 call() 和 apply() 方法可以将 this 引用到任何对象。</li> </ul> <p>方法中的 this<br> 在对象方法中, this 指向调用它所在方法的对象。 下面代码中this指向的是person</p> <pre><code>var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; </code></pre> <p>单独使用 this<br> 单独使用 this,则它指向全局(Global)对象。<br> 在浏览器中,window 就是该全局对象为 [object Window]:</p> <pre><code><script> var x = this; document.getElementById("demo").innerHTML = x; </script> </code></pre> <p>函数中使用 this(默认)<br> 在函数中,函数的所属者默认绑定到 this 上。<br> 在浏览器中,window 就是该全局对象为 [object Window]:</p> <pre><code><script> document.getElementById("demo").innerHTML = myFunction(); function myFunction() { return this; } </script> </code></pre> <p>函数中使用 this(严格模式)<br> 严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。</p> <p>事件中的 this<br> 在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:<br> <code><button onclick="this.style.display='none'">点我后我就消失了</button></code></p> <p>对象方法中绑定<br> this 是 person 对象,person 对象是函数的所有者</p> <p>显式函数绑定<br> 在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。<br> 在下面实例中,当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:</p> <pre><code>var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); // 返回 "John Doe" </code></pre> <p><strong>JavaScript let 和 const</strong><br> let 声明的变量只在 let 命令所在的代码块内有效。<br> const 声明一个只读的常量,一旦声明,常量的值就不能改变。<br> 函数内使用 var 声明的变量只能在函数内容访问,如果不使用 var 则是全局变量。</p> <p><strong>JavaScript JSON</strong><br> JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)<br> JSON 通常用于服务端向网页传递数据 。</p> <p>JSON 语法规则</p> <ul> <li>数据为 键/值 对。</li> <li>数据由逗号分隔。</li> <li>大括号保存对象</li> <li>方括号保存数组</li> </ul> <p><strong>JSON 字符串转换为 JavaScript 对象</strong><br> 首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:<br> 然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:</p> <pre><code>var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; var obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url; </code></pre> <p>相关参数<br> JSON.parse() ----> 用于将一个 JSON 字符串转换为 JavaScript 对象。<br> JSON.stringify() ---> 用于将 JavaScript 值转换为 JSON 字符串。</p> <p><strong>javascript:void(0) 含义</strong><br> 该操作符指定要计算一个表达式但是不返回值</p> <p>void()仅仅是代表不返回任何值,但是括号内的表达式还是要运行,如<br> void(alert("Warnning!"))</p> <p><strong>JavaScript 异步编程</strong><br> 异步:异步就是从主线程发射一个子线程来完成任务</p> <p>子线程有一个局限:一旦发射了以后就会与主线程失去同步,我们无法确定它的结束,如果结束之后需要处理一些事情,比如处理来自服务器的信息,我们是无法将它合并到主线程中去的。<br> 为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。</p> <p><strong>回调函数</strong><br> 回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。</p> <pre><code>function print() { document.getElementById("demo").innerHTML="RUNOOB!"; } setTimeout(print, 3000); </code></pre> <p>这段程序中的 setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 3 秒,然后执行回调函数 "print",在命令行输出 "Time out"。<br> 在 setTimeout 函数执行之后主线程并没有停止</p> <p><strong>异步 AJAX</strong><br> XMLHttpRequest 的 onload 和 onerror 属性都是函数,分别在它请求成功和请求失败时被调用。</p> <p>GET 请求</p> <pre><code>xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send(); </code></pre> <p>在上面的例子中,您可能得到的是缓存的结果。<br> 为了避免这种情况,请向 URL 添加一个唯一的 ID:</p> <pre><code>xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); xmlhttp.send(); </code></pre> <p>POST 请求</p> <pre><code>xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send(); </code></pre> <pre><code>xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); </code></pre> <p><strong>JavaScript Promise</strong><br> Promise:目的是更加<strong>优雅地书写复杂的异步任务</strong><br> 构建Promise 对象:</p> <pre><code>new Promise(function (resolve, reject) { // 要做的事情... }); </code></pre> <p>Promise 可以将嵌套格式的代码变成了顺序格式的代码</p> <p><strong>Promise 的使用</strong><br> Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。<br> 当 Promise 被构造时,起始函数会被异步执行:</p> <pre><code>new Promise(function (resolve, reject) { console.log("Run"); }); </code></pre> <p>这段程序会直接输出 Run。<br> resolve 和 reject 都是函数,其中调用 resolve 代表一切正常,reject 是出现异常时所调用的</p> <pre><code>new Promise(function (resolve, reject) { var a = 0; var b = 1; if (b == 0) reject("Diveide zero"); else resolve(a / b); }).then(function (value) { console.log("a / b = " + value); }).catch(function (err) { console.log(err); }).finally(function () { console.log("End"); }); </code></pre> <p>Promise 类有 .then() .catch() 和 .finally() 三个方法,这三个方法的参数都是一个函数,.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列,.catch() 则是设定 Promise 的异常处理序列,.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列:</p> <p><strong>Q: 什么时候适合用 Promise 而不是传统回调函数?</strong><br> A: 当需要<strong>多次顺序执行异步操作</strong>的时候,例如,如果想通过异步方法先后检测用户名和密码,需要先异步检测用户名,然后再异步检测密码的情况下就很适合 Promise。</p> <p><strong>函数表达式</strong></p> <p>JavaScript 函数可以通过一个表达式定义。<br> 函数表达式可以存储在变量中:<br> 以下函数实际上是一个 匿名函数 (函数没有名称)。<br> 函数存储在变量中,不需要函数名称,通常通过变量名来调用。</p> <pre><code>var x = function (a, b) {return a * b}; var z = x(4, 3); </code></pre> <p><strong>arguments 对象</strong><br> JavaScript 函数有个内置的对象 arguments 对象。<br> argument 对象包含了函数调用的参数数组。<br> 通过这种方式你可以很方便的找到最大的一个参数的值</p> <p>在函数中调用的参数是函数的隐式参数。<br> 隐式参数的改变在函数外是不可见的。</p> <p>call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。</p> <pre><code><script> var myObject; function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); // 返回 20 document.getElementById("demo").innerHTML = myObject; </script> </code></pre> <pre><code><script> var myObject, myArray; function myFunction(a, b) { return a * b; } myArray = [10, 2] myObject = myFunction.apply(myObject, myArray); // 返回 20 document.getElementById("demo").innerHTML = myObject; </script> </code></pre> <p>两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。</p> <p><strong>this 笔记</strong><br> this 是 JavaScript 语言的一个关键字。<br> 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如:</p> <pre><code>function test() { this.x = 1; } </code></pre> <p>变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。</p> <p>JavaScript支持嵌套函数,内部函数可以访问父函数的变量。</p> <p><strong>JavaScript 闭包</strong><br> 什么叫闭包,闭包有什么用</p> <pre><code>function aaa() { var a = 5; function bbb() { alert(a) } return bbb } var c = aaa(); c(); </code></pre> <pre><code><script> var add = (function () { var counter = 0; return function () {return counter += 1;} })(); function myFunction(){ document.getElementById("demo").innerHTML = add(); } </script> </code></pre> <p><strong>实例解析</strong><br> 变量 add 指定了函数自我调用的返回字值。<br> 自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。<br> add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。<br> 这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。<br> 计数器受匿名函数的作用域保护,只能通过 add 方法修改。<br> <code>闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。 直观的说就是形成一个不销毁的栈环境。</code></p> <h3>Vue.js 学习</h3> <p>Vue框架参考了MVVM架构,所以vm扮演一个数据视图的实例。<br> watch('属性',function(newVal,oldVal));会观察实例某个属性,并通过回调获取最新的值、旧值</p> <p>实例生命周期钩子<br> 将实例挂在到DOM,并在数据变化更新DOM。在这个过程中运行 <strong>声明周期钩子</strong>函数,给用户在不同阶段添加自己代码的机会。</p> <p>生命周期函数内不能使用箭头函数<br> 属性函数<br> //页面创建之前<br> beforeCreate</p> <p>//实例创建之后<br> created</p> <p>//挂载之前进行的<br> beforeMount</p> <p>//挂载成功之后<br> mounted</p> <p>//数据变化更新之前调用<br> beforeUpdate</p> <p>//组件 DOM 已经更新,组件更新完毕<br> updated</p> <p>setTimeout(function(),3000),三分钟后执行function</p> <p><strong>模板语法</strong></p> <p>文本插值 {{ }}<br> v-onec执行一次插值<br> v-html 将变量文本输出为真正的HTML<br> v-bind (帮助标签动态绑定属性)</p> <p>v-if 指令 根据表达式的值的真假来判断 元素的执行</p> <h3>Node.js 学习</h3> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1698610799423074304"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Web学习之开篇)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1947464257083863040.htm" title="读懂易经读懂中华文化(72)明夷卦爻辞" target="_blank">读懂易经读懂中华文化(72)明夷卦爻辞</a> <span class="text-muted">有庆也</span> <div>明夷卦爻辞及小象传:初九,明夷于飞,垂其翼。君子于行,三日不食,有攸往,主人有言。象曰:君子于行,义不食也。六二,明夷,夷于左股,用拯马壮,吉。象曰:六二之吉,顺以则也。九三,明夷于南狩,得其大首,不可疾贞。象曰:南狩之志,乃大得也。六四,入于左腹,获明夷之心,出于门庭。象曰:入于左腹,获心意也。六五,箕子之明夷,利贞。象曰:箕子之贞,明不可息也。上六,不明晦,初登于天,后入于地。象曰:初登于天,</div> </li> <li><a href="/article/1947460436496543744.htm" title="C++之constexpr和常量表达式" target="_blank">C++之constexpr和常量表达式</a> <span class="text-muted">掘根</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>常量表达式常量表达式(constexpression)是指值不会改变并且在编译过程就能得到计算结果的表达式。显然,字面值属于常量表达式,用常量表达式初始化的const对象也是常量表达式。后面将会提到,C++语言中有几种情况下是要用到常量表达式的。一个对象(或表达式)是不是常量表达式由它的数据类型和初始值共同决定,例如:constintmax_files=20;//max_files是常量表达式co</div> </li> <li><a href="/article/1947455598866001920.htm" title="2018-11-25" target="_blank">2018-11-25</a> <span class="text-muted">TAO1202</span> <div>2018-11-25六项精进打卡努力一组姓名:简彦涛单位:上海日朗门窗有限公司六项精进397期学员【日精进打卡第175天】【知~学习】《六项精进大纲》0遍共163遍《大学开篇》0遍共163遍【经典名句分享】付出不亚于任何人的努力【行~实践】一、修身今日步数11290步二、齐家跟家人视频通话三、建功:做了产品首件{积善}:发愿从2018年5月27日起1年内做善事。今日1善,累计175善。【省~觉悟】</div> </li> <li><a href="/article/1947454884274040832.htm" title="python sqlalchemy连接oracle_Python SQLalchemy 基础操作之数据库增删改查" target="_blank">python sqlalchemy连接oracle_Python SQLalchemy 基础操作之数据库增删改查</a> <span class="text-muted">weixin_39970994</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>ORM全称ObjectRelationalMapping,即对象关系映射。简单的说,ORM将数据库中的表与面向对象语言中的类建立了一种对应关系。这样,我们要操作数据库,数据库中的表或者表中的一条记录就可以直接通过操作类或者类实例来完成。SQLAlchemy是Python社区最知名的ORM工具之一,为高效和高性能的数据库访问设计,实现了完整的企业级持久模型。SQLAlchemy优点:简洁易读:将数据</div> </li> <li><a href="/article/1947451288081985536.htm" title="论语学习子路篇202121" target="_blank">论语学习子路篇202121</a> <span class="text-muted">一尘了心</span> <div>13.13:子曰:“苟正其身矣,于从政乎何有?不能正其身,如正人何?”译文:孔子说:“如果端正了自己的言行,治理国家还有什么唯的呢?如果不能端正自己,又怎么能去端正别呢?”感悟:正人先正己!每日三省吾身啊:与人谋,不忠乎?与朋友交不信乎?传不习乎?樊老师谈到孔子不注重技术,没有给出技术方面方向性的指导意见,我觉得有点为难了,术业有专攻,工学/理学完全两个大类。孔子在人文科学领域有如此先见之明,已经</div> </li> <li><a href="/article/1947451231727316992.htm" title="华为OD面试手撕真题 - 最大数" target="_blank">华为OD面试手撕真题 - 最大数</a> <span class="text-muted">无限码力</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAOD%E9%9D%A2%E8%AF%95%E6%89%8B%E6%92%95%E4%BB%A3%E7%A0%81%E7%9C%9F%E9%A2%98%E5%90%88%E9%9B%86/1.htm">华为OD面试手撕代码真题合集</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E6%89%8B%E6%92%95%E7%9C%9F%E9%A2%98/1.htm">面试手撕真题</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAOD%E9%9D%A2%E8%AF%95%E6%89%8B%E6%92%95%E7%9C%9F%E9%A2%98/1.htm">华为OD面试手撕真题</a> <div>题目描述给定一组非负整数nums,重新排列每个数的顺序(每个数不可拆分)使之组成一个最大的整数。**注意:**输出结果可能非常大,所以你需要返回一个字符串而不是整数。示例1输入:nums=[10,2]输出:"210"示例2输入:nums=[3,30,34,5,9]输出:"9534330"提示1<=nums.length<=1000<=nums[i]<=109题解力扣原题链接思路:贪心n个数字按字符</div> </li> <li><a href="/article/1947445310468976640.htm" title="《历史》与《春秋》札记(七十八)" target="_blank">《历史》与《春秋》札记(七十八)</a> <span class="text-muted">刘子曰_b08e</span> <div>昭公元年春王正月,公即位。叔孙豹会晋赵武、楚公子围、齐国弱、宋向戌、卫齐恶、陈公子招、蔡公孙归生、郑罕虎、许人、曹人于虢。三月,取郓。夏,秦伯之弟金咸出奔晋。六月丁巳,邾子华卒。晋荀吴帅师败狄于大卤。秋,莒去疾自齐入于莒。莒展舆出奔吴。叔弓帅师疆郓田。葬邾悼公。冬十有一月己酉,楚子麇卒。公子比出奔晋。鲁昭公第一年春季周王历正月,鲁昭公接位担任鲁君。叔孙豹在虢国会见晋国的赵武、楚国的公子围、齐国的国</div> </li> <li><a href="/article/1947441740436795392.htm" title="倪海厦伤寒论笔记(二0二)甘草附子汤" target="_blank">倪海厦伤寒论笔记(二0二)甘草附子汤</a> <span class="text-muted">火帝养生</span> <div>伤寒论第175条辨:风湿相搏,骨节烦疼,掣痛,不得屈伸,近之则痛剧,汗出短气,小便不利,恶风不欲去衣,或身微肿者,甘草附子汤主之。【原文解释】风湿相互搏结,周身关节剧烈疼痛,牵引拘急不能屈伸,触按则疼痛更甚,汗出,短气,小便不通畅,畏风不愿减衣,或者身体轻度浮肿的,主治用甘草附子汤。我们只要把这个条辨学会了,从此就会治痛风了。“风湿相搏,骨节烦疼,掣痛”风湿浸入到骨关节里面去,气血凝滞,我们前面说</div> </li> <li><a href="/article/1947441357886910464.htm" title="三观一致是婚姻生活中的必要条件" target="_blank">三观一致是婚姻生活中的必要条件</a> <span class="text-muted">囹点</span> <div>这几日由于车子泡水拿去修了,偶尔会搭同事H的车回家,我们住在一个小区。只是最近下班回去的晚了,因为她婆婆从老家来了,不用着急回家买菜做饭了。从她口中得知她婆婆此行是为了听某个专家的养生课,已经连续听了两年了。且不说课程效果如何,从某种意义上说这也是一种信仰吧。而我对她公公的故事更感兴趣。老爷子退休后就热衷于组建自己的文艺团,退休金的百分之八十都投到团里去了。对此,家里人对他很不满。老伴儿、儿子、女</div> </li> <li><a href="/article/1947440722252722176.htm" title="电动汽车充电秘籍之乾坤大挪移" target="_blank">电动汽车充电秘籍之乾坤大挪移</a> <span class="text-muted">老柳说车</span> <div>如今世界各国都在加速新源车的开发与推广,新能源车取代燃油车大势所趋,中国也是如此。在新能源中现在最快可以商用的能源就是电,但电动汽车充电与续航的问题,一百多年来并没有革命性的变化。借着这个势头,《老柳说车》工作室天马行空,为电动车充电支大招,以下内容均为饭后谈资。第一招:全面取消公务用车补贴,政府用车必须使用电动汽车。一但如此,这当官的没地儿充电,充电桩的推广会得到迅速的发展。话糙理不糙。第二招:</div> </li> <li><a href="/article/1947438174238208000.htm" title="观心自在爱分享 299" target="_blank">观心自在爱分享 299</a> <span class="text-muted">菲儿_bd75</span> <div>关于财富:财富的终极奥秘(接前一天分享)正如哈维·艾克所说:“你的收入,只能增加到你最愿意做到的程度。”如果你想的就是“我要成为一个千万富翁”,那么你就会一直朝着这个方向迈进;而如果你的目标就是小富即安的话,那么你就不要再抱怨自己没有受到上天的眷顾了。往往在生活中,许多人都是如此,因为仅能看见自己能够看见的东西,生活在目之所及的世界里,才导致没有足够的内在能力去创造、并且守住大笔的财富。所以说,如</div> </li> <li><a href="/article/1947436397057077248.htm" title="20210125《班主任专业成长》读书笔记" target="_blank">20210125《班主任专业成长》读书笔记</a> <span class="text-muted">在水一方198158</span> <div>《班主任专业成长》读书笔记书摘:1.苏霍姆林斯基曾说:“从他(指儿童)开始过学校生活的最初日子起,我们就把他眼前那扇通往周围大自然的迷人世界的门关闭了,他再也听不到小溪的潺潺流水声,听不到春雪融化时水滴的叮咚响,听不到云雀的婉转鸣唱了……不,不能再这样继续下去了。”2.王国维在《论教育之宗旨》一文中深刻地指出:“美育者,一面使人之感情发达,以达完美之域;一面又为德育与智育之手段。此又教育者所不可不</div> </li> <li><a href="/article/1947430943664959488.htm" title="青梅煮酒论曹操" target="_blank">青梅煮酒论曹操</a> <span class="text-muted">寒蝉zxyw1438</span> <div>曹操,字孟德,小字阿瞒,沛国谯县人,是东汉末年中出世的诸多英雄豪杰之一,也是三国中曹魏政权的奠基者。同时,他也是中国历史上最为复杂、备受争议的风云人物。而在我眼里,曹操是这样的一个人。电视剧中的曹操首先,他是“雄”,一名乱世之雄。曹操生于东汉末年,正值混乱之世,官僚混战,狼烟四起,民不聊生。在这样一个动乱的时代,曹操的出现似乎是为了改变这一时代。年少时,他机智警敏,但任性好侠、放荡不羁,不修品行,</div> </li> <li><a href="/article/1947425219111088128.htm" title="基本养老之退休办理" target="_blank">基本养老之退休办理</a> <span class="text-muted">鎏鎏爱妈妈</span> <div>怎么先将办理退休的事情提出来呢?因为这段时间,在为同事办理退休时,遇到了一些意外困扰,而且也是很多四十多岁女性同事,特别关心的话题,所以罗列出来说说。一、缴费年限已满15年某天,接到一朋友电话:“我现在保险已经缴了15年,每年都要万把块钱,能不能停下来不缴了,等到50岁时直接办退休,哪怕退休工资少就少点,你看行不行呢?”回答当然是否定的。很多人的思维是,养老保险缴满15年,就可以办理退休了。当然缴</div> </li> <li><a href="/article/1947424705464037376.htm" title="学生报到" target="_blank">学生报到</a> <span class="text-muted">平凡之梅</span> <div>平凡•原创01代班主任生活之抓阄上午十一点抓阄,我让宁宁替抓,B班。我自己手气很少可以抓到好的。其实,也无所谓优劣。B班有个尖子生,全年级第二名而已。会后,通知几位亲戚朋友他们的孩子在几班。02签到报到的时候,熟悉的面孔有几个,但我们班的前几名一个也没有分过来。倒是不学习的,我在网上看到别人写的,就改动许多,发给我们班级,其他班主任也参考。尊敬的各位家长:新学期马上就要开始了,相信大家都对新学期充</div> </li> <li><a href="/article/1947422367496073216.htm" title="Web安全之CSP" target="_blank">Web安全之CSP</a> <span class="text-muted">weixin_30649641</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/1.htm">开发工具</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>内容安全策略(Content-Security-Policy,简称CSP)概念:内容安全策略(CSP)是一种web应用技术用于帮助缓解大部分类型的内容注入攻击,包括XSS攻击和数据注入等,这些攻击可实现数据窃取、网站破坏和作为恶意软件分发版本等行为。该策略可让网站管理员指定客户端允许加载的各类可信任资源。浏览器支持:统计来源:caniuse.com/contentsecuritypolicy&Mo</div> </li> <li><a href="/article/1947412078696394752.htm" title="Day262-不改父之臣政/哀矜勿喜/恶居下流" target="_blank">Day262-不改父之臣政/哀矜勿喜/恶居下流</a> <span class="text-muted">君子重威</span> <div>19.18:曾子曰:“吾闻诸夫子:孟庄子之孝也,其他可能也;其不改父之臣与父之政,是难能也。”译文:曾子说:“我听夫子说过:孟庄子的孝道,其他人可以做到;但他不改变父亲的臣子和父亲的政策是别人很难做到的。”19.19:孟氏使阳肤为士师,问于曾子。曾子曰:“上失其道,民散久矣。如得其情,则哀矜而勿喜。”译文:孟氏让阳肤去做典狱长,阳肤问曾子需要注意的事。曾子说:“上层执政者失去道义、民心涣散很久了。</div> </li> <li><a href="/article/1947410803539898368.htm" title="精选推荐:返利APP排行榜前十,优惠力度大比拼" target="_blank">精选推荐:返利APP排行榜前十,优惠力度大比拼</a> <span class="text-muted">优惠券高省</span> <div>省钱达人必备!返利APP排行榜前十深度推荐在这个物价飞涨的时代里如何成为一名真正的省钱达人?答案或许就藏在返利APP排行榜前十之中。这些应用不仅汇聚了海量的优惠信息和返利政策更通过智能推荐和个性化服务为用户打造了一个专属的省钱购物平台。今天我们就来为大家深度推荐这些优秀的返利APP带你一起探索省钱购物的奥秘让你在享受购物乐趣的同时也能轻松实现省钱目标。大家好,我是高省的波西导师。在开始本文的交流之</div> </li> <li><a href="/article/1947409272891568128.htm" title="震惊了,现在还有年轻人不用支付宝?!" target="_blank">震惊了,现在还有年轻人不用支付宝?!</a> <span class="text-muted">十味_a1cb</span> <div>图片发自App我在上个月月底的时候,因为物价高升以及工资骤然下降,还有双11剁手的种种原因,我进入了财富危机。真是不可置信。月底的时候和朋友小D借了1千多,以解燃眉之急。当时的打算是这个月发了工资就还给她。这个月工资到账后就说转账给她,因为之前小D是微信转账给我的。还的时候发现我微信上没有那么多,只有800多一点,然后和她说我支付宝转账给她。她的回答惊到了我,她说她没有支付宝。我以为我听错了,再次</div> </li> <li><a href="/article/1947407865555775488.htm" title="SpringBoot单元测试全攻略:MockMVC+Testcontainers+覆盖率分析" target="_blank">SpringBoot单元测试全攻略:MockMVC+Testcontainers+覆盖率分析</a> <span class="text-muted">fanxbl957</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>博主介绍:Java、Python、js全栈开发“多面手”,精通多种编程语言和技术,痴迷于人工智能领域。秉持着对技术的热爱与执着,持续探索创新,愿在此分享交流和学习,与大家共进步。DeepSeek-行业融合之万象视界(附实战案例详解100+)全栈开发环境搭建运行攻略:多语言一站式指南(环境搭建+运行+调试+发布+保姆级详解)感兴趣的可以先收藏起来,希望帮助更多的人SpringBoot单元测试全攻略:</div> </li> <li><a href="/article/1947403681691398144.htm" title="一个人的“穷酸命”,过了五十五岁,其实就无法改变了" target="_blank">一个人的“穷酸命”,过了五十五岁,其实就无法改变了</a> <span class="text-muted">舒山有鹿</span> <div>01普通人的气运,那是有限的,而不会无限度地延续下去。一些做生意的老板,在50岁之前还是比较顺的。过了50岁,就不太顺了。他们就会疑惑,难道自己的财运,在走下坡路吗?一些做事业的职工,在50岁之前青云直上,前途似锦。过了50岁,就遇到瓶颈了,根本无法突破,让他们失去希望。人之气运,为什么就不能一直“好”下去呢?很简单,因为别人也需要发展,不能让你一个人好到底。如果你一个人好到底,那别人不就没有生存</div> </li> <li><a href="/article/1947402156256587776.htm" title="小仙女之翻身农奴把歌唱✌" target="_blank">小仙女之翻身农奴把歌唱✌</a> <span class="text-muted">敏敏_7b1d</span> <div>时间过得真快啊!一转眼的功夫,我已经是个四个半月的宝宝了✌自从嘟嘴事件之后,妈妈果然对我好了许多,不在对我吆五喝六横眉冷对颐指气使了我也过上了相对较轻松无压力的生活了,即使妈妈对我迟迟不肯主动翻身的行为颇有微词,也只能采取听之任之保留意见的态度,嘿嘿!任性妄为的感觉可不是一般的爽歪歪哦最近一个星期,奶奶的主要任务是想让我学会翻身,看着奶奶在床上左翻右滚的,我只是被逗得傻笑不止,让我翻身门都没有……</div> </li> <li><a href="/article/1947400881230114816.htm" title="结伴而行(续一)" target="_blank">结伴而行(续一)</a> <span class="text-muted">周惠来</span> <div>笑。很多的笑,在这个旅程之中。很多的笑,呈现在结伴而行的,一个又一个路人的脸上。各色各样的人:男人,女子,老人,小孩。每一次的相遇,每一次的交谈,都像一幅山水画,都像那,潺潺的溪水声,留下一种美好,留下一段旋律,它们会叠置在自己的日常生活之印记上,在自己眼前,时不时,浮现出一张张笑脸。清晨,外面已经有些亮堂,天空飘着小雨。地上,没有见到行人,带上伞,下楼,沿着公路走,往来时登陆的、明日将要再次搭乘</div> </li> <li><a href="/article/1947398715987783680.htm" title="《馨乐赋》" target="_blank">《馨乐赋》</a> <span class="text-muted">种德人</span> <div>天清气朗,紫气东来之盛,六六科考,安米降生于世,浩浩荡荡,爆竹齐鸣之骤,车水马龙,高考学子旺日,驱邪清正,打黑恶之神威,分争勿扰,离三载伤心地,厚德载物,辞旧迎新之望,颂经诗雅,书正道之美文,松竹氣节,松挺竹节傲骨,迎花甲年,风霜磨砺敏睿,养清欣气,欢颜天伦乐道,拒假好人,晓通耳便功能,扶置幼小,积无尚之善德,养植廉洁,遵奉清白之风,勤奋于事,仰奉节俭之家,忠勇孝善,养浩然之正气,帮扶弱小,秉笔直</div> </li> <li><a href="/article/1947397027633623040.htm" title="【用unity实现100个游戏之34】使用环状(车轮)碰撞器(Wheel Collider)从零实现一个汽车车辆物理控制系统,实现一个赛车游戏" target="_blank">【用unity实现100个游戏之34】使用环状(车轮)碰撞器(Wheel Collider)从零实现一个汽车车辆物理控制系统,实现一个赛车游戏</a> <span class="text-muted">向宇it</span> <a class="tag" taget="_blank" href="/search/%E3%80%90%E5%88%B6%E4%BD%9C100%E4%B8%AAUnity%E6%B8%B8%E6%88%8F%E3%80%91/1.htm">【制作100个Unity游戏】</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E6%B1%BD%E8%BD%A6/1.htm">汽车</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E/1.htm">游戏引擎</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a><a class="tag" taget="_blank" href="/search/%E6%9D%90%E8%B4%A8/1.htm">材质</a> <div>最终效果unity赛车效果文章目录最终效果前言一、WheelCollider参数介绍1、基础参数2、SuspensionSpring:悬挂弹簧2.1spring支撑悬挂的弹力2.3damper减震2.4targetposition:表示车轮静止时处于的悬挂上的位置3、forwardfriction前向摩檫力和sidewaysfriction侧向摩檫力二、准备工作1、下载素材2、给车辆添加Rigid</div> </li> <li><a href="/article/1947395278206201856.htm" title="彭放感悟《论语》的人文情怀之【9.13】——待价而沽不藏于匵" target="_blank">彭放感悟《论语》的人文情怀之【9.13】——待价而沽不藏于匵</a> <span class="text-muted">教育参悟人</span> <div>【9.13】子贡曰:“有美玉于斯,韫椟而藏诸?求善贾而沽(卖出去)诸?”子曰:“沽之哉,沽之哉!我待贾者也。”子贡说:“这里有一块美玉,是把它收藏在匣子里呢?还是找一个识货的商人卖出去呢?”孔子说:“卖掉吧,卖掉吧!我正在等待识货的人呢。”【感悟】老师有许多治国之道,却英雄无用武之处,子贡巧设譬喻。孔子自称是“待贾者”,他一方面四处游说,以宣传礼治天下为己任,期待着各国统治者能够行他之道于天下;另</div> </li> <li><a href="/article/1947394642525876224.htm" title="《喋血双雄》2024美版电影[1080p中文字幕]免费在线观看未删减完整版夸克网盘高清迅雷网盘百度云" target="_blank">《喋血双雄》2024美版电影[1080p中文字幕]免费在线观看未删减完整版夸克网盘高清迅雷网盘百度云</a> <span class="text-muted">全网优惠分享君</span> <div>《喋血双雄》作为吴宇森导演的经典之作,其1989年的港版曾一度成为香港动作电影的标杆,其独特的暴力美学风格和深刻的兄弟情谊让无数影迷为之倾倒。然而,时隔三十五年,吴宇森亲自操刀翻拍的2024美版《喋血双雄》却引发了诸多争议与讨论。本文将从剧情、角色、风格以及观众反响等方面,对这部新作进行全面点评。提示:文章排版原因,喋血双雄资源链接地址放在文章结尾,往下翻就行提示:文章排版原因,喋血双雄资源链接地</div> </li> <li><a href="/article/1947393495819939840.htm" title="内地顶级个唱品牌——华晨宇火星演唱会" target="_blank">内地顶级个唱品牌——华晨宇火星演唱会</a> <span class="text-muted">山海里的微光yu</span> <div>时隔两年,2021华晨宇火星演唱会终于在海口拉开帷幕。历时6天,每天超过240分钟的时长,酣畅淋漓的演出,无论是歌迷还是华晨宇,都真切的沉浸在的火星世界。如今演唱会落幕已经过去了一个星期,然而在参加了演唱会的歌迷和路人心中那些光影,那些和音乐交织的、闪动的、跳跃的色彩久久挥之不去。每当夜幕降临,让人不得不为之赞叹。原来,参办2008年北京奥运会闭幕式的[锋尚文化]参与并助力华晨宇火星演唱会。202</div> </li> <li><a href="/article/1947390724609732608.htm" title="Uniapp之键盘弹窗" target="_blank">Uniapp之键盘弹窗</a> <span class="text-muted"></span> <div>适用范围评论输入框自定义键盘顶部工具栏其他吸附于键盘顶部的弹框意义对于输入框来说,一般都包含自动抬高输入框,但是对于一些自定义窗口来说(比如输入框下添加工具栏、键盘顶部添加工具栏等),就需要自己处理弹框位置了,那么这个时候键盘弹窗就解决了复杂的处理。示例下面示例用于展示keyboard-popup使用示例,当textarea聚焦时,textarea就会自动抬高到键盘上方。exportdefault</div> </li> <li><a href="/article/1947390725142409216.htm" title="Uniapp之自定义图片预览" target="_blank">Uniapp之自定义图片预览</a> <span class="text-muted">会功夫的李白</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88/1.htm">图片预览</a> <div>场景在一些场景,uniapp的原生图片预览无法满足要求,比如自定义图片预览元素。另外原生的图片预览无法阻止截屏问题。示例exportdefault{data(){return{allDownload:false}},onBackPress(){//返回时判断是否关闭图片预览,否则关闭并阻止返回if(this.$refs.preImgPopup.isOpen()){this.$refs.preImg</div> </li> <li><a href="/article/119.htm" title="Spring中@Value注解,需要注意的地方" target="_blank">Spring中@Value注解,需要注意的地方</a> <span class="text-muted">无量</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/%40Value/1.htm">@Value</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>Spring 3以后,支持@Value注解的方式获取properties文件中的配置值,简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac</div> </li> <li><a href="/article/246.htm" title="mongoDB 分片" target="_blank">mongoDB 分片</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>    mongoDB的分片。要mongos查询数据时候 先查询configsvr看数据在那台shard上,configsvr上边放的是metar信息,指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard(片)信息。     第一步启动两台以上的mongo服务 &nb</div> </li> <li><a href="/article/373.htm" title="OVER(PARTITION BY)函数用法" target="_blank">OVER(PARTITION BY)函数用法</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>这篇写得很好,引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍 开窗函数        &nb</div> </li> <li><a href="/article/500.htm" title="Android开发中,ADB server didn't ACK 解决方法" target="_blank">Android开发中,ADB server didn't ACK 解决方法</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a> <div>首先通知:凡是安装360、豌豆荚、腾讯管家的全部卸载,然后再尝试。   一直没搞明白这个问题咋出现的,但今天看到一个方法,搞定了!原来是豌豆荚占用了 5037 端口导致。 参见原文章:一个豌豆荚引发的血案——关于ADB server didn't ACK的问题 简单来讲,首先将Windows任务进程中的豌豆荚干掉,如果还是不行,再继续按下列步骤排查。 &nb</div> </li> <li><a href="/article/627.htm" title="canvas中的像素绘制问题" target="_blank">canvas中的像素绘制问题</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a> <div>pixl的绘制,1.如果绘制点正处于相邻像素交叉线,绘制x像素的线宽,则从交叉线分别向前向后绘制x/2个像素,如果x/2是整数,则刚好填满x个像素,如果是小数,则先把整数格填满,再去绘制剩下的小数部分,绘制时,是将小数部分的颜色用来除以一个像素的宽度,颜色会变淡。所以要用整数坐标来画的话(即绘制点正处于相邻像素交叉线时),线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的</div> </li> <li><a href="/article/754.htm" title="编码乱码问题" target="_blank">编码乱码问题</a> <span class="text-muted">灵静志远</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a> <div>1、JVM中单个字符占用的字节长度跟编码方式有关,而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式;2、对于单个字符:ISO-8859-1单字节编码,GBK双字节编码,UTF-8三字节编码;因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节,而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte</div> </li> <li><a href="/article/881.htm" title="java 求几个月后的日期" target="_blank">java 求几个月后的日期</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/calendar/1.htm">calendar</a><a class="tag" taget="_blank" href="/search/getinstance/1.htm">getinstance</a> <div>Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M</div> </li> <li><a href="/article/1008.htm" title="数据库设计的三大范式(通俗易懂)" target="_blank">数据库设计的三大范式(通俗易懂)</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%A4%8D%E4%B9%A0/1.htm">数据库复习</a> <div>关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式,才能设计出高效率、优雅的数据库,否则可能会设计出错误的数据库. 目前,主要有六种范式:第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式,简称1NF。在第一范式基础上进一步满足一些要求的为第二范式,简称2NF。其余依此类推。</div> </li> <li><a href="/article/1135.htm" title="想学工作流怎么入手" target="_blank">想学工作流怎么入手</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/jbpm/1.htm">jbpm</a> <div>工作流在工作中变得越来越重要,很多朋友想学工作流却不知如何入手。 很多朋友习惯性的这看一点,那了解一点,既不系统,也容易半途而废。好比学武功,最好的办法是有一本武功秘籍。研究明白,则犹如打通任督二脉。 系统学习工作流,很重要的一本书《JBPM工作流开发指南》。 本人苦苦学习两个月,基本上可以解决大部分流程问题。整理一下学习思路,有兴趣的朋友可以参考下。 1  首先要</div> </li> <li><a href="/article/1262.htm" title="Context和SQLiteOpenHelper创建数据库" target="_blank">Context和SQLiteOpenHelper创建数据库</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Context%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">Context创建数据库</a> <div>       一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper     一:SQLiteOpenHelper创建数据库:   1,SQLi</div> </li> <li><a href="/article/1389.htm" title="浅谈group by和distinct" target="_blank">浅谈group by和distinct</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/distinct/1.htm">distinct</a> <div>        group by和distinct只了去重意义一样,但是group by应用范围更广泛些,如分组汇总或者从聚合函数里筛选数据等。         譬如:统计每id数并且只显示数大于3 select id ,count(id) from ta</div> </li> <li><a href="/article/1516.htm" title="vi opertion" target="_blank">vi opertion</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a><a class="tag" taget="_blank" href="/search/opration/1.htm">opration</a><a class="tag" taget="_blank" href="/search/vi/1.htm">vi</a> <div>进入 command mode (命令行模式) 按 esc 键 再按 shift + 冒号 注:以下命令中 带 $ 【在命令行模式下进行】,不带 $ 【在非命令行模式下进行】 一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行 数字</div> </li> <li><a href="/article/1643.htm" title="【Spark十四】深入Spark RDD第三部分RDD基本API" target="_blank">【Spark十四】深入Spark RDD第三部分RDD基本API</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>  对于K/V类型的RDD,如下操作是什么含义?   val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect  reduceByKey在这里的操作,是把</div> </li> <li><a href="/article/1770.htm" title="java类加载机制" target="_blank">java类加载机制</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a> <div>java类加载机制 1.java类加载器的树状结构 引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载,java的类加载器也有类似于继承的关系,引导类是最顶层的加载器,它是所有类的根加载器,它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时,通常会代理给父类加载器,若已经是根加载器了,就自己完成加载。 虚拟机区分一个Cla</div> </li> <li><a href="/article/1897.htm" title="动态添加文本框" target="_blank">动态添加文本框</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">文本框</a> <div>  <script>     var num=1; function AddInput() {      var str="";     str+="<input </div> </li> <li><a href="/article/2024.htm" title="读《研磨设计模式》-代码笔记-单例模式" target="_blank">读《研磨设计模式》-代码笔记-单例模式</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意,getInstance如果在多线程环境中调用,需要加上synchronized,否则存在线程不安全问题 */ class LazySingleton</div> </li> <li><a href="/article/2151.htm" title="iOS应用打包发布常见问题" target="_blank">iOS应用打包发布常见问题</a> <span class="text-muted">chenhbc</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/iOS%E5%8F%91%E5%B8%83/1.htm">iOS发布</a><a class="tag" taget="_blank" href="/search/iOS%E4%B8%8A%E4%BC%A0/1.htm">iOS上传</a><a class="tag" taget="_blank" href="/search/iOS%E6%89%93%E5%8C%85/1.htm">iOS打包</a> <div>这个月公司安排我一个人做iOS客户端开发,由于急着用,我先发布一个版本,由于第一次发布iOS应用,期间出了不少问题,记录于此。   1、使用Application Loader 发布时报错:Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc</div> </li> <li><a href="/article/2278.htm" title="工作流复杂拓扑结构处理新思路" target="_blank">工作流复杂拓扑结构处理新思路</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a><a class="tag" taget="_blank" href="/search/OO/1.htm">OO</a> <div> 我们走的设计路线和国外的产品不太一样,不一样在哪里呢?  国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多,仅仅是在有限的了解程度上面提出这样的看法),从而避免在流程引擎中处理这些复杂的图的问题,而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性,这样一来,在引擎和流程流转控制这一个层面就会遇到很</div> </li> <li><a href="/article/2405.htm" title="oracle 11g新特性Flashback data archive" target="_blank">oracle 11g新特性Flashback data archive</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象,用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象,概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。 </div> </li> <li><a href="/article/2532.htm" title="多叉树:2-3-4树" target="_blank">多叉树:2-3-4树</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E6%A0%91/1.htm">树</a> <div>    平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征:     1、有一个数据项的节点总是有2个子节点(称为2-节点)     2、有两个数据项的节点总是有3个子节点(称为3-节</div> </li> <li><a href="/article/2659.htm" title="C语言学习七动态分配 malloc的使用" target="_blank">C语言学习七动态分配 malloc的使用</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/language/1.htm">language</a><a class="tag" taget="_blank" href="/search/malloc/1.htm">malloc</a> <div>/* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写 本程序没有实际含义,只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节 静态分配 int * p </div> </li> <li><a href="/article/2786.htm" title="Objective-C编码规范[译]" target="_blank">Objective-C编码规范[译]</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/1.htm">代码规范</a> <div>  原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范 译者 : Sam Lau </div> </li> <li><a href="/article/2913.htm" title="0.性能优化-目录" target="_blank">0.性能优化-目录</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>从今天开始笔者陆续发表一些性能测试相关的文章,主要是对自己前段时间学习的总结,由于水平有限,性能测试领域很深,本人理解的也比较浅,欢迎各位大咖批评指正。 主要内容包括: 一、性能测试指标 吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略 生产环境相同 基准测试 预热等 htt</div> </li> <li><a href="/article/3040.htm" title="Java父类取得子类传递的泛型参数Class类型" target="_blank">Java父类取得子类传递的泛型参数Class类型</a> <span class="text-muted">happyqing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E7%B1%BB/1.htm">父类</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B1%BB/1.htm">子类</a><a class="tag" taget="_blank" href="/search/Class/1.htm">Class</a> <div>  import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz =</div> </li> <li><a href="/article/3167.htm" title="跟我学SpringMVC目录汇总贴、PDF下载、源码下载" target="_blank">跟我学SpringMVC目录汇总贴、PDF下载、源码下载</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>  ----广告-------------------------------------------------------------- 网站核心商详页开发 掌握Java技术,掌握并发/异步工具使用,熟悉spring、ibatis框架; 掌握数据库技术,表设计和索引优化,分库分表/读写分离; 了解缓存技术,熟练使用如Redis/Memcached等主流技术; 了解Ngin</div> </li> <li><a href="/article/3294.htm" title="the HTTP rewrite module requires the PCRE library" target="_blank">the HTTP rewrite module requires the PCRE library</a> <span class="text-muted">流浪鱼</span> <a class="tag" taget="_blank" href="/search/rewrite/1.htm">rewrite</a> <div>./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s</div> </li> <li><a href="/article/3421.htm" title="第12章 Ajax(中)" target="_blank">第12章 Ajax(中)</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3548.htm" title="Optimize query with Query Stripping in Web Intelligence" target="_blank">Optimize query with Query Stripping in Web Intelligence</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936</div> </li> <li><a href="/article/3675.htm" title="Java开发者写SQL时常犯的10个错误" target="_blank">Java开发者写SQL时常犯的10个错误</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>1、不用PreparedStatements   有意思的是,在JDBC出现了许多年后的今天,这个错误依然出现在博客、论坛和邮件列表中,即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个:   他们对PreparedStatements不了解   他们认为使用PreparedStatements太慢了   他们认为写Prepar</div> </li> <li><a href="/article/3802.htm" title="世纪互联与结盟有感" target="_blank">世纪互联与结盟有感</a> <span class="text-muted">阿尔萨斯</span> <div> 10月10日,世纪互联与(Foxcon)签约成立合资公司,有感。 全球电子制造业巨头(全球500强企业)与世纪互联共同看好IDC、云计算等业务在中国的增长空间,双方迅速果断出手,在资本层面上达成合作,此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任,另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。 众所周知,精于电子产品制造(世界第一),对于世纪互联而言,能够与结盟</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>