Uanmo
Uanmo

JavaScript 基础

1. 简介

2. 快速入门

2.1 引入

  • 内部标签

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

  • 外部引入

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

2.2 数据类型

  • number

    整数：123
浮点数：123.1
科学计数法：1.123e3
负数：-123
非数字：NaN
无限大：Infinity

  • 字符串：'abc' 和 "abc"

  • 布尔值：true 和 false

  • 逻辑运算：&& 、|| 、!

  • 比较运算符

    赋值：=
等于：== （值一样为true）
绝对等于：=== （类型和值都一样为true）

  • 空：null

  • 未定义：undefined

  • 数组

    var arr = [1,2,'hello',null];
new Array(1,2,'hello',null);

  • 对象

    var person = {
    name: "弗罗多",
    age: 50,
    like: ['smoke','drink']
}

2.3 语法

严格检查模式：'use strict';，必须在script代码的第一行。

(1) 定义变量

var score = 60;
let score = 60; // ES6

(2) 条件判断

if (score > 60) {
	...
} else if (score > 80) {
 	...
} else {
	...
}

(3) 控制台输出

console.log('及格');

(4) 弹窗

alert('不及格');

3. 数据类型

3.1 字符串

  • 正常字符串使用 '' 或者 "" 包裹

    let student = 'frodo';
let level = "不及格";

  • 转义字符串使用 "\####"

    let str = "\u4e2d"; // 中

  • 多行字符串

    let msg = `
Time

Time is the currency of your life, spend it wisely
时间就像是生命的金钱，要学会合理支配
Don’t let others no matter how well intentioned spend it for you, it’s all you’ve got
不要让别人为你浪费时间，你该自己去处理你应做的
In the end, you may falter, but rest assured, time will not
你最后也许会动摇，但时间不会
...
`;

  • 模板字符串

    let msg = `成绩${level}`;

  • 字符串长度

    let strLength = student.length;

  • 大小写转换

    let strUp = student.toUpperCase();
let strLow = student.toLowerCase();

  • 下标索引

    let dLocal = student.indexOf('d');

  • 截取字符串

    let subStr = student.substring(1);	// 1到最后
let subStr = student.substring(1,4);	// 1到4

3.2 数组

  • 数组定义

    let arr = [1,2,3,'frodo'];

  • 长度

    let arrLength = arr.length;	// 4

  • 下标索引

    let frodoIndex = arr.indexOf('frodo');	// 3

  • 数组截取

    let subArr = arr.slice(2);	// [3, 'frodo']

  • 尾部添加元素

    /*
 * pushArr = 6
 * arr = [1, 2, 3, 'frodo', 'a', 'b']
 */
let pushArr = arr.push('a',"b");

  • 尾部弹出元素

    /*
 * popArr = 'b'
 * arr = [1, 2, 3, 'frodo', 'a']
 */
let popArr = arr.pop();

  • 头部添加元素

    /*
 * unshArr = 7
 * arr = ['c', 'd', 1, 2, 3, 'frodo', 'a']
 */
let unshArr = arr.unshift('c','d');

  • 头部弹出元素

    /*
 * shArr = 'c'
 * arr = ['d', 1, 2, 3, 'frodo', 'a']
 */
let shArr = arr.shift();

  • 排序

    // arr = ['d', 1, 2, 3, 'frodo', 'a']
let sortArr = arr.sort();	
/*
 * arr = [1, 2, 3, 'a', 'd', 'frodo']
 * sortArr = [1, 2, 3, 'a', 'd', 'frodo']
 */

  • 元素反转

    // arr = [1, 2, 3, 'a', 'd', 'frodo']
let reArr = arr.reverse();
/*
 * arr = ['frodo', 'd', 'a', 3, 2, 1]
 * reArr = ['frodo', 'd', 'a', 3, 2, 1]
 */

  • 拼接

    /*
 * arr = ['frodo', 'd', 'a', 3, 2, 1]
 * conArr = ['frodo', 'd', 'a', 3, 2, 1, 'A', 'B']
 */
let conArr = arr.concat("A","B");

  • 连接符

    /*
 * arr = ['frodo', 'd', 'a', 3, 2, 1]
 * joArr = 'frodo-d-a-3-2-1'
 */
let joArr = arr.join("-");

  • 多维数组

    /*
 * (3) [Array(2), Array(2), Array(2)]
 * 0: (2) [1, 2]
 * 1: (2) ['a', 'b']
 * 2: (2) ['壹', '贰']
 * length: 3
 */
