JavaScript

稻田守望者 發表於 2022-3-7 10:03:00

<h2 id="什么是javascript">什么是JavaScript</h2>
<h3 id="一概述">一、概述</h3>
<p>JavaScript是一门世界上最流行的脚本语言</p>
<p><strong>一个合格的后端人员，必须要精通JavaScript</strong></p>
<h2 id="快速入门">快速入门</h2>
<h3 id="一引入javascript">一、引入JavaScript</h3>
<ol>
<li>
<p>内部标签</p>
<pre><code class="language-html">
<script>
//......
</script>
</code></pre>
</li>
<li>
<p>外部引入</p>
<pre><code class="language-html">

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


<script type="application/javascript"></script>
</code></pre>
</li>
</ol>
<h3 id="二基本语法">二、基本语法</h3>
<pre><code class="language-javascript">// 1.定义变量 [变量类型变量名 = 变量值]
const score = 70;
// 2.条件控制
if (score === 70) {
alert("良好");
} else {
alert("其它");
}
//在浏览器的控制台输出变量 console.log(score)

// 3.循环
// while循环 ( while(){} / do{}while() )
// for循环 ( for i / forEach()（ES5.1） / for of / for in（ES6） )
</code></pre>
<p>浏览器必备调试须知：</p>
<p><img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100006065-431162390.png" alt="image-20220223164807011" loading="lazy"></p>
<h3 id="三数据类型">三、数据类型</h3>
<p>数值、字符、布尔、文本、图形、音频、视频等</p>
<ol>
<li>
<p>数字 (number)<br>
js不区分小数和整数</p>
<pre><code class="language-javascript">12 //整数
12.1 //浮点数
1.12e2 //科学计数法
-99 //负数
NaN //非数值
Infinity //无穷大
</code></pre>
</li>
<li>
<p>字符串</p>
<pre><code class="language-javascript">'abc'
"abc"
</code></pre>
</li>
<li>
<p>布尔值</p>
<pre><code class="language-javascript">true
false
</code></pre>
</li>
<li>
<p>逻辑运算</p>
<pre><code class="language-javascript">&&
||
!
</code></pre>
</li>
<li>
<p><strong>比较运算符</strong>（重要）</p>
<pre><code class="language-javascript">=
== //等于（类型不一样，值一样，判断为true）
=== //绝对等于（类型一样，值一样，判断为true）
</code></pre>
<p>坚持不要使用==比较</p>
<p>注意：</p>
<ul>
<li>NaN与所有数值都不相等，包括自己</li>
<li>只能通过isNaN(NaN)来判断，数值是否为NaN</li>
</ul>
<p>浮点数问题</p>
<pre><code class="language-javascript">console.log((1/3) === (1 - (2 / 3))); //false
</code></pre>
<p>尽量避免使用浮点数进行运算，存在精度问题</p>
<pre><code class="language-javascript">Math.abs((1/3) - (1 - (2 / 3))) < 0.000000001 //解决方法
</code></pre>
</li>
<li>
<p>null 和 undefined</p>
<ul>
<li>null空</li>
<li>undefined未定义</li>
</ul>
</li>
<li>
<p>数组<br>
Java的数组需要相同类型的对象，JS不需要。</p>
<pre><code class="language-javascript">// 保证代码的可读性，尽量使用[]
let array = ;

array = new Array(1, 2, 3, null, "hello", true);

// 越界输出undefined
console.log(array);
</code></pre>
</li>
<li>
<p>对象</p>
<pre><code class="language-javascript">let person = {
name: "ylf",
age: 18,
tags: ["java", "python", "c/c++"]
};

console.log(person.age);
</code></pre>
</li>
</ol>
<h3 id="四严格检查模式">四、严格检查模式</h3>
<pre><code class="language-javascript">// 严格检查模式，预防JavaScript的随意性导致的问题（必须写在第一行）
"use strict";
// 默认为全局变量，建议局部变量都是用let定义
let i = 1;
</code></pre>
<h2 id="数据类型">数据类型</h2>
<h3 id="一字符串">一、字符串</h3>
<ol>
<li>
<p>正常字符串使用单引号或双引号包裹</p>
</li>
<li>
<p>转义字符</p>
<pre><code>\' 单引号
\n 换行
\t 制表符
\u4e2d \u#### unicode字符
\x41 \x## ascii字符
</code></pre>
</li>
<li>
<p>多行字符串</p>
<pre><code class="language-javascript">// 反单引号
let msg =
`Hello,world!
nico,nico.
`;
console.log(msg);
</code></pre>
</li>
<li>
<p>模板字符串</p>
<pre><code class="language-javascript">let msg = "Hello, ";
console.log(msg + "world!");

