【笔记】【JavaScript】狂神说-JavaScript学习笔记

龙新富 發表於 2022-3-22 10:21:00

【笔记】【JavaScript】狂神说-JavaScript学习笔记

<h1 id="javascript学习笔记">JavaScript学习笔记</h1>
<h1 id="前言">前言</h1>
学习视频：【狂神说Java】JavaScript最新教程通俗易懂
感谢狂神！！！
 
此笔记用于记录本人在学习中还有不懂以及值得注意的地方。以方便日后的工作与学习。
 
笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。
部分内容不完整，请读者结合视频观看效果更佳。
 
<h2 id="注意">注意</h2>
此笔记并非完整笔记
需要完整笔记的同学可以移步到【狂神说Java】JavaScript学习笔记
 
再次感谢狂神！！！
跟对人，做对事。——狂神说
<hr>
 
<h1 id="快速入门">快速入门</h1>
console
console.log()相当于Java中的System.out.println();
 
number
<pre><code class="language-js">NaN //not a number
Infinity // 表示无限大
</code></pre>
 
比较运算符
<pre><code class="language-javascript">== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
</code></pre>
这是一个JS的缺陷，坚持不要使用 == 比较 
须知：
<ul>
<li>NaN === NaN，这个与所有的数值都不相等，包括自己</li>
<li>只能通过isNaN（NaN）来判断这个数是否是NaN</li>
</ul>
浮点数问题
尽量避免使用浮点数进行运算，存在精度问题！
<pre><code class="language-javascript">Math.abs(1/3-(1-2/3))<0.00000001
</code></pre>
Math.abs求绝对值
 
null 和 undefined
<ul>
<li>null 空</li>
<li>undefined 未定义</li>
</ul>
 
数组
Java的数组必须是相同类型的对象~，JS中不需要这样
<pre><code class="language-javascript">//保证代码的可读性，尽量使用[]
var arr = ;
//第二种定义方法
new Array(1,2,3,4,5,'hello');
</code></pre>
取数字下标：如果越界了，就会报undefined
<pre><code class="language-javascript">undefined
</code></pre>
 
对象
对象是大括号，数组是中括号
<blockquote>
每个属性之间使用逗号隔开，最后一个属性不需要逗号
</blockquote>
<pre><code class="language-javascript">//示例
// Person person = new Person(1,2,3,4,5);
var person = {
name:'Tom',
age:3,
tags:['js','java','web','...']
}
</code></pre>
取对象值
<pre><code class="language-javascript">//控制台操作
person.name
> "Tom"
person.age
> 3
</code></pre>
 
<h2 id="严格检查格式">严格检查格式</h2>
为什么（要引入严格检查格式）？
<pre><code class="language-javascript">var i =1;
</code></pre>
默认为全局变量，一个html文件会引用多个script，直接使用var定义变量可能会与其他同名变量产生覆盖或冲突。
 
怎么（引入严格检查格式）？
1、需要设置支持ES6语法
（以IDEA编译器为例）
<img src="https://img-blog.csdnimg.cn/20200508105351996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9oMTk5NQ==,size_16,color_FFFFFF,t_70" alt="" loading="lazy">
2、写入'use strict';
'use strict';必须写在JavaScript的第一行！
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script>
 'use strict';
 //全局变量
 let i=1
 //ES6 let
</script>
</head>
<body>

</body>
</html>
</code></pre>
3、将var i =1; 改为 let i =1;
可能出现的bug!!!
1、
<img src="https://img-blog.csdnimg.cn/93b777461dec488cade975bb7f720848.png#pic_center" alt="在这里插入图片描述" loading="lazy">
原因：
未设置支持ES6语法
 
2、
<pre><code class="language-javascript">//示例
<script>
//全局变量
i=1 //出错点
'use strict';
</script>
</code></pre>
但Console（控制台）无报错
 
原因：
'use strict';未放在JavaScript的第一行！
 
3、
<pre><code class="language-javascript">//示例
<script>
'use strict';
//全局变量
i=1
//ES6 let
</script>
</code></pre>
<blockquote>
结果
</blockquote>
<img src="https://img-blog.csdnimg.cn/eb8bbd854f6641ad85ae342533b4c572.png#pic_center" alt="在这里插入图片描述" loading="lazy">
原因：
变量定义不符合严格检查格式
 
解决办法：
将i =1; 改为 let i =1; 变量前加上let
 
<h1 id="数据类型">数据类型</h1>
<h2 id="1字符串">1、字符串</h2>
==注意转义字符 \ ==
<pre><code class="language-javascript">\u4e2d \u##### Unicode字符

\x41 Ascall字符
</code></pre>
 
多行字符串编写
<pre><code class="language-javascript">//tab 上面 esc下面
 var msg =
 `hello
 world
 你好呀
 nihao
 `
</code></pre>
 
模板字符串
<pre><code class="language-javascript">//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`
</code></pre>
 
字符串的可变性，不可变
<img src="https://img-blog.csdnimg.cn/20200508110738649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9oMTk5NQ==,size_16,color_FFFFFF,t_70" alt="" loading="lazy">
 
大小写转换
<pre><code class="language-javascript">//注意，这里是方法，不是属性了
student.toUpperCase();
student.toLowerCase();
</code></pre>
 
student.indexof(‘t’)
<blockquote>
输出含‘t’字符的下标
</blockquote>
 
substring，从0开始
<pre><code class="language-javascript">[) //包含左边不包含右边
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
</code></pre>
 
