说明：关于JavaScript的文章我把知识点都以注释放在代码里所以说代码注释真的很重要：

Topic 1 ：获取元素的方法：

获取元素的方法有五种：

1 . 根据id获取元素：

2 . 根据标签名字获取元素：

代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素</title>
</head>

<body>
	<div id="box">123344</div>
	<div> wsajdksajd</div>
	<p id="p">aha</p>
	<script>
		//console.dir是打印对象包括对应的方法和属性
		//console.log是打印对象对应的标签  但是现在好像二者都可以打印出对象的方法和属性了
		//1.根据id获取元素   如果存在就返回null
		var div1 = document.getElementById('box');
		console.log(div1);
		
		//类型为HTMLCollection  元素的集合
		//他是一个伪数组  他不具备数组的方法
		//2.根据标签名获取元素  注意这里的element加了一个s  因为他的类型为HTMLCollection 
		var div2 = document.getElementsByTagName('div');
		console.log(div2);
		//遍历这个伪数组
		for(var i = 0; i < div2.length; i++){
			console.dir(div2[i]);
		}
		
		var arr = [];
		console.log(arr);
		
		//我们打印对象的类型
		//我们先用typeof来试一下   发现他不能获取对象的具体类型  他获取对象的类型始终是object
		//我们这里的重点是让你知道对象室友类型的
		
		console.log(typeof(arr));
		console.log(arr.constructor); //他打印出来的结果是：function Array()
		
		
		
	</script>
</body>
</html>

3. 根据类名获取：

4 . 根据标签的name属性来获取：

代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素02</title>
</head>

<body>
	<form id="frm" action="1.php">
    <input type="text" name="name"><br>
    <input type="text" name="pwd"><br>

    <input type="radio" name="sex">
    <input class="a" type="radio" name="sex">
    <input type="submit" value="登录">
  </form>

  <input type="text" name="test"><br>
  
  <script>
    // var frm = document.getElementById('frm');
    // 获取到的是form中的所有的input标签
    // var radios = frm.getElementsByTagName('input');


    //  NodeList 类型
    //  节点的集合
    // var radios = document.getElementsByName('sex');
    // console.log(radios);

    // // IE9以后才支持的  兼容性问题
    // document.getElementsByClassName();


    // IE8以后才执行的
    var frm = document.querySelector('#frm');
    var texts = frm.querySelectorAll('input[type=text]');
    console.log(texts);
  </script>
</body>
</html>

5 . 根据选择器来获取元素：（这个是我们以后会经常用的重点）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素03</title>
</head>

<body>
	<div>1111</div>
  <div class="a">22222</div>
  <div class="a">66666</div>
  <div>33333</div>
  <p>pppp</p>
  <span>span</span>
  <script>
    // 返回的是集合
    // var div = document.getElementsByClassName();

    // HTML5 中新增的获取元素的方法
    // query 查询 Selector 选择器

    // 查找一个元素，如果页面上有多个符合条件的元素，只返回第一个
    // var div = document.querySelector('.a');
    // console.log(div);

    // 返回的是NodeList的集合 （当前情况依然是元素的集合）
    var divs = document.querySelectorAll('.a');
    console.log(divs);
  </script>
</body>
</html>

Topic 2 ：事件：

1、事件的概念：

JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。

简单的来举个例子就是：我们在点window的菜单栏的时候，菜单栏会弹出来这个过程就是一个事件；

网页示例：

点了之后：

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>

<body>
	<input type="button" value="点我会发生意想不到的事情" id="btn"/>
	
	<script>
		//根据id获取按钮  元素
		var btn = document.getElementById('btn');
		//给按钮注册事件
		btn.onclick = function(){
			//匿名函数
			alert( "你点到我了  我要跟你回家");
		}
		
		//事件有三要素：
		//事件源： 触发事件的元素  btn
		//事件名称： click  （注意要把on给去掉）
		//事件处理函数： 事件触发之后会干什么  function（）{}里面的内容
		//注意：javascript的动态特性   可以随时给对象增加成员
	</script>
</body>
</html>

注意：
       //事件有三要素：
       //事件源：触发事件的元素 btn
       //事件名称： click （注意要把on给去掉）
       //事件处理函数：事件触发之后会干什么 function（）{}里面的内容
       //注意：javascript的动态特性可以随时给对象增加成员

