JavaScript從入門到放棄
2020-08-11 19:14:16
JavaScript從入門到放棄
1.什麼是JS
是一種流行的指令碼語言，
Java和JS沒有什麼關係
1.2環境
1.3偵錯
執行html
控制檯偵錯
console.log()變數列印輸出
斷點
2.快速入門
2.1引入JavaScript
1.內部標籤
2.外部引入
2.2基本語法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- JavaScript 嚴格區分大小寫-->
<script>
// 1 定義變數 變數型別 變數名 = 變數值
var num = 1;
// alert(num)
// 2 條件控制
if (num>60 && num<70){
alert('60~70')
}else if(num>70 && num<80){
alert('70~80')
}else {
alert('other')
}
//console.log()在瀏覽器控制檯列印輸出變數
</script>
</head>
<body>
</body>
</html>
2.3數據型別
數值 文字 圖形 音訊 視訊。。。
變數
var a //不要數位開頭 $ 和 _ 可以開頭
numbe0r
js不區分小數和整數 number
123 // 整數123
123.1 // 浮點數123.1
1.123e3 //科學計數法
-99 //負數
NaN //not a number
Infinity //無窮大
字串
'abc' --> "abc"
'\n' 跳脫字元
bool
true false
邏輯運算
&& 與
|| 或
! 非
比較運算子
= 賦值
== 等於（型別不一樣，值一樣，也會判斷爲true）
=== 絕對等於 （型別一樣，值一樣，結果爲true）
加持不適用
須知：
- NaN 與所有的數值都不相等，包括自己
- 只能通過isNaN()來判斷是否爲NaN
浮點數問題
console.log((1/3)===(1-2/3)) 爲false
儘量避免使用浮點數進行運算，存在精度問題
console.log(math.abs(1/3-(1-2/3))<0.0000001) 可以判斷
null和undefined
- null空
- undefined未定義
陣列
Java的陣列必須是一系列型別相同的物件， js中不需要這樣，沒有這麼嚴謹
var arr = [1,2,3,'hell0',null,true] //這樣是可以的
取陣列下標，如果越界了，就會報
undefined
物件
物件是大括號，陣列是中括號
每個屬性之間都好隔開，最後一個不需要
var person = {
name: 'zhangsan',
age: '12',
tags: ['js', 'web', 'java', '...']
}
取物件的值
person.name
>'zhangsan'
person.age
>12
2.4嚴格檢查模式
‘use strict’;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：idea需要設定支援es6語法
'use strict'; 嚴格檢查模式， 預防JavaScript的隨意性導致的一些問題
必須寫在JavaScript的第一行
區域性變數建議使用let定義
-->
<script>
'use strict';
// 全域性變數
let i = 1;
</script>
</head>
<body>
</body>
</html>
3.數據型別
3.1字串
1.正常字串使用單引號或者單引號包裹
2.注意跳脫字元
\'
\n
\t
\u4ead \u#### //unicode 編碼
\x41 AscII字元
3.多行字串編寫
//table 上的那個引號
var msg = `hello
world
java
javascript`
4.模板字串
let name = 'java';
let age = 'python';
let msg = `你好,${name}`
console.log(msg)
5.字串長度
let student = 'student';
console.log(student.length) //可以點出來很多屬性
console.log(student[0]) //可以列印出字串的元素
6.字串的可變性，不可變
7.大小寫轉化
console.log(student.toUpperCase()); //注意這裏是方法不是屬性
8.獲取下表
console.log(student.indexOf('t')); //獲取指定的下標
9.字串擷取 [) 前閉後開
console.log(student.substring(2));
>udent
console.log(student.substring(1,3));
>tu
3.2陣列
Array可以包含任意的數據型別
let arr = [1,2,3,4,5] //通過下標取值和賦值
arr[0]
arr[] = 2
1.長度
arr.length
注意：加入給arr.length賦值，陣列大小就會發生變化，如果減小賦值，元素丟失
2.indexof
arr.indexOf(2) //2的index=1
>1
字串的‘1’和數位1不同
3.slice（）擷取陣列的一部分，返回一個新陣列, [) 前閉後開
arr.slice(3)
>[4, 5]
arr.slice(1,3)
>[2, 3] //[) 前閉後開
4.push, pop
push:壓入元素到尾部
pop：彈出尾部的元素
5.unshift（）和shift（）頭部
unshift:壓入元素到頭部
shift：彈出頭部的元素
6.排序
arr.sort()
>[2, 3, 4, 5, "a", "y"]
7.元素反轉
arr.reverse()
>["y", "a", 5, 4, 3, 2]
8.陣列拼接
arr.concat([‘A’,‘B’,‘C’])
[「y」, 「a」, 5, 4, 3, 2, 「A」, 「B」, 「C」]
arr
[「y」, 「a」, 5, 4, 3, 2]
注意：並不改變原來的陣列，只是返回一個新的陣列
9.連線符（陣列2字串）
arr.join('-') //使用特定的字串拼接陣列
>"y-a-5-4-3-2"
10.多維陣列
arr = [[1,2],[3,2],['5','a']]
arr[1][0]
>3
3.3物件
若幹個鍵值對，其中所有的鍵都是字串，值是任意物件！！
js中的物件使用{}括起來
let person = {
屬性名：屬性值，
屬性名：屬性值，
屬性名：屬性值 //最後一個不需要逗號
}
let person = {
name: 'java',
tags: 'python',
email: '[email protected]',
score: 60
}
person.name
>"java"
1.物件賦值
person.name = 'javascript'
>"javascript"
person.name
>"javascript"
2.使用一個不存在的物件屬性，不會報錯
person.age
>undefined
3.動態的刪減屬性 delete
person
>{name: "javascript", tags: "python", email: "[email protected]", score: 60}
delete person.name
>true
person
>{tags: "python", email: "[email protected]", score: 60}
4.動態新增屬性, 直接給新的屬性賦值即可
person.haha = "haha"
>"haha"
person
>{tags: "python", email: "[email protected]", score: 60, haha: "haha"}
5.判斷屬性值是否存在
person['tags'] //取屬性值
>"python"
person['tags'] //取屬性值
>"python"
// 繼承
'toString' in person
>true
6.判斷一個屬性是否是這個物件自身擁有的 hasOwnProperty()
person
>{tags: "python", email: "[email protected]", score: 60, haha: "haha"}
person.hasOwnProperty('toString')
>false
person.hasOwnProperty('tags')
>true
3.4流程控制
if 判斷
if (age>3){
alert('haha')
}else {
alert('kuwa')
}
while 回圈，避免程式死回圈
while (age<100){
age = age + 1;
console.log(age)
}
do {
age = age + 1;
console.log(age)
}while(age<100)
for回圈
（輸入foui等一下回車可以自動構建回圈格式）
for (let i = 0; i < 100; i++) {
console.log(i)
}
forEach回圈
let age = [112,14,54,65,85,12];
age.forEach(function (value) {
console.log(value)
})
for…in…
for (let num in age){
if (age.hasOwnProperty(num)){
console.log('存在')
console.log(age[num])
}
}
3.5 Map和Set
ES6 的新特性
Map:
//ES6
//學生的成績和學生的名字
let map = new Map([['tom',100],['jack',90],['wang',98]]);
let name = map.get('tom') // 通過key獲得value
map.set('zhao',89) // 增加新的鍵值對
map.delete('tom') // 刪除鍵值對
console.log(map)
Set: 無序不重複的集合
let set = new Set([3,1,1,1,1,1,2]); // set可以去重
set.add(8) //新增
set.delete(1) // 刪掉了所有的1
console.log(set)
console.log(set.has(3)) // 判斷元素是否在
3.6iterator
遍歷陣列
//通過for of 列印 /for in 爲下標
let arr = [1,2,3]
for (let x of arr){
console.log(x)
}
遍歷Map
let map = new Map([['tom',100],['jack',90],['wang',98]]);
for (let x of map){
console.log(x)
}
遍歷Set
for (let x of set){
console.log(x) //去重後的結果
}
4.函數
4.1定義函數
方法與函數之間的區別
定義方式一
絕對值函數
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
控制檯呼叫
一旦執行到return代表函數結束，返回結果
如果沒有執行return，函數也會返回結果，結果就是undefined
定義方式二
var abs = function(x){ //這是一個匿名函數，但是可以把結果賦值給abs，通過abs可以呼叫函數
if(x>=0){
return x;
}else{
return -x;
}
}
方式一和方式二等價
呼叫函數
abs(10) //10
abs(-10) //10
參數問題: JavaScript可以傳遞任意個函數，也可以不傳遞函數~
參數進來是否存在的問題
function abs(x){
if (typeof x!=='number'){ //加入參數判斷，手動拋出異常
throw 'Not a Number'
}
if(x>=0){
return x;
}else{
return -x;
}
}
參數進來幾個的問題
arguments
function abs(x){
console.log("x=>"+x) //x仍爲第一個值
for (let i=0; i<arguments.length; i++){ //代表傳遞進來的所有參數，是一個數組
console.log(arguments[i])
}
if(x>=0){
return x;
}else{
return -x;
}
}
問題：arguments會包含所有的參數，我們有時候需要使用多餘的參數來進行操作。需要排除已有參數
rest
ES6新特性，獲取已經定義的參數以外的參數
function test(a,b,...rest) {
console.log("a=>"+a)
console.log("b=>"+b)
console.log("rest=>"+rest)
}
rest參數，只能寫在最後邊，必須用…標識
4.2變數作用域
在JavaScript中，var和let定義變數實際是有作用域的
假設在函數體中宣告，則在函數體外不能用（解決方案，閉包）
function qq() {
let x = 1;
x = x + 1;
console.log(x)
}
// 作用域之外報錯
x = x + 2; // Uncaught ReferenceError: x is not defined
如果兩個函數使用了相同的變數名，只要在函數內部就不衝突！對於巢狀函數，內部函數可以存取外部變數，外部不可以存取內部的! 假設內部函數變數與外部函數變數重複，由內向外查詢，假設外部存在重名的變數，則內部函數的變數會遮蔽外部函數的變數！
function qq() {
let x = 1;
x = x + 1;
}
function q() {
let x = 1;
x = x + 1;
}
提升變數的作用域
規範： 所有變數的定義都放在函數的頭部，不要亂放，便於程式碼維護！
全域性變數
let x = 1;
function qq() {
console.log(x)
}
qq()
console.log(x)
全域性物件window，預設所有的全域性變數都會自動系結在window物件下！
let x = 'hello'; // 首先注意這裏的let
alert(x); //hello
alert(window.x); //undefined
alert（）本身也是一個window的變數
var x = 'hello'; //注意這裏的var
alert(x); //hello
alert(window.x); //hello
由於所有全域性變數都會系結在window上，如果不同的js檔案使用了相同的全域性變數，衝突~
方法：定義自己的全域性變數，把自己定義的變數全部放在唯一空間名字中，減少衝突！
//唯一全域性變數
var KApp = {};
//定義全域性變數
KApp.name = 'zhao'; // 變數
KApp.add = function(a,b){ //方法
return a+b
}
區域性作用域let
function test() {
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1) //101,i出了作用域還可以使用
}
ES6中let關鍵字解決區域性作用域衝突！
function test() {
for (let i = 0; i < 100; i++) {
console.log(i) //99
}
console.log(i+1) // ReferenceError: i is not defined
}
建議使用let
常數const
const pi = '1233' //只讀變數
4.3方法
定義方法
方法就是把函數放在物件的裏面，物件只有兩個東西：屬性和方法！
var test = {
name: 'zhao',
birth: 1920,
age: function () {
var now = new Date().getFullYear()
return now - this.birth
}
}
//屬性
test.name
//方法,一定要帶括號
test.age()
分開寫
function getAge() {
var now = new Date().getFullYear()
return now - this.birth
}
var test = {
name: 'zhao',
birth: 1920,
age: getAge
}
//console
test.age() //100
getAge() //NaN
解決辦法
在apply中可以控制this的指向
function getAge() {
var now = new Date().getFullYear()
return now - this.birth
}
var test = {
name: 'zhao',
birth: 1920,
age: getAge
}
getAge.apply(test,[]);
//console
getAge.apply(test,[]); //100
5.內部物件
標準物件
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof {}
"object"
typeof NaN
"number"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1 Date
基本使用
let now = new Date(); //Fri Jul 10 2020 16:50:30 GMT+0800 (中國標準時間)
now.getFullYear(); //年
now.getMonth(); //月
now.getDay(); //星期幾
now.getDate(); //日
now.getHours(); //時
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //時間戳
console.log(new Date(1594371030517)) //時間戳轉時間
// console.log(now);
now = new Date(1594371030517)
Fri Jul 10 2020 16:50:30 GMT+0800 (中國標準時間)
now.toLocaleString()
"2020/7/10 下午4:50:30"
now.toGMTString()
"Fri, 10 Jul 2020 08:50:30 GMT"
now.toLocaleString //注意呼叫是一個方法不是一個屬性，需要括號
ƒ toLocaleString() { [native code] }
5.2Json
json 是什麼
在JavaScript中一切皆爲物件，任何js支援的數據格式都可以轉化爲JSON
格式：
- 物件都用{}
- 陣列都用[]
- 所有的鍵值對都用key：value
let user = {
name: 'java',
age: 13,
gender: "male"
}
//物件轉json，參數爲json字串
let jsonuesr = JSON.stringify(user) //{"name":"java","age":13,"gender":"male"}
// json 轉物件
let obj = JSON.parse('{"name":"java","age":13,"gender":"male"}')
5.3Ajax
- 原生的js寫法，xhr非同步請求
- jQuery封裝好的方法
- axios 請求
6.物件導向程式設計
原型物件
JavaScript ,Java ,c#…
- 類：模板
- 物件：具體的範例
原型：
let Student = {
name: 'zhao',
age: 13,
run: function () {
console.log(this.name + 'running...')
}
}
let xiaoming = {
name: 'xiaoming'
}
// xiaoming 的原型是 Student
xiaoming.__proto__ = Student;
class 繼承
class關鍵字是在ES6中引入的
1.定義一個類，屬性和方法
//定義一個學生類
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
let xiaoming = new Student('小明')
let xiaowang = new Student('小王')
//console
xiaoming.hello()
>undefined
xiaoming.name
>"小明"
2.繼承
<script>
//定義一個學生類
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
class middle extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
MyGrade(){
alert('middle')
}
}
let xiaoming = new Student('小明')
let xiaowang = new middle('小王',1)
</script>
本質：檢視物件原型
原型鏈
7.操作BOM物件
BOM：瀏覽器物件模型
瀏覽器介紹
JavaScript和瀏覽器的關係
JavaScript的誕生就是爲了讓他在瀏覽器中執行！
- IE6~11
- Chrome
- Safari
- Firefox
- Opera
window
window代表瀏覽器視窗
window.alert(1)
undefined
window.innerHeight
157
window.innerWidth
1366
window.outerHeight
728
window.outerWidth
1366
//可以調整瀏覽器視窗試試，寬高會改變
Navigator
Navigator,封裝了瀏覽器的資訊
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
navigator.platform
"Win32"
大多數時候不會使用navigator,因爲會被人爲修改！
不建議使用這些屬性來判斷和編寫程式碼！
screen
代表螢幕尺寸！
screen.height
768 //px
screen.width
1366
location
location:代表當前頁面的URL資訊
host: "www.google.com.hk"
href: "https://www.google.com.hk/?gws_rd=cr"
protocol: "https:"
reload: ƒ reload() //重新整理網頁
//設定新的地址
location.assign('https://www.youtube.com/')
document
document 當前頁面資訊，HTML DOM 文件樹
document.title
"Google"
獲取具體的文件樹節點
<body>
<dl id="app">
<dt>Java</dt>
<dt>JavaSE</dt>
<dt>JavaEE</dt>
</dl>
<script>
document.getElementById('app')
</script>
</body>
獲取cookie
document.cookie
"CONSENT=YES+CN.zh-CN+; APISID=UPhBuRMzwjkG3TzY/AagBwtsERztGr9W2n; SAPISID=EXo0wU-YLDnNAZV7/A9JM3j2CjdIcCWb8h; __Secure-APISID=UPhBuRMzwjkG3TzY/AagBwtsERztGr9W2n; __Secure-3PAPISID=EXo0wU-YLDnNAZV7/A9JM3j2CjdIcCWb8h; SEARCH_SAMESITE=CgQI2I8B; SID=ygc_-9hkGlKM_1I61Gb1y725YW7OqxcG3EWIJ7SO6_7Xvi1WAk5-vq85i8wS_DoqxCVU9w.; 1P_JAR=2020-7-11-13"
劫持cookie原理
伺服器端可以設定cookie， httpOnly
history 瀏覽器的歷史記錄
history.back()
history.forward()
8.操作DOM
DOM：文件物件模型
核心
瀏覽器網頁就是一個DOM樹形結構
- 更新：更新DOM節點
- 遍歷DOM節點：得到DOM節點
- 刪除一個DOM節點
- 新增一個新的節點
要操作一個DOM節點，首先要獲得一個DOM節點
獲得DOM節點
<div id="father">
<h1>一級標題</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//對應css選擇器
let p1 = document.getElementById('p1')
let father = document.getElementById('father')
let h1 = document.getElementsByTagName('h1')
let p2 = document.getElementsByClassName('p2')\
let children = father.children; //獲取父節點下的所有節點
// father.firstChild
// father.lastChild
</script>
這是原生程式碼，之後儘量使用jQuery
更新節點
<div id="id1">
</div>
<script>
let id1 = document.getElementById('id1')
</script>
操作文字
-
id1.innerText = '123'修改文字的值 -
id1.innerHTML = '<strong>4565</strong>'可以解析HTML文字標籤
操作CSS
id1.style.color = 'red'; //屬性使用字串
id1.style.fontSize = '50px'; //駝峯命名
id1.style.padding = '5px'
刪除節點
步驟：先獲取父節點，再通過父節點刪除自己
<div id="father">
<h1>一級標題</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
let self = document.getElementById('p1')
let father = p1.parentElement;
father.removeChild(self)
// 刪除是一個動態過程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意：刪除多個節點的時候，children是在時刻變化的，刪除節點的時候一定要注意
插入節點
我們獲得了某個DOM節點，假如這個DOM節點是空的，我們通過inner HTML就可以增加一個元素 ，但是這個DOM節點不爲空的話就會覆蓋原來的內容，慎重！
<p id="js">javascript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.appendChild(js); //追加到後面
</script>
結果
通過建立一個新的節點實現插入
<p id="js">javascript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
//通過js建立新的節點
let newP = document.createElement('p')
newP.id = 'newP';
newP.innerText = 'hello, javascript';
list.appendChild(newP);
//建立一個標籤節點，（通過這個屬性可以設定任意的值）
let myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
// 建立一個style標籤
let myStyle = document.createElement('style'); //建立一個空style標籤
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: red}'; //設定標籤內容
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
結果
insert
<p id="js">javascript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
let ee = document.getElementById('EE');
let js = document.getElementById('js');
let list = document.getElementById('list');
//插入
list.insertBefore(js,ee)
</script>
9.操作表單（驗證）
表單是什麼
- 文字方塊 text
- 下拉框 select
- 單選/多選框 input/checkbox
- 隱藏域 hidden
- 密碼框 password
- …
表單的目的： 提交資訊
獲得要提交的資訊
<form action="post">
<p>
<span>使用者名稱：</span><input type="text" id="username">
</p>
<!-- 多選框的值就是定義好的value值-->
<p>
<span>性別:</span>
<input type="radio" name="gender" value="男" id="man"> 男
<input type="radio" name="gender" value="女" id="women"> 女
</p>
</form>
<script>
let input_text = document.getElementById('username');
let man_radio = document.getElementById('man');
let women_radio = document.getElementById('women');
// 得到輸入框的值
// input_text.value
// 修改輸入框的值
// input_text.value = '111'
//對於單選框和多選框等固定的值，input_text.value只能獲得當前的值
man_radio.checked; //檢視返回的結果，選中爲true，未選中爲false
man_radio.checked = true; //賦值操作表單
</script>
提交表單 md5密碼加密，表單優化
<!--MD5工具類--> <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!--
表單系結提交事件 onsubmit = 系結一個提交檢測的函數 true false
將這個結果返回給表單，使用onsubmit接受
οnsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>使用者名稱：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密碼：</span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--button系結事件-->
<!-- <button type="button" οnclick="aaa()">提交</button>-->
<!--系結事件-->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
alert(1)
let uname = document.getElementById('username');
let pwd = document.getElementById('input-password');
let md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以判斷表單內容
//return false; //false無法提交
return true; //true可以提交
}
</script>
10.jQuery
JavaScript和jQuery：
jQuery庫，裏面存在大量的JavaScript函數
初識jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式：$(selection).action()
-->
<a href="" id="test-jquery">點選</a>
<script>
document.getElementById('id')
//選擇器就是CSS的選擇器
$('#test-jquery').click(function () {
alert('hello, jquery')
})
</script>
</body>
</html>
選擇器
文件工具站：https://jquery.cuishifeng.cn/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 原生js 選擇器少
// 標籤
document.getElementsByTagName();
// id
document.getElementById();
// 類
document.getElementsByClassName();
//jQuery CSS 中的標籤都能用
$('p').click() ; //標籤選擇器
$('#id').click() ; //id選擇器
$('.class').click() ; //類選擇器
</script>
</body>
</html>
事件
滑鼠事件，鍵盤事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--獲取滑鼠的當前座標-->
mouse：<span id="location"></span>
<div id="divMove">
移動滑鼠
</div>
<script>
//當網頁元素載入完畢之後響應事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#location').text('x:'+e.pageX + 'y:'+e.pageY)
})
})
</script>
</body>
</html>
操作DOM
節點文字操作
$('#test-ul li[name="py"]').text() //獲得值
$('#test-ul li[name="py"]').text('hello') //設定值
$('#test-ul').html() //獲得值
$('#test-ul').html('<strong>123</strong>') //設定值
CSS的操作
$('#test-ul li[name="py"]').css('color','red')
元素的顯示和隱藏
$('#test-ul li[name="py"]').show()
$('#test-ul li[name="py"]').hide()
$(window).height()
$(window).width()
$('#test-ul li[name="py"]').toggle()
1.看框架原始碼（jQuery和遊戲）
2.扒網站（HTML和CSS）
layer彈窗元件
elementUI