<h2 id="2数组">2、数组</h2>
1、arr.length
注意：假如给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
 
2、indexOf，通过元素获得下标索引
<pre><code class="language-javascript">arr.indexOf(下标)
</code></pre>
 
3、slice()，截取Array的一部分，返回的一个新数组，类似于String中substring
 
4、push()，pop()尾部
<pre><code class="language-javascript">push：压入到尾部
pop：弹出尾部的一个元素
</code></pre>
 
<h3 id="疑问1是否可以pushpop具体某个数值">疑问1：是否可以push()，pop()具体某个数值?</h3>
<blockquote>
这两个方法只能遵循“后进先出”原则
<img src="https://img-blog.csdnimg.cn/4f877f35aee9484db7aae010c8dcc89c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGFvLWppYXdlaQ==,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述" loading="lazy">
<img src="https://img-blog.csdnimg.cn/5db46bcce81e492db717fbcd80997eb1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGFvLWppYXdlaQ==,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述" loading="lazy">
</blockquote>
<blockquote>
注意：
pop一次只能出一个
<img src="https://img-blog.csdnimg.cn/628f14a37f8b40ea926ab089fbae685b.png#pic_center" alt="在这里插入图片描述" loading="lazy">
push一次可推多个
<img src="https://img-blog.csdnimg.cn/74230b7ee68e481e9e0f81bc60e42961.png#pic_center" alt="在这里插入图片描述" loading="lazy">
</blockquote>
 
<hr>
5、unshift(),shift() 头部
<pre><code class="language-javascript">unshift：压入到头部
shift：弹出头部的一个元素
</code></pre>
 
6、元素反转reverse()
 
7、concat()
<blockquote>
<img src="https://img-blog.csdnimg.cn/20200508153119816.png" alt="" loading="lazy">
</blockquote>
注意：concat()并没有修改数组，只是会返回一个新的数组
 
8、连接符join
<blockquote>
<img src="https://img-blog.csdnimg.cn/20200508153243846.png" alt="" loading="lazy">
</blockquote>
 
9、多维数组
<pre><code class="language-javascript">arr = [,,["5","6"]] \\创建多维数组
arr \\取多维数组元素
>4
</code></pre>
 
数组其他方法参考文档
 
<h2 id="3对象">3、对象</h2>
若干个键值对
<pre><code class="language-javascript">var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
name:"Tom",
age:3,
email:"123456798@QQ.com",
score:66
}
</code></pre>
Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
 
= =JavaScript中的所有的键都是字符串，值是任意对象！==
 
1、对象赋值
 
2、使用一个不存在的对象属性，不会报错！undefined
<img src="https://img-blog.csdnimg.cn/20200508155917394.png" alt="" loading="lazy">
 
3、动态的删减属性，通过delete删除对象的属性
格式：
<pre><code class="language-javascript">delete 对象名.属性名
</code></pre>
示例：
<img src="https://img-blog.csdnimg.cn/20200508160429505.png" alt="" loading="lazy">
 
4、动态的添加，直接给新的属性添加值即可
格式：
<pre><code class="language-javascript">对象名.新属性名 = 新属性值
</code></pre>
 
示例：
<img src="https://img-blog.csdnimg.cn/20200508160409465.png" alt="" loading="lazy">
 
5、判断属性值是否在这个对象中！xxx in xxx
示例：
<img src="https://img-blog.csdnimg.cn/20200508160704412.png" alt="" loading="lazy">
 
<h2 id="4流程控制">4、流程控制</h2>
if...else语句、while循环、do...while循环、for循环语法就不多赘述了
注意：
<blockquote>
1、while死循环只能关闭浏览器解决
2、for循环控制变量定义用let
</blockquote>
 
forEach循环
<blockquote>
ES5.1特性
</blockquote>
<img src="https://img-blog.csdnimg.cn/20200508162100917.png" alt="" loading="lazy">
 
for …in方法
for...in用法文档
 
<h2 id="5map和set">5、Map和Set</h2>
<blockquote>
ES6的新特性~
</blockquote>
Map 形式为的数组。
<pre><code class="language-javascript">//构造示例
var map = new Map(['tom',100],['jack',90],['haha',80]]);

//通过key获得value
var name = map.get('tom');

//新增或修改
map.set('admin',123456);

//删除
map.delete("tom");
</code></pre>
 
Set：无序不重复的集合（Set中的元素只会出现一次，即 Set 中的元素是唯一的。）
<pre><code class="language-javascript">//添加
set.add(2);

//删除
set.delete(1);

//是否包含某个元素
console.log(set.has(3));
</code></pre>
<h2 id="6iterator">6、iterator</h2>
for···in与for···of的区别
<pre><code class="language-javascript">//for...in示例
var arr =
for(var x in arr){
console.log(x)
}
</code></pre>
<blockquote>
//控制台输出下标
0,1,2
</blockquote>
 
<pre><code class="language-javascript">//for...of示例
var arr =
for(var x in arr){
console.log(x)
}
</code></pre>
<blockquote>
//控制台输出数据
3,4,5
</blockquote>
 
遍历Map
示例：
<img src="https://img-blog.csdnimg.cn/20200508164125573.png" alt="" loading="lazy">
 
遍历set
示例：
<img src="https://img-blog.csdnimg.cn/20200508164144469.png" alt="" loading="lazy">
 
<h1 id="函数">函数</h1>
函数与对象的区别
两个一样，只是放的位置不同
 