let name = "ylf!";
msg = `你好啊, ${name}`;
console.log(msg);
</code></pre>
</li>
<li>
<p>字符串长度</p>
<pre><code class="language-javascript">string.length
</code></pre>
</li>
<li>
<p>字符串的可变性（不可变）<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100005863-941471748.png" alt="image-20220223215544704" loading="lazy"></p>
</li>
<li>
<p>大小写转换（注意：不是属性，是方法）</p>
<pre><code class="language-javascript">string.toUpperCase()
string.toLowerCase()
</code></pre>
</li>
<li>
<p>string.indexOf("string")（通过子字符串获取子字符串第一个字符位置）</p>
</li>
<li>
<p>string.substring()（截取字符串的一部分，返回一个新字符串）</p>
<pre><code class="language-javascript">[)
string.substring(1) //从第一个字符截取到最后一个字符
string.substring(1,3) //[1,3)
</code></pre>
</li>
</ol>
<h3 id="二数组">二、数组</h3>
<p>array可以包含任意的数据类型</p>
<pre><code class="language-javascript">let array = ;
</code></pre>
<ol>
<li>
<p>长度</p>
<pre><code class="language-javascript">array.length
</code></pre>
<p>注意：给array.length赋值，数组大小会发生变化：数组变大，增加下标对应元素为空；数组变小，元素丢失</p>
</li>
<li>
<p>indexOf()（通过元素获取下标索引）</p>
</li>
<li>
<p>slice()（截取数组的一部分，返回一个新数组）类似字符串中的substring()</p>
</li>
<li>
<p><strong>push(), pop()（尾部）</strong></p>
<pre><code class="language-javascript">push() //将元素压入到尾部
pop() //弹出尾部的一个元素
</code></pre>
</li>
<li>
<p><strong>unshift(), shift()（头部）</strong></p>
<pre><code class="language-javascript">unshift() //将元素压入到头部
shift() //弹出头部的一个元素
</code></pre>
</li>
<li>
<p>sort()（排序）</p>
</li>
<li>
<p>reverse()（元素反转）</p>
</li>
<li>
<p><strong>concat()</strong><br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100005668-1142314088.png" alt="image-20220224172344741" loading="lazy"></p>
<p>concat()没有修改数组，只是返回一个新数组</p>
</li>
<li>
<p>join()（连接符）<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100005492-2030401608.png" alt="image-20220224172553876" loading="lazy"></p>
<p>打印拼接数组，使用特定的字符串连接</p>
</li>
<li>
<p>多维数组<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100005276-802259240.png" alt="image-20220224173056717" loading="lazy"></p>
</li>
</ol>
<h3 id="三对象">三、对象</h3>
<p>若干个键值对</p>
<pre><code class="language-javascript">let 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
</code></pre>
<p>JavaScript中的键都是字符串，值为任意对象！</p>
<ol>
<li>对象赋值<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100005021-1390915054.png" alt="image-20220228193910402" loading="lazy"></li>
<li>使用不存在的对象属性不报错！undefined</li>
<li>动态删减属性<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100004820-321259817.png" alt="image-20220228194145657" loading="lazy"></li>
<li>动态添加属性<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100004622-1262879188.png" alt="image-20220228194252665" loading="lazy"></li>
<li>判断属性值是否在对象中<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100004411-574827601.png" alt="image-20220228194911289" loading="lazy"></li>
<li>判断属性是否对象自身拥有的<br>
<img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100004238-735423640.png" alt="image-20220228195130136" loading="lazy"></li>
</ol>
<h3 id="四map和set">四、Map和Set</h3>
<blockquote>
<p>ES6新特性</p>
</blockquote>
<p>Map（键值对）</p>
<pre><code class="language-javascript">let map = new Map([["jack", 12], ["tom", 18], ["ylf", 20], ["jet", 30]]);
console.log(map.get("jack")); //获取对应的键值
map.set("nico", 78); //添加键值对
map.delete("nico"); //删除键值对
console.log(map.has("nico")); //判断指定键值对是否存在

