JS入门/基本语法和属性-免费课

JS入门/基本语法和属性-免费课 扫二维码继续学习

vip

1 样式里的注释为“/*注释内容*/”,例如:

    <stype>

.box{width: 100px;}

/*注释内容*/

    </stype>

2 js里的注释有两种:

   a.//注释内容     //单行注释

   b./*注释内容*/      //多行注释

[展开全文]

js出现的位置:

行间

内嵌

外链js文件

[展开全文]

1   js的位置和css一样,分为行间丶内嵌丶外链。

2   外链时用<script src=""></script>引入外部文件。(css的外链则在<head></dead>间写<link rel="stylesheet" href="文件名.css" type="text/css">)

 

[展开全文]

满足不了我们的需求,给一个自己添加的属性,

 

 

 

[展开全文]

javaScript的组成:

ECMAScript(5.1):javaScript组成的语法和基本对象

DOM:文档对象模型,描述处理网页内容的方法盒接口

BOM:浏览器对象模型,描述与浏览器进行交互的方法和接口

javaScript特点:

跨平台的web脚本语言

向html页面添加交互行为

与服务器进行通信

[展开全文]

input type="button" id="btn" value="按钮"/

[展开全文]

1、JavaScript组成

  • ECMAScript
  • DOM
  • BOM

 

2、JavaScript的特点

  • 跨平台的web脚本语言
  • 向html页面添加交互行为
  • 可与服务器进行通信
[展开全文]

  需求:

    点击按钮显示对应的div,让其它的按钮背景色去掉,让其他的div都隐藏。

  关键点:

    /*如何取得上一个点击的input.

 分析

  1.获取到所有的按钮以及div

  2.给每一个按钮添加事件。

     1.把上一个点击的按钮背景色去掉。

     2.把上一个点击的按钮对应的DIV,让他隐藏

     3.给当前点击事件的按钮对应的div,让他显示。

*/

/*

  每一个按钮度对应一个div,他们的下标值都是相同的。

  如果取到一个下标值,那就能找到对应的按钮与div.

*/

[展开全文]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/util.js"></script>
		<script>
		window.onload = function () {
			var lis = document.querySelectorAll('.menu>li');
			for (var i = 0; i < lis.length; i++) {
				lis[i].onclick = function () {
					if (this.style.backgroundColor !== 'lightblue') {
						this.style.backgroundColor = 'lightblue'; // 淡蓝色
					} else {
						this.style.backgroundColor = '#FFF'; // 白色
					}
				}
			}
		}
		</script>
	</head>
	<body>
		<ul class="menu">
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
		</ul>
	</body>
</html>

 

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

点击某个选项卡时,要把上一个选项卡的选中样式去掉,所以引入了last对象,标记上一次被点击的对象。

上一个选项卡的选中样式去掉后,它对应的内容框也要隐藏,所以在给每个选项卡对象添加点击事件(onclick)时,额外的附加了一个自定义属性index,用来帮助选型卡找到它对应的内容框,然后把内容框隐藏。

一句话总结:引入last对象;为选项卡对象附加index属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.tab {
				border: 1px solid #000;
				border-bottom-color: #FFF;
				background-color: #FFF;
			}
			.tab-focus {
				background-color: blanchedalmond;
			}
			
			.conetent {
				display: none;
				min-width: 200px;
				min-height: 200px;
				box-shadow: 0 1px 1px #000;
			}	
		</style>
		<script src="js/util.js"></script>
		<script>
		window.onload = function () {
			var tabs = document.querySelectorAll('.tab');
			var contents = document.querySelectorAll('.conetent');
			var last = tabs[0]; // 用来去除上一个选项卡选中的样式(tab tab-focus)
			
			for (var i = 0; i < tabs.length; i++) {
				tabs[i].index = i; // 用来找选项卡对应的内容框
				tabs[i].onclick = function () {
					if (this !== last) {
						this.className = 'tab tab-focus';
						last.className = 'tab';
						contents[this.index].style.display = 'block';
						contents[last.index].style.display = 'none';
						last = this;
					}
				}
			}
			
			p(tabs);
			p(contents);
		}
		</script>
	</head>
	<body>
		<button class="tab tab-focus">选项1</button>
		<button class="tab">选项2</button>
		<button class="tab">选项3</button>
		<div class="conetent" style="display: block;">内容1</div>
		<div class="conetent">内容2</div>
		<div class="conetent">内容3</div>
	</body>
