文章目錄
一、JavaScript
1、什麼是JavaScript
JavaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。一個合格的Java後端程序員要精通JavaScript。
最新的版本已經更新到es6,但是大部分的瀏覽器只支持es5
2、快速入門
2.1、引入JavaScript
- 內部標籤(在HTML文件中直接寫JS代碼,不推薦)
<script>
//JavaScript代碼
</script>
- 外部引入(JS文件中與HTML文件分離,推薦)
<script src="js文件的路徑"></script>
- 代碼測試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--內部標籤,在script標籤內,寫Javascript代碼-->
<!--
<script>
alert('hello,world');
</script>
-->
<!--外部引入-->
<script src="js/test.js"></script>
<!--不用顯示定義type,默認就是 javascript-->
<script
type="text/javascript">
</script>
</head>
<body>
<!--script標籤不僅可以在HTML文件的頭部,身體中也可以-->
</body>
</html>
2.2、基本語法入門
-
定義變量
變量類型 變量名 = 變量值;
不具體的區分變量的類型,例如var(定義全局)/let(定義局部)可以代表整數、小數、字符串等
-
條件控制
與Java類似,但是Java中的if~else語句寫法有改變
if (score>60 && score<70){ alert("及格") }else if(score>70 && score<80){ alert("良好") }else{ alert("優秀/不及格") }
-
控制檯打印
console.log(“要打印的內容”)
-
彈窗顯示
alert(‘顯示的內容’);
2.3、數據類型
數值、文本、圖像、音頻、視頻等
-
數值
JavaScript中不區分小數與整數
123 //整數123 123.1 // 浮點數123.1 1.123e3 //科學計數法 -99 //複數 NaN // not a number Infinity //表示無限大
-
字符串
使用雙引號與單引號都可以
‘abc’、“abc”
-
布爾值
true/false
-
邏輯運算
符號 含義 && 同真爲真 || 一真爲真 ! 取反 -
比較運算符
符號 含義 = 賦值 == 等於(只看字面值,類型不一樣也會判定爲等於) === 完全一樣(字面值與類型都一樣) 判斷一個數值是否是NaN,只能使用函數
isNaN(NaN)
來判斷,不能使用===
符號 -
浮點數
console.log((1/3) === (1-2/3)) //不相等,因爲會有浮點數進行運算,有精度的缺失 //應該使用 Math.abs(1/3-(1-2/3))<0.00000001
-
null與undefined
null是空,undefined是未定義
-
數組
與Java中的數組不一樣,js中的數組允許數組元素的類型不一致,數組元素使用
[]
括起來//保證代碼的可讀性,儘量使用 [] var arr = [1,2,3,4,5,'hello',null,true]; new Array(1,12,3,4,4,5,'hello'); //在取數組的下標時,如果越界會報出undefined錯誤
-
對象
對象屬性之間使用逗號隔開,屬性使用
{}
括起來//Person person = new Person(1,2,3,4,5); var person = { name: "zhangsan", age: 23, tags: ['java','web','...'] } //使用對象值,和Java中一樣 person.name person.age
2.4、嚴格檢查模式
- 先在IDEA中設置JavaScript版本爲ES6語法的
-
在JavaScript代碼的第一行添加
use strict;
(嚴格檢查模式)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 'use strict'; 嚴格檢查模式,預防JavaScript的隨意性導致產生的一些問題 必須寫在JavaScript的第一行! 局部變量建議使用 let 去定義 --> <script> 'use strict'; let i = 1; </script> </head> <body> </body> </html>
3、數據類型
3.1、字符串
-
使用單引號或雙引號括起來
-
轉義字符加反斜槓
\
-
多行字符串的編寫使用`符號(在tab鍵的上面,不是一半單引號)
//tab 上面 esc鍵下面 var msg = `hello world 你好ya 你好`
-
模板字符串
let name = "JS"; let msg = `你好呀,${name}`
-
字符串的長度
str.length
-
字符串不可變
-
大小寫轉換,調用相應的方法
student.toUpperCase() student.toLowerCase()
-
對應元素第一次出現的索引
student.indexOf('元素')
-
截取字符串
//截頭不截尾 student.substring(1) // 從第一個字符串截取到最後一個字符串 student.substring(1,3) //[1,3)
3.2、數組
數組可以包好任意類型的元素,通過下標取值與賦值
-
長度
數組名.length //可以給 arr.length 賦值,數組大小就會發生變化~,如果賦值過小,元素就會丟失
-
獲得元素的第一次出現的索引
數組名.indexOf('元素')
-
截取數組一部分
slice() //截取Array的一部分,返回一個新數組,類似於String中的 substring
-
push()、pop()
尾部push: 將元素壓入到尾部 pop: 彈出尾部的第一個元素
-
unshift()、shift()
頭部unshift: 將元素壓入到頭部 shift: 彈出頭部的一個元素
-
排序
sort()
-
元素反轉
reverse()
-
數組拼接
concat()
let arr = ["C", "B", "A"]; arr.concat([1,2,3]) = ["C", "B", "A", 1, 2, 3]; //原來的數組並沒有改變,而是創建了一個新的數組
-
連接符join
//在打印拼接數組元素的時候使用,使用特定的字符拼接數組元素 let arr = ["C", "B", "A"]; arr.join('-') = "C-B-A";
-
多維數組
其實就是一維數組的元素是另一個數組
3.3、對象
JavaScript中, {……} 表示一個對象, 用 鍵值對描述屬性(鍵 : 值),多個屬性之間使用逗號隔開,所有的鍵都是字符串,值可以是任意對象
//語法
var 對象名 = {
屬性名 : 屬性值,
屬性名 : 屬性值,
屬性名 : 屬性值
}
//定義了一個person對象及屬性
var person = {
name: "張三",
age: 23,
score: 0
}
-
對象的賦值
和Java中一樣,使用
=
進行賦值person.name = "lisi"
-
使用未定義的對象屬性的時候不會報錯,會提示undefined
-
可以動態的刪減屬性,使用delete刪除
delete person.name true
-
可以動態的添加對象屬性,直接給對象的新屬性賦值就可以
person.sex = "男"
-
判斷屬性值是否在對象中,使用
in
//自己有的 'age' in person true //繼承父類的 'toString' in person true
-
判斷對象的屬性是否是自身擁有的(不是繼承來的)
hasOwnProperty()
person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
3.4、流程控制
-
if判斷
var age = 3; if (age<18){ //第一個判斷 alert("未成年"); }else if(age<60) { //第二個判斷 alert("還年輕"); }else { //否則,, alert("該退休了"); }
-
while循環
while(age<100){ age = age + 1; console.log(age) } do{ age = age + 1; console.log(age) }while(age<100)
-
for循環
for (let i = 0; i < 100 ; i++) { console.log(i) }
-
forEach循環
var age = [12,3,12,3,12,3,12,31,23,123]; //函數 age.forEach(function (value) { console.log(value) })
-
for in循環
//for(var index in object){} for(var num in age){ if (age.hasOwnProperty(num)){ console.log("存在") console.log(age[num]) } }
3.5、Map和Set
ES6新特性
-
Map
//學生的成績,學生的名字 var names = ["tom","jack","mary"]; var scores = [100,90,80]; var map = new Map([['tom',100],['jack',90],['mary',80]]); var name = map.get('tom'); //通過key獲得value! map.set('zhangsan',88); //新增或修改! map.delete("tom"); //刪除!
-
Set (無序不重複)
set.add(2); //添加! set.delete(1); //刪除! console.log(set.has(3)); //是否包含某個元素!
3.6、iterator
ES6新特新
-
遍歷數組
//通過for of / for in 下標 var arr = [3,4,5] for (var x of arr){ console.log(x) }
-
遍歷Map
var map = new Map([["tom",100],["jack",90],["haha",80]]); for (let x of map){ console.log(x) }
-
遍歷Set
var set = new Set([5,6,7]); 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){
if(x>=0){
return x;
}else{
return -x;
}
}
// function(x){ …. } 是一個匿名函數。但是可以將結果賦值給變量 abs ,通過abs 就可以調用函數
//方式一和方式二等價
- 調用函數
abs(10) //10
abs(-10) //10
4.2、函數參數傳遞
參數問題:javaScript 可以傳任意個參數,也可以不傳遞參數
參數進來是否存在的問題?
假設不存在參數,如果規避?
- 手動判別並拋出異常
var abs = function(x){
//手動拋出異常來判斷
if (typeof x!== 'number') {
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
- arguments關鍵字
arguments是一個JS中的關鍵字,代表傳遞進來的所有的參數,是一個數組
var abs = function(x){
console.log("x=>"+x);
for (var i = 0; i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
問題: arguments 包含所有的參數,我們有時候想使用多餘的參數來進行附加操作。需要排除已有參數
- rest關鍵字
使用arguments關鍵字來排除已有的參數
if (arguments.length>2){
for (var i = 2; i<arguments.length;i++){
//。。。。
}
}
ES6 引入的新特性,使用rest關鍵字獲取除了已經定義的參數之外的所有參數
function aaa(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest 參數只能寫在最後面,必須用 … 標識
4.3、變量的作用域
- 在javascript中, var 定義變量實際是有作用域的。
假設在函數體中聲明,則在函數體外不可以使用(非要想實現的話,後面可以研究一下 閉包 )
function text() {
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
如果兩個函數使用了相同的變量名,只要在函數內部,就不衝突
function text() {
var x = 1;
x = x + 1;
}
function text2() {
var x = 'A';
x = x + 1;
}
內部函數可以訪問外部函數的成員,反之則不行
function text() {
var x = 1;
// 內部函數可以訪問外部函數的成員,反之則不行
function text2() {
var y = x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
假設,內部函數變量和外部函數的變量重名,由內向外尋找,內部變量會屏蔽外部變量
function text() {
var x = 1;
function text2() {
var x = 'A';
console.log('inner'+x); // outer1
}
console.log('outer'+x); //innerA
text2()
}
text();
在JavaScript 中 函數查找變量從自身函數開始,由 ‘’內‘’ 向 ‘’外‘’ 查找 。如果外部存在這個同名的函數變量,則內部函數會屏蔽外部函數的變量。
- 提升變量的作用域
function qj() {
var x = "x" + y;
console.log(x);
var y = 'y';
}
結果 : x undefined
說明 js 執行引擎,自動提升了y的聲明,但是不會提升變量y的賦值
function qj2() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
規範: 所有的變量定義都放在函數的頭部,不要亂放,便於代碼維護;
function qj2() {
var x = 1,
y = x + 1,
z,i,a; //undefined
// 之後隨意用
}
- 全局函數
//全局變量
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);
- 全局對象 window
var x = 'xxx';
alert(x);
alert(window.x); // 默認所有的全局變量,都會自動綁定在 window對象下;
alert() 這個函數本身也是一個 window 變量;
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x);
window.alert = function () {
};
// 發現 alert() 失效了
window.alert(123);
//恢復
window.alert = old_alert;
window.alert(456);
Javascript 實際上只有一個全局作用域, 任何變量(函數也可以視爲變量),假設沒有在函數作用範圍內找到,就會向外查找,如果在全局作用域都沒有找到,報錯 RefrenceError
- 規範
由於我們所有的全局變量都會綁定到我們的 window 上。如果不同的js 文件,使用了相同的全局變量,衝突~ > 如果能夠減少衝突?
// 唯一全局變量
var TestApp = {};
// 定義全局變量
TestApp.name = 'kuangshen';
TestApp.add = function (a,b) {
return a + b;
}
把自己的代碼全部放入自己定義的唯一空間名字中, 降低全局命名衝突的問題
jQuery
- 局部作用域 let
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); //i 出了for循環的作用域還可以使用
}
ES6 使用let 關鍵字,解決局部作用域衝突問題
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); //i is not defined
}
建議使用 let 關鍵字去定義局部作用域的變量
- 常量 const
在ES6 之前,定義常量:只要全部用大寫字母命名的變量就是常量,建議不要修改(約定俗成的,但是可以修改)
var PI = '3.14';
console.log(PI);
PI = '213'; //可以改變這個值
console.log(PI);
在 ES6 引入了常量關鍵字 const
const PI = '3.14'; // 只讀變量
console.log(PI);
PI = '123'; // 會報錯,常量不可以修改.
console.log(PI);
4.3、方法
- 定義方法
方法就是把函數放在對象的裏面,對象只有兩個東西 : 屬性和方法
var people = {
name: 'zhangsan',
bitrh: 2000,
// 方法
age: function () {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
}
}
//屬性
kuangshen.name
//方法,一定要帶()
kuangshen.age()
- this.代表什麼?
function getAge() {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
}
var people = {
name: 'zhangsan',
bitrh: 2000,
age: getAge
}
// people.age() ok
// getAge() NaN window,因爲getAge()需要綁定某一個對象進行使用
this是無法指向的,是默認指向調用它的那個對象;
- apply
可以控制 this的指向
function getAge() {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
}
var people = {
name: 'zhangsan',
bitrh: 2000,
age: getAge
};
var xiaoming = {
name: '小明',
bitrh: 2000,
age: getAge
};
// people.age() ok
getAge.apply(xiaoming,[]);// this,指向了 xiaoming,參數爲空
5、內部對象
標椎對象
//類型:
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1、Date
基本使用
var now = new Date(); //當前的時間
now.getFullYear(); //年
now.getMonth(); // 月 0~11 代表月
now.getDate(); // 日
now.getDay(); // 星期幾
now.getHours(); // 時
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 時間戳 全世界統一 1970 1.1 0:00:00 毫秒數
console.log(new Date(1578106175991)) //將時間戳轉爲時間
轉換
now = new Date(1578106175991)
now.toLocaleString // 調用的是一個方法
ƒ toLocaleString() { [native code] }
now.toLocaleString()
now.toGMTString()
5.2、JSON
json 是什麼
早期,所有數據傳輸習慣使用 XML 文件,相對於XML文件,JSON有屬於它的優點
- JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式。
- 簡潔和清晰的層次結構
- 易於人閱讀和編寫,同時也易於機器解析和生成,有效地提升網絡傳輸效率
在JavaScript 一切皆爲對象、任何js 支持的類型都可以用JSON來表示,比如number,string等
格式:
- 對象都用 {}
- 數組都用 []
- 所有的鍵值對 都是用 key:value
JSON字符串 和 JS 對象的轉化
var user = {
name: "zhangsan",
age: 23,
sex: '男'
}
//對象轉化爲json字符串 {"name":"zhangsan","age":23,"sex":"男"}
var jsonUser = JSON.stringify(user);
//json 字符串轉化爲對象 參數爲 json 字符串
var obj = JSON.parse('{"name":"zhangsan","age":23,"sex":"男"}');
JSON 和 JS 對象的區別
var obj = {a: 'hello',b:'hellob'};//對象
var json = '{"a": "hello","b":"hellob"}'//字符串
5.3、Ajax
- 原生的js寫法 xhr 異步請求
- jQuey 封裝好的 方法 $(”#name“).ajax(“”)
- axios 請求
6、面向對象編程
原型對象
javascript、Java、c#等都是面向對象編程語言,但是javascript有些區別
- 類: 模板 原型對象
- 對象: 具體的實例
原型:
var Student = {
name: "zhangsan",
age: 23,
run: function () {
console.log(this.name + " run....");
}
};
var xiaoming = {
name: "xiaoming"
};
//原型對象
xiaoming.__proto__ = Student;
var Bird = {
fly: function () {
console.log(this.name + " fly....");
}
};
// 小明的原型 是 Student
xiaoming.__proto__ = Bird;
function Student(name) {
this.name = name;
}
// 給student新增一個方法
Student.prototype.hello = function () {
alert('Hello')
};
class 繼承
class
關鍵字,是在ES6引入的
- 定義一個類,屬性,方法
// 定義一個學生的類
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()
- 繼承
<script>
//ES6 之後=============
// 定義一個學生的類
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
class XiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小學生')
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);
</script>
本質:查看對象原型
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8Za4jy57-1581227312339)(D:/%E6%97%A5%E5%B8%B8%E8%BD%AF%E4%BB%B6/TIM/TIM_Download/JavaScript%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0(%E5%AE%8C)]/JavaScript/JavaScript.assets/1578108975667.png)
原型鏈
__ proto __:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3cmw7FMJ-1581227312340)(D:/%E6%97%A5%E5%B8%B8%E8%BD%AF%E4%BB%B6/TIM/TIM_Download/JavaScript%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0(%E5%AE%8C)]/JavaScript/JavaScript.assets/1578109224139.png)
7、操作BOM對象(重點)
- 瀏覽器介紹
JavaScript 和 瀏覽器關係?
JavaScript 誕生就是爲了能夠讓他在瀏覽器中運行!
BOM : 瀏覽器對象模型
- IE 6~11
- Chrome
- Safari
- FireFox
第三方
- QQ瀏覽器
- 360瀏覽器
- window (重要)
window 代表 瀏覽器窗口
window.alert(1) //彈窗
window.innerHeight//瀏覽器內高
window.innerWidth //瀏覽器內寬
window.outerHeight//瀏覽器外高
window.outerWidth //瀏覽器外寬
- Navigator (不建議使用)
Navigator ,封裝了瀏覽器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362"
navigator.platform
"Win32"
大多數時候,我們不會使用 navigator
對象,因爲會被人爲修改!
不建議使用這些屬性來判斷和編寫代碼
- screen
代表屏幕尺寸
screen.width //寬
screen.height //高
- location (重要)
location 代表當前頁面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:ƒ reload() // 刷新網頁
// 設置新的地址
location.assign('https://blog.kuangstudy.com/')
- document (內容; DOM)
document 代表當前的頁面, HTML DOM文檔樹
document.title
獲取具體的文檔樹節點
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>=
獲取 cookie
document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"
劫持 cookie 原理
www.taobao.com
<script src="aa.js"></script>
<!--惡意人員;獲取你的cookie上傳到他的服務器 -->
服務器端可以設置 cookie:httpOnly
- history (不建議使用)
history 代表瀏覽器的歷史記錄
history.back() //後退
history.forward() //前進
8、操作DOM對象(重點)
核心
瀏覽器網頁就是一個Dom 樹形結構!
- 更新:更新Dom節點
- 遍歷:得到Dom節點
- 刪除:刪除一個Dom節點
- 添加:添加一個新的節點
要操作一個Dom節點,就必須要先獲得這個Dom節點
- 獲得dom節點
//對應 css 選擇器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children[index]; //獲取父節點下的所有子節點
// father.firstChild
// father.lastChild
這是原生代碼,之後我們儘量都是用jQuery() ;
- 更新節點
<div id="id1"></div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本
id1.innerText='456'
修改文本的值id1.innerHTML='<strong>123</strong>'
可以解析HTML文本標籤
操作css
id1.style.color = 'yellow'; // 屬性使用 字符串 包裹
id1.style.fontSize='20px'; // - 轉 駝峯命名問題
id1.style.padding = '2em'
- 刪除節點
刪除節點的步驟: 先獲取父節點,在通過父節點刪除自己
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var 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節點是空的,我們通過 innerHTML 就可以增加一個元素了,但是這個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>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);// 追加到後面
</script>
創建一個新的標籤,實現插入
<script>
var js = document.getElementById('js'); //已經存在的節點
var list = document.getElementById('list');
//通過JS 創建一個新的節點
var newP = document.createElement('p');// 創建一個p標籤
newP.id = 'newP';
newP.innerText = 'Hello,Kuangshen';
// 創建一個標籤節點
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
// 可以創建一個Style標籤
var myStyle= document.createElement('style'); //創建了一個空style標籤
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}'; //設置標籤內容
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
insertBefore
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的節點.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
9、操作表單(驗證)
表單是什麼 form DOM 樹
- 文本框 text
- 下拉框 < select >
- 單選框 radio
- 多選框 checkbox
- 隱藏域 hidden
- 密碼框 password
- …….
表單的目的:提交信息
獲得要提交的信息
<form action="post">
<p>
<span>用戶名:</span> <input type="text" id="username">
</p>
<!--多選框的值,就是定義好的value -->
<p>
<span>性別:</span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="women" id="girl"> 女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
// 得到輸入框的值
input_text.value
// 修改輸入框的值
input_text.value = '123'
// 對於單選框,多選框等等固定的值,boy_radio.value只能取到當前的值
boy_radio.checked; //查看返回的結果,是否爲true,如果爲true,則被選中
girl_radio.checked = true; //賦值
</script>
提交表單,md5 加密密碼,表單優化
<!--
表單綁定提交事件
οnsubmit= 綁定一個提交檢測的函數, 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">
<!--綁定事件 onclick 被點擊-->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
// 可以校驗判斷表單內容,true就是通過提交,false,阻止提交
return true;
}
</script>
10、jQuery
jQuery是一個快速、簡潔的JavaScript框架,封裝了JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,並且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。
jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
獲取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.4.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">標籤</a>
<script>
//選擇器就是css的選擇器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>
選擇器
//原生js選擇器少,麻煩不好記
//標籤
document.getElementsByTagName();
//id
document.getElementById();
//類
document.getElementsByClassName();
//jQuery css中的選擇器全部都能用
$('p').click(); //標籤選擇器
$('#id1').click(); //id選擇器
$('.class1').click() //class選擇器
文檔工具站:http://jquery.cuishifeng.cn/
事件
鼠標事件,鍵盤事件,其他事件
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JYIH5c9E-1581227312343)(D:/%E6%97%A5%E5%B8%B8%E8%BD%AF%E4%BB%B6/TIM/TIM_Download/JavaScript%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0(%E5%AE%8C)]/JavaScript/JavaScript.assets/1578124124821.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求:獲取鼠標當前的一個座標-->
mouse :<span id="mouseMove"></span>
<div id="divMove">
在這裏移動鼠標試試
</div>
<script>
//當網頁元素加載完畢之後,響應事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
})
});
</script>
</body>
</html>
操作DOM
節點文本操作
$('#test-ul li[name=python]').text(); //獲得值
$('#test-ul li[name=python]').text('設置值'); //設置值
$('#test-ul').html(); //獲得值
$('#test-ul').html('<strong>123</strong>'); //設置值
css的操作
$('#test-ul li[name=python]').css({"color","red"})
元素的顯示和隱藏: 本質 display : none
;
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
娛樂測試
$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();
未來ajax();
$('#from').ajax()
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});