● 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 的代码只是换了方法名 等等。
JavaScript
最新推荐文章于 2024-09-16 08:47:17 发布