- 概述
- 基于对象(与Java的面向对象不同)和事件驱动的语言,应用于客户端(浏览器)
- 交互性、安全性(不能访问本地磁盘)、跨平台性
- 弱类型
- 3个组成部分
- ECMAScript
- ECMA:欧洲计算机协会
- BOM
- 浏览器对象模型
- DOM
- 文档对象模型
- ECMAScript
- Js和html的结合方式
- 使用标签<script type="text/javascript">Js代码</script>
- 引入文件<script type="text/javascript" src="1.js"></script>
- 标签里就不要写Js代码了,不会执行
- Js的注释
- 单行://单行注释
- 多行:/*多行注释*/
- Js的数据类型
- 定义变量:
- var 变量名=值;
- string
- number
- 数字类型
- 不区分整数和小数
- boolean
- null
- 对象引用为空
- undifined
- 变量未赋值
- typeof(变量名)
- 可以查看变量的类型
- 定义变量:
- 语句
- if
- 和java中一致
- switch同Java一样,只是Js中支持所有的数据类型
- while(){}同Java一样
- for循环同Java一样,只是变量定义时要使用var
- document.write("xx");
- 可以写HTML代码:document.write("<br/>")
- 若需要写标签内的属性的话,需要使用单引号
- 可以写HTML代码:document.write("<br/>")
- if
- 运算符
- 字符串操作
- "12"+1 结果是"121"
- "12"-1 结果是11
- boolean类型的运算
- true在运算时相当于1,false相当于0
- ===和==的区别
- ===
- 比较值和类型
- ==
- 只比较值
- ===
- 字符串操作
- 数组
- 特点
- 角标从0开始
- 可以从存放不同的数据类型
- 长度是可变的
- 定义
- var a=[1,3,4];
- var a=new Array(5);
- 定义一个长度为5的数组
- var a=new Array(2,5,6);
- 直接将数组中的元素一起给出
- 数组长度属性
- arr.length
- 方法
- concat()
- 连接2个数组
- join()
- 将数组元素放入字符串,按照指定的字符分隔元素
- push()
- 向数组末尾添加元素,并且会返回新的数组的长度
- 参数可以是新的元素,也可以是另一个数组(这种情况会将这个数组当作一个整体添加)
- pop()
- 删除并返回最后一个元素
- reverse()
- concat()
- 特点
- 方法
- 创建方法:
- 一:function 方法名(参数列表){方法体}
- 返回值可有可无
- 参数列表中不写var,直接写变量名
- 二:var f =function (参数列表){方法体}
- 三:使用js的内置对象Function
- var a =new Function("参数列表","方法体");
- 一:function 方法名(参数列表){方法体}
- js中不存在重载
- 会调用最后一个
- 函数会将参数传给arguments这个数组中!所以可以通过操作arguments的每一个元素类模拟实现重载。
- 当传入的参数个数超过了函数定义的时候定义的参数数量,这些超出的参数一样会被传入arguments这个数组中。就算定义的时候没有写参数列表,也是如此
- 创建方法:
- 局部变量和全局变量
- <script></script>标签内定义的变量是全局变量,在别的<script>标签中也可以访问
- 方法内部定义的,只能在方法内部访问
- <script>标签的位置
- 建议放在<body></body>标签的后面,若放在<body>标签之前,是无法获取到<body>中某些标签中的属性值的
- String对象
- 定义
- var str="abc";
- 属性
- length
- 方法
- str.bold()\fontcolor()\fontsize()等
- str.link(url) 将字符串显示为超链接
- sup()\sub()
- 与Java相似的一些方法
- concat()方法,将2个字符串进行连接
- charAt(index)
- indexOf()
- split()
- replace()
- substr()
- substring()
- 定义
- Date对象
- var date=new Date();
- 方法
- toLocaleString() //Java中也有这个方法
- 以本地日期格式显示
- getFullYear()
- 得到年字段
- getMonth()
- 返回0-11月份
- getDay()
- 返回一周中的某一天,0-6,星期天是0
- getDate()
- 返回月中的某一天,1-31
- getHours()\getMinutes()\getSeconds()
- getTime()
- 返回19700101至今的毫秒数
- toLocaleString() //Java中也有这个方法
- Math对象
- 都是静态方法,使用类名调用:Math.sin()
- ceil()\floor()\round()
- 全局函数
- Js中不属于任意一个类的一些方法,这些方法不需要对象去调用,直接使用函数名调用
- eval(str)
- str表示一行Js代码,这个方法可以执行str这行代码
- encodeURI()\decodeURI()
- 对字符进行编码、解码
- isNaN()
- 判断是否不是数字,是数字的话,则返回false
- parseInt()
- 将字符串转成数字
- BOM
- browser object model浏览器对象模型
- navigator对象
- 用于获取客户机浏览器信息
- 属性
- navigator.appName\\浏览器名称
- screen对象
- 用于获取屏幕信息
- 属性
- screen.width
- screen.height
- location对象
- location.href
- 获取、设置URL地址
- location.href="1.html";
- 案例:定义一个按钮,当点击时,调转是指定页面
- <input type="button" value="跳转至。。" οnclick="href();"/> \\onclick属性用于定义鼠标点击事件,这里这个事件会触发href()函数的调用
- function href(){ location.href="hello.html";} \\触发事件会跳转至hello.html
- location.href
- history对象
- 请求的URL的历史
- history.back()
- history.forward()
- window对象
- 顶层对象,其中的方法可以直接调用,例如alert()
- navigator\screen等都是它的子对象
- 属性
- opener
- 获取创建了本窗口的上一个窗口的引用
- opener
- 方法
- alert()
- confirm(参数)
- 提供一个确认\取消的对话框,用户点击确认\取消后会返回true\false
- 参数:要显示的内容
- prompt()
- 输入对话框
- open()
- 打开一个新的窗口
- close()兼容性差
- setInterval()
- setInterval("alert('123');",3000)
- 每隔3秒alert一次123
- 会返回一个该方法的id,该id可以用来作为clearInterval()的参数
- setInterval("alert('123');",3000)
- setTimeout("js代码",毫秒数)
- 毫秒数之后,执行代码,只执行一次
- clearInterval()\clearTimeout()清楚间隔器和计时器
- DOM
- 概述
- document object model 文档对象模型
- 提供一些对象和方法,对html\xml等文档进行操作
- DOM将标签,属性,文本等全都封装为对象,这些对象的父对象是node节点对象
- DOM如何解析HTML文档
- 根据HTML的层级结构,在内存中分配一个树形结构
- 树形结构有且只有一个根节点,其他包括子节点/叶子节点
- DOM包括:document对象/element(标签)对象/属性对象/文本对象/Node节点对象(所有对象的父对象)
- DHTML
- 多种技术的结合:html\css\javascript\dom(dom属于javascript)
- document对象
- 表示整个文档
- 方法
- write()
- getElementById()
- 根据ID获取某个标签、可以通过这个标签变量设置其属性
- getElementsByName()
- 返回一个符合条件的标签的集合
- getElementsByTagName()
- 返回的是一个集合
- 当符合条件的tag只有一个的时候,返回的仍是数组,不过长度是1
- 当需要获取某一个标签的所有子标签时,推荐使用这个方法,它虽然是document对象的方法,但仍可以使用标签对象去调用
- createElement("标签名称");
- 创建一个标签
- createTextNode("文本内容");
- 创建文本
- appendChild()
- 将某元素添加到另一个元素的子节点上,添加至末尾
- Element对象
- 通过getElementById()获取到标签对象后,可以:
- getAttribute()\setAtrribute()方法,访问修改标签的属性
- removeAttribute()
- 通过getElementById()获取到标签对象后,可以:
- Node对象
- Node节点的3个属性,对于每一个Node(标签、属性、文本)都具有:
- nodeType
- nodeName
- nodeValue
- 获取Node节点的方法
- getAttributeNode()
- 属性:firstChild
- 子节点
- 属性:childNodes
- 某一个节点的子节点们,浏览器的兼容性差
- 这里指的是标签节点
- firstChild
- lastChild
- 属性:childNodes
- 父节点
- 属性:parentNode
- 同辈节点
- nextSibling
- previousSibling
- 操作DOM树
- appedChild()
- 在末尾添加子节点
- 特点:类似剪切+粘贴(将插入的节点,会被从原位置删除)
- insertBefore(newNode, oldNode)
- 在某一个节点之前插入新的节点
- 需要父节点调用此方法
- 不存在insertAfter()方法
- removeChild()
- 通过父节点调用
- replaceChild(newNode, oldNode)
- 通过父节点调用
- cloneNode(boolean)
- 复制节点
- 节点自身调用
- appedChild()
- Node节点的3个属性,对于每一个Node(标签、属性、文本)都具有:
- 概述
- innerHTML属性
- 并非DOM的组成部分,但是多数浏览器都支持
- 获取标签里的文本内容
- span1.innerHTML
- 也可设置HTML代码
- div1.innerHTML="<h1>AAA</h1>";
- 鼠标事件
- onclick
- onchange
- onfocus
- 得到焦点(比如鼠标点击输入框时,产生事件)
- onblur
- 失去焦点
转载于:https://www.cnblogs.com/wonewo/p/9630309.html