JavaScript（基础）

目录

1、概述

1.1 JavaScript（Script脚本）

2、JS入门基础

2.1 注释介绍

2.2 引入JavaScript

2.3 基础语法

2.3 数据类型

2.4 严格检查模式 'use strict'

3、数据类型

3.1 字符串

3.2 数组

3.3 对象

3.4 流程控制

3.5 Map和Set

3.6 iterator（迭代）

4，函数

4.1 定义一个函数

4.2 变量的作用域

4.3 局部作用域

4.4 常量const

4.5 方法

5，内部对象

5.1 Date（基本转换）

5.2 JSON（字符串和对象之间的转换）

6，面向对象编程

6.1 什么是面向对象

7，操作BOM对象

8，操作DOM对象

1. 获得节点

2. 更新节点

3. 删除节点

4. 插入节点

5. 操作DOM

9，操作表单

10，jQuery

1. jQuery公式的使用

2. JS选择器与jQuery选择器的对比

3. action() ：事件

---

1、概述

JavaScript（简称JS）是一种具有函数优先级的轻量级，解释性或即时编译型的编程语言。

解释性语言：程序本身不会立即编译，只有在程序运行的时候进行编译。

JavaScript虽然作为开发Web页面的脚本语言而出名，但它也会被用于很多非浏览器的环境中，JavaScript基于原型编译、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

1.1 JavaScript（Script脚本）

它也是一门弱类型脚本语言，其源代码在发往客户端之前不需要翻译，而是将文本格式的字符代码发给浏览器由浏览器解释运行。

2、JS入门基础

2.1 注释介绍

// 单行注释 ：注释单行代码。

/* 多行注释 */：注释多行代码。

// 单行注释

/* 
这里注释了
多行代码
 */

2.2 引入JavaScript

1，内部标签

在标题title下创建script（script是成对出现的不可忽略，打出单词script+Tab键一键生成）

在script中写入alert（'hello,world'）创建自己的第一个JavaScript程序。

<title>Title</title>
<script>
alert('hello,world');
</script>

2，外部引用script

在同一个目录下，创建一个js目录，在js目录中创建第一个qj.js文件，通过script中的src引入js文件。(/)代表当前目录的下一级。

<script src = "js/qj.js"></script>

3，默认的type

不用显示定义type，也默认就是。

<script type="text/javascript"></script>

2.3 基础语法

1，浏览器必备调试须知：

在浏览器中按Ctrl+Shift+C打开调试

 2，var ：定义变量

alert：进行弹窗操作，alert里面的值都会通过弹窗，显现给我们看。

console.log：在浏览器的控制台打印变量（供我们敲代码的人阅读程序信息）

// 注意：javaScript严格区分大小写
// 比如：var a = 1，与  var A = 1，是两个变量
    <script>
        // 1，定义变量  变量类型 变量名 = 变量值
        var score =70;
        // alert(num);  作用于在条件控制语句符合时，弹窗显示出相应的内容
        // 2,条件控制语句
        if(score>60&& score<70){
            alert("60~70")
        }else if (score>70&& score<80){
            alert("70~80")
        }
        else {
            alert("other")
        }
        // 在浏览器的控制台输入console.log(score)，打印变量.
    </script>

2.3 数据类型

网页中有的东西都可以是数据：比如数值，文本，图形...

而数据的表达形式可以分为很多类型，比如var数字类型，字符串类型，布尔值类型。

因为在JavaScript不区分小数和整数，所以都用Number表示。

1，定义变量

var：变量

NaN:全称not a number 表示这不是一个数字。

Infinity：表示无限大。

( ' ' ) ( " " )：字符串的符号有两个，写在符号中间的就是字符串。

布尔值：返回真假 true为真，false为假。

&&，||，！逻辑运算符：真返回结果为true，假返回结果为false。

==：等于（判断结果，类型不一样，值一样，也会被判断为true）。

===：绝对等于（类型一样，值一样，结果才会为true）。

浮点数问题：在程序运算时，可能会存在精度的问题. 比如：console.log((1/3) === (1-2/3)) 结果:false。

var // 变量

NaN // 全称not a number 表示这不是一个数字.    NaN还与所有的数值都不相等，包括自己
Infinity // 表示无限大