</html>

 

 

[展开全文]

querySelector()、querySelectorAll()

借助CSS选择器的威力获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*.menu>li:nth-child(2n-1) {
				background-color: #eee;
			}*/
		</style>
		<script src="js/util.js"></script>
		<script>
		window.onload = function () {
			var lis = document.querySelectorAll('.menu>li:nth-child(2n+1)');
			for (var i = 0; i < lis.length; i++) {
				lis[i].style.backgroundColor = '#eee';
			}
		}
		</script>
	</head>
	<body>
		<ul class="menu">
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
		</ul>
	</body>
</html>

 

[展开全文]

document.getElementByTagName()

通过标签名获取元素

document.getElementsByClassName()

通过类名获取一组元素(大IE8浏览器不支持)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		window.onload = function () {
			var lis = document.getElementsByTagName('li');
			for (var i = 0; i < lis.length; i++) {
				console.log(lis[i].innerHTML);
			}
			console.log(document.getElementsByClassName('sdf qwe')[0].innerHTML);
		}
		</script>
	</head>
	<body>
		
		<ul>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
		</ul>
		
		<div class="sdf qwe">o(∩_∩)o 哈哈</div>	
		
	</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		window.onload = function () {
			var prev = document.getElementById('prev');
			var next = document.getElementById('next');
			var pic = document.getElementById('pic');
			
			var pivDir = 'img/';
			
			var n = 0;
			var pics = [
				'1.jpg',
				'2.jpg',
				'3.jpg'
			]
			
			next.onclick = function () {
				if (++n === pics.length) {
					n = 0;
				}
				pic.src = pivDir + pics[n];
			}
			
			prev.onclick = function () {
				if (--n === -1) {
					n = pics.length-1; // n 是数组的索引,数组最后一个元素是pics[pics.length-1]
				}
				pic.src = pivDir + pics[n];
			}
		}
			
		</script>
	</head>
	<body>
		<input type="button" id="prev" value="上一张"/>
		<input type="button" id="next" value="下一张"/><br />
		<img id="pic" src="img/1.jpg"/>
	</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		window.onload = function () {
			var text = document.getElementById('text');
			var btn = document.getElementById('btn');
			var box = document.getElementById('box');
			
			btn.onclick = function () {
				box.innerHTML = box.innerHTML + '<p>' + text.value + '</p>';
			}
		}
			
		</script>
	</head>
	<body>
		<input type="text" id="text" value=""/>
		<button id="btn">btn</button>
		<div id="box"></div>
	</body>
</html>

 

[展开全文]

JavaScript Function

 

 

[展开全文]

Variables Examples

var box = document.getElementById('box');

box.style.width='200px';

box.style.height='200px';

box.style.margin='200px';

box.style.padding='200px';

精简了代码哦~

变量名重用,减少了获取元素的成本。

[展开全文]

Variable Naming Rules

1. 范围:字母、数字、下划线(_)和美元符($)

2. 禁止以数字开头

3. 禁止使用关键字和保留字

关键字:当前语言使用的语法单词

保留字:将来可能在语法中使用的单词

变量命名语义化(Semantics)

如:document.getElementById('idName');

--------

JavaScript所有关键字:break do in typeof case else instanceof var catch export new void class extends return while const finally super with continue for switch yield debugger function this default if throw delete import try 

JavaScript保留字是指Keyword、FutureReservedWord、NullLiteral、BooleanLiteral这些内容里所包含的单词

 

[展开全文]

JavaScript Varilable

// var 变量名 = 值;

var foo = 25;

console.log(foo);

 

 

[展开全文]
zhangbao · 08-22 · 4-变量 0

授课教师

金牌讲师

学员动态