2 . 超链接事件的演示：

我们为什么要用超链接事件呢因为超链接事件比按钮事件样式好看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接事件</title>
</head>

<body>
	<a href="http://www.baidu.com" id="link">点我跳转到百度</a><br>

	<a href="http://www.baidu.com">我是一个错误的示范 </a>
	<script>
		//获取元素
		var link = document.getElementById('link');
		//注意下面这一种是一个错误的示范  因为我们用document.getElementsByTagName('a');
		//得到的是一个集合  所以我们要是想用.onlick()的话就必须要获得这个集合里面的一个元素  那么就用下标呗
		var link1 = document.getElementsByTagName('a');
		link1.onclick = function(){//集合没有办法执行这一句了
			alert("我是一个错误的示范");
		}
		//注册事件
		link.onclick = function(){
			alert("哈哈，恭喜完成超链接时间");
			//注意我们的超链接是会跳转的  但是所以呢我们这里要加一个阻止这个程序继续执行的代码
			return false;
			//取消后续内容的执行了  他就不会跳转到百度了
		}
	</script>

</body>
</html>

3 . 事件的第一个案例

实现点一下按钮切换一个图片的功能：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>切换图片</title>
</head>

<body>
	
	<a id="link" href="#" >切换图片</a><br>
	<img id="img" src="images/a.jpg" width="500" height="375" alt="图片"/>
	<script>
		//元素的属性包含了标签对应的属性
		//也就是说元素（对象）封装了标签的属性  就是标签里面包含的id啦  width  alt都可以使用元素来进行获得
		
		//获取元素
		var link = document.getElementById('link');
		//注册事件
		var img = document.getElementById('img');
		var flag = 1;
		link.onclick = function(){
			if(flag === 1 ){
				flag = 2;
				img.src = 'images/a.jpg';
			}else{
				flag = 1;
				img.src = 'images/b.jpg';
			}
			
			return false;
		}
		
		//我们来打印一下img标签的宽和高  都可以打印出来的
		console.log(img.height);
		console.log(img.width);
	</script>
</body>
</html>

事件的第二个案例：

控制图片的显示与隐藏：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>控制图片的显示与隐藏</title>
	<style type="text/css">
		#box { width: 200px; height: 200px; background-color: pink; }
		.hidden { display: none; }
    	.show { display: block; }
	</style>
</head>

<body>
	<input id="btn" type="button" value="点我隐藏图片">
	<div id="box"></div>
	ESLint  检查代码规范的工具
	
	<script>
		
		//获取元素
		var btn = document.getElementById('btn');
		var box = document.getElementById('box');
		var isShow = true;
		//注册事件
		btn.onclick = function () {
			if (isShow) {
				isShow = false;
				box.className = 'hidden';
				btn.value = '点我显示图片';
			} else {
				//使图片隐藏
				isShow = true;
				box.className = 'show';
				btn.value = '点我隐藏图片';
			}
		}
	</script>
</body>
</html>

Topic 3 : 表单元素

表单元素包括（这个是我百度到的）:

HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框（SELECT），文本输入框（INPUT type=text），密码输入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），重置按钮、提交按钮、隐藏域、等等。

一、文本域<input type="text" name="text" value="" />

二、密码域

密码跟文本框类似，但是在里面输入的内容显示为圆点。<input type="password" name="text" value="" />

三、单选按钮

男人:<input type="radio" name="sex" value="male" /> Male<br />女人：<input type="radio" name="sex" value="female" /> Female

四、复选框

五、按钮

六、重置按钮

当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。<input type="reset" value="重置" />

七、提交按钮

当点击提交按钮时，浏览器将自动提交表单。<input type="submit" value="提交" />

八、隐藏域

隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在。<input type="hidden" value="我是一个隐藏域" />

九、上传域<input type="file" value="" />

十、图片按钮<input type="image" src="123.gif" />

十一、下拉列表<select><option value="0">0</option><option value="1">1</option><option value="2">2</option>例如：属性：disabled，可选值：disabled ，说明：规定禁用该下拉列表。

十二、label

abel 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如，当将单选按钮放在label内。则点击label内的文字也会触发单选按钮，而不必只是点中小圆点。

例如：

<label><input type="radio" name="male" />男人</label></p><label><input type="radio" name="male" />女人</label></p>十三、禁用（disabled）与只读（readonly）

