JS第一章-入门/基本语法和属性

JS第一章-入门/基本语法和属性 扫二维码继续学习

vip

该课程为限制课程
请联系客服

ECMAScript(5.1)

DOM

BOM

[展开全文]
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
			
			body {
				font-family: "宋体";
			}
			
			ul {
				margin: 0;
				padding: 0;
			}
			
			.container {
				max-width: 960px;
				margin: 45px auto;
				
			}
			
			.tab {
				list-style: none;
				font-size: 0;
				border-top: 1px solid #c8dcf2;
			}
			
			.tab>.tab-item {
				display: inline-block;
			}
			
			.tab>.tab-item.active {
				border-top: 2px solid #0873C0;
				margin-top: -1px;
			}
			
			.tab>.tab-item>a {
				display: inline-block;
				width: 65px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				text-decoration: none;
				color: #0873c0;
				font-size: 14px;
				margin-top: -1px;
			}
			
			.tab-item-content {
				display: none;
			}
			
			.tab-item-content.active {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<ul class="tab">
				<li class="tab-item active">
					<a href="#">国际要闻</a>
				</li>
				<li class="tab-item">
					<a href="#">国内要闻</a>
				</li>
				<li class="tab-item">
					<a href="#">上海新闻</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-item-content active">1</div>
				<div class="tab-item-content">2</div>
				<div class="tab-item-content">3</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var tabContainer = document.querySelector('.container');
			var tabItems = tabContainer.querySelectorAll('.tab-item');
			var tabContent = tabContainer.querySelectorAll('.tab-item-content');
			
			var last = 0;
			
			for (var i = 0; i < tabItems.length; i++) {
				tabItems[i].index = i;
				
				tabItems[i].onmouseenter = function (ev) {
					this.classList.add('active');
					tabContent[this.index].classList.add('active');
					
					if (this.index === last) { return ; }
					
					tabItems[last].classList.remove('active');
					tabContent[last].classList.remove('active');
					last = this.index;
				}
			}
			
		</script>
	</body>

</html>

 

[展开全文]

自定义属性与系统属性是一样一样的。

[展开全文]

for 循环中,每个 li 元素都绑定了 onclick 事件,onclick 事件对应回调函数里的 i 是取在运行时 i 的值。

[展开全文]
zhangbao · 07-15 · 33-this 0

for 循环从第二步起,就不再走第一步了,当条件判断不成立时结束。

[展开全文]

for (条件初始化; 条件判断; 条件变化)

[展开全文]

4. querySelectorAll()。

通过 CSS 选择器获取一组元素集合。

[展开全文]

3. querySelector()。

通过 CSS 选择器获取一个元素,当匹配多个时,也只取第一个。

[展开全文]

2. getElementsByClassName()

根据 class 属性获取元素集合,也是一个类数组。

兼容性不好,一直没用过。用 querySelector() 和 querySelectorAll()。

[展开全文]

1. getElementsByTagName()。

通过标签取元素,结果是一个集合,类数组,有 lenth 属性和数字索引。

[展开全文]

当加好(+)任意一边是字符串,那么它就是字符串连接的意思。

[展开全文]

点操作符(.)后跟真正的属性名称,不能跟变量名;[] 操作符中可用变量,也可用真正属性名称。

[展开全文]

元素样式属性获取:

1. element.style.propName。

2. element.style['prop-name']。

[展开全文]

匿名函数不能直接声明。

匿名函数以赋值形式出现,以事件回调函数形式出现。

[展开全文]

 querySelectorAll(css的选择器)
 通过css选择器获取到一组元素  它获取到的也是一组元素,它也是一个类数组
 主语
document            从整个页面中去获取一组元素
父级                从父级下去获取一组元素

[展开全文]

 querySelector(css选择器)
 通过css选择器去获取一个元素 它获取到的只有一个元素,如果说有重复的,那它只取第一个

主语
document            从整个文档里去获取元素
父级                从父级里去获取元素

[展开全文]

getElementsByClassName(class名称)
 通过class去获取到一组元素  获取到的结果也是一个类数组
主语
document        从整个文档里去获取class元素
父级            从父级下去获取class元素

 

[展开全文]

document.getElementById(id名称)
 通过id名称去获取一个元素,它只有一个主语,document(整个文档)

getElementsByTagName(标签名称)
 通过标签名称去获取一组元素,它获取到的是一组元素
主语(限制范围):
   document            从整个文档中去获取一组元素
     父级                从父级下面去获取一级元素

 获取到的是一个集合,类数组
 类数组:类似数组,但是数组中的一些方法,它没有
 它只具备数组中的length属性,以及每个数据都会有一个自己对应的下标

 怎么取其它一个元素
用下标的方法去获取其中一个元素
 

[展开全文]

innerHTML

  1. 获取到是一个标签对里的所有内容
  2.  如果标签对当中有其它的标签,那一样会拿的到
  3.   在给innerHTML设置值的时候,如果这个值里面有html标签,那放到网页当中,会把它解析成一个真正的html标签

href        连接的地址

 src        图片的地址

href与src取到的是绝对地址,不是属性里的值

切记不要拿href与src取到的值去做判断 

[展开全文]

授课教师

海棠学院金牌讲师-陈学辉

学员动态

black_keys 开始学习课时 36-javascript选项...
black_keys 开始学习课时 35-javascript选项...
black_keys 开始学习课时 34-自定义属性
black_keys 开始学习课时 33-this