// 遍历Map
for (let mapElement of map) {
console.log(mapElement);
}
</code></pre>
<p>Set（无序不重复集合）</p>
<pre><code class="language-javascript">let set = new Set();
set.add(4); //添加不重复元素到末尾
set.delete(4); //删除指定元素
console.log(set.has(4)); //判断指定元素是否存在

// 遍历Set
for (let number of set) {
console.log(number);
}
</code></pre>
<h2 id="函数">函数</h2>
<h3 id="一定义函数">一、定义函数</h3>
<pre><code class="language-javascript">// 定义方式一
function 函数名(形参) {
函数体;
return 返回值;
}

// 定义方式二
// function(){} 为匿名内部类，但是可以把结果赋值给变量名，通过变量名调用函数
let 函数名 = function(形参) {
函数体;
return 返回值;
}

// 如果没有执行return，函数也会返回结果undefined
</code></pre>
<p><strong>参数问题</strong></p>
<p>JavaScript函数可以传入任意个参数，也可以不传入参数</p>
<p>传入参数是否合法存在，不合法存在如何规避？</p>
<pre><code class="language-javascript">let abs = function(x) {
// 手动抛出异常来判断
if (typeof x !== "number") {
   throw "Not a number!";
}

if (x < 0) {
   return -x;
} else {
   return x;
}
};
</code></pre>
<p>arguments（包含所有传入函数的参数，是一个数组）</p>
<p><strong>多参数问题</strong></p>
<p>rest（ES6引入新特性，获取除了已经定义的参数之外的所有问题）</p>
<pre><code class="language-javascript">// 初始方法
if (arguments.length > 1) {
for (let i = 1; i < arguments.length; i++) {
   console.log(arguments);
}
}
</code></pre>
<pre><code class="language-javascript">function fun(a, ...rest) {
for (let restElement of rest) {
   console.log(restElement);
}
}
</code></pre>
<p>rest参数只能写在最后面，必须用...标识</p>
<h3 id="二变量作用域">二、变量作用域</h3>
<h3 id="三方法">三、方法</h3>
<blockquote>
<p>对象里的叫方法</p>
</blockquote>
<pre><code class="language-javascript">// 定义方法方式（方法就是把函数放入对象里，对象由属性和方法构成）
let person = {
name: "YLF",
birth: 1999,
// 方法
age: function () {
   let fullYear = new Date().getFullYear();
   return fullYear - this.birth;
}
}
</code></pre>
<p>面向对象语言中 this 表示当前对象的一个引用。</p>
<p>但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。</p>
<ul>
<li>在方法中，this 表示该方法所属的对象。</li>
<li>如果单独使用，this 表示全局对象。</li>
<li>在函数中，this 表示全局对象。</li>
<li>在函数中，在严格模式下，this 是未定义的(undefined)。</li>
<li>在事件中，this 表示接收事件的元素。</li>
<li>类似 call() 和 apply() 方法可以将 this 引用到任何对象。</li>
</ul>
<h2 id="内部对象">内部对象</h2>
<p>标准对象</p>
<p><img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100004025-180892202.png" alt="image-20220302164401102" loading="lazy"></p>
<h3 id="一date">一、Date</h3>
<pre><code class="language-javascript">let date = new Date();
console.log("date: ");
console.log(date);
console.log("星期: ");
console.log(date.getDay());
console.log("月: ");
console.log(date.getMonth());
console.log("日: ");
console.log(date.getDate());
console.log("年: ");
console.log(date.getFullYear());
console.log("时: ");
console.log(date.getHours());
console.log("分: ");
console.log(date.getMinutes());
console.log("秒: ");
console.log(date.getSeconds());
console.log("时间戳: ");
// 表示从 1970 年 1 月 1 日 00:00:00 UTC 到给定日期之间经过的毫秒数
console.log(date.getTime());
</code></pre>
<h3 id="二json">二、JSON</h3>
<p>早期所有数据传输习惯使用XML文件</p>
<ul>
<li>JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式</li>
<li>简洁和清晰的<strong>层次结构</strong>使得 JSON 成为理想的数据交换语言</li>
<li>易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率</li>
</ul>
<p><strong>JSON 与 JS 对象的关系</strong></p>
<p>JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。</p>
<p>如：</p>
<pre><code>var obj = {a: 'Hello', b: 'World'}; //这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
</code></pre>
<p>JSON（格式字符串）和 JS 对象（也可以叫JSON对象或 JSON 格式的对象）互转（JSON.parse 和 JSON.stringify）。</p>
<p>要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：</p>
<pre><code>var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}一个对象
</code></pre>
<p>要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：</p>
<pre><code>var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'一个JSON格式的字符串
</code></pre>
<p>说句不严谨的话：JSON.parse() 就是<strong>字符串</strong>转 <strong>js 对象</strong>， JSON.stringify()就是 <strong>js 对象</strong>转<strong>字符串</strong>，它们前提是要 json 格式才有意义。</p>
<h3 id="三ajax">三、Ajax</h3>
<ul>
<li>原生的js写法 xhr 异步请求</li>
<li>JQuery封装的方法 $("选择器").ajax("")</li>
<li>axios请求</li>
</ul>
<h2 id="面向对象编程">面向对象编程</h2>
<h3 id="一什么是面向对象">一、什么是面向对象</h3>
<p>JavaScript，Java，C#</p>
<p>类（JavaScript中又称原型对象）</p>
<p>对象</p>
<h3 id="二原型继承">二、原型继承</h3>
<pre><code class="language-javascript">let student = {
name: "student",
age: 0,

run: function () {
   console.log(this.name + ", run!");
}
};