禁用和只读属性。readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

禁用文本框：<input type="text" disabled="disabled" />

只读文本框: <input type="text" readonly="readonly" /></form>

十四、TextArea

十五、fieldset 定义域fieldset用于给表单元素分组，legend用于设置分组标题。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签，这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

Topic 4 ：元素的属性：

元素的属性：包括标签的属性

非表单（form）元素的属性： id src title href alt

表单元素的属性： name value type disabled checked selected

Topic 5 ：id选择器与class选择器：

id选择器以#开头，class选择器以 . 开头；

id选择器：由于我们为html元素指定id时，通常要保证id是唯一的(便于js中的getElementById的正常使用)，所以id选择器一般在一个页面中只能被单个的html元素引用。并且不能为一个html元素指定多个id选择器，试想一下，一个html元素怎么可能有多个id。

class选择器：class选择器可以被多个html元素使用，因为元素的class属性没有必要保证唯一性。另外一个html元素也可以有多个class属性值，值之间用","号隔开。如<p class="cls1,cls2"></p>是可以的。

Topic 6 ：显示与隐藏图片的优化与js中this的介绍与解析：

全部都在代码的注释里：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>控制图片的显示与隐藏优化</title>
	<style type="text/css">
		#box { width: 200px; height: 200px; background-color: pink; }
		.hidden { display: none; }
    	.show { display: block; }
	</style>
</head>

<body>
	<input id="btn" type="button" value="点我隐藏图片">
	<div id="box"></div>
	ESLint  检查代码规范的工具
	
	<script>
		
		//获取元素
		var btn = document.getElementById('btn');
		var isShow = true;
		//注册事件
		btn.onclick = function () {
			//我们把这个对象到这里在获取  用的时候获取  提高效率
			var box = document.getElementById('box');
			if (isShow) {
				isShow = false;
				box.className = 'hidden';
				//我们把原本的btn换成this省去找btn这一步  提高效率
				//事件处理函数中   this -->  指的是触发事件的对象  事件源
				this.value = '点我显示图片';
			} else {
				//使图片隐藏
				isShow = true;
				box.className = 'show';
				this.value = '点我隐藏图片';
			}
		}
		
		
		
		//this的盘点与解析
		//1.函数中的this   -->指的是window
		function fn () {
			console.log(this);
		}
		//注意我们定义函数后不调用是没有用的哈
		fn ();
		//2. 构造函数中的this  -->  指的是当前对象
		
		//3.方法中的this  -->  指的是调用该方法的对象
		var obj = {
			name: 'wang',//注意这个地方只能用逗号不能用分号；
			say: function () {
				console.log(this);
			}
		}
		obj.say();
		
		//4.事件处理函数中   this -->  指的是触发事件的对象  事件源
			
	</script>
</body>
</html>

JavaScript_获取元素_事件_事件的两个小案例_表单元素的组成_元素的属性_id选择器与类选择器的异同_代码的优化_js中this的解析_Unit_3;

说明：关于JavaScript的文章我把知识点都以注释放在代码里所以说代码注释真的很重要：

Topic 1 ：获取元素的方法：

Topic 2 ：事件：

Topic 3 : 表单元素

Topic 4 ：元素的属性：

Topic 5 ：id选择器与class选择器：

Topic 6 ：显示与隐藏图片的优化与js中this的介绍与解析：

猜你喜欢

JavaScript_获取元素_事件_事件的两个小案例_表单元素的组成_元素的属性_id选择器与类选择器的异同_代码的优化_js中this的解析_Unit_3;

说明：关于JavaScript的文章 我把知识点都以注释放在代码里 所以说代码注释真的很重要：

Topic 1 ：获取元素的方法 ：

Topic 2 ：事件：

Topic 3 : 表单元素

Topic 4 ：元素的属性：

Topic 5 ：id选择器与class选择器 ：

Topic 6 ：显示与隐藏图片的优化与js中this的介绍与解析 ：

猜你喜欢

说明：关于JavaScript的文章我把知识点都以注释放在代码里所以说代码注释真的很重要：

Topic 1 ：获取元素的方法：

Topic 5 ：id选择器与class选择器：

Topic 6 ：显示与隐藏图片的优化与js中this的介绍与解析：