JavaScript达标点

一.什么是JavaSrcipt ？

	JavaScript简称为js，是一门独立的编程语言，完成页面动态效果的技术。

	以下几点注意：

		1、  js是使用在HTML中的技术
		2、  javaScript 和 java 没关系 
		3、  js是一门解释性的编程语言
			编译性有 C和  C++    :   不能跨平台，运行效率高
			解释性有 js   等等   ：解释器解释运行  可以跨平台  运行效率低
			先编译再解释有java ： 可以跨平台运行效率高
		4、  js的解释器是浏览器
				浏览器分类
    					  IE内核：IE浏览器
     					 WebKit内核：Google  支持最标准的ECMAScript（js）

二.事件编程

a)      Js编程方式：事件驱动编程

	事件：小红殴打了小明一顿小明是鼻青脸肿，痛不欲生。他俩被警察叔叔带走了
	事件三要素：
1、  事件源头：发生事件的对象
2、  事件属性：性质  动词    
3、  事件监听：发生事件后进行的处理内容  
b)      JS事件编程的三要素
                i.   事件源头：HTML的标签
               ii.   事件属性：发生事件的性质 鼠标单击  鼠标双击  键盘按下、弹起
             iii.  事件监听：发生对应事件后进行的处理内容   使用function

c)       例：点击按钮，弹框提示 一个“别动我”
                i. 事件源头：按钮标签
               ii.  事件属性：鼠标单击
             iii. 事件监听：弹框提示“别动我”  使用function

d)      常用的事件监听属性

          i.   所有标签可用

			1.  onclick 鼠标的单击事件

			2.  ondblclick 鼠标的双击事件

			3.  onmouseover 鼠标移入事件

			4.  onmouseout 鼠标移出事件

         ii.  body 

			onload  在页面加载完成之后执行

        iii. form表单相关

			1. onsubmit  form表单   提交表单时触发

			2.  onblur  丢失焦点 

			3. onfocus  获得焦点 

			4. onchange  针对于下拉列表  修改值

       iv.  键盘

			onkeydown 键盘按键按下

			onkeyup   键盘按键弹起

三.事件冒泡

描述：页面元素发生嵌套时，内部和外部元素定义了相同的事件属性。

触发内部事件运行，同时也会触发外部事件运行

     解决：浏览器存在差异，根据浏览器内核的不同，有不同的阻止事件冒泡的方法

                       IE: event.cancelBubble=true; //阻止事件冒泡

            	  webKit：event.stopPropagation();//阻止事件冒泡 

四.DOM

简介：DOM全称为Document Object  Model,文档对象模型，该模型将整个页面以及页面中标签看作是一个对应的对象节点 ， 所有对象以一颗树状结构存储。方便后续对标签的操作。

（1）获取节点对象(HTML标签对象)

（2） 修改标签的属性内容
			标签对象.属性名         //获取标签的属性值
			标签对象.属性名 = “值”   //修改标签的属性值
          			    注意：标签中的属性不能修改 id   class

（3） 获取标签的文本内容
                i.     标签对象.InnerText 获取内部文本  只获取内部的文本信息
						标签对象.InnerText = “值” 修改标签内部文本替换内部所有的内容
               ii.      标签对象.innerHTML  获取标签内部文本  包括内部嵌套的标签内容
						标签对象.InnerHTML = “值” 修改标签内部文本 替换内部所有的内容
（4） 标签对象的其他属性 （目的：灵活获取标签对象）
                i.   标签对象.parentNode 获取标签对象的父节点
               ii.   标签对象.childNodes  获取标签对象的所有子节点
             iii.    标签对象.firstChild 获取标签对象的第一个子节点
             iv.     标签对象.lastChild 获取标签对象的最后一个子节点
               v.    标签对象.nextSibling获取标签对象的下一个兄弟节
             vi.     标签对象.previousSibling获取标签对象的前一个兄弟节点

				注意：标签内部的子元素之间  换行也算作一个子元素

（5） 具体的页面结构操作

                i.  创建

					1、  创建文本节点对象：document.createTextNode(“文本信息”)

					2、  创建标签节点对象：document.createElement(“标签名”)

					3、  将节点添加到父节点上父节点对象.appendChild(子节点对象);

               ii.  删除

					父节点对象.removeChild(子节点对象)

（6）  和下拉列表相关

                i.  下拉列表对象.options  ：获取下拉列表中所有的option选项  返回数组

               ii.  下拉列表对象.selectedIndex ：获取选中的option的下标

             iii.  下拉列表对.value  ：  获取的是选中的option的value属性值

五.BOM

	概念：Broswer  Object   Model  浏览器对象模型

  （1）  常用方法

                i.  window.alert(“提示内容”)

               ii. window.confirm(“提示内容”)  返回值确认与否操作 确认 true  取消  false

             iii.   window.prompt(“提示内容”) 可输入提示框  返回值就是你输入的内容

             iv.   定时任务  只执行一次（见图1）
		         定时任务  循环执行  ，每隔一定时间执行一次（见图二）

图1：

图2：