let me = {
name: "ylf"
};

me.__proto__ = student;
</code></pre>
<h3 id="三class继承">三、class继承</h3>
<p>定义类</p>
<pre><code class="language-javascript">// ES6之前
function Student(name) {
this.name = name;
// this.hello = function f() {
// alert("Hello");
// }
}
Student.prototype.hello = function () {
alert("Hello");
}
</code></pre>
<p>class关键字是ES6引入的</p>
<pre><code class="language-javascript">// ES6之后
class Student {
constructor(name) {
   this.name = name;
}

hello() {
   alert("Hello");
}
}
</code></pre>
<pre><code class="language-javascript">// class继承
class Pupil extends Student {
constructor(name, grade) {
   super(name);
   this.grade = grade;
}

play() {
   alert("play");
}
}
</code></pre>
<p>本质还是原型继承</p>
<p><img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100003857-728574393.png" alt="image-20220302211234353" loading="lazy"></p>
<h3 id="四原型链">四、原型链</h3>
<h2 id="操作bom对象重点">操作BOM对象（重点）</h2>
<h3 id="一浏览器">一、浏览器</h3>
<p>Javascript 和浏览器的关系：Javascript诞生是为了能够在浏览器运行</p>
<p>BOM（Browser Object Model）：浏览器对象模型</p>
<p>内核</p>
<ul>
<li>IE 6 - 11</li>
<li>Chrome</li>
<li>Safari</li>
<li>FireFox</li>
</ul>
<p>三方</p>
<ul>
<li>QQ浏览器</li>
<li>360浏览器</li>
</ul>
<h3 id="二window对象重要">二、window对象（重要）</h3>
<blockquote>
<p>window代表浏览器窗口</p>
</blockquote>
<pre><code class="language-javascript">window.innerHeight
182
window.innerWidth
1488
window.alert('hello')
</code></pre>
<h3 id="三navigator对象">三、navigator对象</h3>
<blockquote>
<p>封装了浏览器的信息</p>
</blockquote>
<pre><code class="language-javascript">navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.62'
navigator.platform
'Win32'
</code></pre>
<p>尽量避免使用navigator对象，因为它会被认为修改</p>
<h3 id="四screen对象">四、screen对象</h3>
<pre><code class="language-javascript">// 屏幕分辨率
screen.width
1536
screen.height
864
</code></pre>
<h3 id="五location对象重要">五、location对象（重要）</h3>
<blockquote>
<p>代表当前页面的URL信息</p>
</blockquote>
<pre><code class="language-javascript">host: "developer.mozilla.org"
href: "https://developer.mozilla.org/zh-CN/docs/Web/API/Window/outerHeight"
protocol: "https:"
reload: ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://www.baidu.com/')
</code></pre>
<h3 id="六document对象重要">六、document对象（重要）</h3>
<blockquote>
<p>代表当前页面</p>
</blockquote>
<p>获取具体的文档树节点</p>
<pre><code class="language-html"><ul id="ul">
<li>Java</li>
<li>C++</li>
<li>Python</li>
</ul>

