JavaScript基础知识（基础需要重点掌握）

2021-09-08 23:01:38 阅读：200 来源： 互联网

标签：function console name 掌握 JavaScript 基础知识 var document log

文章目录

JavaScript

JavaScript

引入JavaScript

内部标签

<script>
    //...
</script>

外部引用

<script src="js文件路径"></script>

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部引用-->
    <!--script标签内JavaScript代码-->
    <script>
        alert("hello world");
    </script>
    
    <!--外部引用-->
    <script src="js/JavaScript01.js"></script>

</head>
<body>
    这里也可以写js代码
</body>
</html>

js文件

alert("hello world");

基本语法

注释：

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

变量：

JavaScript 使用 var 关键词来声明变量。

输出：

alert(score);

console.log(score); 在浏览器的控制台输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <!--JavaScript严格区分大小写-->
  <script>
    //1.定义变量    变量类型  变量名  =  变量值;
    var score = 71;
    // alert(score);
    //2.条件控制
    if (score>60 && score<70){
      alert("及格");
    }else if (score>70 && score<80){
      alert("中等");
    }else {
      alert("优秀");
    }

    //console.log(score);     在浏览器的控制台输出

  </script>
  
</head>
<body>
</body>
</html>

数据类型

变量

var 变量名;

number

js不区分小数和整数

10//整数
10.1//浮点数
1.01e3//科学计数法
-10//负数
NaN//Not a Number
Infinity//表示无限大

字符串

字符串使用单引号或者双引号包裹通过下标取值，不能赋值，字符串不可变
注意转义字符串 \

\'
\n
\t
\u4e2d   \u####  unicode字符
\x41     Ascll字符

多行字符串编写

    var msg = `
              hello
              world
              你好
              `

模板字符串

'use strict';
let name = 'sgl';
var msg = `你好呀！${name}`

字符串长度

str.length

字符串的可变性不可变!!!
大小写转换

//注意这里是方法不是属性
str.toUpperCase()
str.toLowerCase()

获取字符串中字符的下标

str.indexOf('a')

substring

[)
 str.substring(1)  //从第一个字符串截取到最后一个字符串
 str.substring(1,3)//[) 截取1~3的字符，包含1不包含3

布尔值

true，false

逻辑运算符

&&    两个都为真，结果为真
||    一个为真，结果为真
!     真即假，假即真

比较运算符

=     赋值
==    等于（类型不一样，值一样，也会判断为true）
===   绝对等于（类型一样，值一样，判断为true）

null和undefined

null：空
undefined：未定义

数组

Java的数值必须是相同的类型的对象，js中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];  //通过下标取值或赋值
new Array(1,2,3,'hello',null,true);

如果数组下标越界：显示undefined

Array可以包含任意数据类型

数组长度

arr.length

注意：给arr.length赋值，数组大小就会改变，如果赋值过小，元素就会丢失

indexOf 通过元素获得下标索引

arr.indexOf(2)

注意：字符串的"2"和数字2 不同

slice () 截取Array的一部分，返回一个新数组，类似于String中的substring
push() pop() 尾部

push:压入到尾部
pop:弹出尾部的一个元素

unshift() shift() 头部

unshift:压入到头部
shift:弹出头部的一个元素

sort() 排序 reverse() 反转

concat() 拼接没有修改数组，只是会返回一个新的数组

join() 连接符

var arr = ['A','C'];
arr.push('B')
3
arr
(3) ["A", "C", "B"]
arr.sort();
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
arr.join('-')
"C-B-A"

多维数组

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

对象

JavaScript中所有的键都是字符串，值是任意对象

格式：若干个键值对

var 对象名 = {
    属性名:属性值，
    属性名:属性值，
    属性名:属性值，
}

每个属性之间用逗号隔开，最后一个不需要添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
  <script>
    //Java对象定义Person person = new Person()
    var person = {
      name:"sgl",
      age:22,
      tags:['js','css','html']
    }
  </script>
</head>
<body>
</body>
</html>

对象赋值

person.name="coco";
"coco"
person.name;
"coco"

使用一个不存在的对象属性，不会报错！undefined

person.hh
undefined

动态的删减属性，通过delete删除对象的属性；动态的添加，直接给新的属性添加值即可

person.name="coco";
"coco"
person.name;
"coco"
delete person.name;
true
person.haha="haha"
"haha"

判断属性的值是否存在这个对象中! xxx in xxx

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