<h2 id="1定义函数">1、定义函数</h2>
<blockquote>
定义方式一
</blockquote>
示例:
<pre><code class="language-javascript">//绝对值函数
function abs(x){
if(x>=0){
 return x;
}else{
 return -x;
}
}
</code></pre>
如果没有执行return，函数执行完也会返回结果，结果就是undefined
<blockquote>
定义方式二
</blockquote>
示例：
<pre><code class="language-javascript">var abs = function(x){
if(x>0){
 return x;
}else{
 return -x;
}
}
</code></pre>
function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！ 
方式一和方式二等价！
 
参数问题：javaScript可以传任意个参数，也可以不传递参数~
 
<h3 id="疑问2参数进来是否存在问题假设不存在参数如何规避">疑问2：参数进来是否存在问题？假设不存在参数，如何规避？</h3>
<pre><code class="language-javascript">var abs = function(x){
//手动抛出异常来判断参数是否存在
if(typeof x!=='number'){
 throw 'Not a Number';
}
if(x>=0){
 return x;
}else{
 return -x;
}
}
</code></pre>
 
<blockquote>
arguments \来规避不存在参数问题
</blockquote>
<code>arguments</code>代表，传递进来的所有参数，是一个数组！
<pre><code class="language-javascript">var abs = function(x){

console.log("x=>"+x);

for(var i=0;i<arguments.length;i++){
 console.log(arguments);
}

if(x>=0){
 return x;
}else{
 return -x;
}
}
</code></pre>
 
<hr>
<h3 id="疑问3arguments包含所有的参数如何排除已有参数使用多余的参数来进行附加操作">疑问3：arguments包含所有的参数，如何排除已有参数，使用多余的参数来进行附加操作？</h3>
<blockquote>
rest
</blockquote>
以前：
<img src="https://img-blog.csdnimg.cn/20200508183752806.png" alt="" loading="lazy">
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…
<img src="https://img-blog.csdnimg.cn/20200508183918899.png" alt="" loading="lazy">
rest参数只能写在最后面，必须用…标识。
 
<h2 id="2变量的作用域">2、变量的作用域</h2>
在javascript中，var定义变量实际是有作用域的。
 
只要理解了方法调用在栈内存与堆内存的原理就能理解下面这几个问题
函数体重声明，则在函数体外不可以使用
案例：
<pre><code class="language-javascript">function qj(){
var x = 1;
x = x + 1;
}
x = x+2; //bug：Uncaught ReferenceError: x is not defined=
</code></pre>
 
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
示例：
<pre><code class="language-javascript">function qj(){
var x = 1;
x = x + 1;
}

function qj2(){
var x = 'A';
x = x + 1;
}
</code></pre>
 
内部函数可以访问外部函数的成员，反之则不行
示例：
<pre><code class="language-javascript">function qj(){
var x = 1;

//内部函数可以访问外部函数的成员，反之则不行
function qj2(){
 var y = x + 1;
}

var z = y +1;// bug:Uncaught ReferenceError: y is not defined
}
</code></pre>
 
假设:内部函数变量和外部函数变量，重名！
<pre><code class="language-javascript">function qj() {
var x = 1;

function qj2() {
 var x = 'A';
 console.log('inner' + x);
}

console.log('outer' + x);
qj2();
}
</code></pre>
输出结果：
<img src="https://img-blog.csdnimg.cn/f4f33778cd9049c9a28bae0cf44771eb.png#pic_center" alt="在这里插入图片描述" loading="lazy">
 
假设：在JavaScript中，函数查找变量从自身函数开始~，由“内”向“外”查找，假设：外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
<blockquote>
什么是提升变量的作用域？
</blockquote>
<pre><code class="language-javascript">function qj() {
var x = "x"+y;//y虽然没有被声明就被调用了，但是JS会自动声明，只是没有值
console.log(x);
var y = 'y';
}
</code></pre>
输出结果：
<img src="https://img-blog.csdnimg.cn/4b9dfc79639b4b28b35923be71217ec8.png#pic_center" alt="在这里插入图片描述" loading="lazy">
 
function qj()等价于
<pre><code class="language-javascript">function qj2() {
var y;

var x = "x"+y;
console.log(x);
var y = 'y';
}
</code></pre>
== 说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；==
PS：这个是在javascript建立之初就存在的特性。
== 养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；==
<hr>
<blockquote>
全局变量
</blockquote>
全局对象window
<pre><code class="language-javascript">//证明
var x ='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下；
</code></pre>
 
alert() 这个函数本身也是一个<code>window</code>的变量；
<pre><code class="language-javascript">//证明
var x ='xxx';
window.alert(x); //二者输出结果一样
alert(x);
</code></pre>
alert()系统方法可以被自定义方法给覆盖掉
<pre><code class="language-javascript">//证明
var x ='xxx';

window.alert(x);

var old_alert = window.alert; //保存alert方法