'abc'   "abc"                      // 字符串的符号有两个('')("")

true  false                        // 布尔值：返回真假 true为真，false为假

&&  // 两个都为真，结果为真

||  // 其中有一个为真，结果为真      ---逻辑运算，真为true，假为false---

！  // 取反，若是为真，返回假，若是假返回真

=
==  // 等于 （类型不一样，值一样，也会被判断为true）                        --比较运算符--
===  // 绝对等于（类型一样，值一样，结果才会为true）所以在JavaScript中尽量都使用===（3个等于号来比较值）

// 浮点数问题：在程序运算时，可能会存在精度的问题.   比如：console.log((1/3) === (1-2/3))  结果:false

2，数组

数组，常常用来定义一组数字，也可以是一组字符串。

undefined：代表此刻的值未定义。

// 保证数组的可读性，尽量用[]
var num = [1,4,21,41,'41',"44"]
alert(num)

3，对象

对象：万物皆对象。

对象在JavaScript中，用大括号{ }表示：在对象中创建的属性，都以 , 逗号结尾，而最后一个属性可以不用逗号结尾。

数组用 [ ] 中括号表示：

var arr = { 
    name:"zhangsan",   // 对象中的属性
    age:18,
    tags:['js','java',1]  // 对象中的数组
}  // 取值在控制台里面，对象名加  .  对象名获取值 比如：arr.name获取对象name的名字

2.4 严格检查模式 'use strict'

'use strict' 严格检查模式，预防js的随意性导致产生的一些问题。所以必须写在js的第一行。

<script>
         'use strict'
         let i = 1;
         ...
</script>

3、数据类型

局部变量：就是在使用范围内才有意义的。

全局变量：是在整个类中都有意义的。

<script>
    // 局部变量都建议使用let 去定义，比较规范
    // 全局变量
    let i = 1;    
</script>

3.1 字符串

1，正常字符串用 ' ' , " " 包裹。

2，注意转义字符。

 

 转义字符参考：JavaScript 字符串 (w3school.com.cn)

3,多行字符串的编写

定义一个变量，变量内可以写多个换行字符串。

// Tap上面那个键是多行字符编写  ``符号内就可以写多个换字符串
var a =`asd
weq
qwe
asd
`

4，模板字符串 ${ } 表示

${ }可以把变量插入到另一个变量中。

let a ='abc';
let b = "as";
let msg = `你好,${a}`// 用${a}把let a的值替换到字符串中

5，获取字符串长度

let a = 'abc'; // 这个提取到的字符串总数就是3个
a.length; // 提出字符串的总数，用数字表示

6,大小写转换方法

src.toUpperCase(); // 将里面的字符串字母转换为大写
src.toLowerCase(); // 将里面的字符串字母转换为小写

scr.substring(1.2) // 截取1和2区间的字符串

3.2 数组

重点：增删改查

Array数组可以包含任何的数据类型。