let mulArr = [[1,2],['a','b'],["壹","贰"]];

3.3 对象

  • 对象定义

    // person = {name: 'frodo', age: 50, sex: '男', like: 'drink', race: 'Hobbit'}
let person = {
    name:"frodo",
    age:50,
    like:"drink",
    race: 'Hobbit'
}

  • 对象属性赋值

    // person = {name: 'frodo', age: 50, sex: '男', like: 'smoke', race: 'Hobbit'}
person.like="smoke";

  • 删除对象属性

    /*
 * delper = true
 * person = {name: 'frodo', age: 50, sex: '男', race: 'Hobbit'}
 */
let delper = delete person.like;

  • 添加对象属性

    // person = {name: 'frodo', age: 50, sex: '男', race: 'Hobbit', height: 168}
person.height = 168;

  • 判断属性是否包含在此对象及父对象内

    let ageInPer = 'age' in person;			// true
let strInPer = 'toString' in person;	// true

  • 判断实行是否包含在此对象内

    let perHasSex = person.hasOwnProperty('sex');		// true
let perHasStr = person.hasOwnProperty('toString');	// false

4. 流程控制

4.1 条件判断

if (score > 60) {
	...
} else if (score > 80) {
 	...
} else {
	...
}

4.2 循环

(1) while

while(...) {
	...
}

(2) do while

do{
    ...
} while (...)

(3) for

for (let i = 0; i < 10 ; i++) {
    ...
}

/*
 * array 为数组 value 为元素值
 */
arr.forEach(function (value) {
    ...
});

/*
 * array 为数组 key 为下标
 * array 为对象 key 为关键字
 */
for (const key in array) {
    ...
}

/*
 * arr 为数组 element 为数组元素
 * arr 为 Map，element 为键值对
 * arr 为 set，element 为元素值
 */
for (const element of arr) {
    ...
}

5. Map 和 Set

  • Map

    // score = {'tom' => 100, 'jerry' => 80}
let score = new Map([['tom',100],['jerry',80]]);
// tomScore = 100
let tomScore = score.get('tom');
// score = addSpikeScore = {'tom' => 100, 'jerry' => 80, 'spike' => 90}
let addSpikeScore = score.set('spike', 90);	
/*
 * delSpikeScore = true
 * score = {'tom' => 100, 'jerry' => 80}
 */
let delSpikeScore = score.delete('spike');

  • Set：无须不重复的集合

    // set = {0, 1, 2, 3}
let set = new Set([0,1,2,3,2,1,0]);
// set = add = {0, 1, 2, 3, 9}
let add = set.add(9);
/*
 * del = true
 * set = {0, 1, 2, 3}
 */
let del = set.delete(9);
// has = true
let has = set.has(3);

6. 函数

6.1 函数定义

  • 方式一

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

  • 方式二

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

6.2 手动抛出异常

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

6.3 可变参数

javascript 的函数调用没有参数限制，超出函数定义的参数将会被隐藏，使用 arguments 关键字可以获取到所有的参数。

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

或者可以为函数定义 ...rest 参数获取定义外的参数。

function abs(x,...rest) {
    if (typeof x !== 'number') throw 'Not a number';
    console.log(rest);
    if (x>=0) return x;
    else return -x;
}

6.4 方法

方法就是对象内的函数

let person = {
    name: 'jack',
    birth: 2000,
    age: function () {
        let year = new Date().getFullYear();
        return year-this.birth;
    }
};

this 默认指向当前对象

apply 可更改 this 的指向，使此对象调用另一个对象的方法或属性。

let person = {
    age:function () {
        let year = new Date().getFullYear();
        return year - this.birth;
    }
};
let jack = {
    name: 'jack',
    birth: 2000,
    age: function () {
        let year = new Date().getFullYear();
        return year-this.birth;
    }
};
let apply = person.age.apply(jack);	// 21
let age = person.age();	// NaN

7. 变量

作用域

  • 函数内变量在函数外无效
  • 内部函数可调用外部函数变量
  • 若有同名变量采用就近原则
  • 若调用全局都没有的变量，则会报错
  • js 默认将所有变量的声明提升为全局，因此规范中将所有变量定义为全局变量来保证安全性。

全局变量

