黑马程序员技术交流社区

标题: 【石家庄校区】javascript高级 [打印本页]

---

作者: 卞建彬    时间: 2018-11-1 21:33
标题: 【石家庄校区】javascript高级


                 day10-javascript高级

1.     DOM(引入为案例做铺垫)

2.     引入事件（为案例做铺垫）

3.     BOM

一．DOM(引入)

== dom: 指的就是现在的html文档（document object model）

==1.获取html文档上的标签：

       根据id获取标签（元素）：

[Java] 纯文本查看 复制代码

varobj = document.getElementById(“id的属性值”);

                                                              比如：User user = new User();

       obj代表一个完整的标签（元素），操作标签里面的属性：

l  修改属性的值：

标签对象.标签的属性=“赋值”；

比如： user.name=”jack”;

l  获取属性的值：

var  value = 标签对象.标签属性。

比如 String name = user.name;

二．事件（引入）

==概述：javascript基于对象和事件驱动的一门客户端语言。

u  基于对象： js里面有很多对象不用创建，可以直接使用（内置对象）

u  事件驱动：html标签和事件绑定在一起，通过事件驱动（调用）对应的方法，实现动态效果。

     ==事件绑定：

                   第一种：直接绑定

[AppleScript] 纯文本查看 复制代码

<input  type="button" value="点我啊" >

                   <scripttype="text/javascript">

                            //1.直接绑定：直接在标签上书写事件属性 和  js代码绑定

                            function  fun1(){

                                     alert("直接绑定");

                            }

</script>

       第二种：间接绑定（通过标签对象操作事件属性）

[HTML] 纯文本查看 复制代码

<input  type="button" value="点我啊2222"  id="t2">

              //1.根据id获取  id=t2的对象

                            var  obj = document.getElementById("t2");

                            //2.标签操作属性

                            obj.onclick = function(){

                                     alert("点我啦----");

                            }

         注意：

                   onblur: 失去焦点好，会执行对应的方法

                   onsubmit：表单提交事件，只有提交表单时，才会执行对应的方法

                                      通过返回的boolean值，控制表单是否提交。

三．BOM

== BOM: browser object model(浏览器对象模型)

  BOM对象是由浏览器的各个部分组成。

== 浏览器：

l  窗口： 比如 操作： 打开窗口，关闭窗口

对应的对象：Window

l  地址栏：比如操作：在地址栏输入访问的地址

对应的对象：Location

l  屏幕：比如：缩放窗口，获取窗口的宽和高

对应的对象象：Screen

l  历史记录：比如 点击后退前进箭头，访问的网页会发生变化

对应的对象: History

l  浏览器： 比如 获取浏览器的版本，浏览器的引擎

对应的对象：Navigator

== Window对象

         注意：调用Window对象方法或者属性时，可以省略window对象。

    常用的方法：

         第一类方法：弹出窗口方法

                   alert(); confirm(); prompt();

         第二类方法：打开一个新的窗口或者关闭一个新的窗口

                   *varnewWindow= open(参数);

                    参数：第一种可以打开其它网站的资源，参数写具体的网址

                    参数：第二种打开自己网站的资源，直接写资源路径

                   *close（）

                    newWindow.close(); newWindow对象 表示新打开的窗口

第三类方法：定时器方法

         ==开启定时器

                   一次性定时器：var stid= setTimeout(js代码，时间);

                   循环定时器：varsiid=setInterval(js代码，时间);

         ==清除定时器：

                   clearTimeout(stid);

                   clearInterval(ssid);

四．DOM（掌握）

==概述：文档对象模型，文档对象是由文档的各个部分组成的对象。

          文档指的html网页（根标签，标签，属性，文本等等）。

file:///C:\Users\ADMINI~1\AppData\Local\Temp\msohtmlclip1\01\clip_image002.jpg

==常见对象：

  注意：操作元素的原则：通过父元素 操作 子元素。

l  document对象：代表整个标记性文档（比如：html）

方法：

         

[AppleScript] 纯文本查看 复制代码

 创建一个元素（标签）： varele = document.createElement(“标签名称”);

           创建一个文本（文本元素）vartext = document.createTextNode(“文本”);

获取元素对象的方法：

1.      根据id获取元素：getElementById(“id属性的值”);

2.      根据标签名称获取元素数组：

getElementsByTagName(“标签名称”);

3.      根据class属性的值获取元素数组：

getElementsByClassName(“class属性的值”);

l  Element对象

方法：

           添加一个子元素： 父元素.appendChild(子元素);

           移除一个子元素：父元素.removeChild(子元素);

---

作者: 梦缠绕的时候    时间: 2018-11-8 16:48

---

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

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