一、DOM初探
(1)DOM的概念
DOM(Document Object Model): 文档对象模型
DOM是一个宿主对象(宿主对象:就比如寄宿在一家酒店,酒店给你提供的生活用品)
(2)DOM模型
模型: 是一个封装好了的有结构的一套方法,能够去处理相对应的事情
dom无非就是操作html和xml,dom模型建立了一套完整的方法集合,这一套方法集合就是模型
(3)DOM的作用
通过浏览器提供的这一套方法表示或者操作HTML和XML
1.操作XML
2.操作HTML内联样式
CSS复合属性用小驼峰,比如background-color = backgroundColor
dom无法操作样式表,但是可以操作内联样式,因为内联样式的优先级的高于样式表的
二、JS对象
(1)本地对象
本地对象(Native Object) | Object、Function、Array、String、Number、Boolean、Error、EvalError、SyntaxError、RangeError、ReferenceError、TypeError、URIError、Date、Regxp |
---|
(2)内置对象
内置对象(Built-in Object) | Global、Math |
---|
Global:
方法:isNaN()、parseInt()、Number()、decodeURI()、encodeURI
属性:Infinity、NaN、undefined
Global是全局内置对象的统称,是不存在的,全局下的这些方法都属于Global
本地对象和内置对象都是ES的内部对象
(3)宿主对象
宿主对象(Host Object) | window(bom)、document(bom) |
---|
JavaScript在每一个浏览器当中起到dom的作用的话需要这个浏览器提供一系列跟dom相关的方法,它就不再是ECMAScript提供的了,而是浏览器提供的
window所有的方法是在bom里面的,document所有的方法是在dom里面的,dom是bom里面的内容,只是dom有W3C的规范,而bom没有,因为不同的浏览器运行方式和实现某一些方法的方式是不同的,所有它们之间存在着不同的bom对象的方法,所以就没办法给标准,所以开发者就要做兼容性。
宿主对象: 执行JS脚本的环境提供的对象(浏览器就是JS执行脚本的环境,它提供的对象都是宿主对象),又称浏览器对象
不同浏览器所提供相同功能的宿主对象里面的方法有可能不同,所以不同的浏览器在执行宿主对象的方法的时候就有可能造成兼容性问题
三、XML
(1)XML标签
XML可以自定义标签
XML => XHTML(过度) => HTML
XML数据包:
(2)内置属性冲突问题
1.为什么会打印[object HTMLUnKnownElement],这个不是Object原型上面的toString方法才会这样嘛,而且为什么name会打印出来这个,而uname就不会呢?
因为内置的属性发生了冲突导致的结果
2.为什么打印出来的是input而不是myForm?
因为input的id把form的id覆盖掉了
总结:
在JavaScript中有一些东西是不能使用的,比如name、id这些变量名、标签名这些东西尽可能的去避免,因为JavaScript当中是有内置的属性是有id和name或者有其它的一些东西,保不准哪个地方就会有冲突,所以我们只能尽可能的区回避这些问题
我们在使用属性、变量、标签名的时候,尽量去避免一些和JavaScript本身属性相重合的一些东西
四、幻灯片展示
(1)css样式
* {
margin: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
.silder-wrap {
width: 996px;
height: 480px;
margin: 50px auto;
border: 1px solid #000;
}
.slider {
position: relative;
float: left;
width: 853px;
height: 480px;
}
.slider-item {
display: none;
position: absolute;
top: 0;
left: 0;
height: 480px;
}
.slider-item.active {
display: block
}
.thumbs {
float: left;
width: 142px;
height: 480px;
}
.thumbs-item {
height: 80px;
opacity: .5;
}
.cur {
opacity: 1;
}
(2)搭建dom结构
<div class="silder-wrap">
<div class="slider">
<ul class="slider-list">
<li class="slider-item active">
<a href="javascript:;">
<img src="images/1.jpg" alt="">
</a>
</li>
<li class="slider-item">
<a href="javascript:;">
<img src="images/2.jpg" " alt=" ">
</a>
</li>
<li class="slider-item ">
<a href="javascript:; ">
<img src="images/3.jpg "" alt="">
</a>
</li>
<li class="slider-item">
<a href="javascript:;">
<img src="images/4.jpg" " alt=" ">
</a>
</li>
<li class="slider-item ">
<a href="javascript:; ">
<img src="images/5.jpg "" alt="">
</a>
</li>
<li class="slider-item">
<a href="javascript:;">
<img src="images/6.jpg" " alt=" ">
</a>
</li>
</ul>
</div>
<div class="thumbs ">
<ul class="thumbs-list ">
<li class="thumbs-item cur ">
<a href="javascript:; ">
<img src="images/1.jpg " " alt=" ">
</a>
</li>
<li class="thumbs-item ">
<a href="javascript:; ">
<img src="images/2.jpg " " alt=" ">
</a>
</li>
<li class="thumbs-item ">
<a href="javascript:; ">
<img src="images/3.jpg " " alt=" ">
</a>
</li>
<li class="thumbs-item ">
<a href="javascript:; ">
<img src="images/4.jpg " " alt=" ">
</a>
</li>
<li class="thumbs-item ">
<a href="javascript:; ">
<img src="images/5.jpg " " alt=" ">
</a>
</li>
<li class="thumbs-item ">
<a href="javascript:; ">
<img src="images/6.jpg " " alt=" ">
</a>
</li>
</ul>
</div>
</div>
(3)js流程化写法
var thumbItem = document.getElementsByClassName('thumbs-item'),
sliderItem = document.getElementsByClassName('slider-item');
for (var i = 0; i < thumbItem.length; i++) {
(function (j) {
thumbItem[j].onclick = function () {
for (var k = 0; k < thumbItem.length; k++) {
thumbItem[k].className = 'thumbs-item';
sliderItem[k].className = 'slider-item'
}
sliderItem[j].className += ' active'
this.className += ' cur'
}
})(i)
}
(4)js插件写法
; (function () {
var Slider = function (opt) {
this.thumbItem = document.getElementsByClassName(opt.thumbItem);
this.sliderItem = document.getElementsByClassName(opt.sliderItem);
this.bindClick();
}
Slider.prototype = {
bindClick: function () {
var thumbItem = this.thumbItem,
sliderItem = this.sliderItem;
for (var i = 0; i < thumbItem.length; i++) {
(function (j) {
thumbItem[j].onclick = function () {
for (var k = 0; k < thumbItem.length; k++) {
thumbItem[k].className = 'thumbs-item';
sliderItem[k].className = 'slider-item'
}
sliderItem[j].className += ' active'
this.className += ' cur'
}
})(i)
}
}
}
window.Slider = Slider;
})()
调用:
<script src="js/index.js "></script>
<script>
var slider = new Slider({
thumbItem: 'thumbs-item',
sliderItem: 'slider-item'
})
</script>
五、作业
(1)css样式
body {
margin: 0;
}
a {
text-decoration: none;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
.tab-wrap {
width: 500px;
margin: 50px auto;
}
.tab .tab-item {
float: left;
width: 100px;
height: 50px;
}
.tab .tab-item a {
display: block;
height: 100%;
text-align: center;
line-height: 50px;
color: #000;
}
.tab .tab-item.cur a {
color: #fff;
background: #000;
}
.page {
position: relative;
height: 450px;
border: 1px solid #000;
}
.page .page-item {
display: none;
position: absolute;
height: 100%;
width: 100%;
text-align: center;
line-height: 450px;
font-size: 100px;
}
.page .page-item.active {
display: block;
}
(2)dom结构搭建
<div class="tab-wrap">
<div class="tab clearfix">
<div class="tab-item cur">
<a href="javascript:;">选项卡1</a>
</div>
<div class="tab-item">
<a href="javascript:;">选项卡2</a>
</div>
<div class="tab-item">
<a href="javascript:;">选项卡3</a>
</div>
</div>
<div class="page">
<div class="page-item active">1</div>
<div class="page-item">2</div>
<div class="page-item">3</div>
</div>
</div>
(3)js流程化写法
var tabItem = document.getElementsByClassName('tab-item'),
pageItem = document.getElementsByClassName('page-item');
for (var i = 0; i < tabItem.length; i++) {
(function (j) {
tabItem[j].onclick = function () {
for (var i = 0; i < tabItem.length; i++) {
tabItem[i].className = 'tab-item';
pageItem[i].className = 'page-item';
}
pageItem[j].className += ' active'; // 立即执行的时候j就传给了它
this.className += ' cur';
}
})(i)
}
(4)js插件写法
; (function () {
var Tab = function (opt) {
this.tabs = document.getElementsByClassName(opt.tabItem);
this.pages = document.getElementsByClassName(opt.pageItem);
this.bindClick(opt.tabItem, opt.pageItem, opt.cur, opt.active)
}
Tab.prototype = {
bindClick: function (tabItem, pageItem, cur, active) {
var tabs = this.tabs;
var pages = this.pages;
for (var i = 0; i < tabs.length; i++) {
(function (j) {
tabs[j].onclick = function () {
for (var i = 0; i < tabs.length; i++) {
tabs[i].className = 'tab-item';
pages[i].className = 'page-item';
}
pages[j].className = pageItem + ' ' + active;
this.className = tabItem + ' ' + cur;
}
})(i)
}
}
}
window.Tab = Tab;
})()
调用:
<script src="index.js"></script>
<script>
var tab = new Tab({
tabItem: 'tab-item',
pageItem: 'page-item',
cur: 'cur',
active: 'active'
})
</script>