定义在函数外的变量即是全局变量，所有的全局变量都会绑定到 window 对象上，因此会有变量冲突问题，规范中通过定义唯一全局变量来解决。

// 唯一全局变量
var app = {};
app.attribute = '属性';
app.function = function (a, ...rest) {
    ...
}

局部变量

同一函数内的代码块中使用 var 定义的变量在代码块外依然有效，js 使用 let 解决局部作用域冲突问题

// vF(12) = '正数'
function vF(a) {
    if (a > 0) {
        var vOut = '正数';
    } else {
        vOut = '负数';
    }
    return vOut;
}

// 报错，ReferenceError: lOut is not defined
function lF(a) {
    if (a > 0) {
        let lOut = '正数';
    } else {
        lOut = '负数';
    }
    return lOut;
}

常量

const PI = 3.14;

8. 标准对象

8.1 Date

let dateTime = new Date();
let fullYear = dateTime.getFullYear();
let month = dateTime.getMonth();
// 日
let date = dateTime.getDate();
// 星期
let day = dateTime.getDay();
let hours = dateTime.getHours();
let minutes = dateTime.getMinutes();
let seconds = dateTime.getSeconds();
// 时间戳
let time = dateTime.getTime();
// 时间戳转换为时间
let transDate = new Date(time);
// 转换为字符串
let dateStr = transDate.toLocaleString();

8.2 JSON

JSON 是一种轻量级的数据交换格式

数组用 []，对象用 {}，格式为：key:value

// JSON
let person = {
    name: "json",
    age: 0,
    sex: "男"
}
// perJson = '{"name":"json","age":0,"sex":"男"}'
let perJson = JSON.stringify(person);
// perObj = {name: 'json', age: 0, sex: '男'}
let perObj = JSON.parse(perJson);

8.3 Ajax

9. 面向对象编程

class Person {
    name = '';
    sex = '';
    age = '';
    constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    run () {
        return this.name + " is running...";
    }
}

class Student extends Person {
    like = '';
    constructor(name, sex, age, like) {
        super(name, sex, age);
        this.like = like;
    }

    run() {
        return super.run();
    }
    study() {
        return this.name + " is studying...";
    }
}

let tom = new Student("Tom","man",10,'drink');
console.log(tom);	// Student {name: 'Tom', sex: 'man', age: 10, like: 'drink'}
console.log(tom.study());	// Tom is studying...
console.log(tom.run());		// Tom is running...

10. 操作 BOM 对象

BOM（Brow Object Model）即浏览器模型。

  • window ：浏览器窗口
  • screen ：电脑屏幕
  • location： 当前页面信息
  • document ：当前页面
  • cookie ：缓存

11. 操作 DOM 对象

浏览器网页本质上是一个 DOM 树形结构，对网页的操作相当于操作树形结构的结点。

11.1 获取 DOM 结点

获取 DOM 结点即查找HTML元素

方法 描述
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素 
<div id="father">
    <h1>Dom</h1>
    <p id="p1">P1</p>
    <p class="p2">P2</p>
</div>
<script>
    'use strict';
    // 获取 DOM 结点
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
</script>

HTML5 之前版本的 document 对象属性

属性 描述 DOM
document.anchors 返回拥有 name 属性的所有 元素。 1
document.applets 返回所有 元素（HTML5 不建议使用） 1
document.baseURI 返回文档的绝对基准 URI 3
document.body 返回 元素 1
document.cookie 返回文档的 cookie 1
document.doctype 返回文档的 doctype 3
document.documentElement 返回 元素 3
document.documentMode 返回浏览器使用的模式 3
document.documentURI 返回文档的 URI 3
document.domain 返回文档服务器的域名 1
document.domConfig 废弃。返回 DOM 配置 3
document.embeds 返回所有 元素 3
document.forms 返回所有
元素
 1
document.head 返回 元素 3
document.images 返回所有 元素 1
document.implementation 返回 DOM 实现 3
document.inputEncoding 返回文档的编码（字符集） 3
document.lastModified 返回文档更新的日期和时间 3
document.links 返回拥有 href 属性的所有 和 元素 1
document.readyState 返回文档的（加载）状态 3
document.referrer 返回引用的 URI（链接文档） 1
document.scripts 返回所有

12. jQuery

jQuery 是一个 JavaScript 库，里面包含了大量的 js 函数。

12.1 简单使用

cdn 引入

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">script>

源码下载

在这里插入图片描述