window.alert = function (){ //创建的新方法将原先的alert方法覆盖掉了

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

//恢复
window.alert = old_alert;
window.alert(456);
</code></pre>
说明：
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 <code>RefrenceError</code>
 
<blockquote>
规范
</blockquote>
<h3 id="为什么要有规范">为什么要有规范？</h3>
由于我们的所有变量都会绑定到window上。如果不同的js文件，使用了相同的全局变量，就会产生冲突
 
<h3 id="如何减少冲突">如何减少冲突？</h3>
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
示例：
<img src="https://img-blog.csdnimg.cn/20200508230620266.png" alt="" loading="lazy">
JQuery就是用来干这个的。
 
<blockquote>
局部作用域
</blockquote>
<h3 id="什么是局部作用域冲突">什么是局部作用域冲突？</h3>
示例：
<pre><code class="language-javascript">function aaa(){
for (var i=0;i<10;i++){
 console.log(i);
}
console.log(i+1); //i 出了这个作用域还可以使用
}
</code></pre>
输出结果：
<img src="https://img-blog.csdnimg.cn/b9f805f9aabb44f1ad44c642301218ba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGFvLWppYXdlaQ==,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述" loading="lazy">
 
<h3 id="怎么解决局部作用域冲突问题">怎么解决局部作用域冲突问题？</h3>
ES6的let关键字，解决了局部作用域冲突的问题！
示例：
<pre><code class="language-javascript">function aaa(){
for (let i=0;i<10;i++){
 console.log(i);
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
</code></pre>
建议用let去定义局部作用域的变量；
 
<blockquote>
常量
</blockquote>
<h3 id="在es6之前怎么定义常量">在ES6之前，怎么定义常量?</h3>
只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。
 
<h4 id="为什么建议不要修改这样的值">为什么建议不要修改这样的值。？</h4>
原本不能变的常量，可以随便改变
示例：
<img src="https://img-blog.csdnimg.cn/20200508231525623.png" alt="" loading="lazy">
 
<h3 id="es6之后怎么定义常量">ES6之后，怎么定义常量?</h3>
引入了常量关键字 <code>const</code>
示例：
<img src="https://img-blog.csdnimg.cn/20200508232049107.png" alt="" loading="lazy">
 
<h2 id="3方法">3、方法</h2>
<blockquote>
定义方法
</blockquote>
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
示例：
<pre><code class="language-javascript">var kuangshen = {
name : '秦疆',
bitrh: 2000,
//方法
age:function(){
 //今年-出生的年
 var now = new Date().getFullYear();
 return now-this.bitrh;
}
}
</code></pre>
控制台输入
<pre><code class="language-javascript">//调用属性
kuangshen.name
//调用方法，一定要带（）
kuangshen.age()
</code></pre>
 
<h3 id="this代表什么">this代表什么？</h3>
this是无法指向的，是默认指向调用它的那个对象的；
解释：
将上述代码中的<code>age:function()</code>拆解：
<pre><code class="language-javascript">funtion getAge(){
//今年-出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
}

var kuangshen = {
name : '秦疆',
bitrh: 2000,
age:getAge
}
</code></pre>
控制台输入(<code>></code>表示输出)：
<pre><code class="language-javascript">kuangshen.age()
>22
getAge()
>NaN //由于此时this没有指明具体指向哪个对象，所以输出NaN
</code></pre>
 
<blockquote>
apply
</blockquote>
<h3 id="apply用来干什么">apply用来干什么？</h3>
可以直接给this指明对象，控制this指向
示例
<pre><code class="language-javascript">funtion getAge(){
//今年-出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
}

var kuangshen = {
name : '秦疆',
bitrh: 2000,
age:getAge
};

var xiaoming ={
name:'小明',
bitrh:2000,
age: getAge
}
</code></pre>
控制台输入(<code>></code>表示输出)：
<pre><code class="language-javascript">getAge.apply(xiaoming,[]);//this指向xiaoming，参数为空
>22
</code></pre>
 
<h1 id="内部对象">内部对象</h1>
<blockquote>
标准对象
</blockquote>
控制台输入（<code>></code>输出）
<pre><code class="language-javascript">typeof 123
'number'
typeof `123`
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof [] //数组
'object'
typeof {} //对象
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
</code></pre>
 
<h2 id="1date">1、Date</h2>
基本使用
<pre><code class="language-javascript">var now = new Date();
now.getFullYear(); //年
now.getMonth(); //月 0~11 0代表1月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒

now.getTime(); //时间戳全世界统一从1970 1.1 0：00：00 毫秒数
</code></pre>
 
时间戳转换
示例：
<pre><code class="language-javascript">var now = new Date(1646875961559);
</code></pre>
控制台输入（<code>></code>输出）
<pre><code class="language-javascript">now.toLocaleString() //转换本地时区
>'2022/3/10 09:32:41'
now.toGMTString() //转换GMT时区
>'Thu, 10 Mar 2022 01:32:41 GMT'
</code></pre>
 
<h2 id="2json">2、JSON</h2>
<h3 id="json是什么">JSON是什么？</h3>
<ul>
<li>JSON是一种轻量级的数据交换格式</li>
<li>理想的数据交换语言</li>
</ul>
 
我的理解：JSON能把对象和对象中的属性转换成字符，便与传输处理。同时也可以将字符转换成对象，还原成想要的数据。
 
<h3 id="为什么用json">为什么用JSON？</h3>
<ul>
<li>易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。</li>
</ul>
 
在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示
 
<h3 id="json表示格式">JSON表示格式：</h3>
<ul>
<li>对象都用</li>
<li>数组都用[ ]</li>
<li>所有的键值对都是用key:value</li>
</ul>
 
<h3 id="json字符串和js对象转化">JSON字符串和JS对象转化</h3>
示例：
<pre><code class="language-javascript">var user = {
name:"qinjiang",
age:3,
sex:'男'
}

//对象转化为json字符串{"name":"qinjiang","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象参数为json字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
</code></pre>
 
<h3 id="json和js对象有什么区别">JSON和JS对象有什么区别？</h3>
个人理解：前者是字符串，后者是对象。
示例：
<pre><code class="language-javascript">var obj = {a:'hello',b:'hellob'};
var json= '{"a":"hello","b":"hellob"}'
</code></pre>
 
<h2 id="3ajax">3、AJAX</h2>
<ul>
<li>原生的js写法 xhr异步请求</li>
<li>jQuery封装好的方法$(#name).ajax("")</li>
<li>axios请求</li>
</ul>
 
<h1 id="面向对象编程">面向对象编程</h1>
<h2 id="1什么是面向对象编程">1、什么是面向对象编程</h2>
我认为这篇博客解释的很清楚，什么是面向对象。
在谈面向对象编程，首先需要了解什么是面向过程编程
<h3 id="什么是面向过程编程">什么是面向过程编程?</h3>
把需求按照步骤分解实现。
<blockquote>
个人理解：
</blockquote>
打个比方你想吃一碗面，以面向过程解决这个需求有以下步骤
1、准备面粉
2、和面
3、煮面
4、吃面
 
<h3 id="什么是面向对象编程">什么是面向对象编程？</h3>
类：模板
对象：具体实例
<blockquote>
个人理解：
</blockquote>
还是以吃一碗面为例，以面向对象思维就是
1、下馆子
2、吃
面向对象的底层还是面向过程，但是别人以及把过程抽象成类，而我们只需要会用，即在轮子的基础上造车，而不是花费时间去造轮子。
 
<h2 id="javascript的特别之处">Javascript的特别之处</h2>
<blockquote>
原型对象
</blockquote>
就是父类，<code>__ proto __</code>可以将对象随意指向另一个对象。
示例：
<pre><code class="language-javascript">var Student={
name: "qinjiang",
age:3
run:function(){
 console.log(this.name + "run....");
}
};

var xiaoming ={
name:"xiaoming"
};

//原型对象
xiaoming.__proto__ = Student;

var Bird = {
fly: function(){
 console.log(this.name +"fly....");
}
};

//小明指向 Bird
xiaoming.__proto__ = Bird;
</code></pre>
 
<h3 id="es6前是如何定义一个类">ES6前是如何定义一个类？</h3>
示例：
<pre><code class="language-javascript">function Student(name){
this.name = name;
}

//给student新增一个方法
Student.prototype.hello = function() {
alert('Hello')
};
</code></pre>
 
<blockquote>
class继承
</blockquote>
class关键字，是在ES6引入的
<h3 id="es6之后如何定义一个类属性方法">ES6之后如何定义一个类、属性、方法？</h3>
示例：
<pre><code class="language-javascript">//定义一个学生的类
class Student{
constructor(name){
 this.name = name;
}

//定义一个hello方法
hello(){
 alert('hello')
}
}

//创建对象
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

//调用对象方法
xiaoming.hello();
</code></pre>
 
<h3 id="如何继承">如何继承？</h3>
示例：
<pre><code class="language-javascript">class Student{
constructor(name){
 this.name = name;
}
hello(){
 alert('hello');
}
}

//XiaoStudent 继承 Student
class XiaoStudent extends Student{
constructor(name,grade){
 super(name);
 this.grade = grade;
}
myGrade(){
 alert('我是一名小学生');
}
}

var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);
</code></pre>
控制台输出（>输入）:
<img src="https://img-blog.csdnimg.cn/42c6b81ff1164800b66f7f5b34eb93d6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGFvLWppYXdlaQ==,size_11,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述" loading="lazy">
说明：类的本质是对象原型
 
<blockquote>
原型链
</blockquote>
<h3 id="_-proto-_与原型链到底是什么">_ proto _与原型链到底是什么？</h3>
这篇博客javascript——原型与原型链能更好地帮助理解。
<img src="https://img-blog.csdnimg.cn/img_convert/516f73db997267259eab36da7079911a.png" alt="" loading="lazy">
 
<h1 id="操作bom对象">操作BOM对象</h1>
<blockquote>
浏览器介绍
</blockquote>
这就不详细介绍了。
 
<h3 id="什么是bom">什么是BOM？</h3>
浏览器对象模型
B：Browser 浏览器
O：Object 对象
M：Mode 模型
<h2 id="常见的bom对象">常见的BOM对象</h2>
<blockquote>
window (浏览器窗口)
</blockquote>
控制台输入（>输出）
<pre><code class="language-javascript">//页面弹窗
window.alert(1)
>undefined
//页面内高
window.innerHeight
>458
//页面内宽
window.innerWidth
>867
window.outerHeight
>917
window.outerWidth
>884
//随浏览器窗口大小而改变
</code></pre>
 
<blockquote>
Navigator (封装了浏览器的信息) (不建议使用)
</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/99.0.4844.74 Safari/537.36'
//代理
navigator.userAgent
>'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36'
//平台
navigator.platform
>'Win32'
</code></pre>
大多数时候，我们不会使用navigator对象，因为会被人为修改! 
不建议使用这些属性来判断和编写代码
 
<blockquote>
screen (屏幕尺寸)
</blockquote>
<pre><code class="language-javascript">screen.height
>943
screen.width
>1676
</code></pre>
 
<blockquote>
location (当前页面的URL信息) （重要）
</blockquote>
控制台输入（>输出）
<pre><code class="language-javascript">location
>......
//主机
>host: "cn.bing.com"
//当前指向的位置
>href: "https://cn.bing.com/"
//协议
>protocol: "https:"
//刷新网页
>reload: ƒ reload()
//设置新的地址
location.assign('新地址名')
</code></pre>
 
<blockquote>
document （当前的页面，HTML DOM文档树）（内容DOM）
</blockquote>
控制台输入（>输出）
<pre><code class="language-javascript">//显示文档标题
document.title
>'必应'
//修改文档标题
'Lao'
</code></pre>
<img src="https://img-blog.csdnimg.cn/d18049e241e74821a7127f984caa8919.png#pic_center" alt="在这里插入图片描述" loading="lazy">
 
获取具体的文档树节点
示例:
<pre><code class="language-html"><dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>

<script>
var dl = document.getElementById('app');
</script>
</code></pre>
 
获取cookie
控制台输入（>输出）
<pre><code class="language-javascript">document.cookie
>'MUID=28E2A9356FF266B63B13B...'
</code></pre>
 
<h3 id="劫持cookie原理">劫持cookie原理</h3>
可以看看这篇博客Web安全之Cookie劫持
 
<blockquote>
history （不建议使用）
</blockquote>
<pre><code class="language-javascript">history.back() //后退
history.forward() //前进
</code></pre>
 
<h1 id="操作dom对象">操作DOM对象</h1>
DOM：文档对象模型
<blockquote>
核心
</blockquote>
浏览器网页就是一个Dom树形结构！
<blockquote>
常见操作：
</blockquote>
<ul>
<li>更新：更新Dom节点</li>
<li>遍历Dom节点：得到Dom节点</li>
<li>删除：删除一个Dom节点</li>
<li>添加：添加一个新的节点</li>
</ul>
PS:要操作一个Dom节点，就必须要先获得这个Dom节点
 
<blockquote>
获得Dom节点
</blockquote>
控制台输入（>输出）
PS:前提首先自己写一个Dom树
<pre><code class="language-javascript">//跟Css选择器一样
document.getElementsByTagName('标签名')
document.getElementsById('Id名')
document.getElementsByClassName('类名')
var father = document.getElementsById('father')

var childrens = father.children; //获取父节点下的所有子节点
father.firstChild //第一个子节点
father.lastChild //最后一个子节点
</code></pre>
 
<blockquote>
更新节点
</blockquote>
首先还是要获取节点才能对节点进行操作。
 
操作文本：
<ul>
<li><code>.innerText='value'</code>修改文本的值</li>
<li><code>.innerHTML='value'</code>可以解析超文本标签</li>
</ul>
 
操作css：
<pre><code class="language-javascript">.style.coler = 'yellow'; //属性使用字符串包裹
.style.fontSize = '20px'; // css中的- 转驼峰命名法
.style.padding = '2em'
</code></pre>
 
<blockquote>
删除节点
</blockquote>
<h3 id="如何删除节点">如何删除节点？</h3>
1、获取父节点
2、通过父节点删除自己
示例：
<pre><code class="language-Html"><div id ="father">
<h1>h1</h1>
p1
p2
</div>
<script>
//获取父节点
var self = document.getElementById('p1')；
var father = p1.parentElement;
//通过父节点删除自己
father.removeChild(self)
</script>
</code></pre>
 
<h3 id="疑问能否用fatherremovechildfatherchildrenindex删掉剩下的子节点">疑问：能否用father.removeChild(father.children)删掉剩下的子节点？</h3>
不能，删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。
<pre><code class="language-html"><div id ="father">
<h1>h1</h1>
p1
p2
</div>
<script>
//获取父节点
var self = document.getElementById('p1')；
var father = p1.parentElement;

/*
删除是一个动态的过程
删除第一个子节点后，后续的子节点下标也随之改变
*/
father.removeChild(father.children);
father.removeChild(father.children);
father.removeChild(father.children);
</script>
</code></pre>
 
<blockquote>
插入节点
</blockquote>
注意：
获得了某个Dom节点后：
 若dom节点是空，通过<code>innerHTML</code>就可以增加一个元素；
 若Dom节点已经存在元素，则会产生覆盖。
 
<h2 id="追加">追加</h2>
<blockquote>
移动标签
</blockquote>
示例：将“JavaScript”移动到后面
<pre><code class="language-html">JavaScript
<div id="list">
JavaSE
JavaEE
JavaME
</div>

<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);
</script>
</code></pre>
效果：
<img src="https://img-blog.csdnimg.cn/ab03e0e4abe6454e8acf07c92b92e3b4.png#pic_center" alt="在这里插入图片描述" loading="lazy">
 
<blockquote>
创建一个新的标签
</blockquote>
<code>document.createElement('标签');</code>
示例1：在文本后面添加一个新的标签
<pre><code class="language-html">JavaScript
<div id="list">
JavaSE
JavaEE
JavaME
</div>

<script>
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
// 给它一些内容
newP.innerText = "Hello,Lao";
// 添加文本节点到这个list 元素
list.append(newP);
</script>
</code></pre>
效果：
<img src="https://img-blog.csdnimg.cn/ea34862e7bc14954b7ab52f345a578f6.png#pic_center" alt="在这里插入图片描述" loading="lazy">
<img src="https://img-blog.csdnimg.cn/9117c5a55a294bf8bbabbd0cfcb3096d.png#pic_center" alt="在这里插入图片描述" loading="lazy">
 
示例2：创建一个标签节点
<pre><code class="language-javascript">//创建节点
var myScript = document.creatElement('script');
//修改节点
myScript.setAttribute('type','text/javascript');
</code></pre>
 
示例2：创建一个style标签,修改背景颜色
<pre><code class="language-javascript">//获取节点
var head = document.getElementsByTagName('head');
var myStyle = document.createElement('style');
//设置节点内容
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color:red;}'
//添加节点
head.appendChild(myStyle);
</code></pre>
效果：
<img src="https://img-blog.csdnimg.cn/77bf7277e7c9403b8996a58395c65f1d.png#pic_center" alt="在这里插入图片描述" loading="lazy">
<img src="https://img-blog.csdnimg.cn/bfb46e4f68af4bbb868e994cbb489af5.png#pic_center" alt="在这里插入图片描述" loading="lazy">
 
<h3 id="疑问为什么示例2中var-head--documentgetelementsbytagnamehead0要加0才生效不加不生效">疑问：为什么示例2中var head = document.getElementsByTagName('head')；要加才生效，不加不生效?</h3>
这个问题我还在考虑，有懂的小伙伴在下面的评论区告诉我，大家一起讨论呗。
 
<blockquote>
insertBefore
</blockquote>
<code>insertBefore(newNode,targetNode)</code>
示例：将新的节点插入到目标节点的前面
<pre><code class="language-javascript">var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</code></pre>
效果：
<img src="https://img-blog.csdnimg.cn/6e006c68620c4575961fdce4b4ab00a6.png#pic_center" alt="在这里插入图片描述" loading="lazy">
<img src="https://img-blog.csdnimg.cn/446aaadfe02f4389bca69add4f339146.png#pic_center" alt="在这里插入图片描述" loading="lazy">
 
<h1 id="操作表单验证">操作表单（验证）</h1>
<blockquote>
表单是什么？
</blockquote>
form标签构建的DOM树
各种框，我就不赘述了。
表单的目的提交信息
 
<blockquote>
获得要提交的信息
</blockquote>
示例：
<pre><code class="language-html"><form action = "post">

 用户名：<input type="text" id = "username" />



 性别：
 <input type = "radio" name = "sex" value = "man" id = "boy"/>男
 <input type = "radio" name = "sex" value = "woman" id = "girl"/>女

</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= "value";

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

</script>
</code></pre>
 
<blockquote>
提交表单。md5加密密码，表单优化
</blockquote>
<h2 id="1初级验证">1、初级验证</h2>
<code>required</code>和<code>placeholder</code>
 
<h2 id="2高级验证">2、高级验证</h2>
示例：通过一个函数来传递输入值
<pre><code class="language-html">
<form action = "post" >

 用户名：<input type="text" id = "username" />


 密码：<input type="password" id = "password" />



<button type = "button" onclick="aaa()">提交</button>

</form>

<script>
function aaa(){
 var uname = document.getElementById('username');
 varpwd = document.getElementById('password');
 console.log(uname.value);
 console.log(pwd.value);
}
</script>
</code></pre>
效果：
<img src="https://img-blog.csdnimg.cn/5e26e72af785470e9d90490054824496.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGFvLWppYXdlaQ==,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述" loading="lazy">
 
<h3 id="如何用md5实现表单加密">如何用MD5实现表单加密？</h3>
引入<code>MD5加密工具类</code>
<pre><code class="language-html"><head>
<meta charset = "UTF-8">
<title>Title</title>

<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
</code></pre>
<h4 id="未加密版">未加密版</h4>
示例：按键绑定事件
未作加密前的代码
<pre><code class="language-html"><form action = "#" method="post">

 用户名：<input type="text" id = "username" name="username"/>


 密码：<input type="password" id = "password" name="password" />



<button type = "submit" onclick="aaa()">提交</button>

</form>

<script>
function aaa(){
 var uname = document.getElementById('username');
 varpwd = document.getElementById('password');
 console.log(uname.value);
 console.log(pwd.value);
}
</script>
</code></pre>
效果：
<img src="https://img-blog.csdnimg.cn/5a3207f989cf422da8c521ee365a7186.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGFvLWppYXdlaQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述" loading="lazy">
存在不足：
<ul>
<li>密码太直观的暴露。</li>
</ul>
 
注意：
<pre><code class="language-html">用户名：<input type="text" id = "username" name="username"/>
密码：<input type="password" id = "password" name="password" />
</code></pre>
这两句代码必须有name属性才能被抓到这个值
 
<h4 id="加密但不美观版">加密但不美观版</h4>
未作加密后的代码
<pre><code class="language-html"><!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>

<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action = "#" method="post">

 用户名：<input type="text" id = "username" name="username"/>


 密码：<input type="password" id = "password" name="password" />



<button type = "submit" onclick="aaa()">提交</button>

</form>

<script>
function aaa(){
 var uname = document.getElementById('username');
 varpwd = document.getElementById('password');
 console.log(uname.value);
 console.log(pwd.value);
 //MD5算法
 pwd.value= md5(pwd.value);
 console.log(pwd.value);
}
</script>

</body>
</html>
</code></pre>
效果：
<img src="https://img-blog.csdnimg.cn/3572e52ad5be491a8853bcebd7c248dd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGFvLWppYXdlaQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述" loading="lazy">
存在不足：
<ul>
<li>点击<code>提交</code>的瞬间，密码栏的密码变长了，影响美观</li>
<li>依旧可以通过<code>name</code>属性获得密码，存在安全问题</li>
</ul>
 
<h4 id="相对完美版">相对完美版</h4>
示例：表单绑定事件
<pre><code class="language-html"><!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>

<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">

 用户名：<input type="text" id = "username" name = "username"/>


 密码：<input type="password" id = "password" />

<input type = "hidden" id = "md5-password" name = "password">


<button type = "submit">提交</button>

</form>

<script>
function aaa(){
 alert(1);
 var username = document.getElementById("username");
 var pwd = document.getElementById("password");
 var md5pwd = document.getElementById("md5-password");
 //pwd.value = md5(pwd,value);
 md5pwd.value = mad5(pwd.value);
 //可以校验判断表单内容，true就是通过提交，false就是阻止提交
 return true;

}
</script>

</body>

</html>
</code></pre>
 
<h1 id="jquery">jQuery</h1>
<h3 id="javascript和jquery有什么关系">javaScript和jQuery有什么关系？</h3>
jQuery库，里面存在大量的JavaScript函数
 
<blockquote>
获取jQuery
</blockquote>
注意：
笔记中记录只是粗略步骤，具体操作看【狂神说Java】初识jQuery及公式
第一种：本地导入
1、下载，jQuery官网下载地址
2、将下载文件导入项目文件中
3、在<code>head</code>标签内，用外链式引入到html文件中
 
第二种：在线导入
1、寻找在线资源，jQuery cdn加速
2、在<code>head</code>标签内，用外链式引入到html文件中
 
<blockquote>
使用jQuery
</blockquote>
<h3 id="公式">公式:</h3>
$(selector).action()
示例：
<pre><code class="language-html"><!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head>
<body>
<a href="" id = "test-jquery">点我</a>
<script>
//选择器就是css选择器
$('#test-jquery').click(function(){
 alert('hello,jQuery!');
});
</script>
</body>
</html>
</code></pre>
 
<blockquote>
选择器
</blockquote>
<pre><code class="language-javascript">//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器
</code></pre>
文档工具站
 
<blockquote>
事件
</blockquote>
鼠标事件、键盘事件，其他事件，这些就不赘述了
 
示例：
<pre><code class="language-Html"><!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head>
<style>
 #divMove{
 width:500px;
 height:500px;
 border:1px solid red;
 }
