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

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

vip

驱蚊器无

 

[展开全文]

console.log()

 

dsafdsakfasfhjk

[展开全文]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				border: 1px solid #FF0000;
				display: block;
			}
		</style>
		<script>
			window.onload=function(){
				var btn=document.getElementById('btn');
				var box=document.getElementById('box');
				var on='block';
				btn.onclick=function(){
					if(on=='none'){
						box.style.display='block';
						on='block';
					}else{
						box.style.display="none";
						on='none';
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="按钮" />
		<div id="box"></div>
	</body>
</html>

 

[展开全文]

变量命名规则:

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页面添加交互行为
  • 可与服务器进行通信
[展开全文]
fprint · 2016-09-16 · 1-初识JavaScript 0

  需求:

    点击按钮显示对应的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 · 2016-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>

 

[展开全文]
zhangbao · 2016-09-07 · 25-querySelector 0

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>

 

[展开全文]