JavaScript

  ● 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 中的所有数字都存储为根为 1064 位(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)返回一个介于 010 之间的随机数
  ● 正则表达式
      ○ 通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象
      ○ test() 方法检索字符串中的指定值。返回值是 truefalse。
      ○ 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 主机的端口 (80443)
          ■ 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 的代码只是换了方法名 等等。
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值