學習JavaScript

快速入門

我的第一個js程式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    script标簽内，寫JavaScript代碼-->
    <script>
        alert('Hello,world');
    </script>
<!--    外部引入-->
<!--    注意：script标簽必須成對出現-->
    <script src="js/js.js"></script>

<!--    不用顯示定義type，預設就是javascript-->
    <script type="text/javascript">

    </script>
</head>
<body>

</body>
</html>

js/js.js

alert('你好啊，我的朋友！')

基本文法入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  JavaScript嚴格區分大小寫-->
  <script>
    //1、定義變量：   變量類型 變量名 = 變量值;
    var score = 90;
    //alert(score)
    //2、調監控制
    if(score > 60 && score < 70){
      alert('60~70')
    }else if(score > 85 && score < 100){
      alert('85~100')
    }else{
      alert('other');
    }

    //console.log(score)  在浏覽器的控制台列印變量！Syetem.out.println()
    /*
    * haha
    * */
  </script>
</head>
<body>

</body>
</html>

資料類型

數值、文本、圖檔、音頻、視訊...

變量

var $1
var 王者榮耀 = "倔強青銅"

number

js不區分小數和整數，Number

123 //整數123
123.1 //浮點數123.1
1.123e3 //科學計數法
-99 //負數
NaN //not a number
Infinity //表示無限大

字元串

'abc' "abc"

布爾型

true，false

邏輯運算

&& 都真為真 
|| 都假為假
！ 真即假 假即真

比較運算符

=
== 等于（類型不一樣，值一樣，也會判斷為true）
=== 絕對等于（類型一樣，值一樣，結果為true）

堅決不要使用==判斷

NaN==NaN ，這個與所有的數值都不相等，包括自己
隻能通過isNaN(NaN)來判斷這個數是否是NaN

浮點數問題

console.log(1/3==1-2/3)

盡量避免使用浮點數進行運算，存在精度問題

console.log(Math.abs(1/3-(1-2/3))<0.0000001)

null和undefined

null 空
undefined 未定義

數組

java的數組必須是一些相同類型的對象，js中則不需要

//保證代碼的可讀性，盡量使用[]
var arr = [1,2,3,4,5,'hello',null,true]

new Array(1,2,23,4,5,6,hello);

取數組下标：如果越界了就會undefined

對象

對象是大括号，數組是中括号

//Person person = new Person()
//每個屬性之間使用逗号隔開
var person = {
  name:"yeyue",
  age:28,
  tags:['python','java','shell','...']
}

取對象的值

person.name
"yeyue"
person.age
28
person.tags
["python", "java", "shell", "..."]

嚴格檢查模式

<!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=10;
    //ES6 let
  </script>
</head>
<body>

</body>
</html>

正常字元串我們使用單引号或者雙引号包裹
注意轉譯字元 \

<script>
    console.log('a\'b')  a'b
    console.log('a\nb')  a
                         b
    console.log('a\tb')  a	b
    console.log('\u4e2d') 中         \u#### Unicode字元
    console.log('\x41')   A          Ascll字元
  </script>

多行字元串編寫

//tab 上面 esc下面
var msg =
    `hello
     world
     nihao ya
     nihao`

模闆字元串

//tab 上面 esc下面
let name = "yeyue";
let age = 18;
let msg = `My name is ${name} and my age is ${age}`

字元串長度

str.length

字元串的可變性：不可變

console.log(student[1])
t
student[1]= 1
1
console.log(student)
student

大小寫轉換

//注意，這裡是方法，不是屬性
student.toUpperCase()
student.toLowerCase()

student.indexOf('t')
substring

[)
 student.substring(1) //截取從第一個字元到最後一個字元
 student.substring(1,3)//[1,3)

Array可以包含任意的資料類型

arr = [1,2,3,4,5,6,7,8]
(8) [1, 2, 3, 4, 5, 6, 7, 8]
arr[0]
1

長度

arr.length
8

注意：給arr.length指派可以改變數組的大小，若指派太小，元素會丢失

indexOf() ：通過元素獲得下标索引

arr.indexOf(2)
1

注意：字元串“1”和數字1不相同

slice()截取Array的一部分，傳回一個新數組，類似String中的substring()