<script>
let ul = document.getElementById("ul");
console.log(ul);
</script>
</code></pre>
<p>获取cookie</p>
<pre><code class="language-javascript">document.cookie
'BAIDUID_BFESS=A57FC6971D87A9172CD9952274273C6B:FG=1; BIDUPSID=A57FC6971D87A9172CD9952274273C6B; PSTM=1645402825; BD_UPN=12314753; baikeVisitId=37443825-845d-443f-aacd-9504a8d0e3eb; RT="z=1&dm=baidu.com&si=gpeanogruej&ss=l09ccw1h&sl=2&tt=1m3&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=24y&ul=e6v0&hd=e6xc"; ZD_ENTRY=bing; BD_HOME=1; H_PS_PSSID=34429_35106_31253_34584_35871_35908_35946_35972_35984_35315_26350; BA_HECTOR=a42k0l248la1850he71h210ue0q'
</code></pre>
<p>截取cookie原理</p>
<p>服务器端可以设置cookie为httpOnly保证安全</p>
<h3 id="七history对象">七、history对象</h3>
<blockquote>
<p>代表浏览器历史记录</p>
</blockquote>
<pre><code class="language-javascript">history.forward()
history.back()
</code></pre>
<h2 id="操作dom对象重点">操作DOM对象（重点）</h2>
<p>DOM：文档对象模型</p>
<p>浏览器网页就是一个DOM树形结构</p>
<ul>
<li>更新DOM节点</li>
<li>遍历DOM节点</li>
<li>删除DOM节点</li>
<li>添加DOM节点</li>
</ul>
<p>操作DOM节点需要先获取它！</p>
<h3 id="一获取dom节点">一、获取DOM节点</h3>
<pre><code class="language-javascript">// 对应css选择器
let elementsByTagName = document.getElementsByTagName("h1");
let elementById = document.getElementById("paragraph");
let elementsByClassName = document.getElementsByClassName("paragraph");
let container = document.getElementById("container");

let children = container.children; // 获取父节点的所有子节点
let parentNode = elementById.parentNode; //获取父节点
</code></pre>
<p>这是原生代码，之后尽量使用JQuery</p>
<h3 id="二更新dom节点">二、更新DOM节点</h3>
<pre><code class="language-html"><div id="container">

</div>

<script>
let elementById = document.getElementById("container");
</script>
</code></pre>
<ul>
<li>
<p>更新文本</p>
<pre><code class="language-javascript">elementById.innerText = 123 // 修改文本值
elementById.innerHTML = "<strong>123</strong>" // 可以解析HTML文本标签
</code></pre>
</li>
<li>
<p>操作CSS</p>
<pre><code class="language-javascript">elementById.style.color = "red"; // 属性值使用字符串
elementById.style.fontSize = "50px" // -转驼峰命名问题
</code></pre>
</li>
</ul>
<h3 id="三删除dom节点">三、删除DOM节点</h3>
<p>步骤：先获取父节点，然后通过父节点删除自己</p>
<pre><code class="language-html"><div id="container">
<h1>标题一</h1>
<p id="paragraph">段落一</p>
<p class="paragraph">段落二</p>
</div>

<script>
let elementById = document.getElementById("paragraph");
let parentNode = elementById.parentNode; //获取父节点
parentNode.removeChild(elementById);
</script>
</code></pre>
<p>注意：删除节点时是动态的，children是时空变化的</p>
<h3 id="四创建和插入dom节点">四、创建和插入DOM节点</h3>
<p>节点为空时，使用 innerText 或者 innerHTML 可以添加DOM节点，但不为空时，其会覆盖原来的DOM节点</p>
<p><strong>追加DOM节点</strong></p>
<pre><code class="language-html"><p id="outerParagraph">外部段落</p>
<div id="container">
<p id="innerParagraph1">内部段落一</p>
<p id="innerParagraph2">内部段落二</p>
<p id="innerParagraph3">内部段落三</p>
</div>

<script>
let outerParagraph = document.getElementById("outerParagraph");
let container = document.getElementById("container");
// DOM父节点追加一个已存在的DOM节点
container.appendChild(outerParagraph);
// 创建新DOM节点，并追加到DOM父节点后面
let htmlParagraphElement = document.createElement("p");
// htmlParagraphElement.setAttribute("id", "newNode");
htmlParagraphElement.id = "newNode";
htmlParagraphElement.innerText = "newNode";
container.appendChild(htmlParagraphElement);
</script>
</code></pre>
<p><strong>向前插入DOM节点</strong></p>
<pre><code class="language-html"><p id="outerParagraph">外部段落</p>
<div id="container">
<p id="innerParagraph1">内部段落一</p>
<p id="innerParagraph2">内部段落二</p>
<p id="innerParagraph3">内部段落三</p>
</div>

