JavaScrip基础知识

于 2022-05-06 18:06:01 发布
阅读量2k 收藏 6
点赞数 2
分类专栏： 前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rqt1013_/article/details/124517169
版权

一、什么是JavaScript?

JavaScript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是一种弱类型的脚本语言，其源代码在客户端运行之前不需要编译，而是由浏览器来解释运行。

在前端中：
html主要用来决定网页的结构，是网页的架构层。
css主要用来美化网页，是网页的表现层。
JavaScript主要用来与网页进行动态交互，是网页的行为层。

js基本代码结构如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
    <script type="text/javascript">
        alert("hello world");
    </script>
</head>
<body>

</body>
</html>

js代码要写在标签script中，其中type属性可以不用写，默认就是javascript。script标签可以写在body标签下，也可以写在head标签下，同时也可以从外部引入，html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
    <script src="studyJS.js"></script>
</head>
<body>
</body>
</html>

注意：script标签必须成对出现，不能自闭合，不然会出现错误。

js文件如下，文件名为studyJS.js：

alert("hello world");

alter()是js中经常用到的方法，意思是提醒，它会在浏览器页面弹出一个信息框，给用户一些提示信息。

二、基本语法入门

（1）var和let

js的语法和代码规范和java基本一样。所以我们可以很容易地学会js的语法。声明变量如下：

var number = 1;
number=2;
alert(number);

值得注意的是：js中所有的变量类型都是var，在ES6中，新增了let，也可以用来声明变量。

var和let有以下的区别：

（1）var是函数作用域，let是块作用域。在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的。而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的，所以for循环推荐用let。

（2）let不能被重新定义，但是var可以。

（3）let不能在定义之前访问该变量，但是var可以。let必须先声明，再使用。而var先使用后声明也行，只不过直接使用但没有定义的时候，其值是undefined。var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined。

（2）数据类型

（1）number 数值类型。在js中，不区分整数和浮点数，无论是整数还是浮点数，它们的类型都是number。
let number = 1;   //整数
number=1.2;   //浮点数
number=1.2e4;   //科学计数法
number=NaN;   //不是一个数字
number=Infinity;   //无穷大的数字

有两个值得注意的是NaN和Infinity。前者表示的是不是一个数字，即Not a Numbe，后者表示无穷大。

（2）null和undefined：前者表示空，后者表示未定义。
（3）数组类型：js的数组中可以装任意类型的数据。
let a=[1,2,3,4,null,'2345',undefined];

有几点需要注意：

【1】数组的长度用length来获得。

let a=[1,2,3,4,null,'2345',undefined];
let length = a.length;    //7

【2】倘若数组越界了，如访问a[7]，则会提示undefined。

【3】如果给a.length赋值，赋值超过原本的数组大小，数组就会扩大，后面加入进来的元素是空；如果赋值小于原本的数组大小，那么元素就会丢失。

【4】通过元素获得下标索引：

let index = a.indexOf(2);   // 1

【5】通过函数slice()截取一部分数组，跟字符串类型中的substring一样。

let slice = a.slice(1, 5);

结果为[2, 3, 4, null]。

【6】往数组尾部添加数据：push()和pop()。

a.push("牛马", "hello");    //添加数据，结果为：[1, 2, 3, 4, null, '2345', undefined, '牛马', 'hello']
a.pop();    //弹出尾部的一个元素，结果为：[1, 2, 3, 4, null, '2345', undefined, '牛马']

【7】往数组头部添加数据：unshift()和shift()。

a.unshift("赢了吗", "赢麻了");  //往头部加入数据，结果为：['赢了吗', '赢麻了', 1, 2, 3, 4, null, '2345', undefined, '牛马']
a.shift();    //弹出头部的一个数据，结果为：['赢麻了', 1, 2, 3, 4, null, '2345', undefined, '牛马']

【8】数组中的元素排序：sort()。

let alp = ["a","b","j","i","e","y"];
alp.sort();

结果为：['a', 'b', 'e', 'i', 'j', 'y']。

【9】数组中的元素反转：reverse()。

alp.reverse();

结果为：['y', 'j', 'i', 'e', 'b', 'a']，

【10】拼接数组：concat()

alp.concat([1,2,3])

结果为：['y', 'j', 'i', 'e', 'b', 'a', 1, 2, 3]，需要注意的是：拼接数组并不会改变原来的数组，而是返回一个新的数组。

【11】打印拼接数组，使用特定的字符串连接，join()：

let s = alp.join("-");

结果为：'y-j-i-e-b-a'。

【12】遍历数组：

1.通过普通for循环：

for (let i = 0; i < alp.length; i++) {
    console.log(alp[i]);
}

2.通过for of循环：

for (let string of alp) {
    console.log(string);
}

3.通过forEach()方法：

alp.forEach(function (s) {
    console.log(s);
});
（4）对象类型：对象定义如下所示，每个属性之间用,隔开，最后一个属性可以不用。
let b={
    name: "牛马",
    age:23,
    gender:"boy"
}

可以理解为若干个键值对，并且所有的键都是字符串，值可以是任意的对象。有几点需要注意：

【1】使用一个不存在的对象属性，不会报错。

【2】动态地删减属性，通过delete删除对象的属性。

delete b.gender;

结果对象中还剩下：{name: '牛马', age: 23}。

【3】动态的增加属性，直接给新的属性赋值即可。

b.address = "工地";

结果为：{name: '牛马', age: 23, address: '工地'}。

【4】判断某个属性是否在这个对象中。

let b1 = 'name' in b;

结果为true。

【5】判断一个属性是否是这个对象自身拥有的，可以用hasOwnProperty函数。

b.hasOwnProperty('name');

结果为true。

（5）字符串类型：可以用单引号，也可以用双引号。
let c = "abc";
let d = 'efg';

需要注意的点：
【1】多行字符串的编写可以使用“飘”符号（键盘上Table上面的那个键）括起来，如下所示：

let e = ` 你好啊
中国
我是外星人
`

【2】模板字符串，以下代码输出为：纯纯牛马。

let name = "牛马";
let msg = `纯纯${name}`;
console.log(msg);

【3】字符串长度：用函数length即可求出。

let str = "1234545"
let len = str.length;

【4】js中的字符串是不可变的。

【5】大小写转换：

let str = "abcdf"
let toUp = str.toUpperCase();
let toLow = str.toLowerCase();

toUpperCase：转大写。toLowerCase：转小写。

【6】截取子字符串：

let str = "abcdf"
let subStr = str.substring(1, 3);

上面代码结果为：bc，规则是前闭后开，即[1,3)。

（6）布尔类型：true和false。

（3）运算符

（1）逻辑运算和java中的一样，都可以分为&&、||、!。
（2）比较运算符也和java中的一样，只是要注意=，==，===的区别。
==：等于，类型不一样，值一样，也会判断为true。

console.log(1 == "1");   //true

===：绝对等于，类型一样，值一样，才会判断为true。

console.log(1 === "1");   //false
console.log(1 === 1);   //true

有几点需要注意：

（1）NaN===NaN的结果为false，说明NaN与所有的数值都不相等，包括它本身。只能通过isNaN()这个函数来判断某个数值类型是不是NaN。

（2）尽量避免使用浮点数进行运算，因为存在精度问题！

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

（4）严格检查模式

js是一种比较随意的语言，所以有的时候可能会出错，因此我们可以在js代码前面加上一句代码'use strict'，表示启用严格检查模式，防止因为JavaScript的随意性导致出现的一系列问题。并且这句代码要放在第一行才会起作用

（5）map和set

（1）map:存储键值对
let map = new Map([["jack", 100], ["tom", 90]]);
let number = map.get("jack");  //通过键获取值
map.set("牛马", 1000); 
map.delete("牛马");
var b4 = map.has("jack");   //true

get()方法是通过键获取值。set()方法是增加新的键值对。delete()方法是通过键删除这个键值对。has()方法是判断某元素是否存在于集合中。其原理跟java中的map是类似的，不多赘述。

