JavaScript
JavaScript
js简介
- js是基于对象和事件驱动语言(脚本)
- 基于对象,提供了很多对象,可以直接使用
- 事件驱动,动作触发时,要执行的功能,可以理解为“监听器”
- js特性
- 交互性,数据信息的交互
- 安全性,js本身是不能访问客户端本地磁盘的
- 跨平台,通过浏览器实现跨平台
JavaScript结构
- ECMAScript
- ECMA:欧洲计算机协会
- script
- BOM
- browser object model
- 浏览器对象模型
- DOM
- document object model
- 文档对象模型
js的使用
- JavaScript与HTML结合使用
- 使用方式
- 使用script标签
- 导入script文件
- 如果在script标签中导入js文件,就不能在此标签中写js代码
- js的原始类型
- string
- 字符串
- var str = "hello"
- number
- 数值
- var shu = 10
- var xiaoshu = 3.14
- boolean
- 布尔
- var bool = true
- null
- 作用在对象身上
- var date = new Date()
- undifined
- 未知的数值
- 在js中,没有数据类型匹配,在js中定义变量或对象时,统一使用var
- typeof工具方法,查看当前变量是什么类型的
js语句
- if
- switch
- for
- while
- do...while
js运算符
- 大部分和Java一样 ~(-……-)||~
- 与Java不同的地方
- 整数区别:Java整数有取整现象,但是js中不存在(js没有数据类型)
- 字符串区别:在Java中使用字符串‘+’操作,字符串连接,js一样。但是在使用‘-’运算符时,Java会报错,js:NaN(表示不是一个数字)
- 布尔区别:在js中true可以理解成一切非零值,false理解成零值,但是在Java中不可以,Java是强类型语言,类型不同不能比较
- ‘==’和‘===’的区别,在js中‘===’需要判断类型是否相同,类型相同后继续比较数值是否相等,而Java中,根本就没有三个等号啊,秋梨膏
js中的数组
- Java中的数组 int[] arr = new int[10]
- js中的数组 var arr=[10,"hello",3.14] var arr = new Array(3,4,5)
- 常用方法
- join(String):将数组中的每个元素与指定参数相连接,形成一个字符串
- push():将指定参数数据添加到数组的尾部
- pop():将数组的最后尾部数据弹出
- reverse():将数组的数据翻转
js中的函数
- 在定义函数的时候需要使用关键字
- function函数名称(参数列表){函数体;返回值;}
- 参数列表中的每个形参是不需要指定var
js中的String对象
- js中的字符串与Java中的String类相似
- bold:设置字符串加粗
- fontcolor:设置字符串颜色
- link:设置字符串链接
- forsize:设置字符串大小
- sub:设置字符串下角标
- sup:设置字符串上角标
- 等等
- 字符串常用操作方法
- 大部分和Java相差不大
- charAt():查找字符
- indexOf():查找索引
- split():截取
- length():长度
- concat():连接
- replace():替换
时间
- Date表示时间
- 也需要new Date()
- toLocaleString()转换成本地时间
- getFullYear():获取年
- getMonth()+1:获取月份 -- 默认是0-11
- getDate():获取日
- getHours():获取时
- getMinutes():获取分
- getSeconds():获取秒
- getDay():获取星期 0-6(0指星期日)
- getTime():获取时间戳
js中的全局函数
- eval(String):可以将String参数以js的方式进行解析
- encodeURL(String):对字符串进行编码
- decodeURL(String):对编码进行转换成字符串
- isNaN():判断是否为一个数字
- parelnt()类型转换
js中的BOM
- 什么是BOM
- browser object model 浏览器对象模型
- 常用操作
- navigator:获取客户端浏览器相关信息
- screen:获取客户端用于显示的信息,常用的是获取屏幕的分辨率
- location:控制浏览器的URL地址栏,可以使用href属性设置页面动态地址
- history:访问浏览器的历史记录(只限于当次使用'后退、前进、刷新')
- 前置history.back();history.go(-1);(可以理解为前进), 后置history.forward();history.go(1);(可以理解为后退)
- window
- 由与window对象是js核心对象,在访问window对象下的方法时,不需要window调用
- confirm():确认框 -- 返回值Boolean参数String
- alert():弹窗
- var url = prompt("提示信息","默认值") -- 返回值是获取输入框中的数据
- open( URL , "保留参数,一般给空" , "(宽,高)" ,"Boolean 也可不给")
- close():关闭窗口
- opener.close():关闭关联/弹出窗口
- close方法兼容性比较差
- 定时器
- setInterval(Striing,int,第三个用的少,可以不写 ) -- 循环定时器
- setTime -- 只执行一次
js中的DOM
- js中的DOM对象主要针对于页面文档
- 当页面被加载时,浏览器会将页面中的标签,生成节点对象,多个嵌套标签构成"文档树"(DOM树)
- 整个文档对象称为:document
- 元素对象:Element(又称为"标签对象")
- 属性对象(id、class等等)
- 文本对象
- 节点对象:Node -- 是所有对象的父类
- 常用方法
- wrile() -- 向页面输出数据,在输出数据时,可以输出常量/变量的数据,同时也可以在数据中体现出html标签
- getElement(标签的id) -- 通过标签id获取标签对象
- getElementsByName(标签的name属性) -- 根据标签的名称获取标签对象 返回值:标签对象数组
- getElementsByTagName(标签名称) -- 根据标签的名称获取标签对象 返回值:标签对象数组
- 节点操作
- 可以使用DOM对象来对整个文档进行操作
- 创建节点对象
- document.createElement("标签名") -- 属性对象
- document.createTextNode("数据") -- 文本对象
- 将对象添加
- 父节点.appendChild(新节点)
- 操作对象常用方法
- createElement(标签名称) -- 创建标签对象节点
- createTextNode(文本数据) -- 创建文本对象节点
- 元素对象
- DOM树中,每一个标签所对应的节点对象被称为"元素对象"
- 常用方法
- getAttribute("属性对象名称" -- 获得属性对象的值)
- setAttribute("属性对象名称","值") -- 可以根据属性对象名修改其值
- removeAttribute("属性对象名称" -- 根据属性对象名称删除属性对象)
- 获取子标签
- childNodes() -- 获取整个DOM树下所有的子标签 可以使用此方法获取子节点,但是兼容性不是很好
- 可以使用getElementsByTagName()方法来实现此功能
- Node操作
- 在操作节点时不知道是属于哪种类型的节点时,可以使用Node节点来进行存储
- Node对象结构
- nodeName
- nodeType
- nodeValue
- 三种情况
- 标签节点
- nodeType -- 对应值:1(代表标签对象)
- nodeName -- 标签名称(全大写形式存储)
- nodeValue -- null
- 属性节点
- nodeType -- 对应值:2(代表属性对象)
- nodeName -- 属性名称
- nodeValue -- 属性值
- 文本节点
- nodeType -- 对应值:3(代表文本对象)
- nodeName -- #text
- nodeValue --文本内容
- Node节点操作
- 在DOM树结构中,可以通过制定的接地那对象获取相应结构
- 父节点 :parentNode()
- 子节点:firstChild()、lastChild()
- 兄弟节点、同级节点
- 下一个节点:nextSibing
- 上一个节点:previousSibing
- 注意:在ul和li结构中不能加载文本,所以在两个节点中中间提供一个文本节点
- 添加一个子节点:appendChild()
- 插入节点:insertBefore(newNode,oldNode)
- 在指定节点之前,插入一个新节点,参数一新节点,参数二现有节点
- 移除指定节点:remove()
- 移除指定的子节点,移除节点时,不能自己移除自己的节点
- 替换节点:replaceChild(newNode,oldNode)
- 替换指定的节点,参数一新节点,参数二要被替换的节点
- 克隆(复制节点)节点:cloneNode(Boolean)
- 克隆、复制一个节点,参数为Boolean,true表示克隆
- var clone_ul = ul.cloneNode(true);
- getAttributeNode() -- 获取属性节点方法
- 操作文本的方法
- innerHTML
- 可以解析HTML
- innerText
- 可以解析不能解析HTML