js 深入

* js语法* js的动态函数和匿名函数* js动态函数Functionnew Function();* 匿名函数：没有名称的函数，起个名称var add = function(){};* js中全局变量和局部变量* 全部变量：定义标签中的变量，在页面的任意位置上都能拿到。* 局部变量：定义在方法内部的变量* js的对象和API* String对象* 属性：length长度* 方法：* 和HTML相关方法* bold()粗体* fontcolor()字体颜色* sup()上标* sub()下标* 和java中String类似的方法* charAt()返回指定位置的字符* indexof()返回字符的位置* substring(start,stop)截取字符串* substr(start,length)截取字符串* Array数组* 声明数组* var arr = [22];* var arr = new Array(4或者"abc");* 方法：* concat()链接数组或者元素* pop()删除最后一个元素，返回* push()向末尾添加一个元素，返回长度。* sort()排序* Date对象* var date = new Date();当前时间* 方法：* toLocaleString()显示当地日期格式* getFullYear()获取年份* getMonth()获取月份(0-11)+1* getDate()几号* getDay()星期几* getTime()毫秒值* setTime()根据毫秒值设置时间* Date.parse();可以字符串，返回是毫秒值* Math数学* ceil()上舍入* floor()下舍入* round()四舍五入* random()随机数* RegExp对象* new RegExp("")* var reg = /^表达式$/;（记住）* reg.test(string);（记住）如果匹配返回true，如果匹配不成功返回false。* 全局函数* eval()解析字符串，执行js的代码。* isNaN()判断是否是非数字值* parseInt()* BOM浏览器对象模型* winodw窗口对象* alert()提示框* confirm()询问框* setInterval("run()",3000)每隔3秒执行run方法，返回唯一的id值* setTimeout("run()",3000);3秒后执行run方法，返回唯一的id值* 清除定时器* clearInterval(id)* clearTimeout(id)* open("","","")弹出新的窗口* close()关闭窗口* navigator和浏览器版本相关* 属性* history和历史相关* back()上一页* forward()下一页* go(1或者-1)* location和地址相关* href=""获取和设置链接===============================================================================================================================* DOM文档对象模型* DocumentObjectModel* 文档：标记型文档（HTML/XML）* 对象：封装属性和行为（方法）* 模型：共性特征的体现* DOM解析HTML* 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。文本* DOM想要操作标记型文档先解析。（解析器）* DOM解析HTML（浏览器就可以HTML）* 浏览器DOM解析HTML？* DOM的三个级别：* DHTML不是一种编程语言。* html：封装数据。展示给用户的数据* css：设置样式（显示效果）* dom：操作HTML（解析HTML）* js：提供逻辑（判断语句，循环语句）* Document：代表整个文档。* 方法：getElementById("id的值");通过元素的id的属性获取元素（标签）对象。getElementsByName("name属性值");通过名称获取元素对象的集合（返回数组）getElementsByTagName("标签名称");通过标签名称获取元素对象的集合（返回数组）* write("文本的内容（html的标签）")把文本内容写到浏览器上。* createElement("元素名称");创建元素对象* createTextNode("文本内容")创建文本对象* appendChild("子节点")添加子节点* Element对象* 获取元素对象* getAttribute("属性名称");获取属性的值* setAttribute("属性名称","属性的值");设置或者修改属性的值* removeAttribute("属性名称");删除属性* 获取元素下的所有子节点（*****）* ul.getElementsByTagName();* Node：节点对象* nodeName：节点名称* nodeType：节点类型* nodeValue：节点的值* parentNode获取父节点（永远是一个元素节点）IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFoxfirstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点

北京

* 如果通过ul获取北京的子节点，使用是ul.firstElementChild;获取北京的子节点（IE9-11 Chrome FireFox）* 但是如果IE6-8，需要使用firstChild;文本内容* 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）* 方法* hasChildNodes()检查是否包含子节点* hasAttributes()检查是否包含属性* appendChild(node)父节点调用，在末尾添加子节点* insertBefore(new,old)父节点调用，在指定节点之前添加子节点* replaceChild(new,old)父节点调用，替换节点* removeChild(node)父节点调用,删除节点* cloneNode(boolean)不是父节点调用,复制节点* boolean：如果是true，复制子节点：如果是false，不复制子节点，默认是false* innerHTML：获取和设置文本内容。* innerHTML属性：* 获取文本内容* 设置文本内容* 事件：onclick点击事件onload加载事件onfocus获取焦点事件onblur失去焦点事件* 全选/全不选/反选的练习* 指定默认值：checked只要出现在,对号就勾上了。* 鼠标移动的事件onmousemoveonmouseoutonmouseover* 鼠标点击事件（*****）onclick单击ondblclick双击* 加载和卸载* onload（*****）加载* onunload卸载* 获取焦点和失去焦点（*****）* onfocus获取焦点* onblur失去焦点* 键盘* onkeyup按下抬起* 改变事件（*****）* onchange* 控制表单的提交（*****）onsubmit