js特点
1 交互性 、
2 安全性 js不能访问本地磁盘的文件
java 和js的区别
1 java是sun执行公司开发 oracle js是网景公司2 js是基于对象 java面向对象
3 java是强类型语言 js 是弱类型的语言
4 java语言运行需要先编译成字节码文件
js只需要解析就可以
js 的组成
1 ECMAScropt ECMA ：欧洲计算机协会 制定的js语法2 BOM broswer object medol 浏览器对象模型
3 DOM document object medol 文档对象模型
使用方式
<script type="text/javascript"></script>
<script type="text/javascript" src="xx.js"></script>
使用引入外部js文件时 标签内不要再写代码了 不会执行的
原始类型 String 字符串 var str="abc"
number 数字类型 var m=123
boolean ture和false var flag= ture
null var date =new date() 获取对象的引用 null待变空
undifined 定义一个变量 没有赋值
typeof() 查看变量类型
js的语句
if判断语句
switch语句
循环语句
js的运算符 js中部区分小数整数 所以1/100=0.01
字符串的加和java一样 减时执行减法的运算不是数字是提示NaN
boolean 中true=1 false=0
== 和 === 区别
==比较的是值
===比较是值和数据类型
js的数组
1 var arr = [1,2,3,4];2 内置Array对象 var arr=new Array(5) 定义一个数组长度为5
3 使用内置对象 var arr=new Array(1,2,3); 定义一个数组内容为1，2，3
js的函数
1 function 方法名（参数列表）{方法体
返回值（可有可无，根据具体情况）
}
2 匿名函数
var add= function(参数列表){
方法体
返回值
js的全局变量和局部变量
全局变量：在标签内定义一个变量 整个页面js部分都可以使用
局部变量：只能在方法内部使用
}
js放置的位置 一般放在《/boby》 后
js String
方法 与和html相关的方法
bold（）是字符串加粗
fontcolor（）字体颜色
fontsize （）1-7字体大小
link（地址）显示成超链接
sub 下标（飘） sup 上标
与java相似的方法
concat（）连接字符串
chatAt（）返回指定位置的字符
indexof（）检索字符位置 不存在返回-1
split（） 分割字符串成数组
replace（“原始”，“替换”） 替换字符串
substr(“位置”，长度) 提取位置长度的字符
substring（“开始截取的位置”，“结束后的位置”）
js的Array对象
concat（） 连接数组join（）根据一个指定字符分割数组 代替逗号分隔数组
push（）向数组末尾添加元素 返回新长度
pop（）删除并返回最后一个元素
reverse（）颠倒数组中元素的顺序
js的Date对象
toLocaleString（）中国传统时间格式获取当前年 getFullYear（）
获取当前月 （返回的是0-11）（getMonth（）+1）
获取当前星期 getDay（） 星期日是0
获取当前天 getdate（）
获取当前小时 getHours（）
获取当前分钟 getMinues（）
获取当前秒 getSeconds（）
返回1970.1.1至今的毫秒数 getTime()
js的Math对象（静态方法）
math.abs()绝对值ceil（）向上舍入
floor（）向下舍入
round（）四舍五入
random（）随机数
pow（“数字”，“次方”）X次方
sqrt（） 平方
PI圆周率
js的全局函数
不属于任何一个函数 直接写名称使用eval（）：执行js代码（如果字符串是一个js代码，使用方法直接方法）
encodeURL（） decodeURL（）对字符进行编码/解码
isNaN（）判断字符串是否是数字 是数字--》false
parseint（）转类型
js里不存在重载 但是可以通过替他方式模拟重载
把传递的参数保存在数组里
function add(a,b){
arguments
return a+b;
}
js的BOM broswer object medol 浏览器对象模型
navigator： 获取客户机的信息（浏览器的信息）navigator.appName 返回浏览器名称
screen: 屏幕的信息
screen.height 屏幕的高
location: 请求的url地址
href 获取请求的地址
location.href 获取请求地址
设置url地址
给个按钮可以跳转到另一个页面
（方法中写）location.href
history 请求的URL的历史记录
history.back() 上一个页面
history.forword()下一个页面
history.go() 指定页面
window（）窗口对象 顶层对象（所有的bom对象都是window里面操作的）
window.confirm("是否删除")返回值（确定-true 取消-false）
prompt输入对话框 prompt（“提示文本内容”，“默认值”）
open（url，name，feature（窗口特征 宽高），repalce）打开一个新的窗口
close（）关闭窗口（浏览器兼容性较差）
定时器
setInterval（“js函数”，“时间（毫秒）”）每xx毫秒执行一次js函数
setTimeout（“js”函数，“时间（毫秒）”）在xx时间后执行函数，只执行一次
clearInterval（setinterval的返回值）：清除setinterval定时器
cleartimeout（settimeout的返回值）：清除settimeout定时器
opener 返回创建这个窗口的窗口 window--》user（得到window）
js的DMO document object medol 文档对象模型
·文档 超文本标记文档 html xml·对象 属性和方法
·模型 使用属性和方法操作超文本标记行文档
document html文档对象
element 标签对象
属性对象
文本对象
Node节点对象 这些对象的父对象 找不到要的方法在这里寻找
解析过程
根据html 的层级结构，在内存中分配一个树形结构
把每个对象封装成对象
DHTML 很多技术的简称
html：封装数据
css： 使用属性和属性值谁之样式
DOM： 操作html文档
javascript 专门指的是js的语法语句
document对象 每一个载入的html文档都是document对象
getElementById() 通过id得到元素标签
write() 向页面输出变量值 向页面输出html代码
getElementsByName() 通过name得到返回对象集合
注意地方 只有一个标签 这个标签只能用name得到，返回的不是集合
getElementsByTagName() 同byname
谷歌浏览器不支持浏览本地文件
Node对象属性一
* nodeName* nodeType
* nodeValue
* 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
* 标签节点对应的值
nodeType： 1
nodeName： 大写标签名称 比如SPAN
nodeValue: null
* 属性节点对应的值
nodeType： 2
nodeName： 属性名称
nodeValue: 属性的值
* 文本节点对应的值
nodeType： 3
nodeName： #text
nodeValue: 文本内容
Node对象的属性二
* 父节点- ul是li的父节点
- parentNode
- //得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);
* 子节点
- li是ul的子节点
- childNodes：得到所有子节点，但是兼容性很差
- firstChild：获取第一个子节点
- //获取ul的第一个子节点 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一个子节点
var li1 = ul1.firstChild;
alert(li1.id);
- lastChild：获取最后一个子节点
//得到最后一个子节点
var li4 = ul1.lastChild;
alert(li4.id);
* 同辈节点
- li直接关系是同辈节点
- nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。
- //获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);
alert(li3.previousSibling.id);
操作dom树
** appendChild方法- 添加子节点到末尾
- 特点：类似于剪切黏贴的效果
** insertBefore(newNode,oldNode)方法
- 在某个节点之前插入一个新的节点
- 两个参数
* 要插入的节点
* 在谁之前插入
- 插入一个节点，节点不存在，创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
- 代码
/*
1、获取到li13标签
2、创建li
3、创建文本
4、把文本添加到li下面
5、获取到ul
6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
*/
//获取li3 标签
var li13 = document.getElementById("li13");
//创建li
var li15 = document.createElement("li");
//创建文本
var text15 = document.createTextNode("董小宛");
//把文本添加到li下面 appendChild
li15.appendChild(text15);
//获取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蝉</li>之前添加 <li>董小宛</li>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);
*** 不存在 没有insertAfter()方法
** removeChild方法：删除节点
- 通过父节点删除，不能自己删除自己
- /*
1、获取到li24标签
2、获取父节点ul标签
3、执行删除（通过父节点删除）
*/
//获取li标签
var li24 = document.getElementById("li24");
//获取父节点
//两种方式 1、通过id获取 ； 2、通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
//删除（通过父节点）
ul31.removeChild(li24);
** replaceChild(newNode,oldNode)方法: 替换节点
- 不能自己替换自己，通过父节点替换
- 两个参数
** 第一个参数：新的节点（替换成的节点）
** 第二个参数：旧的节点（被替换的节点）
- 代码
/*
1、获取到li34
2、创建标签li
3、创建文本
4、把文本添加到li下面
5、获取ul标签（父节点）
6、执行替换操作 （replaceChild(newNode,oldNode)）
*/
//获取li34
var li34 = document.getElementById("li34");
//创建li
var li35 = document.createElement("li");
//创建文本
var text35 = document.createTextNode("张无忌");
//把文本添加到li下面
li35.appendChild(text35);
//获取ul
var ul41 = document.getElementById("ulid41");
//替换节点
ul41.replaceChild(li35,li34);
** cloneNode(boolean): 复制节点
- //把ul列表复制到另外一个div里面
/*
1、获取到ul
2、执行复制方法 cloneNode方法复制 true
3、把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
//获取ul
var ul41 = document.getElementById("ulid41");
//复制ul，放到类似剪切板里面
var ulcopy = ul41.cloneNode(true)
//获取到div
var divv = document.getElementById("divv");
//把副本放到div里面去
divv.appendChild(ulcopy);
** 操作dom总结
* 获取节点使用方法getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换
innerHTML 属性
这个属性不是DOM的组成部分，但是大多数浏览器都支持的属性作用：获取文本的内容
向标签里面设置内容（可以是html代码）