</style>
</head>
<body>

mouse：
<div id = "divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
//$(document).ready(function(){})
$(function(){
 $('#divMove').mousemove(function(e){
 $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
 })
});
</script>
</body>
</html>
</code></pre>
 
<blockquote>
操作DOM
</blockquote>
<h4 id="节点文本操作">节点文本操作</h4>
<pre><code class="language-javascript">$('#test-ul li').text();//获得值
$('#test-ul li').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('123');//设置值
</code></pre>
 
<h4 id="css的操作">CSS的操作</h4>
<pre><code class="language-javascript">$('#test-ul li').css({"color","red"});
</code></pre>
 
<h4 id="元素的显示和隐藏">元素的显示和隐藏</h4>
本质display:none
<pre><code class="language-javascript">$('#test-ul li').show();
$('#test-ul li').hide();
</code></pre>
 
<h4 id="未来ajax">未来ajax()</h4>
<pre><code class="language-javascript">$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
$(this).addClass("done");
}})
</code></pre>
 
<h1 id="总结">总结</h1>
1、多看源码，推荐网站源码之家
2、多扒网站，按<code>F12</code>审查元素，按<code>delete</code>键删掉非关键元素（注意：CSS不能随意抄别人的可能会侵权）
 
<h2 id="推荐网站">推荐网站</h2>
组件UI设计：
element
ant.design
body> 
点我

