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

  • A+
所属分类:JavaScript JavaWeb

内容

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

Js的全局函数

特点:直接可以在<script></script>之间使用方法 不需要对象调用

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

BOM(浏览器对象模型)

概述

BOM:浏览器对象模型 JS把浏览器划分成了多个对象 这些多个对象都可以帮助我们去操作浏览器

window 浏览器窗体对象 js提供专门操作浏览器窗口的 location 浏览器地址栏对象 js提供专门操作浏览器地址栏的 history 历史记录对象 js提供专门操作浏览器历史记录的

window 浏览器窗体对象API

特点:只要是window的方法和属性,window对象名都可以省略

操作提示框的方法:

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

操作定时器的方法:

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

location浏览器地址栏对象API

特点:操作浏览器的地址栏

操作浏览器地址栏的方法:

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

history 历史记录对象

特点:操作已经形成的历史记录

操作历史记录的方法:

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

DOM(文档对象模型)

概述

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

DOM文档对象模型js把整个html文档划分成了多个对象,这些多个对象都可以帮我们操作html元素标签

document文档对象:代表的是整个html文档页面 可以通过这个对象获取html页面上的任何元素标签

为什么能够代表整个html文档:

一个html文件被浏览器加载的时候,会在内存中形成一个dom树,这个dom树就是有多个标签层级组成的,而这整个dom树就是document对象,所以我们可以通过document对象访问所有的 HTML 标签元素(节点)

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

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

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

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

结合学习的api做一个小DEMO:根据条件获取元素并设置内容(绑定事件的第二种方式)

案例练习

案例1:会动的时钟

案例2:5秒页面跳转

案例3:全选全不选

案例4:省市级联

Js对CSS样式进行操作

需求:以前使用css样式美化页面的时候都是写死在html中的,那能不能使用js动态的去设置标签的样式 第一种:元素.style.样式名称=值; 第二种:需要添加class属性名 自己去类选择器中设置样式 元素.className=类选择器名

案例练习

案例5:隔行换色并且鼠标移动换色 案例6:校验表单(正则表达式 表单校验)

  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
C语言速查手册
Java图书管理系统
一个Java基础入门的教程视频
AnyNode:最便宜的国外服务器

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: