原生Js與JQuery
原生JS： 學習過前端的朋友們都知道在生成前端頁面時除了用於頁面內容顯示的html和控制html顯示樣式的 css外，還有一種也能達到更改頁面顯示樣式的效果，那就是JavaScript（我們常稱 Js）。
JavaScript是運行在瀏覽器端的腳本語言，除了筆者上述的改變頁面顯示樣式的效果外，最主要的作用是解決前端頁面與用戶間的交互問題。
Js引入頁面的方式
- 行內式
這裏的行內式與css行內式類似，都是在標籤內部定義，這種引入方式主要用於事件。<button onclick="alert('內容!');">點擊彈出'內容'</button> - 嵌入式
js嵌入式與css嵌入式相同，都是在頁面中進行引入，可以將js代碼寫入到body結束標籤外面，也可將其寫入到title標籤中。<script type="text/javascript"> alert('內容'); </script> - 外部引入(外鏈式)
外部引入需要單獨寫一份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獲取標籤的方式有三種：
- 獲取標籤名
<script type="text/javascript"> window.onload = function(){ document.getElementsByTagName("標籤名"); } </script> - 獲取類名(給標籤添加類名)
<script type="text/javascript"> window.onload = function(){ document.getElementsByClassName("類名"); } </script> - 獲取id名(給標籤添加id名)
<script type="text/javascript"> window.onload = function(){ document.getElementById("id名"); } </script>
可以通過以上三種方式獲取元素來完成交互，這裏推薦使用第三種(獲取id名)來獲取元素，前兩種兼容性較差。
獲取了元素之後需要對其設置相應的行爲動作才能完成交互。
-
js控制html內容
// 通過獲取id，調用innerHTML方法改變該標籤內部的內容 <script type="text/javascript"> window.onload = function(){ // document.getElementById("id名").innerHTML="內容"; document.getElementById("box").innerHTML="修改的內容"; } </script> -
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獲取標籤的方式也是三種：
- 獲取標籤名
<script type="text/javascript"> $(function(){ $('標籤名') }); </script> - 獲取類名(給標籤添加類名)
<script type="text/javascript"> $(function(){ $('.類名') }); </script> - 獲取id名(給標籤添加id名)
<script type="text/javascript"> $(function(){ $('#id名') }); </script>
以上三種方式都可以獲取元素來完成交互。
JQuery設置相應的行爲動作完成交互。
-
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> -
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>
最後：
希望你看了此篇有所收穫，歡迎交流！如有錯誤，歡迎指正！