前端三大件之——JavaScript引入及获取页面元素的方式

原生Js与JQuery

原生JS： 学习过前端的朋友们都知道在生成前端页面时除了用于页面内容显示的html和控制html显示样式的 css外，还有一种也能达到更改页面显示样式的效果，那就是JavaScript（我们常称 Js）。
JavaScript是运行在浏览器端的脚本语言，除了笔者上述的改变页面显示样式的效果外，最主要的作用是解决前端页面与用户间的交互问题。

Js引入页面的方式

1. 行内式
   这里的行内式与css行内式类似，都是在标签内部定义，这种引入方式主要用于事件。

   <button onclick="alert('内容!');">点击弹出'内容'</button>
   

2. 嵌入式
   js嵌入式与css嵌入式相同，都是在页面中进行引入，可以将js代码写入到body结束标签外面，也可将其写入到title标签中。

   <script type="text/javascript">
   	alert('内容');
   </script>
   

3. 外部引入(外链式)
   外部引入需要单独写一份js文件，文件内部只有js代码，使用时在title标签里进行引入即可。

   //这里引入的是js文件中的myjs.js文件,如果js文件与html文件在同一级目录下引入可以这样写：src="./myjs.js"
   <script type="text/javascript" src="js/myjs.js"></script>
   

JS的类型

我们常说的JS是指在浏览器端的脚本语言的统称(也有人指的是原生JS)。原生JS指的是遵循ECMAscript标准的javascript，它不依赖于任何框架，是依托于浏览器标准引擎的脚本语言。除原生JS外还有集成的框架——JQuery。jQuery是目前使用最广泛的javascript函数库。相较于原生JS，JQuery代码实现起来更加简洁，兼容性
更好，更利于开发。

原生JS实现交互

Js前面我们说了Js的作用是解决前端和用户之间的交互问题，那么交互又是如何实现的呢？想要完成交互就需要获取页面元素（标签），Js实现前端与用户之间的交互主要通过是获取页面元素来完成的。
需要注意的一点是: JS如果是在title标签中，要实现交互动作时需要导入入口函数，如果是写于body结束标签后面则不需要。

//原生JS入口函数
<script type="text/javascript">
	// function匿名函数，定义的函数可以不给名称，也可以实现相应的功能
	window.onload = function(){
		//代码片段
	}
</script>

原生JS获取标签的方式有三种：

1. 获取标签名

   <script type="text/javascript">
   	window.onload = function(){
   		document.getElementsByTagName("标签名");
   	}
   </script>
   

2. 获取类名(给标签添加类名)

   <script type="text/javascript">
   	window.onload = function(){
   		document.getElementsByClassName("类名");
   	}
   </script>
   

3. 获取id名(给标签添加id名)

   <script type="text/javascript">
   	window.onload = function(){
   		document.getElementById("id名");
   	}
   </script>
   

可以通过以上三种方式获取元素来完成交互，这里推荐使用第三种(获取id名)来获取元素，前两种兼容性较差。

获取了元素之后需要对其设置相应的行为动作才能完成交互。

1. js控制html内容

   // 通过获取id，调用innerHTML方法改变该标签内部的内容
   <script type="text/javascript">
   	window.onload = function(){
   		// document.getElementById("id名").innerHTML="内容";
   		document.getElementById("box").innerHTML="修改的内容";
   	}
   </script>
   

2. js控制css样式

   // 通过获取id，调用style方法改变该标签的相应的属性，并设置该属性对应的值
   <script type="text/javascript">
   	window.onload = function(){
   		// document.getElementById("id名").style.属性="内容";
   		document.getElementById("box").style.fontSize="32px";
   	}
   </script>
   

JQuery实现交互

如果要使用JQuery代码需要导入JQuery的函数库，导入后才可以使自己写的JQuery代码生效，如果Jquery代码是写在title标签中，或者从title标签中引入的话，实现交互动作也需要导入入口函数，如果是写于body结束标签后面则不需要。
链接: JQuery函数库下载

// 导入JQuery函数库
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
<script type="text/javascript">
	//JQuery入口函数
	$(document).ready(function(){
	// 代码片段
});
</script>

简写方式：
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
<script type="text/javascript">
	$(function(){
	// 代码片段
});
</script>

JQuery获取标签的方式也是三种：

1. 获取标签名

   <script type="text/javascript">
   	$(function(){
   	$('标签名')
   });
   </script>
   

2. 获取类名(给标签添加类名)

   <script type="text/javascript">
   	$(function(){
   	$('.类名')
   });
   </script>
   

3. 获取id名(给标签添加id名)

   <script type="text/javascript">
   	$(function(){
   	$('#id名')
   });
   </script>
   

以上三种方式都可以获取元素来完成交互。

JQuery设置相应的行为动作完成交互。

1. JQuery控制html内容

   // 通过获取id，调用html()方法改变该标签内部的内容
   <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
   <script type="text/javascript">
   	// JQuery入口函数
   	$(function(){
   		$('#box').html(‘<p>我是设置的文字</p>’);
   	});
   </script>
   

2. JQuery控制css样式

   // 通过获取id，调用css()方法改变该标签的相应的属性，并设置该属性对应的值
   <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
   <script type="text/javascript">
   	// JQuery入口函数
   	$(function(){
   		// 多属性：表示控制（如果要改变多个样式，可以以字典的形式书写多个css键值对，）
   		$('#box').css(‘color’,'blue');
   		// 单属性：表示访问
   		$('#box').css(‘color’);
   	});
   </script>
   

最后：

希望你看了此篇有所收获，欢迎交流！如有错误，欢迎指正！