<script>
let outerParagraph = document.getElementById("outerParagraph");
let innerParagraph2 = document.getElementById("innerParagraph2");
let container = document.getElementById("container");
container.insertBefore(outerParagraph, innerParagraph2);
</script>
</code></pre>
<h2 id="操作表单验证">操作表单（验证）</h2>
<h3 id="一什么是表单">一、什么是表单</h3>
<p>目的：提交信息</p>
<h3 id="二获取和修改表单提交信息">二、获取和修改表单提交信息</h3>
<pre><code class="language-html"><form action="#" method="post">
<span>用户名：</span> <input type="text" id="username"> <br>
<input type="radio" id="male" name="sex" value="male"> 男
<input type="radio" id="female" name="sex" value="female"> 女
</form>

<script>
let username = document.getElementById("username");
let male = document.getElementById("male");
let female = document.getElementById("female");
//获取文本框提交信息 username.value
//修改文本框提交信息 username.value = '123'

//获取单选框提交信息
if (male.checked = true) {
   console.log(male.value);
}
</script>
</code></pre>
<h3 id="三表单提交验证及密码md5加密">三、表单提交验证及密码MD5加密</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>表单提交验证及密码MD5加密</title>

   
   <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
</head>
<body>
   
   <form action="https://www.baidu.com" method="post" onsubmit="return check()">
         <p>
            <span>用户名：</span>
            <input type="text" name="username" id="username">
         </p>
         <p>
            <span>密码：</span>
            <input type="password" name="password" id="password">
         </p>
         <p>
            
            <input type="submit" value="提交">
         </p>
   </form>

   <script>
         function check() {
            let username = document.getElementById("username");
            let password = document.getElementById("password");
            // MD5加密
            password.value = md5(password.value);
            return false;
         }
   </script>
</body>
</html>
</code></pre>
<h2 id="jquery">JQuery</h2>
<blockquote>
<p>JQuery库，里面存在大量的JavaScript函数</p>
</blockquote>
<h3 id="一jquery入门">一、JQuery入门</h3>
<ol>
<li>下载JQuery</li>
</ol>
<p><img src="https://img2022.cnblogs.com/blog/2282777/202203/2282777-20220307100003510-1331075066.png" alt="image-20220304215145889" loading="lazy"></p>
<ol start="2">
<li>
<p>引入JQuery</p>
<pre><code class="language-html">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


</code></pre>
</li>
<li>
<p>使用JQuery</p>
<pre><code class="language-html"><a href="#" id="test-jquery">超链接</a>
<script>
// JQuery使用语法：$(选择器).事件(事件函数)
$("#test-jquery").click(function () {
   alert("Hello, JQuery!");
})
</script>
</code></pre>
</li>
</ol>
<h3 id="二选择器">二、选择器</h3>
<p>jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)</p>
<h3 id="三事件">三、事件</h3>
<blockquote>
<p>鼠标事件、键盘事件、其它事件</p>
</blockquote>
<p>获取鼠标当前坐标</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>获取鼠标当前坐标</title>

   <script src="../lib/jquery-3.6.0.js"></script>

   <style>
         body {
            height: 500px;
         }
         span {
            width: 100px;
            height: 100px;
            display: block;
         }
   </style>
</head>
<body>
   鼠标当前坐标：<span id="coordinate"></span>

   <script>
         // 当页面加载完毕之后，响应事件
         $(function () {
            $("body").mousemove(function (coordinate) {
               $("#coordinate").text("X坐标：" + coordinate.pageX + "\t" + "Y坐标：" + coordinate.pageY);
            });
         })
   </script>
</body>
</html>
</code></pre>
<h3 id="四操作dom对象">四、操作DOM对象</h3>
<pre><code class="language-javascript">// 操作文本
//text(),html() 无参获取文本值，有参设置文本值 html()可以解析HTML文本标签
console.log($("#test-ul li").text());
console.log($(".java").html());
</code></pre>
<pre><code class="language-javascript">// 操作CSS
$(".java").css({"color": "red", "font-size": 50});
</code></pre>
<pre><code class="language-javascript">// 元素展示和隐藏
$(".java").hide() //本质disply: none
$(".java").show()
</code></pre><br><br>
来源：https://www.cnblogs.com/ylfmax-blog/p/15974681.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript