JavaScript
来源：互联网 发布：linux find size 编辑：程序博客网 时间：2024/06/18 07:42
● js 简介 ○ JavaScript 是可插入 HTML 页面的编程代码。 ○ JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 ● Tip： ○ 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。 ● 位置： ○ HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 ○ Tip: ■ 有的时候要注意位置 比如如果 放在头部 代码有操作 body 的元素。但是body 还没有加载 就会出错 ■ <p id="demo" >My First Paragraph.</p> <script> document.getElementById("demo").innerHTML="My First JavaScript"; </script>这个就是为了避免 p标签没有加载的问题 ● 版本跟新 ○ 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。 ● 理解 ○ doucument.write（）就是向输出流中写东西 ● 外部引用脚本 ○ <script src="myScript.js"></script> ○ Tip ■ 外部脚本不能包含 <script> 标签。 ● 访问元素对象 ○ 如需从 JavaScript 访问某个 HTML 元素，您可以使用document.getElementById(id) 方法 ○ document.getElementById("demo").innerHTML="我的第一段 JavaScript"; ○ Tip: ■ innerHTML 是跟换的标签的类容属性 一般是<>这里</> 或者<content="这里"></>(后面的不一定管用 自己想的) ● 输出 ○ 请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖： ○ 在文档加载的时候 使用document.write()，是向输出流中写如数据。 ○ DOM(document 对象) ■ 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。 ■ html 是不可显示的 浏览器能识别的是与html 对应的对象，所以浏览器在拿到html 的时候进行加载的时候，就会将html 从上到下的遍历生成对象树。然后显示在浏览器上。 ■ 而且是以 流的形式给显示程序的。也就是说加载完毕以后将流中的数据给显示。显示读取流然后呈现。 ■ 而这时如果文件中有js 代码，可以获取浏览器的document对象。（这就是插件）然后对对象进行修改添加。doucument 是读一个对象然后在document 对象中进行赋值修改，所以在js 如果用document 找其他的还没有加载的就会找不到。 ● 总体来说 就边遍历边对document 对象进行添加。（document对象是提前就有的只是没有东西，只有遍历以后一个个加上去的所以我们才可以在 js 中使用document 对象） ■ document等到都读取以后会将这个对象树生成流 给显示。而 当读到 document.write();的时候会 找到给显示的流对象在对应的位置加上对应的流。 ■ 所以当加载完毕以后，document 的流用完以后就会关闭，所以当在使用 document.write（）的时候就会新创建流来接收 在读取流的时候只有你刚刚写的数据了。 ● 语句 ○ avaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 ○ JavaScript 对大小写是敏感的 ○ 您可以在文本字符串中使用反斜杠对代码行进行换行。 ○ ：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。 ● 变量 ○ 和C#中的Dynamical 是一样的。是弱类型。可以不声明直接使用，可以改变类型（是重新开辟一个空间，只要不是重新赋值就会保持不变。包括重新声明 声明可有可无 就是给程序员看的） ● 类型 ○ var cars=["Audi","BMW","Volvo"]; ○ var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo"; ○ var cars=new Array("Audi","BMW","Volvo"); ○ var z=123e-5; ● 对象 ○ JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。 ○ person=new Object();person.firstname="Bill"; ○ person={firstname:"Bill",lastname:"gates",age:56,eyecolor:"blue"} ○ function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;} ● 方法 ○ function functionname(){这里是要执行的代码} ● 改变 HTML 属性 ○ document.getElementById(id).attribute=new value ● 改变 HTML 样式 ○ document.getElementById(id).style.property=new style ● 事件 ○ <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> ○ document.getElementById("myBtn").onclick=function(){displayDate()}; ○ onload 和 onunload 事件会在用户进入或离开页面时被触发。（document对象的方法） ■ onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。 ■ onload 和 onunload 事件可用于处理 cookie。 ○ onchange 事件常结合对输入字段的验证来使用。 ○ onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 ○ onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。 ● 节点 ○ var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node);var element=document.getElementById("div1"); element.appendChild(para); ■ creatElement ->创建节点 ■ appendChild-> 添加节点 ○ 删除节点 ■ parent.removeChild(child); ■ 删除自身 ■ var child=document.getElementById("p1");child.parentNode.removeChild(child); ● 循环 ○ for...in 循环中的代码块将针对每个属性执行一次。 ● 对象类型 ○ JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数 ○ 如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。 ■ Tip ● 绝不要在数字前面写零，除非您需要进行八进制转换。 ● 时间 ○ function startTime(){ var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m) s=checkTime(s) document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',500)} function checkTime(i){if (i<10) {i="0" + i} return i} ● 逻辑 ○ 默认 0 null 空字符串 false NaN 都是false ● Math 对象 ○ 对象的 round 方法对一个数进行四舍五入。 ○ (Math.floor(Math.random()*11)返回一个介于 0 和 10 之间的随机数 ● 正则表达式 ○ 通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象 ○ test() 方法检索字符串中的指定值。返回值是 true 或 false。 ○ exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。 ○ compile() 方法用于改变 RegExp。compile() 既可以改变检索模式，也可以添加或删除第二个参数。 ● window 对象 ○ Tip ■ 只要是window 对象的属性和方法（对象中只有属性和方法）就可以省略直接写 ○ 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 ○ 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 ○ window 就是整个 页面（浏览器） ■ 真个页面的布局 所以要显示的东西都要加到window 中 ■ document 也是 window 对象的属性之一： ○ 浏览器的尺寸 ■ var w=window.innerWidth var h=window.innerHeight ■ window.open() - 打开新窗口 ■ window.close() - 关闭当前窗口 ■ window.moveTo() - 移动当前窗口 ■ window.resizeTo() - 调整当前窗口的尺寸 ○ window.screen 对象包含有关用户屏幕的信息。 ■ screen.availWidth - 可用的屏幕宽度 ■ screen.availHeight - 可用的屏幕高度 ○ window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。 ■ location.hostname 返回 web 主机的域名 ■ location.pathname 返回当前页面的路径和文件名 ■ location.port 返回 web 主机的端口 （80 或 443） ■ location.protocol 返回所使用的 web 协议（http:// 或 https://） ■ location.href 属性返回当前页面的 URL。 ■ location.pathname 属性返回 URL 的路径名。 ■ location.assign() 方法加载新的文档。(重新加载) ○ window.history 对象包含浏览器的历史。 ■ history.back() - 与在浏览器点击后退按钮相同 ■ history.forward() - 与在浏览器中点击按钮向前相同 ○ window.navigator 对象包含有关访问者浏览器的信息 ■ navigator.cookieEnabled 是否允许使用cookie ■ navigator.platform 系统 ■ navigator.systemLanguage 系统语言 ■ navigator.appName 浏览器名字 ■ Tip ● 由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。 ○ 警告框 ■ 经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。 ■ alert("文本") ○ 确认框 ■ 用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。 ■ var r=confirm("Press a button!"); if (r==true){alert("You pressed OK!");} ○ 提示框 ■ 经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。 ■ var name=prompt("请输入您的名字","Bill Gates") if(name!=null && name!=""){document.write("你好！" + name + " 今天过得怎么样？") } ○ JavaScript 计时事件 ■ var t=setTimeout("javascript方法",毫秒) 隔多长时间调用方法。（循环的话就可以调用自身） ■ clearTimeout(t);用于取消上面的方法。 ○ cookie ■ 创建和存储 ■ var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) ● JavaScript 框架（库） ○ JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。为了应对这些调整，许多的 JavaScript (helper) 库应运而生。这些 JavaScript 库常被称为 JavaScript 框架。在本教程中，我们将了解到一些广受欢迎的 JavaScript 框架： ■ jQuery ■ Prototype ■ MooTools ● jq ○ document.onload=alert("wod"); 在可以写代码的地方 可以直接赋值 因为这里的“”表示字符串了。 在标签中 属性和值都是分开的。值都写在“”中。 ○ jQuery 允许您通过 CSS 选择器来选取元素。 ○ jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法，与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法 ○ $(document).ready(myFunction); 和 document.onload=myFunction() 是等价的 但是并不是 DOM 的方法了。 ■ $("#h01").attr("style","color:red").html("Hello jQuery") 这个也是 ■ 改变属性使用attr（“名字”，“值”） 等价于 元素对象.属性名= ■ html 就是 InnerHTML ○ jq 就是对 js 的封装底层调用还是 js 的代码只是换了方法名 等等。阅读全文
2 0
- Javascript
- JavaScript
- javascript
- javascript
- javascript
- javascript
- javascript
- JavaScript
- javascript
- JavaScript
- Javascript
- javascript
- javascript
- JavaScript
- javascript
- javascript
- JavaScript
- javascript
- Spring的AOP：
- （淘宝无限适配）手机端rem布局详解
- android动态链接库（so文件）
- 电脑卡慢原因之磁盘占用100%
- String类
- JavaScript
- Xamarin.Fomrs 用户界面——控件——主题——自定义主题
- PAT-Deduplication on a Linked List
- linux中的DNS解析服务
- 【Java学习笔记】28：再谈四种内部类
- Java中的ForEach的用法
- hdu 5884二分+优先队列
- A
- 智能指针