使用方法

$(selector).action()：$(选择器).事件(函数体(){...})

选择器包含 css 选择器及 jQuery 自定义的选择器，详见 jQuery API 中文文档

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuerytitle>
    
    <script src="lib/jquery-3.6.0.js">script>
head>
<body>

<a ID="test_jQuery">a>
<script>
    // $(selector).action();
    $('#test_jQuery').click(function () {
        alert('Hello jQuery');
    })
script>
body>
html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!--<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

<strong>Mouse : </strong><span id="mouseMove"></span>
<div id="moveDiv" style="width: 500px; height: 500px; border: 1px solid red">
    <p>在此区域移动鼠标</p>
</div>
<script>
    'use strict';
    // 网页加载完毕后响应事件
    $(function () {
        $('#moveDiv').mousemove(function (page) {
            $('#mouseMove').text('x : ' + page.pageX + ' ; y : ' + page.pageY);
        })
    });
</script>

</body>
</html>

12.2 操作 DOM 元素

<ul id="test-ul">
    <li id="java">Java</li>
    <li class="php">PHP</li>
    <li name="python">Python</li>
</ul>
<script>
    'use strict';
    // jQuery 查找 DOM 元素
    let java = $('#java').text();
    let php = $('#test-ul li[class=php]').text();
    let python = $('#test-ul li[name=python]').text();

    // jQuery 操作 DOM 元素
    $('#java').text('JAVA');
    $('#java').html('Strong JAVA');
    $('#java').css("color","red");
    $('#test-ul li[class=php]').css({"color":"red", "background":"blue"});
</script>

