js--基础2

BOM对象

浏览器对象模型

Window是bom对象。

Settimeout: 让一个函数在多少毫秒之后运行。Settimeout（函数，毫秒数）

简单的语句可以放在字符串里面，到时间后自动转换为js代码

Settimeout（“alert(111)”,2000）;

消除延时执行。

Var time = Settimeout（“alert(111)”,2000）;返回一个值。

 

ClearTimeout（time）；

 

 

循环会产生闭包。

 

定时执行某一段代码。

Var  time= SetInterval（函数名，毫秒数）；

ClearInterval（time）；

Alert();

Confirm();

 

Window对象的

Open函数

Window.open(“new.html”,”啦啦啦”,”width=100,height=200”)

Close函数

通过窗体对象调close方法

Window.location.href=”地址”   跳转到某个页面（需要在函数中实现）

Window.history.back(-1);  返回上一个页面（需要在一个函数中实现）

Window.history.go(-1);//可以返回多级目录，根据参数来定。

History.forward  前提是必须使用back或者go他才能够记录之前页面是哪一个。

Document.writenln();  打印内容到页面

 

Window.navigator.language        获取当前页面的语言。

是一个独立的对象，提供浏览器或者操作系统的某些信息。

 

Window.screen.height    获取屏幕高度

Window.screen.width 获取屏幕宽带

 

 

 

事件

Dom树。

事件流--页面上不只一个事件在触发。冒泡

 

冒泡和捕获两个不同的实现方式，因为各个浏览器早期的设计有差异。

Ie默认就是冒泡，只支持冒泡。

 

标准的dom浏览器即支持冒泡，又支持捕获。

 

Addeventlistener  用于绑定事件，现代指派事件，第一个参数事件类型、第二个事件执行的行为、第三个参数控制冒泡还是捕获。默认是冒泡。

 

方法加”()”表示立即执行。

传统指派方法

Var

 

 

Event 对象：

每次只要有事件触发都会产生一个event对象，，当事件结束，event对象消失。、

动态产生evet

Function（evet）{

}   默认第一个参数是evet和名字无关。

 

 

 

 

鼠标事件】

Onclick = “”; 点击

Ondbclick=””; 双击

Onmouseover=””; 移入

Onmouseout=””; 移除

Onmouserdown=””; 按下

Onmouseup=””; 松开

 

 

键盘事件

Onkeydown  按下

Onkeyup 弹起

Onkeypress 按压键盘。

Event.keycode()  获取键盘码。

 

 

 

 

 

Html事件

Document.getelementByid(“元素id”);  获取元素。

 

Onchange=function（）{    下拉框

 

}

 

 

Onfocus          获取光标

Onblur          失去光标

 

Window.onload = function(){

 

 

}当页面加载完成后才执行函数内的js代码。

 

 

事件的返回值

 

Onsubmit 事件   提交时验证，返回值是boolean。

Onreset 事假 重置。

 

 

操作下拉框

 

SelectElement.options；获取所有下拉框

Selectelement.options[index].text  获取指定下拉框的文本

 

Selectelement.options[index].value 获取指定下拉框的value

 

select对象.options[select对象.selectedindex];  获取被选中的下标

Dom文档对象模型

标签--元素节点

内容--文本节点

属性--属性节点

注释--注释节点

所有的标签都是元素节点，换行是文本节点，元素返回值是1，文本返回值是3，属性返回值是2.

 

元素节点的使用

 

Childnodes获取到所有的子节点，元素节点、文本节点。

Children  获取到所有的子元素中的元素节点。

Firstelementchild||firstchild（ie下）   获取到第一个元素节点。

Lastelementchild 获取到最后一个子节点

Previouselementsibling 获取到前一个兄弟节点

Mextelementsibling 获取到后一个兄弟节点。

 

 

Parentnode 获取到父节点

 

Offsetparent  获取到定位父节点

 

Createelement（“元素名”）创建一个节点

 

父类.appendchild（“新节点”）将创建好的节点放入dom树，默认在最后

父类.insertbefore(oli2,oli1) 第一个参数是要加入的节点、第二个是放置的位子。

Nodevalue ：只针对文本节点。

 

Removechild 找到对象删除里面的子节点。

 

 

属性节点的使用：

Attributes     获取元素的所有属性。返回一个集合。

Setattribute（“key”，“value”）    增加一个属性。

Removeattribute（“key”）删除一个属性

Getattribute（“key”）得到一个属性的值

元素.style=”内容”;   

文本节点操作；

Document.createtextnode(“value”) ;  创建一个文本节点

元素.appedchild(文本节点);

元素.firstchild.appeddate(“value”)    直接操作文本。默认将内容放在当前节点的后面。

元素.firstchild.insertdate(位置,”value”)增加文本放在指定位置，第一个参数是位置，第二个是内容

元素.firstchild.deletedate(位置,长度)  删除文本内容，第一个参数表示开始位置，第二个表示长度。

Replacedata(“”,””,””)  替换，三个参数 位置、长度、内容

 

 

表格操作

 

Tableelement.insetRow(postion)   新增一行   

Trelement.insetcell(postion)   新增一列   

Deleterow（）  删除行

Deletecell （）删除列

Table.rows   得到所有行

Row.cells  得到所有的列

 

替换节点

Elemet.repalcechild(“”,””)第一个参数是内容，第二个参数是目标li

克隆节点

Clonenode（boolean）  深度克隆true克隆当前的节点以及子节点，浅克隆

False，只克隆当前这个节点。

 

通过class找到节点

Document.getelementbyclassname(“li1”); 返回一个数组

 

通过name属性找元素

Document.getelementbyname（“name”）返回一个数组

 

通过元素找节点

Document.getelementbytagname（“”）

Js操作元素

 

Str=元素.style     得到元素当前身上的内联样式，返回一个json对象   

Str.width   获取属性

Str.backgroundcolor=””  设置样式覆盖前面的内容。

Str[i]      通过下标获取，得到的是键的名字。

 

 

Js对css属性操作

对象.style.getpropertyvalue(“key”)       获得属性值

对象.style.removepropertry(“属性名”);     删除的名字的css对应的名字。

对象.style.setpropertry(“key”,”value”);   属性名一定是css对应的名字，

 

获取内部样式表

 

Document.styleSheets      获取内部样式表。返回当前文档一共有多少套样式表。

样式表[index].cssrules     获取样式表集合里面的所有样式信息

样式信息[index].style     获取到css样式。

 

设置样式表

 

样式信息[index].style.属性=”value”;

表单

 

Document.forms     得到表单集合  

表单集合[index]

表单集合[“form1”]   //默认按照name属性找，那么属性不存在再用id找

 

通过name属性找到元素

表单集合.name属性的值;

 

通过value 获得值

元素.value          

 

 

 

 

单选按钮

Var radioarr=表单.name值

Radioarr.value

获取单选阿牛的值，通过表单获取到单选按钮，直接返回单选按钮的值

 

 

多选按钮

 

 

下拉框

 

 

 

隐藏

Display：none    隐藏元素不会再占空间

 

Overflow：hidden  使用ovaerflow会产生一个bfc    元素不会溢出。

  

Visibility：hidden   隐藏元素看不见 但是任然占空间。