````
 
<blockquote>
选择器
</blockquote>
<pre><code class="language-javascript">//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器
</code></pre>
文档工具站
 
<blockquote>
事件
</blockquote>
鼠标事件、键盘事件，其他事件，这些就不赘述了
 
示例：
<pre><code class="language-Html"><!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head>
<style>
 #divMove{
 width:500px;
 height:500px;
 border:1px solid red;
 }
</style>
</head>
<body>

mouse：
<div id = "divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
//$(document).ready(function(){})
$(function(){
 $('#divMove').mousemove(function(e){
 $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
 })
});
</script>
</body>
</html>
</code></pre>
 
<blockquote>
操作DOM
</blockquote>
<h4 id="节点文本操作-1">节点文本操作</h4>
<pre><code class="language-javascript">$('#test-ul li').text();//获得值
$('#test-ul li').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('123');//设置值
</code></pre>
 
<h4 id="css的操作-1">CSS的操作</h4>
<pre><code class="language-javascript">$('#test-ul li').css({"color","red"});
</code></pre>
 
<h4 id="元素的显示和隐藏-1">元素的显示和隐藏</h4>
本质display:none
<pre><code class="language-javascript">$('#test-ul li').show();
$('#test-ul li').hide();
</code></pre>
 
<h4 id="未来ajax-1">未来ajax()</h4>
<pre><code class="language-javascript">$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
$(this).addClass("done");
}})
</code></pre>
 
<h1 id="总结-1">总结</h1>
1、多看源码，推荐网站源码之家
2、多扒网站，按<code>F12</code>审查元素，按<code>delete</code>键删掉非关键元素（注意：CSS不能随意抄别人的可能会侵权）
 
<h2 id="推荐网站-1">推荐网站</h2>
组件UI设计：
element
ant.design 
来源：https://www.cnblogs.com/lao-jiaweijarvee/p/16038109.html

頁: [1]

琼殿技术论坛's Archiver

【笔记】【JavaScript】狂神说-JavaScript学习笔记