arr.slice(3,8)
(5) [4, 5, 6, 7, 8]

push(),pop() 尾部

push ：壓入到尾部
pop  ：彈出尾部的一個元素
arr.push("a","b")
12
arr
(12) [1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a", "b"]
arr.pop()
"b"
arr
(11) [1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a"]

unshift(),shift() 頭部

unshift ：壓入到頭部
shift  ：彈出頭部的一個元素
arr.unshift("c","d")
13
arr
(13) ["c", "d", 1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a"]
arr.shift()
"c"
arr
(12) ["d", 1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a"]

排序sort()

arr = ["A","C","B"]
(3) ["A", "C", "B"]
arr.sort()
(3) ["A", "B", "C"]

元素反轉（reverse）

arr.sort()
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]

concat()

arr
(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
arr
(3) ["C", "B", "A"]

注意：concat() 并不會修改數組，隻是會傳回一個新的數組

連接配接符join

列印拼接數組，使用特定的字元串連接配接

(3) ["C", "B", "A"]
arr.join('*')
"C*B*A"

多元數組

arr = [[1,2],[3,4],["5","6"]]
arr[1][1]
4

若幹個鍵值對

var 對象名{
    屬性名：屬性值，
    屬性名：屬性值，
    屬性名。屬性值
}

var person = {
      name:"yeyue",
      age:28,
      tags:['python','java','shell','...']

Js中對象，{......}表示一個對象，鍵值對描述屬性 xxxx:xxxx,多個屬性用逗号隔開，最後一個屬性不加逗号

Js中的所有鍵都是字元串，值是任意對象！

對象指派

person.name = "shenye"
"shenye"
person.name
"shenye"

使用一個不存在的對象屬性不會報錯！undefined

person.haha
undefined

動态的删減屬性，通過delete删除對象屬性

delete person.age
true

動态的添加屬性，直接給新的屬性指派即可

person
{name: "yeyue", tags: Array(4)}
person.age = 18
18
person
{name: "yeyue", tags: Array(4), age: 18}

判斷一個屬性值是否在這份對象中！xx in xxx

'age' in person
true
//繼承
'toString' in person
true

判斷一個屬性是否是這個對象自身擁有的 hasOwnProperty()

person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

流程控制

if判斷

var score = 90;
if(score > 60 && score < 70){
  alert('60~70')
}else if(score > 85 && score < 100){
  alert('85~100')
}else{
  alert('other');
}

while循環，避免程式死循環

let age = 3;
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 < 30; i++) {
    console.log(i)
}

forEach循環

5.1引入

var age = [12,2,3,43,56,6,32,31,123]

//函數
age.forEach(function (value) {
    console.log(value)
})

for...in

var age = [12,2,3,43,56,6,32,31,123]

//函數
//for (var index in object){ console.log(object[index]) }
for (var num in age){
    if(age.hasOwnProperty(num)){
        console.log("存在")
        console.log(age[num])
    }
}

Map 和 Set

ES6的新特性

Map：

//ES6 Map
//學習的成績，學生的名字
var map = new Map([['tom',100],['jack',90],['haha',80]])
var name = map.get('tom') //通過key獲得value
map.set('admin',123456); //新增或修改
map.delete('tom'); //删除

Set：無序不重複的集合

var set = new Set([3,1,1,1,1]); //set可以去重
set.add(2); //增加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某個元素

itrator

ES6 新特性

周遊數組：

//通過for of / for in 下标
var arr = [5,6,7]
for (let 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([7,8,9])
for (let x of set) {
  console.log(x)
}

函數

定義函數

定義方式一

絕對值函數

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

參數問題：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

以前：

function aaa(a,b){
  console.log("a=>"+a);
  console.log("b=>"+b);
  if(arguments.length>2){
    for(var i =2,i<arguments.length,i++){
      
    }
  }
}

ES6引入的新特性，擷取除了已經定義的參數以外的參數

function aaa(a,b,...rest){
  console.log("a=>"+a);
  console.log("b=>"+b);
  console.log(rest)
}

rest參數隻能寫在最後邊，必須用...辨別！

變量的作用域

在js中，var定義變量實際是有作用域的。

假設在函數體中聲明，在函數體外不可以使用~（非要實作的話，可以研究下閉包）

function yeyue(){
  var x = 1;
  x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined

如果兩個函數使用了相同的變量名，隻要在函數内部就不沖突

function yeyue(){
  var x = 1;
  x = x + 1;
}
function yeyue2(){
  var x = 'A';
  x = x + 1;
}

内部函數可以通路外部函數的成員反之則不行

var x = 1;
function yeyue(){
  var y = x + 1;//2
}
var z = y + 1;//Uncaught ReferenceError: y is not defined

假設，内部函數變量和外部函數的變量，重名

function yeyue(){
  var x = 1;
  function yeyue2(){
    var x = 'A';
    console.log('inner'+x);
  }
  console.log('outer' + x);
  yeyue2();
}
yeyue();

在Js中，函數變量從自身函數開始，由内到外查找。假如外部存在同名的函數變量，則内部函數會屏蔽外部函數的變量。

提升變量的作用域

function yeyue(){
  var x = "x" + y;
  console.log(x);
  var y = 'y';
}

結果：xundefined

說明js執行引擎，自動提升了y的聲明，但是不會提升變量y的指派；

function yeyue(){
  var y;
  var x = "x" + y;
  console.log(x);
  y = 'y';
}

這個是在js建立之初就存在的特性。養成規範：所有的變量定義都放在函數的頭部，不要亂放，便于代碼維護；

function yeyue(){
  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);

alter()這個函數本身也是一個

window

變量；

var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x)
window.alert = function (){

};
window.alert(123)
//發現alert() 失效了
//恢複
window.alert = old_alert;
window.alert(456);

js實際上隻有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用範圍内找到，就會向外查找，如果在全局作用域都沒有找到，報錯RefrenceError

規範

由于我們所有的全局變量都會綁定到我們的window上，如果不通的js檔案，使用了相同的全局變量，就會有沖突-->如何減少沖突？

//唯一的全局變量
var yeyueApp = {};

//定義全局變量
yeyueApp.name = 'yeyue';
yeyueApp.add = function (a,b){
  return a+b;
}

把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名重提的問題。

局部作用域 let

function aaa(){
  for (var i = 0; i < 100; i++) {
    console.log(i);
  }
  console.log(i + 1);
}

ES6 let 關鍵字，解決局部作用域沖突問題

function aaa(){
  for (let i = 0; i < 100; i++) {
    console.log(i);
  }
  console.log(i + 1);//Uncaught ReferenceError: i is not defined
}

建議使用let去定義局部作用域的變量

常量 const

在ES6之前，定義常量：隻有用全部大寫字母命名的變量都是常量；建議不要修改這樣的值

var PI = '3.14';
console.log(PI);
PI = '123';
console.log(PI);

在ES6引入了常量關鍵字 const

const PI = '3.14';
console.log(PI);
PI = '123'; //Uncaught TypeError: Assignment to constant variable.
console.log(PI);

方法

定義方法

方法就是把函數放在對象裡邊，對象隻有兩個東西：屬性和方法

var yeyue = {
  name : '夜月',
  birth : 2000,
  //方法
  age : function (){
    //今年 - 出生年
    var now = new Date().getFullYear();
    return now - this.birth;
  }
}
//屬性
yeyue.name
//方法,一定要帶（）
yeyue.age()

this代表？拆分代碼看看~

function getAge(){
  //今年 - 出生年
  var now = new Date().getFullYear();
  return now - this.birth;
}
var yeyue = {
  name : '夜月',
  birth : 2000,
  //方法
  age : getAge
}
//yeyue.age()   21
//getAge()      NaN  window

this是無法指向的，是預設指向調用它的那個對象；

apply

在js中可以控制this的指向！

function getAge(){
  //今年 - 出生年
  var now = new Date().getFullYear();
  return now - this.birth;
}
var yeyue = {
  name : '夜月',
  birth : 2000,
  //方法
  age : getAge
}
getAge.apply(yeyue,[]);//this,指向了yeyue，參數為空

//yeyue.age()  21
//getAge.apply(yeyue,[])  21

内部對象

标準對象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Date

基本使用

var now = new Date(); //Wed Jul 21 2021 12:06:04 GMT+0800 (GMT+08:00)
now.getFullYear(); //年
now.getMonth(); //月 0~11
now.getDate();  //日
now.getDay(); //星期幾
now.getHours(); //時
now.getMinutes(); //分
now.getSeconds(); //秒

now.getTime(); //時間戳 全世界統一

console.log(new Date(1626840576266)); //時間戳轉化為時間

轉換

now = new Date(1626840576266)
Wed Jul 21 2021 12:09:36 GMT+0800 (GMT+08:00)
now.toLocaleString //調用的是一個方法，不是一個屬性！
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/7/21下午12:09:36"
now.toGMTString()
"Wed, 21 Jul 2021 04:09:36 GMT"

JSON

在js中一切皆為對象，任何js支援的類型都可以用JSON來表示；number，string...

格式

對象都用{}
數組都用[]
所有的鍵值對都用 key:value

JSON字元串和JS對象的轉化

var user = {
  name : 'yeyue',
  age : 18,
  sex : '男'
}

//對象轉化為json字元串
var jsonUser = JSON.stringify(user);

//JSON字元串轉化為對象，參數為json字元串
var obj = JSON.parse('{"name":"yeyue","age":18,"sex":"男"}');

JSON和js對象的差別

var obj = {name: "yeyue", age: 18, sex: "男"}
var json = '{"name":"yeyue","age":18,"sex":"男"}'

Ajax

原生的js寫法 xhr異步請求
jQuey封裝好的方法 $("#name").ajax("")
axios請求

面向對象程式設計

原型對象

JavaScript、java、c# ...面向對象；javascript有些差別！

類：模闆原型對象
對象：具體執行個體

在javascript這個需要換一下思維方式

原型：

var Student = {
  name:'yeyue',
  age:18,
  run:function (){
    console.log(this.name + "run....");
  }
};
var xiaoming = {
  name:"xiaoming"
};
//原型對象
xiaoming.__proto__= Student;
var Bird = {
  fly:function (){
    console.log(this.name + "fly...")
  }
};
//原型對象
xiaoming.__proto__= Bird;



function Student(name){
    this.name = name;
  }
  Student.prototype.hello = function (){
    alert('hello')
  }

class繼承

class關鍵字，是在ES6引入的

1、定義一個類，屬性，方法

class Student{
  constructor(name) {
    this.name = name;
  }
  hello(){
    alert('hello')
  }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()

2、繼承

<script>
  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");
</script>

原型鍊

操作BOM對象

浏覽器介紹

JavaScript誕生是為了能夠讓他可以在浏覽器中運作

BOM：浏覽器對象模型

IE 6-11
Chrome
Safari
FireFox

三方：

qq浏覽器
360浏覽器

window

window代表浏覽器視窗

window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
929
window.outerHeight
728
window.outerWidth
945

navigator

封裝了浏覽器的資訊

window.navigator.appCodeName
"Mozilla"
window.navigator.appName
"Netscape"
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"
navigator.platform
"Win32"

大多數時候，我們不會使用navigator對象，因為會被認為修改！

不建議使用這些屬性來判斷和編寫代碼

screen 代表螢幕尺寸

screen.width
1920
screen.height
1080

location 代表目前頁面的url資訊

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //重新整理網頁
//設定新的位址
location.assign('網頁url')

document 代表目前的頁面，html，dom文檔樹

document.title
"百度一下，你就知道"
document.title = '你好啊'
"你好啊"

獲得具體的文檔樹節點

<dl id="app">
  <dt>Java</dt>
  <dt>JavaSE</dt>
  <dt>JavaEE</dt>
</dl>

<script>
  var dl = document.getElementById('app');
</script>

擷取cookie

document.cookie
"BIDUPSID=46D26536F06D4B37A87BF35AED9B295F; PSTM=1626924758; BAIDUID=38631FCFEA5A871621FA2D3F86CA7D6A:FG=1; BD_UPN=12314753; BAIDUID_BFESS=38631FCFEA5A871621FA2D3F86CA7D6A:FG=1; BD_HOME=1; H_PS_PSSID=34267_33764_34222_34279_34004_34280_26350_34289; BA_HECTOR=008l218l0g0h8h244u1gfhq9c0r"

劫持cookie原理

<script src="aa.js"></script>
<!--惡意人員：擷取你的cookie上傳到他的伺服器-->

伺服器端可以設定 cookie:httpOnly

history 浏覽器的曆史記錄

history.forward()
history.back()

核心

浏覽器網頁就是一個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; //擷取父節點下的所有子節點
  var first = father.firstChild;
  var last = father.lastChild;

更新節點

<div id="id1"></div>
<script>
  var id1 = document.getElementById('id1');
</script>

id1.innerHTML = ' <strong> 123</strong> ' 可以解析html
id1.innerText = 'haha' 修改文本的值

操作JS

id1.style.color = 'red' //屬性使用 字元串 包着
"red"
id1.style.fontSize='20px' // - 轉 駝峰命名
"20px"
id1.style.padding='1em'
"1em"

删除節點

<body id="father">
<h1>标題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>

<script>
  var self = document.getElementById('father');
  var father = p1.parentElement;
  father.removeChild(self)
  //删除是一個動态的過程
  father.removeChild(father.children[0])
</script>

注意：删除多個節點的時候，children是時刻變化的，删除節點的時候一定要注意。

插入節點

獲得了某個節點，假設這份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')
  //通過js建立一個新的節點
  var newP = document.createElement('p'); //建立一個p标簽
  newP.id = 'newP';
  newP.innerText = 'hello,world';
  list.appendChild(newP);
  //建立一個标簽節點
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript');
  myScript.innerText = 'java';
  list.appendChild(myScript);
  //建立一個style标簽
  var myStyle = document.createElement('style'); //建立一個空的stype标簽
  myStyle.setAttribute('type','text/css');
  myStyle.innerHTML = 'body{}'; //設定标簽内容

  document.getElementsByTagName('head')[0].appendChild(myStyle);
</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>
  var js = document.getElementById('js');
  var ee = document.getElementById('ee');
  var list = document.getElementById('list')
  //要包含的節點.insertBefore(newNode,targetNode)
  list.insertBefore(js,ee);
</script>

操作表單

表單是什麼 form DOM樹

文本框 text
下拉框 <select>
單選框 radio
多選框 checkbox
隐藏域 hidden
密碼框 password
......

表單的目的：送出資訊

獲得要送出的資訊

<form action="post">
  <p>
    <span>使用者名：</span><input type="text" id="username">
    <span>密碼：</span><input type="text" id="password">
  </p>
<!--多選框的值就是定義好的value-->
  <p>
    <apan>性别：</apan>
    <input type="radio" name="sex" value="man" id="boy"> 男
    <input type="radio" name="sex" value="woman" 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，則被選中
  boy_radio.checked = true;
</script>

送出表單 md5加密密碼，表單優化

<!--表單綁定送出事件
onsubmit 綁定一個送出檢測的函數， true false
将這個結果傳回給表單，使用onsubmit 接收！
-->
<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-passwd" 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-passwd');

        md5pwd.value = md5(pwd.value);
        //可以校驗判斷表單内容，true就是通過送出  false就是阻止送出
        return false;
    }
</script>

jQuery

JavaScript

jQuery庫，裡邊有大量的JavaScript函數

擷取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--$(selector).action()-->
<a href="" id="test-jquery">點我</a>

<script>
  document.getElementById('id');
  //選擇器就是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選擇器

事件

 $('.class1').mousedown() //按下
  $('.class1').mousemove() //移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
  <style>
    #divMove{
      height: 500px;
      width: 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('hahaha');//設定值
$('#test-ul li[name=python]').html();//擷取值
$('#test-ul li[name=python]').html('<strong>123</strong>');//設定值

CSS操作

$('#test-ul li[name=python]').css('color','red');

元素顯示和消失：本質 display:none

$('#test-ul li[name=python]').hide()//隐藏
$('#test-ul li[name=python]').show()//顯示

$(window).width()
1728
$(window).height()
387
$('#test-ul li[name=python]').toggle() //依次切換顯示和隐藏

學習JavaScript

快速入門

我的第一個js程式

基本文法入門

資料類型

嚴格檢查模式

流程控制

Map 和 Set

itrator

函數

定義函數

變量的作用域

方法

内部對象

Date

JSON

Ajax

面向對象程式設計

原型對象

原型鍊

操作BOM對象

操作表單

jQuery

繼續閱讀

Java String.format方法的簡單使用

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method