（2）set:存储无序不重复的元素
let set = new Set([1, 2, 1, 3, 3]);   // {1, 2, 3}
set.add(5);
set.delete(1);
let b3 = set.has(3);  //true

add()方法是添加元素。delete()方法是删除元素。has()方法是判断某元素是否存在于集合中。

（6）iterator迭代器

通过for of 来遍历map和set即可:

for (let mapElement of map) {
    console.log(mapElement);
}


for (let number1 of set) {
    console.log(number1);
}

三、函数

（1）函数的定义

定义方式一

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

一旦执行到return 代表函数结束，返回结果。如果没有执行return，函数也会返回结果，结果为：undefined。

定义方式二

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

function (x){.....}这是一个匿名函数，但是可以把结果赋值给abs,所以可以通过abs来调用。

上面两种方式的效果是一样的。

（2）函数调用

函数调用

直接根据函数名调用即可:

abs(10);
abs(-10);

函数的参数问题

js的函数可以传任意个参数，也可以不传递参数。

假设不传递参数，或者传递的参数类型错误应该如何规避？对于这个问题，我们可以通过手动抛异常来规避。

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

typeof 意思是判断某个值是不是这个类型的函数。

假设传进来的参数存在多个？js中有个关键字是arguments，代表传递进来的所有参数，这些参数组成一个数组。

