JS入门/基本语法和属性(免费)

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

vip

变量命名规则:

1、允许字母、数字、下划线(_)、美元符($) 任意组合而成;

2、不允许数字开头

3、不允许使用关键字和保留字

关键字:当前语法中正在使用的单词

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

 

变量命名风格:

1、语义化

2、驼峰命名

大驼峰:首字母就大写

小驼峰:从第二个单词开始首字母大写,比如getElementById

[展开全文]

页面的代码一般是从上到下,从左到右的加载

 

script标签放在head标签里,当js代码需要获取页面中的元素的时候,这时候js代码放在元素的前面,需要加    window.onload=function(){}

[展开全文]

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';

精简了代码哦~

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

[展开全文]

授课教师

金牌讲师

学员动态

ONLY丶 学完了课时 2-js简单示例
ONLY丶 开始学习课时 2-js简单示例
ONLY丶 学完了课时 1-初识JavaScript
ONLY丶 开始学习课时 1-初识JavaScript