判断一个属性是否是这个对象自身拥有的用hasOwnProperty()

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

严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
  <!--
  前提:IDEA 需要支持ES6语法
  'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
  必须写在JavaScript代码的第一行
  局部变量建议使用let定义
  -->
  <script>
    'use strict'
    //局部变量
    let b = 1;
  </script>
</head>
<body>
</body>
</html>

流程控制

if判断

    var score = 71;
    // alert(score);
    //2.条件控制
    if (score>60 && score<70){
      alert("及格");
    }else if (score>70 && score<80){
      alert("中等");
    }else {
      alert("优秀");
    }

while循环，避免死循环

      var age = 0;
      while (age<100){
          age = age + 1;
          console.log(age)
      }

      do {
          age = age + 1;
          alert(age);
      }while (age<100)

for循环

for (let i = 0; i < 100; i++) {
          alert(i); //浏览器弹窗输出
          //console.log(i);   控制台输出
      }

forEach循环

var arr = [12,23,123,45,67,89]
//函数
arr.forEach(function (value){
    console.log(value);
})

for in

index代表数组arr元素的索引

arr[index] 输出数组arr的值

for of

value 输出数组arr的值

var arr = [12,23,123,45,67,89]
for (var index in arr){
    console.log(index);  //index代表数组arr元素的索引
    console.log(arr[index]);  //输出数组arr的值
    
for (var value of arr){
    console.log(value);  //输出数组arr的值

Map和Set

Map：

var map = new Map([['tom',100],['jack',99],['lucy',98]]);
var name = map.get('tom');  //通过key获取value
map.set('linda',88);  //新增或修改
map.delete("jack");//删除

Set: 无序不重复集合

let set = new Set([3,2,1,2,3]);  //set可以去重
set.add(4);
set.delete(1)
console.log(set.has(3))

iterator

iterator遍历迭代Map和Set

var map = new Map([['tom',100],['jack',99],['lucy',98]]);
for (let value of map) {
    console.log(value);
}

let set = new Set([7,8,9]);
for (let value2 of set) {
    console.log(value2);
}

函数

函数定义

定义方式一

function 函数名(属性值){
    //函数体
}

绝对值函数

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果!

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var 函数名 = function(属性值){
	//函数体
}

绝对值函数

var abs = function(x){
        if(x>=0){
        return x;
    }else{
        return -x;
    }
}

调用函数

abs(-10);  //10
abs(10);   //10

参数问题： JavaScript可以传任意参数也可以不传递参数

abs();   //NaN
abs(10,29,10);  //10

手动抛出异常可解决

var abs = function(x){
    if (typeof x!=='number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

abs();
Uncaught Not a Number

arguments

arguments 代表传递进来的所有参数，是一个数组

var abs = function(x){
    console.log("x-->"+x);
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if (typeof x!=='number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

控制台运行结果：

abs(25,23,65,98,65);
x-->25   //x指向第一个参数
25   //arguments[i]  输出的
23
65
98
65
25   //if语句输出的25

rest

获取剩余的参数

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

控制台的运行结果:

fun(1,2,3,6,7);
a-->1
b-->2
(3) [3, 6, 7]

注意：rest参数只能写在最后面，必须用…标识

变量的作用域

在JavaScript中，var定义的变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用，否则报错 Uncaught ReferenceError: x is not defined

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

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj() {
    var x = 1;
    x = x + 1;
}
function qj2() {
    var x = A;
    x = x + 1;
}

内部函数可以访问外部成员的函数，反之不行

      function qj() {
          var x = 1;
          function qj2() {
              var y = x + 1;  //2
          }
          var z = y + 1;  //console.log(z); Uncaught ReferenceError: z is not defined
      }

假设，内部函数变量和外部函数变量重名

      function qj() {
          var x = 'A';
          function qj2() {
              var x = 'B';  //2
              console.log('inner:'+x);  //outer:A
          }
          console.log('outer:'+x);   //inner:B
          qj2();
      }
      qj();

假设在JavaScript中函数查找变量从自身开始，有"内"向"外"查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

规范：所有的变量定义都放在函数的头部，便于代码维护

function f(){
    var x = 1,
        y = x + 1,
        z,i,a;  //undef
    
    //之后可以随便用
}

全局函数

//全局变量
x = 1；

function f(){
    console.log(x);
}
f();
console.log(x);

全局对象 window

var x = 1;
alert(x);
alert(window.x);

alter()这个函数本身也是一个window变量

      var x = 1;
      window.alert(x);
      let alert_01 = window.alert;
      alert_01(x);

      window.alert = function () {

      }
      //发现alert失效了
      window.alert(123);

      //恢复
      window.alert = alert_01;
      window.alert(456);

JavaScript实际上只有一个作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错referenceError

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突，如何减少冲突

//唯一全局变量
var sgl = {};

//定义全局变量
sgl.name = 'coco';
sgl.add = function(a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

      function aaa() {
          for (var i = 0; i < 100; i++) {
              console.log(i);
          }
          console.log(i+1);  //101   i 出了作用域还可以使用
      }

let关键字，解决局部作用域冲突问题

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

常量 const

var PI = '3.14';
console.log(PI);  //3.14
PI = '111';  //可以改变这个值
console.log(PI);  //111

引入了常量const

const PI = '3.14';  //只读变量
console.log(PI);
PI = '111';  //直接报错   Uncaught TypeError: Assignment to constant variable.

方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

var sgl =  {
    name: '刚龙',
    birth: 2000,
    //方法
    age:function() {
        //今年 - 出生的年
        let now = new Date().getFullYear();
        return now - this.birth;
    }
}

//属性
sgl.birth;
//方法，调用方法一定要带括号()
sgl.age();

拆开

       function getAge() {
          //今年 - 出生的年
         let now = new Date().getFullYear();
         return now - this.birth;
       }
        var sgl =  {
          name: '刚龙',
          birth: 2000,
          age:getAge
        }
        //sgl.age();  可以
       //getAge()  NaN  window

this是无法指向的，是默认指向调用它的那个对象

apply

在js中可以控制this的指向

getAge.apply(sgl,[])

       function getAge() {
          //今年 - 出生的年
         let now = new Date().getFullYear();
         return now - this.birth;
       }
        var sgl =  {
          name: '刚龙',
          birth: 2000,
          age:getAge
        }
        
        getAge.apply(sgl,[]);//this指向了  sgl  ，参数为空

内部对象

标准对象

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

Date

基本使用

    var now = new Date();  //console.log(now);
                           //VM81:1 Tue Sep 07 2021 21:42:17 GMT+0800 (China Standard Time)当前时间
    //在控制台输出
    now.getFullYear();//年
    now.getMonth();//月   0~11代表月
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime();//时间戳  1970.1.1 00:00:00  毫秒数    1631022468114

    console.log(new Date(1631022468114))  //时间戳转为时间

转换(控制台输出)

var now = new Date(); 
console.log(new Date(1631022468114))
Tue Sep 07 2021 21:47:48 GMT+0800 (China Standard Time)
now.toLocaleDateString   //注意调用是一个方式，不是一个属性
ƒ toLocaleDateString() { [native code] }
now.toLocaleDateString();
"07/09/2021"
now.toLocaleString()
"07/09/2021, 21:47:48"
now .toGMTString()
"Tue, 07 Sep 2021 13:47:48 GMT"

JOSN

JOSN是什么

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

在JavaScript一切解对象，任何js支持的类型都可以用JOSN来表示；number ，string …

格式：

对象都用{ }
数组都用[]
所有的键值对都是用 key:value

JOSN和js对象的转化

    var user = {
      name:'sgl',
      age:21,
      sex:'boy'
    }

    //对象转化为JSON字符串  参数为user的各个属性 {name: "sgl", age: 21, sex: "boy"}
    var jsonUser = JSON.stringify('{name: "sgl", age: 21, sex: "boy"}')

    //将JSON字符串转化为对象，参数为json字符串
    var json01 = JSON.parse('{name: \\"sgl\\", age: 21, sex: \\"boy\\"}');

JSON和js的区别

var user = {name:'sgl',age:21,sex:'boy'}
var json = {'{name: \\"sgl\\", age: 21, sex: \\"boy\\"}'}

面向对象编程

原型对象

类：模板原型对象
对象：具体的实例

原型：可以指向多个以最后一个为原型对象

var Student = {
  run:function () {
      console.log(this.name+"run....")
  }
}

var sgl = {
    name:'sgl'
}
//原型对象 是Student
sgl.__proto__=Student;

var Bird = {
    fly:function () {
        console.log(this.name+"fiy....")
    }
}
//sgl的原型对象是Bird
sgl.__proto__=Bird;

简述：函数的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型，也就是person1和person2的原型。

原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。

      function Person(age) {   //最初类的定义
          this.age = age
      }
      //给Person新增一个方法
      Person.prototype.hello = function (){
          alert("hello");
      }

      Person.prototype.name = 'kavin'
      var person1 = new Person()
      var person2 = new Person()
      console.log(person1.name) //kavin
      console.log(person2.name)  //kavin
      console.log(person1.hello()); //hello
      console.log(person2.hello()); //hello

表示构造函数和实例原型之间的关系：

在这里插入图片描述

class

class关键字

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

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

控制台输出：

在这里插入图片描述

继承

    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","大一");

在这里插入图片描述

原形链

在这里插入图片描述

__ proto __ : 这是每个对象(除null外)都会有的属性，叫做 __ proto __，这个属性会指向该对象的原型。

class Person{

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

关系图：

在这里插入图片描述

constructor

每个原型都有一个constructor属性，指向该关联的构造函数。

class Person() {

}
console.log(Person===Person.prototype.constructor)  //true

关系图

在这里插入图片描述

原型的原型原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __ proto __ 指向构造函数的 prototype

在这里插入图片描述

操作BOM对象***

BOM：浏览器对象模型

window ***

window 代表浏览器窗口

window.alert(1);
undefined
window.innerHeight;
524
window.innerWidth;
790
window.outerHeight;
822

Navigator

Navigator 封装了浏览器的信息

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

一般不使用Navigator对象

screen

screen 代表屏幕

screen.width;
1536
screen.height;
864

location ***

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"       //协议
reload: ƒ reload()  //刷新网页
location.assign("https://blog.csdn.net/m0_53821599?spm=1000.2115.3001.5343");  //设置新地址，运行跳到该地址

document

document 代表当前网页， HTML DOM树

document.title;
"百度一下，你就知道"
document.title='狂神'  //修改标题
"狂神"

获取具体的文档树节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<script>
  var dl = document.getElementById("app");
</script>
</body>
</html>

在这里插入图片描述

获取cookie

document.cookie;

history

history 代表浏览器的历史记录

history.back();
history.forward();

操作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选择器
  var h1 = document.getElementsByName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');

  var father = document.getElementById('father');
  //father.firstChild;
  //father.lastChild;
  
</script>

原生代码，后面使用jQuery

更新Dom节点

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

操作文本：

div.innerText='div标签'; 修改文本的值
div.innerHTML='<strong>div标签</stong>'; 可以解析HTML文本的标签

在这里插入图片描述

操作JS

属性使用字符串包裹 - 转为驼峰命名

div.style.color='green';
div.style.fontSize='30px';
div.style.padding='1em';

在这里插入图片描述

删除Dom节点

步骤：先获取父节点，在通过父节点删除自己

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>

<script>
  var p1 = document.getElementById('p1');
  var element = p1.parentElement;   //获取父节点
  element.removeChild(p1);    //删除获取父节点的节点
  
  /* 控制台运行
  *   //删除是一个动态的过程   
  element.removeChild(father.children([0]));
  element.removeChild(father.children([1]));
  element.removeChild(father.children([2]));
  * */

注意：删除多个节点时，children是在时刻变化的，删除节点的时候要注意！

插入Dom节点

获得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.append(js);  //追加到后面
</script>

效果：

在这里插入图片描述

创建一个新的标签，实现插入

测试1：

<body>
<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');

  //创建一个新节点
  var new_p = document.createElement('p');
  new_p.id = 'new_p';
  new_p.innerText = 'JSP';
  list.append(new_p);   
</script>

效果：

在这里插入图片描述

测试2：

通过这个属性，可以设置任意的值

myScript.setAttribute('type','text/javascript')

 myStyle.setAttribute('type','text/css');

<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');

  //创建一个新节点
  var new_p = document.createElement('p');
  new_p.id = 'new_p';
  new_p.innerText = 'JSP';
  list.append(new_p);

  //创建一个标签节点
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript')
  list.append(myScript);

  //创建一个Style标签
  var myStyle = document.createElement('style');
  myStyle.setAttribute('type','text/css');
  myStyle.innerHTML = 'body{background-color: yellow;}'  //相当于标签选择器body{background-color: yellow}
  document.getElementsByTagName('head')[0].append(myStyle);

</script>

效果：

在这里插入图片描述

insertBefore

<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>

效果：

在这里插入图片描述

操作表单（验证）

文本框 text，下拉框 select，单选框 radio，多选框 checkbox，隐藏域 hidden，密码框 password …

表单的目的：提交信息

获取表单提交的信息

<form action="#" method='post'>
  <p>
    <span>用户名:</span> <input type="text" id="username">
  </p>
  <p>
    <span>性别:</span>
    <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 input_radio_boy = document.getElementById('boy');
  var input_radio_girl = document.getElementById('girl');
  
  //得到输入框的值
  input_text.value;
  //修改输入框的值
  input_text.value = '123';
  
  //对于单选框，多选框等等固定的值，input_radio.value只能取到当前的值
  input_radio_boy.checked;//查看返回的结果是否为true，如果为true，则被选中
  input_radio_girl.checked = true;//赋值
</script>

提交表单 MD5加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--MD5工具类-->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，  true  false
将这个结果返回给表单，使用onsubmit接收
οnsubmit="return fun()"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return fun()">
  <p>
    <span>用户名:</span> <input type="text" required 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" οnclick="fun()">提交</button>-->
  <button type="submit">提交</button>
</form>

<script>
  function fun() {
    var uname = document.getElementById('username');
    var pwd = document.getElementById('input_password');
    var md5pwd = document.getElementById('md5-password');
    
    //密码经过MD5加密 赋值给md5pwd
    md5pwd.value = md5(pwd.value)
    //可以校验判断表单的内容，true就是通过提交，false阻止提交
    return true;
  }
</script>
</body>
</html>

密码被加密

在这里插入图片描述

jQuery

jQuery是一个库，里面存在大量的JavaScript函数

获取jQuery

外部引用

  <!--引用-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

官网下载jQuery，导入

jQuery公式：

$(selector).action() selector 就是css选择器 action 指一个事件

测试：

<!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>
</head>
<body>
<!--jQuery公式
$(selector).action()
selector 就是css选择器
action 指一个事件
-->

<a href="" id="jQuery">点我</a>
<script>
  $('#jQuery').click(function () {
    alert('hello jQuery');
  })
</script>
</body>
</html>

selector 选择器

<!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>
</head>
<body>

<script>
  //标签选择器
  document.getElementsByTagName();
  //id选择器
  document.getElementById();
  //类选择器
  document.getElementsByClassName();
  
  //jQuery  css中的选择器它都能用
  $('p').click();  //标签选择器
  $('#id01').click();  //id选择器
  $('.class01').click();  //类选择器
</script>

</body>
</html>

action 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery菜鸟教程有详细教程 https://www.runoob.com/jquery/jquery-events.html

也可以去jQuery帮助文档中的事件 https://jquery.cuishifeng.cn/

鼠标移动测试：

<!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>
  <style>
    #divMove{
      width: 300px;
      height: 100px;
      border: 1px solid black;
    }
  </style>

</head>
<body>
<!--获取鼠标当前的一个坐标-->
<p>移动可获取得鼠标坐标:</p>
<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>

在这里插入图片描述

jQuery操作Dom元素

节点文本操作

  $('#id_ul li[name=javaee]').text();  //获得值
 $('#id_ul li[name=javaee]').text('设置值');//设置值
  $('#id_ul').html();//获得值
$('#id_ul').html('<strong>123</strong>');//设置值

测试：

<!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>
</head>
<body>

<ul id="id_ul">
  <li class="class_se">JavaSE</li>
  <li name="javaee">JavaEE</li>
</ul>

<script>
  $('#id_ul li[name=javaee]').text();
  $('#id_ul').html();
</script>

</body>
</html>

css的操作:

$('#id_ul li[name=javaee]').css({ "color": "#ff0011", "background": "blue" });

元素的显示和隐藏:本质 display:none

$('#id_ul li[name=javaee]').show()
$('#id_ul li[name=javaee]').hide()

标签：function,console,name,掌握,JavaScript,基础知识,var,document,log
来源： https://blog.csdn.net/m0_53821599/article/details/120190715

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript基础知识 （基础需要重点掌握）

文章目录

JavaScript

引入JavaScript

基本语法

数据类型

严格检查模式

流程控制

Map和Set

iterator

函数

函数定义

变量的作用域

方法

内部对象

Date

JOSN

面向对象编程

原型对象

class

继承

原形链

操作BOM对象***

操作DOM对象***

操作表单（验证）

jQuery

JavaScript基础知识（基础需要重点掌握）