let abs = function (x) {
    if (typeof x !== 'number') {
        throw "Not A Number";
    }
    for (let argument of arguments) {
        console.log(argument);   //x也包含在里面
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

如何获取所有参数中除了真正的形参之外的所有参数呢？可以使用...（数组名）的形式，类似于java中的可变参数。

let a = function (a, b, ...rest) {    //rest可以理解为数组名
    console.log("a==>" + a);
    console.log("b==>" + b);
    console.log(rest);
};

执行效果如下：

a(123,4234,545,6)

a==>123
b==>4234
(2) [545, 6]

（3）变量的作用域

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

（1）假设变量在函数体中声明，则在函数体外不可以使用。

function a() {
    var x=1;
    x = x++;
}
console.log(x);

结果为：Uncaught ReferenceError: x is not defined。

（2）内部函数可以访问外部函数的成员，反之则不行。

function a() {
    var x=1;
    function b(){
        var y= x+1;
        console.log(y);
    }
    var z = x+y;
}
a();

结果为：Uncaught ReferenceError: y is not defined。

（3）内部函数和外部函数重名的情况：

function a() {
    var x=1;
    function b(){
        var x = 'a'
        console.log('inner===>' + x);
    }
    b();
    console.log('outer===>' + x);
}
a();

输出为：

inner===>a
outer===>1

在js中，函数查找变量是从自身函数开始，从“内”到“外”。

（4）提升变量的作用域：

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

结果为：xundefined。说明：js执行引擎自动提升了变量y的声明，但是没有提升变量y的赋值。

下面这段代码跟上面那段代码的作用是一样的：

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

结果照样为：xundefined。

（4）全局对象window

var x = 1;   //全局变量
console.log(x);
console.log(window.x);

默认所有的全局变量，都会自动绑定到window对象下。alter函数本身也是window的一个变量。

由于我们所有的全局变量都会绑定到我们的对象window上，如果不同的js文件，使用了相同的全局变量，那么就会遇到冲突，这个时候该如何解决呢？

//定义全局唯一变量
var StudyJS = {};
//定义全局变量
StudyJS.name = "牛马";
StudyJS.add = function(a,b){
    return a+b;
}

说明：可以把自己的代码放入自己定义的唯一命名空间中，减少全局命名冲突的问题。

（5）方法

方法定义：就是把函数放到对象的里面，因为对象只有两样东西：属性和方法。

var student={
    name: "牛马",
    birth:2000,
    age: function () {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
console.log(student.age());

结果为：22。

注意：调用方法一定要加括号。

ps:js中调用函数加括号和不加括号的区别？

函数名其实就是指向函数的指针。

不加括号可以认为是查看函数的完整信息。

不加括号传参，相当于传入函整体。

加括号表示立即调用(执行)这个函数里面的代码。

thsi关键字

this关键字跟java中的语法一样，都是得到当前调用它的对象的属性值。将上面的代码拆开如下：

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}
var student={
    name: "牛马",
    birth:2000,
    age: getAge(),
}
console.log(student.age);

结果为：NaN，因为此时的函数getAge是属于window对象的，而window对象中并不存在birth这个属性，所以返回这个结果。

apply

var apply = getAge.apply(student, []); //this指向student这个对象，参数为空
console.log(apply);

在js中每一个函数都有appy这个方法，可以控制this指针的指向。如上面的代码中结果为：22。

（6）Date对象

var date = new Date();
console.log(date);   //Mon May 02 2022 14:45:58 GMT+0800 (中国标准时间)
date.getFullYear();   //年
date.getMonth();   //月
date.getDate();   //日
date.getDay();   //星期几
date.getHours();   //时
date.getMinutes();   //分
date.getSeconds();  //秒
date.getTime();   //时间戳

其中需要注意的是：date.getMonth()是从0~11月。date.getTime()则是指时间戳：是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数。

（7）JSON对象

json是什么

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

在js中，一切皆为对象。任何js支持的对象都可以用JSON来表示。

var person={
    name:"牛马",
    age:19,
    gender: "boy"
}
var s = JSON.stringify(person);
console.log(s);

其中stringify()方法是将对象转化成json字符串。结果为：{"name":"牛马","age":19,"gender":"boy"}。

var parse = JSON.parse('{"name":"牛马","age":19,"gender":"boy"}');
console.log(parse);

其中parse()方法是将json字符串转化成对象。结果为：{name: '牛马', age: 19, gender: 'boy'}。

四、面向对象编程

（1）原型

var person={
    name:"牛马",
    age:19,
    gender: "boy",
    run: function () {
        console.log(this.name + "===>run");
    }
}
var xiaoming ={
    name:"xiaoming"
}
xiaoming.__proto__ = person;
xiaoming.run();

运行结果为：xiaoming===>run。

说明：xioaming这个对象的原型是person这个对象，__proto__ 是对象的原型。类似于java中继承的概念，即xiaoming这个对象继承了person这个对象，因此可以调用person这个对象中的方法。

（2）类和继承

1、定义一个类、方法和属性：

class student{
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert("hello");
    }
}
var student1 = new student("牛马");
student1.hello();

可以看到，跟java有点像，constructor()是构造方法，用来初始化属性。属性在类中可以不声明。

2、继承

class primary extends student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade() {
        alert("我的名字是" + this.name + "," + "我是一名" + this.grade + "的小学生");
    }
}
var primary1 = new primary("小牛马", "一年级");
primary1.myGrade();

跟java中差不多，不多赘述。

五、操作BOM对象

BOM：浏览器对象模型

（1）Window

window代表浏览器窗口。可以用来获取浏览器窗口的有关信息。

window.outerWidth
1536
window.innerWidth
645
window.outerHeight
824

（2）Navigator

navigator封装了浏览器的信息，可以用来获取浏览器的有关信息。

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

大多数时候，我们不会时候这个navigator对象。因为会被认为修改，不建议使用这些属性来编写和修改代码。

（3）Screen

screen代表浏览器的屏幕，可以用来获取浏览器屏幕的有关信息。

screen.height
864
screen.width
1536

（4）Location

location对象包含有关当前页面的url信息。

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=15007414_pg"
protocol: "https:"

host代表主机，hostname代表主机名字，protocol代表协议，href是完整的url。

（5）Document

document代表当前页面，可以获取具体的HTML DOM 文档树节点，还可以获取cookie。

document.title
'百度一下，你就知道'
document.cookie
'BIDUPSID=335A9B51E518162A0745ECB7E7144C57; PSTM=1594203363; MCITY=-%3A; BAIDUID=5C9850368B9D54B1A4C3509AB0572D5B:FG=1; BD_UPN=12314753; H_PS_PSSID=; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; BDSFRCVID=Z_0OJeC62uh-wPTDeZbreiq4K23IBU7TH6ao48pXVQCXI1rI3eSjEG0PfM8g0KubJmfpogKKKmOTH6KF_2uxOjjg8UtVJeC6EG0Ptf8g0M5; H_BDCLCKID_SF=tJ4q_IPMJK_3qR5gMJ5q-n3HKUrL5t_XbI6y3JjOHJOoDDvLBT3cy4LdjG5taIrfLNnR0xct-J5EqDboD6bzLlQW3-Aq544JfTRv-fjnypIaqlIRbqb8QfbQ0MjuqP-jW5TaaJ6D-n7JOpvohfnxy5KUQRPH-Rv92DQMVU52QqcqEIQHQT3m5-5bbN3ut6T2-DA__CDKtInP; delPer=0; BD_CK_SAM=1; PSINO=7; BA_HECTOR=a5a42ha1a405a18krv1h6v82n0q; ZD_ENTRY=baidu; BAIDUID_BFESS=18EE2C4F9FD5966FCFA3E4170D26D279:FG=1; H_PS_645EC=8697dVd%2FFrhAY50Cyzl863BDtgnshLNf559cjSG8pu6KkwYvMGRRybwTBSJg65Zu3BI; channel=baidusearch; baikeVisitId=19a898e6-063b-4031-befb-50c771a2d9e2; BDRCVFR[OEHfjv-pq1f]=K7PavkeTFPTUAN8ULuEQhPEUi4WU6; BD_HOME=1'

（6）History

history代表浏览器的历史记录。

history.back();    //后退
history.forword();   //前进

六、操作DOM对象

DOM：文档对象模型

浏览器网页就是一个DOM属性结构！

  • 更新：更新Dom节点
  • 删除：删除Dom节点
  • 添加：添加Dom节点
  • 遍历：获取Dom节点

（1）获取Dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
    <div id="father">
        <h1>这是一级标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    <script>
        var h1 = document.getElementsByTagName("h1");
        var p1 = document.getElementById("p1");
        var p2 = document.getElementsByClassName("p2");
        var father = document.getElementById("father");
        var children = father.children;
        alert(children);
    </script>
</body>
</html>

通过document的三个方法，可以获取到对应的Dom节点。
（1）getElementsByTagName()是通过标签选择器获取，返回带有指定标签名的对象的集合。
（2）getElementById()是通过id选择器获取，返回带有指定id的Dom节点。
（3）getElementsByClassName是通过类选择器 获取，返回文档中所有指定类名的元素集合。

（2）更新Dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
   <div id = "id1">
   </div>
    <script>
        var div1 = document.getElementById("id1");
        
    </script>
</body>
</html>

可以操作文本

div1.innerText = "牛马";
div1.innerHTML = "<strong>牛马</strong>\n"

（1）innerText ：修改文本的值。
（2）innerHTML ：可以解析HTML文本。

上面两种方法都会覆盖掉原来存在的元素。

可以修改css

div1.style.color = "red";
div1.style.fontSize = "20px";
div1.style.padding = "20px";

（3）删除Dom节点

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

已知父节点的情况下，可以通过以下方式删除：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
<div id="father">
    <h1>这是一级标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById("p1");
    var father = document.getElementById("father");
    father.removeChild(p1);
</script>
</body>
</html>

在不知道父节点的情况下，可以先获取父节点，再通过父节点删除自己：

<script>
    var p1 = document.getElementById("p1");
    var father = p1.parentElement;
    father.removeChild(p1);
</script>

其中parentElement为找到自己的父节点。也可以通过以下方式删除节点：

<script>
    var p1 = document.getElementById("p1");
    var father = p1.parentElement;
    father.removeChild(father.children[0]);   //删除第一个节点
</script>

注意：在我们删除多个节点的时候，children是动态变化的，所以删除节点的时候要注意。

（4）插入Dom节点

我们获得了某个某个Dom节点，假设这个节点是空的，我们可以通过innerHTML增加一个元素。如果这个节点非空，我们就不能这样子干了！因为会产生覆盖。

追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
<div id="father">
    <p id="js">javascript</p>
    <div id="list">
        <p id="java">java</p>
        <p id="plus">c++</p>
        <p id="c">c</p>
    </div>
</div>
<script>
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    list.append(js);
</script>
</body>
</html>

我们可以通过append方法追加一个新的元素。上面的代码的结果为：
在这里插入图片描述
需要注意的是：我们将原来的 <p id="js">javascript</p>追加到下面的div中，原来的节点就不复存在了。

上面的追加是追加已经存在的节点，那么倘若我们要追加一个新节点呢？我们可以创建一个新的标签，将它插入。

<script>
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    var newP = document.createElement("p");
    newP.id = "newP";   //给新标签添加id
  //  newP.setAttribute("id", "newP");  跟上面一行的效果是一样的
    newP.innerText = "牛马";   //给新标签添加内容
    list.appendChild(newP);
</script>

createElement()是创建一个新的标签。appendChild是追加新的节点到末尾。如果我们想要添加节点到某个节点的前面或者后面呢？

<script>
    var java = document.getElementById("java");
    var list = document.getElementById("list");
    var newP = document.createElement("p");
    newP.id = "newP";   //给新标签添加id
    newP.innerText = "牛马";   //给新标签添加内容
    list.insertBefore(newP, java);
</script>

结果为：
在这里插入图片描述
可以看到新增加的节点p已经到了java这个节点前面去了。insertBefore()这个方法可以实现上述的功能。

七、操作表单（验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
<form action="#" method="post">
    <div>
        <label>
            <span>用户：</span>
            <input type="text" id="username" value="牛马">
        </label>
    </div>
    <div>
        <span>性别：</span>
        <input type="radio" value="man" name="gender" id="man">男
        <input type="radio" value="woman" name="gender" id="woman">女
    </div>
</form>
<script>
    var input_text  = document.getElementById('username');
    var man = document.getElementById("man");
</script>
</body>
</html>

input_text.value可以获取文本框中的值。man.checked返回布尔值，可以看单选框选中了什么。也可以用它们来直接赋值。

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <div>
        <label>
            <span>用户：</span>
            <input type="text" id="username" name="username">
        </label>
    </div>
    <div>
        <label>
            <span>密码：</span>
            <input type="password" id="password" name="password">
        </label>
    </div>
    <button type="submit" onclick="checkForm()">提交</button>
</form>
<script>
    function checkForm(){
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        console.log(username.value);
        console.log(password.value);
        //md5加密算法
        password.value = md5(password.value);
    }
</script>
</body>
</html>

onclick是点击提交按钮时所产生的事件，当点击提交后，checkForm()函数会执行，我们可以在函数里编写我们需要的操作。

在表单提交数据时，对于密码我们应该要加密，防止泄密。所以我们可以通过md5加密算法来进行加密。在没有加密时，提交表单的数据是这样的：

username: rqt
password: 123456

使用加密算法后，表单提交的数据时这样的：

username: rqt
password: e10adc3949ba59abbe56e057f20f883e

可以发现，密码123456被加密成了一长串的字符串e10adc3949ba59abbe56e057f20f883e。

八、Jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
<!--    引入jquery-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="#" id="test_jquery">点我</a>
<script>
    $("#test_jquery").click(function () {
        alert("你好");
    });
</script>
</body>
</html>

引用jquery的公式为：$(选择器).action()。其中action表示要执行的行为。css中的所有选择器，jqeury都可以用。

在我们需要用到jquery时，只需要查阅相关文档即可。在线链接为：Jquery API 中文文档。

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
<!--    引入jquery-->
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            height: 500px;
            width: 500px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
mouse:<span id="move"></span>
<div id="divMove" >
    在这里移动鼠标
</div>
<script>
<!--    当页面加载完毕后，响应事件-->
    $(function (){
        $("#divMove").mousemove(function (e) {
            $("#move").text("x:" + e.pageX + "y:" + e.pageY);
        });
    })
</script>
</body>
</html>
龙兄你好呀
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值