(1）push：增加元素到尾部。 pop：弹出尾部的元素。

(2）unshift：增加元素到头部。 shift：弹出头部的元素。

(3）sort：排序。

(4）reverse：反转所有元素。

(5）concat：拼接后返回一个新数组。

(6）join( ' -' )打印字符，用特定的 - 符号拼接。

(7）indexOf：通过元素获得下标索引。

(8）slice() 截取数组的一部分，返回新的数组，类似于String中的substring。

3.3 对象

1，若干个键值对。

var person = {  // 对象都包括下面的属性
name:"zhangsan",
age:20,
sex:'男'
}

js中{...}表示一个对象，对象表示方法xxx：xxxxx加以逗号隔开，最后一个不用逗号。

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

delete person.name // 通过delete删除person对象中的name元素

3，动态的添加，直接给新的属性添加值就可以了。

person.abc="abc" // 直接添加abc字符串

4,判断属性值是否在这个对象中、、结果返回true 和 false。

"age" in person // 通过in来判断person对象中是否有字符abc的存在，并返回true和false

5，判断这个属性是否是这个对象本身拥有hasOwnProperty()、、结果返回true 和 false。

person.hasOwnProperty("tostring"); // 判断person对象中是否本身拥有tostring字符串，并返回true和false

3.4 流程控制

• if判断语句
• while循环语句
• for循环语句
• forEach循环语句

// 通过forEach循环打印出arr数组的值
var arr = [11, 22, 33, 44, 55, 66];
arr.forEach(function (value) {
    console.log(value);
})

1，for..of 循环打印出所有的值。

var a = [1,2,45] // 数组
for (var x of a){  // 循环打印
    console.log(x) 
}

2，for..in 循环打印出索引位置。

var arr = [11, 22, 33, 44, 55, 566]; // 通过for..in循环打印出数组中存在的值
for (var num in arr) {
    if (arr.hasOwnProperty(num));
        console.log("存在");
        console.log(arr[num]);
}

3.5 Map和Set

1，Map（元素拥有可重复性）

map.set(); 设值一个新的值到尾部。

map.get(); 获取其中的属性。

map.add(); 增加元素。

map.delete(); 删除元素。

var map = new Map([['jion', 100], ['Ailes', 80], ['zhangsan', 60]]);
map.set('lisi', 123312);// 设置一个新的值
var name = map.get('lisi');// 获取lisi的属性
console.log(name)// 控制台打印name的属性
map.add();  // 增加元素
map.delete(); // 删除元素

2，Set （元素无序性，不可重复性）

set.add(); 增加元素。

set.delete(); 删除元素。

var set = new Set([3,1,1,1,1])
// 结果为[3,1]  因为set是无序不重复的
set.add();  // 增加元素
set.delete(); // 删除元素
console.log(set.has());// 查找元素中是否包含这个值，返回结果true和false

3.6 iterator（迭代）

利用for..of循环便利数组 、便利Map、便利Set。

数组遍历：

var a = [1, 2, 3, 4];
for (let c of a) {   // 使用of便利出数组的所有值
    console.log(c);
}

Map便利：

var map = new Map([["a", 123],["b", 456], ["c", 789]]);
for (let xc of map) {  // 使用of便利出map的所有值
    console.log(xc);
}

Set便利：

var set = new Set([1, 2, 3, 4, 5]);
for (let x of set) {  // 使用of便利出sat的所有值
    console.log(x);
}

4，函数

函数的定义：在JavaScript中函数是一段可以被执行或调用任意次数的JavaScript代码，在数据类型中属于"function"。函数也拥有属性和方法，因此函数也可以是对象。

4.1 定义一个函数

在JavaScript中我们用function来定义函数，函数内部有方法和属性。

1，绝对值函数

（定义一）函数

<script>
    function sun(x) { 
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }
</script>

一旦碰到return就代表函数结束，返回结果！若是没有return函数执行完就返回undefined。

（定义二）匿名函数

function（x）{.....} 这是一个匿名函数，可以把函数赋值给abc，通过abc来调用函数。

<script>
    var abc = function (x) {
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }
</script>

2，如果我们在使用函数的时候定义的参数不是数字，就会出现Not a Number错误，这时候就需要我们手动抛出异常。

<script>
    var abc = function (x) {
        // 手动抛出异常
        if (typeof x !== 'number') {
            throw 'Not a Number'
        }
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }
</script>

3，Rest就是为解决传入的参数数量不一定，而出来的。

rest用法： rest参数必须写在最后面，用...标识。

<script>
    function abc(a,b,...rest){  // rest参数必须写在最后面，用...标识
        console.log("a=>"+a);
        console.log("b=>"+b);
        console.log(rest)
    }
</script>

4.2 变量的作用域

1，JavaScript里面var是有定义域的 (闭包可以实现)

x假如在函数内定义了，则在函数体外不可使用。

<script>
    function abv() {
        var x = 1;
        var x = x + 1;
    }
    x = x +2;  // 该X不在定义域内所以会产生错误，Uncaught ReferenceError: x is not defined  第一个异常
</script>

2，window

默认所有的全局变量，都会自动绑定在window对象下：

var x = 'xxx';
alert(x);   // alert本身也是绑定在window下
alert(window.x);

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

如何减少冲突？

解决方法：把自己的代码都放在自己定义的唯一空间中，降低全局命名冲突的问题。

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

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

4.3 局部作用域

<script>

    function aaa() {
        for (var i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i + 1);// 不该产生的问题：i出了这个作用域还可以使用  结果为101，如何避免？
    }
</script>

ES6解决全局作用域冲突问题：

<script>

    function aaa() {
        for (let i = 0; i < 100; i++) {  // 更换成了let（建议）
            console.log(i);
        }
        console.log(i + 1);// 这时候就会显示出Uncaught ReferenceError: i is not defined异常
    }
</script>

4.4 常量const

const：只读常量，不可以更改，更改了常量就会报错。

const PI ='3.14';  // const只读变量
console.log(PI);
PI = 'adsa'; // 因为const只能读不能设值或更改，所以就会出现Uncaught TypeError: Assignment to constant variable.异常
console.log(PI);

4.5 方法

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

<script>
    var zhangsan={ // 对象名
        name:'lisi',  // 属性：给对象赋值
        bitrh:2001,  // 出生年
        // 方法
        age:function(){  // 方法：使用方法来给age设值
            // 今年——出生的年
            var now = new Date ().getFullYear(); // get...代表今年
            return now - this.bitrh;    // this是无法指向的，但它默认指向调用它的那个对象。
        }
    }
</script>

// zhangsan.name   调用属性
// zhangsan.age()    调用方法一定要带括号

(1）this是无法指向的，但它默认指向调用它的那个对象。

那如何解决指向问题？

(2）apply：在js中可以控制this的指向。

getAge.apply(zhangsan,[]);  // apply直接指向了zhangsan这个对象   

注意点：apply控制指向的时候只能调用方法去指向，不能调用属性去指向。

5，内部对象

5.1 Date（基本转换）

转换成时间的代码。

<script>
    var now = new Date(); // 打印now 显示当前的时间
    now.getFullYear();// 年
    now.getMonth();// 月
    now.getDate();// 日
    now.getDay();// 星期
    now.getHours();// 时
    now.getMinutes();// 分
    now.getSeconds();// 秒
    now.getTime(); // 时间戳，从1970，01，1，0：00：00，到现在的毫秒数
    console.log(new Date(1639046245429)) // 时间戳转为时间
    now.toLocaleDateString() // 调用的是一个方法，显示的是（当前时间：年月日）
</script>

5.2 JSON（字符串和对象之间的转换）

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

它易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

(1）转化过程 （json字符串转化为对象）（对象转化为json字符串）

<script>
    var user = {
        name: "zhangsan",
        age: 18,
        sex: '男'
    }
    // 对象转化为json字符串  {"name":"zhangsan","age":18,"sex":"男"}
    var jsonuser = JSON.stringify(user);

    // json字符串转化为对象  参数为JSON字符串
    JSON.parse('{"name":"zhangsan","age":18,"sex":"男"}')
</script>

6，面向对象编程

6.1 什么是面向对象

类：就是一个模板。

对象：具体的实例。

在JavaScript中换一下思维方式。

JavaScript中的面向对象：

(1）原生继承

在通过对象名 . proto = 指向了要调用的对象。（获取被指向的对象的所有属性和方法）

<script>
    var xiaoming = {  // 对象
        name: "zhangsan",
        age: 18,
        run: function () {
            console.log(this.name + "run....")
        }
    }
    var lisi = {   // 对象
        name: "lisi"
    }
    var fish={   // 对象
        fish:function (){
            console.log(this.name+"的鱼要被淹死了....")
        }
    }
    // lisi的原型指向了xiaoming
    lisi.__proto__ = fish;  // lisi对象通过原生方法引向fish对象，以此获得fish所有方法属性
</script>

(2）class继承

1.定义一个类，属性、方法。

<script>
    // 定义一个学生的类
    class Student {
        constructor(name) {  // 构造函数
            this.name = name;
        }

        hello() {
            alert('Hello')
        }

    }
    
    var xiaoming = new Student("xiaoming"); // class继承
    var zhangsan = new Student("zhangsan"); // class继承
</script>

2.继承extends

<script>
    // 定义一个学生的类
    class Student {
        constructor(name) {
            this.name = name;
        }
        hello() { // 学生方法
            alert('Hello')
        }
    }
    
    class xiaoStudent extends Student {
        constructor(name, grade) {
            super(name);
            this.grade;
        }
        myGrade(){ // 方法
        alert('我是一名小学生')
        }
    }
    var xiaoming = new Student("xiaoming");
    var zhangsan = new xiaoStudent("zhangsan",1);
</script>

3.原型链

(1).所有的引用类型都有一个 proto （隐式原型）属性，属性值是一个普通的对象。

(2).所有的函数都有一个prototype（显示原型）属性，属性值是一个普通的对象。

(3).所有引用类型都有一个constructor（构造函数）属性，该属性（是一个指针）指向它的构造函数。

(4).所有引用类型的 proto 属性指向它构造函数的prototype。

7，操作BOM对象

JavaScript的诞生就是为了能在浏览器中运行。

BOM：浏览器对象模型。

以下常用方法：

（1）window:

window.innerHeight // 调整浏览器中的内部高宽度
315
window.innerWidth
1920
window.outerHeight   // 调整浏览器中的外部高宽度
1040
window.outerWidth
1920

（2）location:

location代表当前页面的URL信息。

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() // 刷新网页
// 设置新的地址
location.assign()  // 方法里面写链接 

（3）document:获取具体文档中的所有节点。

<dl id="">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</dl>
<script>
    var dl = document.getElementById('app')// 获取dl中的所有节点
</script>

（4）获取cookie

document.cookie  // 在页面中的控制台里，获取cookie值

（5）history：

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

history.back()  // 操作网页后退
history.forward()  // 操作网页前进

8，操作DOM对象

DOM：文档对象模型。

JavaScript在页面中的作用：

• JavaScript 能够改变页面中的所有 HTML 元素。
• JavaScript 能够改变页面中的所有 HTML 属性。
• JavaScript 能够改变页面中的所有 CSS 样式。
• JavaScript 能够对页面中的所有事件做出反应。

四大步骤：

1. 更新：更新DOM结点。
2. 遍历dom节点：得到DOM节点。
3. 删除：删除一个DOM节点。
4. 添加：添加一个新的节点。

1. 获得节点

要操作一个DOM节点，就要先获得DOM节点。

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    // 对应CSS选择器
    var h1 = document.getElementsByTagName('h1'); // 获得document节点
    var h2 = document.getElementById('p1');
    var h3 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    var children = father.children;// 获取父节点下的所有子节点
    father.firstChild; // 获得第一个子类节点 h1
    father.lastChild;// 获得最后一个子类节点 p2
</script>

2. 更新节点

操作文本（在id名里面操作文本）。

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

// （在插入节点的时候会覆盖掉原来的节点）
id1.innerText = '132'   // 修改当前页面文本的值
id1.innerHTML='<strong>123</strong>' // 可以解析HTML的文本标签（意思是可以操作HTML的方法去设值）

操作JS

id1.style.color='red'  // 给字体设置颜色 
id1.style.fontSize='20px' // 给字体设置大小   注意驼峰命名
id1.style.background='blur'// 给背景颜色
id1.style.padding='10px'  // 给内边框设置大小

3. 删除节点

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

删除节点的时候，会出现一种删除动态流动的情况，比如在删除掉0这个元素的时候，那么它的下一个元素，也就是1，这个1元素会动态的变成0元素。

<div id="father">  // 父标题
    <h1>标题1</h1>
    <p id="p1">p1</p>  // 子标题
    <p class="p2">p2</p>
</div>

father.removeChild(p1)  // 先获取父节点，在通过父节点删除自己
p1.parentElement  // 找到父元素

// 删除是一个动态的过程
father.removeChild(father.children[0])  // 在删除0这个元素时，它是一个动态的体现，删除完后，012元素，会重新变成01两个元素
father.removeChild(father.children[1])  // 删除节点的时候，注意：childern是时刻在变化的。
father.removeChild(father.children[2])

4. 插入节点

我们获得了某个DOM节点，假设这个dom节点是空的，我们通过HTML就可以增加一个元素了。但是这个DOM节点已经存在元素了，就不能在进行使用了，因为插入新的元素时会覆盖掉原来的老元素。

追加：把外围元素追到到父类元素下。

<p id="js">JavaScript</p>  // 标题JavaScript
<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 zj = list.appendChild(js) // 追加的方法
     console.log(zj)  // 相对于输出，把id=“js”通过appendChild()方法追加到子标题里面
</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 list = document.getElementById('list')
    // 通过js创建一个新的节点
    var newp = document.createElement('p')  // 创建一个新的p标签
    newp.id = 'newP';
    newp.innerText='zhangsan你好';
    list.appendChild(newp)  
        // 创建一个标签节点
    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: yellowgreen;}'; // 设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

5. 操作DOM

操作DOM涉及到了jQuery的公式。

1，节点文本操作：

$('#test-u li[name=se]').text(); // 获得值
 $('#test-u li[name=se]').text('设值值'); // 设值值
 
 $('#test-u').html(); // 获取值
 $('#test-u').html('<strong>12312</strong>'); // 设值值：通过jQuery来操作html属性，把12312加粗

2，操作CSS：

$('#test-u li[name=se]').css("color","red"); // 通过公式来调用css的方法
// 通过jQuery来操作css属性，把当前列表颜色设值成红色

3，元素的显示和隐藏：

$('#test-u li[name=se]').show(); // 元素显示
$('#test-u li[name=se]').hide(); // 元素隐藏

9，操作表单

文本框：text

下拉框：<select>

单选框：radio

多选框：checkbox

隐藏框：hidden

密码框：password

.........

（1）表单的目的：提交信息

获得要提交的信息：

<form action="pst">
    <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="woman" id="girl"> 女
    </P>
</form>
<script>
    var input_text = document.getElementById('username');// 通过ID来选中
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '1234'

    // 对于单选框，多选框等等固定的值boy_radio.value只能获取当前的值
    boy_radio.checked;// 查看返回的结果是否为true，如果是true则被选中
</script>

2）提交表单：

<form action="#" method="post">
    <p>
        <span>用户名:</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="text" id="password" name="password">
    </p>
// 绑定事件 onclick被点击
    <button type="submit" onclick="aa()">提交</button>
</form>

<script>
        function aa(){
            var uname = document.getElementById('username');
            var pwd = document.getElementById('password');
            console.log(uname.value);
            console.log(pwd.value);
            pwd.value='1111';
        }
</script>

10，jQuery

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

获取jQuery：通过CDNjQuery引进JavaScript内。

// 引进CDNjQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

1. jQuery公式的使用

公式：$(selector).action()

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

</head>
<body>
   // 公式：$(selector).action() 
<a href="" id="test-jQuery">点我</a>

<script>
document.getElementById('id');// 获取id
// 选择器就是CSS选择器
$('#test-jQuery').click(function () {
 alert('hello,jquery');  // 点击（点我）弹出'hello,jquery'框
})
</script>

2. JS选择器与jQuery选择器的对比

js：元素js，选择器少，麻烦不好记住。

jQuery：css中的选择器它全部都能使用，比较好记。

<script>
    // 元素js，选择器少，麻烦不好记
    // 标签
    document.getElementsByTagName()
    // id
    document.getElementById()
    // 类
    document.getElementsByClassName()
    // jQuery  css中的选择器它全部都能使用！
    $('p').click() // 标签选择器
    $('#id').click() // id选择器
    $('.class1').click() // class选择器
</script>

3. action() ：事件

什么是事件呢？

事件是指用户在某事务上由于某种行为所执行的操作，（对页面元素的某种操作）

比如：

1,鼠标事件：对应的操作方法。

 2,事件：（举例：一个鼠标获取xy坐标的事件）

通过事件来创建一个可以获得鼠标当前位置的坐标。

<!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 {  //  给div设值属性
            width: 500px;
            height: 500px;
            border: 2px red solid;
        }
    </style>
</head>
<body>
// 要求：获取鼠标当前的一个坐标
mouse: <span id="mouseMove"></span>  // 定义一个单独的mouse
<div id="divMove">   // 元素里设值id名方便获取
    在这里移动鼠标试试   // 文字标识
</div>
<script>
    // 当网页元素加载完毕之后，响应事件
    // 鼠标中设值坐标，有x：y：两个坐标
    $(function () {   // 在公式里面设值函数
        $('#divMove').mousemove(function (e) {  // 在函数里面获取#divMove的属性
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)  // 在函数内创建事件
        })
    })
</script>

</body>
</html>

事件的介绍可参考：js中的事件是什么_wang_bing_bo的博客-CSDN博客_js什么是事件