你可能感兴趣的:(前端,网络,jquery)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 基于社交网络算法优化的二维最大熵图像分割 智能算法研学社（Jack旭） 智能优化算法应用图像分割算法php开发语言
    智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 2023-04-17|篮球女孩 长一木
    1小学抑或初中阶段，在课外书了解到她的故事。“篮球女孩”。当时佩服她的顽强，也对生命多了一丝敬畏。今天刚好在公众号看到，长大后的“篮球女孩”。佩服之余又满是心疼。网络侵删祝那素未蒙面的女孩，未来一切顺遂。
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 在一台Ubuntu计算机上构建Hyperledger Fabric网络 落叶无声9 区块链超级账本Hyperledgerfabric区块链ubuntu构建hyperledgerfabric
    在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1） 算法大师 华为od面试python算法前端
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
  • 《在战“疫”中成长致敬生活》观后感 梅子刘的刀
    （作者：周晨）今天上午，我看了“我是接班人”网络大课堂《在战役中成长致敬生活》。有很多人拿出自己攒下的钱，默默地捐给了武汉，有几千块钱的、有几万块钱的，也有十几万块钱的。连小朋友也把自己的压岁钱捐给了武汉。有名环卫工人把自己五年的积蓄全部捐给了武汉。有名外卖小哥为医护人员买鞋子送吃的。还有已经治愈出院的新型肺炎病人捐了400毫升的血浆。还有位叫大树的叔叔，虽然他没有钱，但是他地里有蔬菜，捐了几大卡
  • 中原焦点团队网络初中级30期阴丽丽坚持分享第三百八十八次2022.10.18分享 约练次数（74） 咨询师（6） 来访者（53） 观察者（15） 阴丽丽
    今天是忙碌的一天，一早起来，总想着找点把事情弄完，可总也弄不完。就这样弄着吧！孩子的事，自己的事都在那里搁置着，不想做，有点欧！今天总体还不错，只是在下午起床时走神了俩小时，也算是给自己的放松吧！今日难得1.儿子乖巧、听话，努力配合，一天下来也是忙忙碌碌，这真的很难得！2.儿子今天录的视频被班主任认可，这真的很难得3.我今天早上做核酸时，自己把教案整了一下，这真的很难得
  • 网络编程基础 记得开心一点啊 网络
    目录♫什么是网络编程♫Socket套接字♪什么是Socket套接字♪数据报套接字♪流套接字♫数据报套接字通信模型♪数据报套接字通讯模型♪DatagramSocket♪DatagramPacket♪实现UDP的服务端代码♪实现UDP的客户端代码♫流套接字通信模型♪流套接字通讯模型♪ServerSocket♪Socket♪实现TCP的服务端代码♪实现TCP的客户端代码♫什么是网络编程网络编程，指网络上
  • 多子女家庭问题 3e5c5362403c
    杨宁宁焦点解决网络初17中19坚持分享589天（2021.3.20）本周约练我1次，总计166次，读书打卡第256天案例督导收获：【家有老大篇】被爱与高期待下的独舞家里的第一个孩子往往集万千宠爱于一身。爸爸妈妈、爷爷奶奶、姥姥姥爷的目光都聚焦在他的身上。在这种光环下长大的孩子，就如小皇帝一般，衣来伸手、饭来张口。拥有爱的同时，也意味着拥有了更高的被期待，父母会花血本给你报各种各样的早教班，给你买各
  • 父母教育孩子的方式，将影响孩子一生 树英教育
    为什么有些孩子总是充满自信与快乐？独立、有主见又坚强？而有些孩子却自卑、胆怯，软弱又过度依赖父母？为什么有些孩子总是健康、阳光又富于创造力？而有些孩子却悲观、孤僻又思想空乏？一个孩子的行为取决于孩子的思想，思想取决于环境和自己的认知，认知取决于教育。父母是孩子人生中的第一位教育者，父母养育孩子的方式，将决定他们人生的高度，影响他们的一生。网络图，侵权即删优秀的父母就像园丁，既要浇水施肥，又要修剪杂
  • 2024.9.6 Python，华为笔试题总结，字符串格式化，字符串操作，广度优先搜索解决公司组织绩效互评问题，无向图 RaidenQ python华为leetcode算法力扣广度优先无向图
    1.字符串格式化name="Alice"age=30formatted_string="Name:{},Age:{}".format(name,age)print(formatted_string)或者name="Alice"age=30formatted_string=f"Name:{name},Age:{age}"print(formatted_string)2.网络健康检查第一行有两个整数m
  • 戴容容 中原焦点团队.网络初级第33期,坚持分享第19天 2022年3月9日 TessDai
    《每个人眼中的世界都是不同的》“一千个人眼里有一千个哈姆雷特”世界是多元的,每个人都有自己的道理,人人按照自己的理解去看待这个世界的人和物.我们如此,其他人也是如此.因此,任何事情,我们要放下自己以为的真理,去理解他人认为的真理,只有同频方能共振.孩子在慢慢长大的过程中慢慢学会独立,甚至对抗.尤其当孩子处于青春期的时候,他们开始有很多自己独立的想法,和一些特立独行的做法,家长常常会觉得不可思议,觉
  • 第1步win10宿主机与虚拟机通过NAT共享上网互通 学习3人组 大数据大数据
    VM的CentOS采用NAT共用宿主机网卡宿主机器无法连接到虚拟CentOS要实现宿主机与虚拟机通信，原理就是给宿主机的网卡配置一个与虚拟机网关相同网段的IP地址，实现可以互通。1、查看虚拟机的IP地址2、编辑虚拟机的虚拟网络的NAT和DHCP的配置，设置虚拟机的网卡选择NAT共享模式3、宿主机的IP配置，确保vnet8的IPV4属性与虚拟机在同一网段4、ping测试连通性[root@localh
  • 网络通信流程 记得开心一点啊 服务器网络运维
    目录♫IP地址♫子网掩码♫MAC地址♫相关设备♫ARP寻址♫网络通信流程♫IP地址我们已经知道IP地址由网络号+主机号组成，根据IP地址的不同可以有5钟划分网络号和主机号的方案：其中，各类地址的表示范围是：分类范围适用网络网络数量主机最大连接数A类0.0.0.0~127.255.255.255大型网络12616777214【(2^24)-2】B类128.0.0.0~191.255.255.255中
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • 计算机木马详细编写思路 小熊同学哦 php开发语言木马木马思路
    导语：计算机木马（ComputerTrojan）是一种恶意软件，通过欺骗用户从而获取系统控制权限，给黑客打开系统后门的一种手段。虽然木马的存在给用户和系统带来严重的安全风险，但是了解它的工作原理与编写思路，对于我们提高防范意识、构建更健壮的网络安全体系具有重要意义。本篇博客将深入剖析计算机木马的详细编写思路，以及如何复杂化挑战，以期提高读者对计算机木马的认识和对抗能力。计算机木马的基本原理计算机木
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库
    背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
  • 高考后该不该给孩子买电脑，什么情况能买？什么情况不能买？ 寻求改变
    我知道家长们很担心，怕买了电脑小孩沉迷游戏，耽误了学业，也不利于身体健康。对于准大学生来说，基本上在18岁左右，也不算小了，但在很多父母眼里，依旧是个小孩子。数据显示，这种情况是有发生的，大学生约70%的电脑主要被用于玩网络游戏，如果没有养成一个用良好的习惯，对孩子影响是非常大的。我总结为三买，三不买。最近有看到群里很多家长再问，小孩上大学该不该给他买电脑，要买和不买两种观点的家长都有，那么哪种情
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • 中国广电永久9元流量套餐！性价比最高流量卡套餐介绍！ 优惠攻略官
    中国广电是中国最大的传媒集团之一，其推出的流量套餐备受消费者青睐。中国广电最实惠的流量套餐不仅价格亲民，而且提供了优质的网络体验。首先，中国广电的流量套餐价格实惠，适合不同消费者的需求。无论是短期的日租卡还是长期有效的月租卡，用户都可以根据自己的实际情况选择适合自己的套餐。而且，流量的价格相对于其他运营商的套餐来说更加合理，给用户提供了更大的选择空间。☞大流量卡套餐「→点这免费申请办理」或者截图扫
  • WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Javajava爬虫开发语言
    文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 4 大低成本娱乐方式: 小说, 音乐, 视频, 电子游戏 穷人小水滴 娱乐音视频低成本小说游戏
    穷人如何获得快乐?小说,音乐,视频,游戏,本文简单盘点一下这4大低成本(安全)娱乐方式.这里是穷人小水滴,专注于穷人友好型低成本技术.(本文为58号作品.)目录1娱乐方式1.1小说(网络小说)1.2音乐1.3视频(b站)1.4游戏(电子游戏/计算机软件)2低成本:一只手机即可3总结与展望1娱乐方式这几种,也可以说是艺术的具体形式.更专业的说,(娱乐)是劳动力再生产的重要组成部分.使人放松,获得快乐
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 计算机网络八股总结 Petrichorzncu 八股总结计算机网络笔记
    这里写目录标题网络模型划分（五层和七层）及每一层的功能五层网络模型七层网络模型（OSI模型）==三次握手和四次挥手具体过程及原因==三次握手四次挥手TCP/IP协议组成==UDP协议与TCP/IP协议的区别==Http协议相关知识网络地址，子网掩码等相关计算网络模型划分（五层和七层）及每一层的功能五层网络模型应用层：负责处理网络应用程序，如电子邮件、文件传输和网页浏览。主要协议包括HTTP、FTP
  • [黑洞与暗粒子]没有光的世界 comsci
         无论是相对论还是其它现代物理学,都显然有个缺陷,那就是必须有光才能够计算      但是,我相信,在我们的世界和宇宙平面中,肯定存在没有光的世界....      那么,在没有光的世界,光子和其它粒子的规律无法被应用和考察,那么以光速为核心的 &nbs
  • jQuery Lazy Load 图片延迟加载 aijuans jquery
    基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。 对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。 版本： jQuery v1.4.4+ jQuery Lazy Load v1.7.2 注意事项： 需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src
  • 使用Jodd的优点 Kai_Ge jodd
    1.  简化和统一 controller ，抛弃 extends SimpleFormController ，统一使用 implements Controller 的方式。 2.  简化 JSP 页面的 bind, 不需要一个字段一个字段的绑定。 3.  对 bean 没有任何要求，可以使用任意的 bean 做为 formBean。   使用方法简介
  • jpa Query转hibernate Query 120153216 Hibernate
    public List<Map> getMapList(String hql, Map map) { org.hibernate.Query jpaQuery = entityManager.createQuery(hql); if (null != map) { for (String parameter : map.keySet()) { jp
  • Django_Python3添加MySQL/MariaDB支持 2002wmj mariaDB
    现状 首先，[email protected] 中默认的引擎为 django.db.backends.mysql 。但是在Python3中如果这样写的话，会发现 django.db.backends.mysql 依赖 MySQLdb[5] ，而 MySQLdb 又不兼容 Python3 于是要找一种新的方式来继续使用MySQL。 MySQL官方的方案 首先据MySQL文档[3]说，自从MySQL
  • 在SQLSERVER中查找消耗IO最多的SQL 357029540 SQL Server
    返回做IO数目最多的50条语句以及它们的执行计划。 select top 50   (total_logical_reads/execution_count) as avg_logical_reads,  (total_logical_writes/execution_count) as avg_logical_writes,  (tot
  • spring UnChecked 异常 官方定义！ 7454103 spring
      如果你接触过spring的 事物管理！那么你必须明白 spring的 非捕获异常！ 即 unchecked 异常！ 因为 spring 默认这类异常事物自动回滚！！ public static boolean isCheckedException(Throwable ex) { return !(ex instanceof RuntimeExcep
  • mongoDB 入门指南、示例 adminjun javamongodb操作
    一、准备工作 1、 下载mongoDB 下载地址：http://www.mongodb.org/downloads 选择合适你的版本 相关文档：http://www.mongodb.org/display/DOCS/Tutorial 2、 安装mongoDB A、 不解压模式： 将下载下来的mongoDB-xxx.zip打开，找到bin目录，运行mongod.exe就可以启动服务，默
  • CUDA 5 Release Candidate Now Available aijuans CUDA
    The CUDA 5 Release Candidate is now available at http://developer.nvidia.com/<wbr></wbr>cuda/cuda-pre-production. Now applicable to a broader set of algorithms, CUDA 5 has advanced fe
  • Essential Studio for WinRT网格控件测评 Axiba JavaScripthtml5
    Essential Studio for WinRT界面控件包含了商业平板应用程序开发中所需的所有控件，如市场上运行速度最快的grid 和chart、地图、RDL报表查看器、丰富的文本查看器及图表等等。同时，该控件还包含了一组独特的库，用于从WinRT应用程序中生成Excel、Word以及PDF格式的文件。此文将对其另外一个强大的控件——网格控件进行专门的测评详述。 网格控件功能 1、
  • java 获取windows系统安装的证书或证书链 bewithme windows
          有时需要获取windows系统安装的证书或证书链，比如说你要通过证书来创建java的密钥库  。 有关证书链的解释可以查看此处 。   public static void main(String[] args) { SunMSCAPI providerMSCAPI = new SunMSCAPI(); S
  • NoSQL数据库之Redis数据库管理(set类型和zset类型) bijian1013 redis数据库NoSQL
    4.sets类型         Set是集合，它是string类型的无序集合。set是通过hash table实现的，添加、删除和查找的复杂度都是O(1)。对集合我们可以取并集、交集、差集。通过这些操作我们可以实现sns中的好友推荐和blog的tag功能。         sadd：向名称为key的set中添加元
  • 异常捕获何时用Exception，何时用Throwable bingyingao
    用Exception的情况 try {        //可能发生空指针、数组溢出等异常         } catch (Exception e) {          
  • 【Kafka四】Kakfa伪分布式安装 bit1129 kafka
    在http://bit1129.iteye.com/blog/2174791一文中，实现了单Kafka服务器的安装，在Kafka中，每个Kafka服务器称为一个broker。本文简单介绍下，在单机环境下Kafka的伪分布式安装和测试验证   1. 安装步骤   Kafka伪分布式安装的思路跟Zookeeper的伪分布式安装思路完全一样，不过比Zookeeper稍微简单些(不
  • Project Euler bookjovi haskell
    Project Euler是个数学问题求解网站，网站设计的很有意思，有很多problem，在未提交正确答案前不能查看problem的overview，也不能查看关于problem的discussion thread，只能看到现在problem已经被多少人解决了，人数越多往往代表问题越容易。     看看problem 1吧： Add all the natural num
  • Java-Collections Framework学习与总结-ArrayDeque BrokenDreams Collections
            表、栈和队列是三种基本的数据结构，前面总结的ArrayList和LinkedList可以作为任意一种数据结构来使用，当然由于实现方式的不同，操作的效率也会不同。         这篇要看一下java.util.ArrayDeque。从命名上看
  • 读《研磨设计模式》-代码笔记-装饰模式-Decorator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.io.BufferedOutputStream; import java.io.DataOutputStream; import java.io.FileOutputStream; import java.io.Fi
  • Maven学习(一) chenyu19891124 Maven私服
        学习一门技术和工具总得花费一段时间，5月底6月初自己学习了一些工具，maven+Hudson+nexus的搭建，对于maven以前只是听说，顺便再自己的电脑上搭建了一个maven环境，但是完全不了解maven这一强大的构建工具，还有ant也是一个构建工具，但ant就没有maven那么的简单方便，其实简单点说maven是一个运用命令行就能完成构建，测试，打包，发布一系列功
  • [原创]JWFD工作流引擎设计----节点匹配搜索算法(用于初步解决条件异步汇聚问题) 补充 comsci 算法工作PHP搜索引擎嵌入式
    本文主要介绍在JWFD工作流引擎设计中遇到的一个实际问题的解决方案，请参考我的博文"带条件选择的并行汇聚路由问题"中图例A2描述的情况(http://comsci.iteye.com/blog/339756),我现在把我对图例A2的一个解决方案公布出来，请大家多指点 节点匹配搜索算法(用于解决标准对称流程图条件汇聚点运行控制参数的算法) 需要解决的问题：已知分支
  • Linux中用shell获取昨天、明天或多天前的日期 daizj linuxshell上几年昨天获取上几个月
    在Linux中可以通过date命令获取昨天、明天、上个月、下个月、上一年和下一年 # 获取昨天 date -d 'yesterday'  # 或 date -d 'last day' # 获取明天 date -d 'tomorrow'   # 或 date -d 'next day' # 获取上个月 date -d 'last month' #
  • 我所理解的云计算 dongwei_6688 云计算
          在刚开始接触到一个概念时，人们往往都会去探寻这个概念的含义，以达到对其有一个感性的认知，在Wikipedia上关于“云计算”是这么定义的，它说：        Cloud computing is a phrase used to describe a variety of computing co
  • YII CMenu配置 dcj3sjt126com yii
    Adding id and class names to CMenu We use the id and htmlOptions to accomplish this. Watch. //in your view $this->widget('zii.widgets.CMenu', array( 'id'=>'myMenu', 'items'=>$this-&g
  • 设计模式之静态代理与动态代理 come_for_dream 设计模式
    静态代理与动态代理        代理模式是java开发中用到的相对比较多的设计模式，其中的思想就是主业务和相关业务分离。所谓的代理设计就是指由一个代理主题来操作真实主题，真实主题执行具体的业务操作，而代理主题负责其他相关业务的处理。比如我们在进行删除操作的时候需要检验一下用户是否登陆，我们可以删除看成主业务，而把检验用户是否登陆看成其相关业务
  • 【转】理解Javascript 系列 gcc2ge JavaScript
    理解Javascript_13_执行模型详解 摘要: 在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。函数执行环境简单的代码:当调用say方法时，第一步是创建其执行环境，在创建执行环境的过程中，会按照定义的先后顺序完成一系列操作:1.首先会创建一个
  • Subsets II hcx2013 set
    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Note: Elements in a subset must be in non-descending order. The solution set must not conta
  • Spring4.1新特性——Spring缓存框架增强 jinnianshilongnian spring4
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • shell嵌套expect执行命令 liyonghui160com
        一直都想把expect的操作写到bash脚本里,这样就不用我再写两个脚本来执行了,搞了一下午终于有点小成就,给大家看看吧.   系统:centos 5.x   1.先安装expect yum -y install expect   2.脚本内容: cat auto_svn.sh   #!/bin/bash
  • Linux实用命令整理 pda158 linux
    0. 基本命令 　　linux 基本命令整理 　 　1. 压缩 解压 　　tar -zcvf a.tar.gz a   #把a压缩成a.tar.gz 　　tar -zxvf a.tar.gz     #把a.tar.gz解压成a 　 　2. vim小结 　　2.1 vim替换 　　:m,ns/word_1/word_2/gc  
  • 独立开发人员通向成功的29个小贴士 shoothao 独立开发
    概述：本文收集了关于独立开发人员通向成功需要注意的一些东西,对于具体的每个贴士的注解有兴趣的朋友可以查看下面标注的原文地址。 明白你从事独立开发的原因和目的。 保持坚持制定计划的好习惯。 万事开头难，第一份订单是关键。 培养多元化业务技能。 提供卓越的服务和品质。 谨小慎微。 营销是必备技能。 学会组织，有条理的工作才是最有效率的。 “独立
  • JAVA中堆栈和内存分配原理 uule java
    1、栈、堆 1.寄存器：最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制.2. 栈：存放基本类型的变量数据和对象的引用，但对象本身不存放在栈中，而是存放在堆（new 出来的对象）或者常量池中（字符串常量对象存放在常量池中。）3. 堆：存放所有new出来的对象。4. 静态域：存放静态成员（static定义的）5. 常量池：存放字符串常量和基本类型常量（public static f