黑马程序员技术交流社区

标题: 【黑马程序员杭州】PHP课程笔记day12-javascript基础 [打印本页]

作者: 小江哥    时间: 2018-1-12 14:47
标题: 【黑马程序员杭州】PHP课程笔记day12-javascript基础
本帖最后由 小江哥 于 2018-1-12 16:29 编辑

一、BOM对象的综合案例


二、DOM对象2.1什么是DOM对象
Document        Object        Model   文档对象模型
2.2 DOM对象作用
DOM它主要是为了操作HTML文档提供了一些属性与方法

2.3节点
HTML 文档中的每个部分都是一个节点
l 整个文档是一个文档节点
l 每个 HTML 标签是一个元素节点
l 包含在 HTML 元素中的文本是文本节点
l 每一个 HTML标签中的 属性是一个属性节点

2.4 DOM节点树
HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
节点与节点之前是有等级的。
2.5 DOM对象的分类
l 核心        DOM:提供了操作XMLHTML文档属性与方法
l XML         DOM:提供了操作XML文档属性与方法 ;
l HTML         DOM:提供了操作HTML文档属性与方法
l CSS                 DOM:操作标签的style属性

三、HTML DOM3.1 HTML DOM的属性
属性名
功能
innerHTML
获取或者设置双边标签里面的内容
document.body
获取到到body标签对象
document.documentElement
获取到根元素 html标签
document.forms
获取到所有表单元素 返回是一个集合
document.images
获取到所有的图片元素 返回是一个集合








3.2HTML DOM的方法
方法名
功能
document.getElementById(id的属性值)
通过id的属性值来获取元素 它只能获取到一个元素
document.getElementsByTagName(标签名)
通过标签名来获取元素  它返回是一个数组    如果要访问其中的某一个标签对象 要使用下标来进行访问! 就算这个数组里面的元素只有一个 那么也是要使用数组下标的方式来进行访问!
父对象.getElementsByTagName(标签名)
[size=10.5000pt]
document.getElementsByName(name的属性值)
通过标签的name属性值来获取元素  它返回是一个数组    如果要访问其中的某一个标签对象 要使用下标来进行访问! 就算这个数组里面的元素只有一个 那么也是要使用数组下标的方式来进行访问!







3.3HTML DOM对标签属性的操作
注意:这里其实是没有内置的方法  只是我们能大家总结出来的功能!

增、改
语法:
        要操作的标签对象.属性名 = “值”


查询
语法:
        要操作的标签对象.属性名
注意:
        以上对标签属性的操作均不包含对class属性的操作!如果要对class属性进行操作  一定要把class这个属性名修改为className 才可以对class属性进行操作!
四、全选、反选、取消



五、CSS DOM
css dom的作用:它主要是用来操作标签的style的属性  =è操作行内样式
        <标签名 style=”CSS样式” >

设置或者修改:
语法:
        要操作的标签对象.style.css属性 = “值”
获取:
语法:
        要操作的标签对象.style.css属性



注意:
        如果CSS属性是由2个或者以上的单词组成的,那么从第二个单词开始首字母要大写 并且要去掉中划线!驼峰法

background-color  ===èbackgroundColor


案例:使用CSS DOM来实现点击按钮 如果DIV显示就按其隐藏 如果DIV是隐藏的就按其显赫。
六、事件 6.1什么是事件?
比如当鼠标单击、当鼠标滑过、当鼠标离开 这些行为被称之为事件
6.2什么是事件驱动式?
        当事件发生时 会被JS捕获到 然后赋予其一些功能代码!

6.3事件的绑定方式
事件的绑定方式有两种:
1) 行内绑定事件
说明:所谓的行内绑定事件 是将事件写在HTML标签里面
格式:
<标签名  事件=“事件的处理程序 ” />
2) 动态绑定事件
说明:是将事件名写在JS代码里面  
格式:
通过JS获取标签对象.事件名 = 事件的处理程序   事件的处理程序一般是一个匿名函数  
在工作中,动态绑定使用的居多
因为我们需要做到结构、样式、行为相分离
6.4事件列表
l onclick        当鼠标单击时
l ondblclick        当鼠标双击时
l onload  当页面加载完成后  指body标签里面所有的标签都加载完成以后再来执行js代码
l onmouseover         当鼠标经过时
l onmouseout         当鼠标离开时
l onsubmit  当表单提交时 它主要是用来实现表单验证!这个事件要绑定给form标签上面
onsubmit事件它主要是用来阻止表单的默认行为。表单它本身就会具有提交的功能。如果表单数据不合法就将让表单提交,如果合法就让其提交。
onsubmit事件阻止表单提交分为行内绑定与动态绑定
1、动态绑定
2、行内绑定时
l [img=190,32]onfocus   当获取焦点时  
l onblur         当失去焦点时
l onchange:当内容发生改变时  这个事件一般多用于select标签对象
七、改变网页的背景颜色案例

八、表单验证案例
[size=29.3333px]
[size=29.3333px]
[size=29.3333px]
[size=29.3333px]
[size=29.3333px]
九、图片轮播案例
思路分析:
1、开启一个定时器
2、定时器函数主要是用来执行图片轮播的效果
3、当鼠标放在图片上面时 ,图片就停止了轮播的效果 清除了定时器
4、当鼠标离开图片上面时,图片继续在执行轮播的效果  重新开启了定时器功能
5、当鼠标放在li标签上面时,图片就停止了轮播的效果 清除了定时器
6、当鼠标放在li标签上面时,还会显示li标签上面对应的数字的图片
7、当鼠标离开li标签上面时,图片就会继续开始轮播的效果  重新开启了定时器功能
8li标签上面的高亮效果,它是随着图片滚动而滚动。





作者: wheat    时间: 2018-1-12 22:41
不错哦哦





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