本文轉載自：https://blog.csdn.net/xiaogeldx/article/details/85390757 註 在pycharm中快速註釋HTML的方法（用於註釋方法不正確時）： File Settings Languages&Frameworks Python Template ...
本文轉載自：https://blog.csdn.net/xiaogeldx/article/details/85390757
註
- 在pycharm中快速註釋HTML的方法（用於註釋方法不正確時）：
File--Settings--Languages&Frameworks--Python Template Languages--Template Languages改為None，HTML和JavaScript註釋方法就都正確了
JavaScript基礎知識
- 網頁三要素：HTML，css，js
- JavaScript和Java沒有任何關係，最多語法看起來有點像
- JavaScript原名ivescript，是一門動態類型，弱類型基於原型的腳本語言
- 和HTML複合使用，不能單獨使用
大部分瀏覽器都支持
JavaScript作用：
- 頁面特效
- 前後交互
後臺開發（node）
JavaScript寫在哪裡
- 寫在script標簽里
外部js文件引入
寫在script標簽里
1. <head> <meta charset="UTF-8"> <title>try</title> <script> alert("wer"); </script> </head> <body> <div> <input type="button" value="點我" onclick="alert('bug')"> </div> 2. <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div> <input type="button" value="點我" onclick="alert('bug')"> </div> <script> alert("wer"); </script>
外部的js文件內，然後引入
<head> <meta charset="UTF-8"> <title>try</title> <script src="js/a.js"></script> </head> <body> <div> <input type="button" value="點我" onclick="alert('bug')"> </div>a.js的代碼:
alert("wer");JS一些註意事項
- 嚴格區分大小寫
- 每一行完整語句後面加分號
- 變數名不能使用關鍵字和保留字
- 代碼要縮進，保持可讀性
註釋用//
JS修改元素內容
- 首先獲取id為xxx的元素 document.getElementByld(" ")
- var 是js定義變數的關鍵字,創建（聲明變數），如果不加為全局變數
innerHTML和innerText可以修改/獲取
JS獲取元素
通過id獲取元素:id
document.getElementById(" ");通過class名字獲取元素:class
document getElementsByClassName(" ");通過標簽名獲取元素:tagName
document.getElementsByTagName(" ");通過name的屬性獲取元素，一般用於input:name
document.getElementsByName(" ");通過css選擇器獲取一個
document.querySelector(" ");通過css選擇器獲取所有
document.querySelectorAll(" ");案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <p id="p1"><span>111</span></p> <p class="c1">2222</p> <span name="span1">3333</span> </div> <div class="div2"> <p class="c1">5555</p> <span name="span1">6666</span> <p name="span1">7777</p> <span class="c1">8888</span> </div> <div> <p>9999</p> <span>0000</span> </div> <script type="text/javascript"> //通過id獲取元素,一個網頁中一個id命名使用一次,所以不用加索引 var a = document.getElementById('p1'); a.onclick = function () { alert('bug'); }; //通過標簽名獲取元素,需要加索引 var b = document.getElementsByTagName('span')[0]; b.onclick = function () { alert('bug'); }; // 通過name獲取元素,需要加索引 var c = document.getElementsByName('span1')[1]; c.onclick = function () { alert('bug'); } // 通過classname獲取元素,需要加索引 var d = document.getElementsByClassName('c1')[1]; d.onclick = function () { alert('bug'); }; // 通過css選擇器獲取一個元素 // 單獨的標簽獲取第一個,如果選擇器里還嵌套標簽,第一個選擇器裡面的所有標簽都能獲取,不能索引 // 選div時,第一個div標簽里的標簽都能獲取 var e = document.querySelector('div'); e.onclick = function(){ alert('bug'); }; // 通過class標簽獲取所有 // 此時獲取的是id為div1下的所有的span標簽 // div標簽里嵌套其他標簽時需要索引,表示第幾個div里的所有標簽都可以獲取 // 單獨的標簽可以直接索引獲取 // #div1或者.div2加上裡面的標簽需要索引獲取 var f = document.querySelectorAll('div')[0]; f.onclick = function () { alert('bug'); }; </script> </body> </html>JavaScript簡單事件
JS的基礎事件
- 單擊事件：onclick
- 雙擊事件:ondblclick
- 滑鼠劃入:onmouseenter
- 滑鼠划出:onmouseleave
視窗變化:onresize
// 瀏覽器視窗有變化時就會出現 window.onresize = function () { alert("3245"); };改變下拉框:onchange
<select> <option value="1">蘋果</option> <option value="1">橘子</option> <option value="1">橙子</option> </select> <script type="text/javascript"> var h = document.getElementsByTagName('select')[0]; //改變下拉框里的值就會彈出 h.onchange = function () { alert('改變了'); }; </script>操作標簽屬性
合法屬性的增刪改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div> <p id="p1" class="s1">我是一句話</p> </div> <script type="text/javascript"> var a = document.getElementById("p1"); // 增/改：無則增，有則改 a.className="hahaha"; // 查 console.log(a.className); // 刪除 a.removeAttribute("class"); console.log(a); </script> </body> </html>自定義屬性的增刪改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <di <p id="p1" class="s1">我是一句話</p> </div> <script type="text/javascript"> var a = document.getElementById("p1"); // 增/改 無則增，有則改 a.setAttribute("age","m"); // 查，查到返回true，沒查到返回false console.log(a.hasAttribute("age")); // 刪除 a.removeAttribute("age"); console.log(a); </script> </body> </html>JS修改樣式
- Obj.style.變數=變數值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue"> <p id="p1" class="s1">我是一句話</p> </div> <script type="text/javascript"> var b = document.getElementById("div2"); b.style.width = "50px"; b.style.height = "50px"; console.log(b) </Script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue"> <p id="p1" class="s1">我是一句話</p> </div> <script type="text/javascript"> var a = document.getElementById("div2"); var b = document.getElementById("div2"); b.onclick=function() { a.style.width = "50px"; a.style.height = "50px"; } console.log(b) </Script> </body> </html>數據類型
js提供了一種檢測當前變數的數據類型的方法，也就是typeof關鍵字
JS的數據類型
五種基本類型＋object（複雜型）
Number類型
Number類型包含整數和浮點數（浮點數數值必須包含一個小數點，且小數點後面至少有一位數字）兩種值
var a = 123; console.log(typeof a);- NaN:非數字類型
isNaN() 函數用於檢查其參數是否是非數字值
isNaN(123) //false isNaN("hello") //trueString類型
- 字元串有length屬性
- 字元串轉換：轉型函數String(),適用於任何數據類型（null,undefined 轉換後為null和undefined）；toString()方法（null,defined沒有toString()方法）
字元串要用引號
var a = "123"; console.log(typeof a);Boolean類型
該類型只有兩個值，true和false
var a = true; console.log(typeof a);Undefined類型
只有一個值，即undefined值。使用var聲明瞭變數，但未給變數初始化值，那麼這個變數的值就是undefined
var a; console.log(typeof a);Null類型
null類型被看做空對象指針，前文說到null類型也是空的對象引用
var a = null; //object console.log(typeof a);null類型進行typeof操作符後，結果是object，原因在於null類型被當做一個空對象引用
Object類型
js中對象是一組屬性與方法的集合,這裡就要說到引用類型了，引用類型是一種數據結構，用於將數據和功能組織在一起,引用類型有時候也被稱為對象定義，因為它們描述的是一類對象所具有的屬性和方法
引用類型
Object類型
- 我們看到的大多數類型值都是Object類型的實例
- 創建Object實例的方式有兩種
第一種是使用new操作符後跟Object構造函數，如下所示
var person = new Object(); person.name = "Micheal"; person.age = 24;第二種方式是使用對象字面量表示法，如下所示
var person = { name : "Micheal", age : 24 };Array類型
- 數組的每一項可以用來保存任何類型的數據，也就是說，可以用數組的第一個位置來保存字元串，第二個位置保存數值，第三個位置保存對象等等
- 數組的大小是可以動態調整的
- 創建數組的基本方式有兩種
第一種是使用Array構造函數，如下所示
var colors = new Array("red","blue","yellow");第二種是使用數組字面量表示法，如下所示
var colors = ["red","blue","yellow"];Function類型
每個函數都是Function類型的實例，而且都與其他引用類型一樣具有屬性和方法，函數通常是使用函數聲明語法定義的，如下所示
function sum(num1,num2){ return num1 + num2; };這和使用函數表達式定義函數的方式相差無幾
var sun = function (){ return sum1 + sum2; };案例
var name = 'xiaoge'; alert(typeof name);//string var age = 15; alert(typeof age);//number var flag = true; alert(typeof flag);//boolean var a;//undefined alert(typeof a); var b = null; alert(typeof b);//object var arr = [1,2,3];//object alert(typeof arr); var user = { name:'xiaoge', age:18 }; alert(typeof user);//object alert(typeof console.log());//undefined var say = function () { alert(name+'很帥'); }; alert(typeof say);//function alert(say())//xiaoge很帥//undefined練習
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/test.css"> <script src="js/test.js"></script> </head> <body> <div class="d1"> 屬性名：<input type="text" class="an"><br> 屬性值：<input type="text" class="av"><br> <input type="button" value="設置" class="set1"> </div> <div class="d2" style="width: 200px; height: 200px; background-color: yellow; line-height: 200px; text-align: center;">我就是我</div> <script type="text/javascript"> var moumov = document.getElementsByClassName('d2')[0]; moumov.onmouseenter = function () { moumov.innerText = '是我還是我'; moumov.style.background = 'blue'; }; moumov.onmouseleave = function () { moumov.innerText = '我就是我'; moumov.style.background = 'yellow'; }; var inp = document.getElementsByTagName('input'); inp[2].onclick = function () { var attr = inp[0].value; var attrs = inp[1].value; moumov.style[attr] = attrs; }; </script> </body> </html>
