JavaScript编程进阶：js全局函数、BOM、DOM、js操作css样式

2017年12月10日17:56:45JavaScript JavaWeb评论475字数 1732阅读5分46秒阅读模式

内容

1 js全局函数
2 BOM 
3 DOM
4 js操作css样式

Js的全局函数

特点：直接可以在<script></script>之间使用方法不需要对象调用文章源自JAVA秀-https://www.javaxiu.com/390.html

1.parseInt() 将字符串转成number类型   只取整数  截取首字母之前的内容
2.parseFloat() 将字符串转成number类型 取全部包含小数  截取首字母之前的内容
3.isNaN()  判断是不是 不是一个数值 
4.encodeURI() 可以将字符串转化成utf-8编码格式
5.decodeURI() 可以将utf-8编码格式转换成字符串

BOM(浏览器对象模型)

概述

BOM：浏览器对象模型 JS把浏览器划分成了多个对象这些多个对象都可以帮助我们去操作浏览器文章源自JAVA秀-https://www.javaxiu.com/390.html

window 浏览器窗体对象 js提供专门操作浏览器窗口的 location 浏览器地址栏对象 js提供专门操作浏览器地址栏的 history 历史记录对象 js提供专门操作浏览器历史记录的文章源自JAVA秀-https://www.javaxiu.com/390.html

window 浏览器窗体对象API

特点：只要是window的方法和属性，window对象名都可以省略文章源自JAVA秀-https://www.javaxiu.com/390.html

操作提示框的方法：文章源自JAVA秀-https://www.javaxiu.com/390.html

1.alert() 弹出框
2.confirm(参数) 确认取消框
3.prompt(参数)  输入信息框

操作定时器的方法：文章源自JAVA秀-https://www.javaxiu.com/390.html

1.setinterval(函数名, 间隔毫秒数)    定时器  按照周期循环执行
2.setTimeout(函数名, 间隔毫秒数)     定时器  只执行一次
3.clearInterval(定时器)           清除setInterval方法定时器效果
4.clearTimeout(计时器)            清除setTimeout方法定时器效果

location浏览器地址栏对象API

特点：操作浏览器的地址栏文章源自JAVA秀-https://www.javaxiu.com/390.html

操作浏览器地址栏的方法：文章源自JAVA秀-https://www.javaxiu.com/390.html

1.href属性  
    不设值：获取当前页面地址栏地址
    设值：替换当前页面的地址栏地址
2.reload() 刷新当前页面

history 历史记录对象

特点：操作已经形成的历史记录文章源自JAVA秀-https://www.javaxiu.com/390.html

操作历史记录的方法：文章源自JAVA秀-https://www.javaxiu.com/390.html

1.forward() 类似于浏览器上前进按钮
2.back() 类似于浏览器上后退按钮
3.go()  正数或负数，go(1)相当于forward()，go(-1)相当于back()

DOM(文档对象模型)

概述

JavaScript编程进阶：js全局函数、BOM、DOM、js操作css样式文章源自JAVA秀-https://www.javaxiu.com/390.html

DOM文档对象模型js把整个html文档划分成了多个对象，这些多个对象都可以帮我们操作html元素标签文章源自JAVA秀-https://www.javaxiu.com/390.html

document文档对象：代表的是整个html文档页面可以通过这个对象获取html页面上的任何元素标签文章源自JAVA秀-https://www.javaxiu.com/390.html

为什么能够代表整个html文档：文章源自JAVA秀-https://www.javaxiu.com/390.html

一个html文件被浏览器加载的时候，会在内存中形成一个dom树，这个dom树就是有多个标签层级组成的，而这整个dom树就是document对象，所以我们可以通过document对象访问所有的 HTML 标签元素（节点）文章源自JAVA秀-https://www.javaxiu.com/390.html

获取元素标签(节点)的方法

1.document.getElementById("id名")             通过id属性获取       获取的是唯一的元素
2.document.getElementsByName("name名")        通过name属性获取     获取的是一组标签 返回的是数组
3.document.getElementsByTagName ("标签名")    通过标签名获取        获取的是一组标签 返回的是数组
4.document.getElementsByClassName("class名")  通过class属性获取    获取的是一组标签 返回的是数组

获取/设置元素标签(节点)内容的方法

元素标签.innerHTML
不设值：获取标签体内容 
设值：设置标签体内容
元素标签.innerText
不设置：获取标签文本内容    
设值：设置标签文本内容

结合学习的api做一个小DEMO：根据条件获取元素并设置内容（绑定事件的第二种方式）文章源自JAVA秀-https://www.javaxiu.com/390.html

案例练习

案例1：会动的时钟文章源自JAVA秀-https://www.javaxiu.com/390.html

案例2：5秒页面跳转文章源自JAVA秀-https://www.javaxiu.com/390.html

案例3：全选全不选文章源自JAVA秀-https://www.javaxiu.com/390.html

案例4：省市级联文章源自JAVA秀-https://www.javaxiu.com/390.html

Js对CSS样式进行操作

需求：以前使用css样式美化页面的时候都是写死在html中的，那能不能使用js动态的去设置标签的样式第一种：元素.style.样式名称=值；第二种：需要添加class属性名自己去类选择器中设置样式元素.className=类选择器名文章源自JAVA秀-https://www.javaxiu.com/390.html