黑马程序员技术交流社区

标题: Web前端-JavaScript进阶 [打印本页]

---

作者: 森111    时间: 2018-12-29 14:49
标题: Web前端-JavaScript进阶

<center>

Web前端-JavaScript进阶BOM-浏览器对象模型
==1.Window对象==

弹窗方法

- alert():警告窗口
- confirm():确认窗口,返回boolean值
- prompt():提示窗口,返回用户输入的字符串

窗口方法

- open("url"):打开目标网页(新的选项卡)
- close():关闭网页,谁调用关闭谁

定时器方法

- setTimeout(函数,毫秒值) :只执行一次
- clearTimeout(定时器对象)
- setInterval(函数,毫秒值):重复执行
- clearInterval(定时器对象)
==2.Location对象==

reload()方法

- reload():刷新,重载

href属性

- location.href = "url" 访问url
- var url = location.href 获取当前url
==3.History对象==

方法

- forward():后一条历史记录
- back():前一条历史记录
- go(number):前/后number条历史记录

属性

history.length:历史记录的数量
Navigator对象Screen对象DOM-文件对象模型

==1.DOM对象==
- Document:文档对象   
- Element:元素对象-->标签
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,所有DOM对象的父对象
==2.Document对象==

==获取Eelement方法==

- getElementById("id")
- getElementsByTagName("Tag")
- getElementsByClassName("class")
- getElementsByName("name")

==创建DOM对象方法==

- createElement("TAG")****
- createTextNode("文本内容")****
- createComment()
- createAttribute()

属性

​==3.Element对象==

方法

- setAttribute("属性","属性值")
- removeAttribute("属性")

属性

innerHTML:标签体的内容,不仅仅是字符串,可以是任何内容
          通过这个属性可以修改标签体的内容,大大简化代码!
==4.Node对象==

CRUD

- appendChild(对象):C
- removeChild(对象):D
- replaceChild(新对象,对象):U

属性

- parentNode:获取父对象
==5.事件==

概念:某些组件被执行了某些操作后,触发某些代码的执行

- 事件:如单击,双击,键盘按下了,鼠标移动了
- 事件源:组件.如:按钮 文本输入框
- 监听器:代码
- 注册监听:将事件,事件源,监听器结合在一起.当事件源上发生时间则执行监听器代码

     

点击事件

-onclick:单击事件
-ondblclick:双击事件
​

焦点事件

- onfocus:获得焦点
- onblur:失去焦点
     一般用于表单校验

加载事件

- onload:初始化后再执行事件

鼠标事件

- onmousedown:鼠标按下
- onmouseup:鼠标松开
- onmouseover:鼠标移动到元素之上
- onmouseout:鼠标移开
- onmousemove:鼠标移动

键盘事件

- onkeydown:键盘被按下
- onkeyup:键盘松开
- onkeypress 某个按键被按下并松开

选择和改变事件

- onchange:域内容改变时触发的事件
              一般用于Select表单项
- onselect:选中文本框中的文本触发的事件

表单事件**

onsubmit:提交事件
!!!注意:
-事件属于form而不是表单项
-需要在函数中return false/true来控制是否提交
-行内式时:最终结果需提交给form:如-return check()
      例:<form>
             <input type="text" name="username">
             <input type="submit">
         </form>
         
         <script>
            function check{
              var str = document.getElementsByName("username")[0].value;
              if(str=="")
              {
                alert("用户名不能为空")
                retrun false;
              }else{
                return true;
              }
            }
         </script>
-原理:当使用行内式时,事件最终会被解析为一个方法:
    function fun(){
        "内容"
    }
​
onchange:select表单提交事件
6.元素控制

元素控制方法

- 方法1:对象.style.样式 = "值"
- 方法2:对象.className = "class"

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2