2021年01月_小生听雨园

原创 Python数据结构与算法第二篇——timeit模块

timeit性能分析timeit模块1.1基本用法1.2 进阶2.应用性能分析timeit模块1.1基本用法导入import timeit或：from timeit import timeit或：from timeit import Timer看执行1000次x=10的时间： timeit('x=10')看x=10的执行时间，执行1000次(number可以省略，默认值为1000000)： timeit('x=10', number=1000)看一个列表生成器的执行时间,执行10

2021-01-25 18:53:20 108

原创 Python数据结构与算法第一篇——时间复杂度

时间复杂度1.例题1.1先来看一道题:如果 a+b+c=1000，且 a^2+b^2=c^2（a,b,c 为自然数），如何求出所有a、b、c可能的组合?1.1.1 解法1：1.1.2 解法2：2.时间复杂度2.1时间复杂度情况2.2时间复杂度计算规则2.3解析3.常见时间复杂度1.例题1.1先来看一道题:如果 a+b+c=1000，且 a2+b2=c^2（a,b,c 为自然数），如何求出所有a、b、c可能的组合?1.1.1 解法1：import timestart_time = time.tim

2021-01-25 18:07:08 321

原创 js——json

json1.json2.创建3. json转js对象4. js对象转json1.jsonJSON * - JS中的对象只有JS自己认识，其他的语言都不认识 * - JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别， * 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互 * - JSON * - JavaScript Object Notation JS对象表示法 * - JSON和JS对象的格式一样，只

2021-01-25 00:17:54 107

原创 js类的操作，修改css，封装修改类常用函数

js类的操作，修改css1.弊端2.于是乎解决一下，也降低css与js耦合度3.封装3.1 addClass3.2 hasClass3.3 removeClass3.4 toggleClass1.弊端通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面* 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便2.于是乎解决一下，也降低css与js耦合度修改box的class属性 * 我们可以通过修改元素的class属

2021-01-25 00:11:51 212

原创轮播图

轮播图1.<注意>2.代码1.<注意>1. #outer要开启相对定位2.裁剪溢出的内容：overflow: hidden;3. #navDiv要开启绝对定位：position: absolute;4.#navDiv a：设置超链接浮动 float: left; 5.兼容IE8透明filter: alpha(opacity=50); 创建一个方法用来设置选中的a function setA(){ //判断当前索引是否是最

2021-01-25 00:03:35 102

原创定时器控制div移动，封装动态常用函数

定时器控制div移动，创建一个可以执行简单动画的函数1.定义一个函数，用来获取指定元素的当前的样式2.创建一个可以执行简单动画的函数3.代码1.定义一个函数，用来获取指定元素的当前的样式 * 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name){ if(window.getComputedStyle){

2021-01-24 23:54:46 173

原创定时器延迟调用

1.延迟调用延时调用， * 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次 * * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次 * * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择2.开启延迟调用setTimeoutvar timer = setTimeout(function(){ console.log(num++); },3000);3.关闭延迟调用c

2021-01-24 23:46:43 411

原创结合定时器使键盘控制div无延迟

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } &

2021-01-24 23:43:19 70

原创 js 定时器setInterval

定时器setInterval1.setInterval开启定时器2.关闭定时器3.小练习：自动切换图片1.setInterval开启定时器* setInterval() * - 定时调用 * - 可以将一个函数，每隔一段时间执行一次 * - 参数： * 1.回调函数，该函数会每隔一段时间被调用一次 * 2.每次调用间隔的时间，单位是毫秒 * * - 返回值： * 返回一个Number类型的数据 * 这个数字

2021-01-24 23:40:15 54010

原创 JS BOM Location

Location1.定义1.1 location1.2 assign()1.3 reload()1.4 replace()1.定义Location * - 该对象中封装了浏览器的地址栏的信息1.1 location如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）如果直接将location属性修改为一个完整的路径，或相对路径 * 则我们页面会自动跳转到该路径，并且会生成相应的历史记录location = "https://www.nxys.xyz";

2021-01-24 23:31:17 121

原创 js BOM

BOM概述BOM * - 浏览器对象模型 * - BOM可以使我们通过JS来操作浏览器 * - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作1.1Window * - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象1.2Navigator * - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器Navigator * - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 *

2021-01-24 23:16:38 95

原创 js BOM --＞history

historyHistory1.1 length1.2 back()1.3 forward()1.4 go()History History * - 对象可以用来操作浏览器向前或向后翻页 *1.1 length* length * - 属性，可以获取到当成访问的链接数量1.2 back()* back() * - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样1.3 forward()* forward() * - 可以跳

2021-01-24 23:07:04 95

原创键盘事件练习 ——控制div移动

控制div移动topic:小键盘方向键控制div移动思考一下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 100px; height: 100px; background-color: #8A2BE2;

2021-01-23 16:06:39 143

原创键盘事件

键盘事件1.键盘事件2.代码1.键盘事件键盘事件： * onkeydown * - 按键被按下 * - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 * - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快 * 这种设计是为了防止误操作的发生。 * onkeyup * - 按键被松开 * * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是

2021-01-23 16:01:09 152

原创鼠标滚轮事件

鼠标滚轮事件1.获取方法2.代码1.获取方法event.wheelDelta 可以获取鼠标滚轮滚动的方向向上滚 120 向下滚 -120wheelDelta这个值我们不看大小，只看正负wheelDelta这个属性火狐中不支持在火狐中使用event.detail来获取滚动的方向向上滚 -3 向下滚 3火狐使用addEventListener()方法绑定响应函数，取消默认行为时* 不能使用return false* 需要使用event来取消默认行为event.pre

2021-01-23 15:51:51 604 1

原创鼠标拖拽

拖拽1.拖拽流程1.22.代码1.拖拽流程拖拽box1元素 * - 拖拽的流程 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup1.2相当于加了if判断，如果前面有就执行，没有就不执行。box1.setCapture && box1.setCapture();当我们拖拽一个网

2021-01-23 15:22:20 562

原创 DOM事件的绑定

事件绑定1.事件绑定1.1box.onclick = function(){};1.2addEventListener()1.3attachEvent()2.写一个兼容性好的绑定函数模板3.代码1.事件绑定1.1box.onclick = function(){};只能绑定一个，后面会覆盖前面1.2addEventListener()addEventListener() * - 通过这个方法也可以为元素绑定响应函数 * - 参数： * 1.事件的字符串，不要on

2021-01-23 14:51:17 87 2

原创事件的委派——一个非常有用的东西（解决了新增元素也需要绑定的问题）

事件的委派1.定义2.解决的问题3.代码1.定义事件的委派* - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素* 从而通过祖先元素的响应函数来处理事件。* - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能2.解决的问题我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的

2021-01-23 13:23:42 106 4

原创事件的冒泡

事件的冒泡1.定义（这个别跳过）2.代码（定义理解的好此处代码可以忽略）1.定义（这个别跳过）事件的冒泡（Bubble） * - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡2.代码（定义理解的好此处代码可以忽略）<!DOCTYPE html><html> <head> <meta charse

2021-01-23 12:52:47 92

原创 div跟随鼠标移动

div跟随鼠标移动1.知识点1.1 clientX和clientY1.21.3必须开启绝对定位2.代码1.知识点1.1 clientX和clientY clientX和clientY 用于获取鼠标在当前的可见窗口的坐标 div的偏移量，是相对于整个页面的 pageX和pageY可以获取鼠标相对于当前页面的坐标但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用1.2 chrome认为浏览器的滚

2021-01-23 12:48:46 673 1

原创 DOM获取鼠标坐标，并显示

1.图片效果2.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color: #FFFF00; margin: 10px; }

2021-01-20 22:44:28 335

原创 Dom 操作css

1. 读取 * 语法：元素.style.样式名 * * 通过style属性设置和读取的都是内联样式 * 无法读取样式表中的样式 2. 修改 * 通过JS修改元素的样式： * 语法：元素.style.样式名 = 样式值 * * 注意：如果CSS的样式名中含有-， * 这种名称在JS中是不合法的比如background-color * 需要将这种样式名修改为驼峰命名法，

2021-01-20 22:41:48 356

原创 Dom增删改练习2，写一个小的管理界面

1.见图/* * confirm()用于弹出一个带有确认和取消按钮的提示框 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 * 如果用户点击确认则会返回true，如果点击取消则返回false *//* * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为， * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为 */2.全部代码<!DOCTYPE

2021-01-20 21:50:01 129

原创实现一个DOM增删改的页面

1.见效果图1.1知识点1.1.1createElement()createElement()/* * document.createElement() * 可以用于创建一个元素节点对象， * 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象， * 并将创建好的对象作为返回值返回 */ var li = document.createElement("li");1.1.2createTextNode()createTe

2021-01-17 22:06:27 101

原创 js DOM补充及超强querySelector()

1.补充<script type="text/javascript"> //在document中有一个属性body，它保存的是body的引用 var body = document.body; //document.documentElement保存的是html根标签 var html = document.documentElement; //页面里的所有元素 var all = document.all; console.log(all[0]);

2021-01-17 21:55:16 521

原创 js DOM练习，做一个单选多选全选的form表单

看效果图注意其中可能出现的几个bug1.点击全选单选框后也应该全选，取消选择其余四个也应该取消选择2.点击全选多选框以后，正常情况下四个都选中，取消一个选中，多选框也应该取消选中3.点击全选按钮以后，全选多选框也应该选中4.点击全不选按钮以后，全选多选框也应该取消选择5.点击全选按钮以后，点击全不选，多选框应该发生变化2.上代码<!DOCTYPE html><html> <head> <meta charset="utf-8">

2021-01-17 21:47:21 492

原创 ***.forEach is not a function

***.forEach is not a function缘起：在这里插入图片描述==原生js获取的DOM集合是一个类数组对象，不能直接利用数组的方法（例如：forEach，map等），需要进行转换为数组后，才能用数组的方法！==1.推荐几种转换成数组的方法1.1 Array.from()1.2 [...ci]1.3 Array.prototype.slice.call（ci）缘起： <div id="box"> <p>city</p> <ul i

2021-01-17 21:34:55 6694

原创 js DOM子节点

DOM元素节点各个方法各个方法 childNodes属性会获取包括文本节点在呢的所有节点,根据DOM标签标签间空白也会当成文本节点 firstChild可以获取到当前元素的第一个子节点，包括空白文本。 firstElementChild获取当前元素的第一个子元素,不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用 previousSibling获取前一个兄弟节点，有可能获取到空白文本 previousElementSibling获取前一个兄弟元素，IE8及以下不

2021-01-17 21:12:43 443

原创 JS DOM练习

练习：做一个可以点击按钮切换图片的网页<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #pic{ width: 500px; height: 400px; }

2021-01-15 19:18:25 312

原创 js DOM树

DOM树DOM，全称Document Object Model文档对象模型。节点:Node ——构成HTML文档最基本的单元。常用节点分为四类一文档节点:整个HTML文档一元素节点:HTML文档中的HTML标签一属性节点:元素的属性一文本节点:HTML标签中的文本内容 1. getElementById() 一通过id属性获取一个元素节点对象 2. getElementsByTagName() -通过标签名获取一组元素节点对

2021-01-15 19:14:23 162

原创 js正则表达式及练习（超详细）

正则表达式，及练习1.创建一个正则表达式1.1使用构造函数创建1.2 使用字面量创建一个正则表达式2.匹配规则3.匹配方法4.练习4.1识别手机号4.2匹配单词child4.3去掉字符串中的空格4.4匹配邮箱1.创建一个正则表达式1.1使用构造函数创建//创建正则表达式对象 var re = new RegExp("正则表达式","匹配模式"); //可以传递第二个参数：匹配模式 i:忽略大小写, g:全局匹配模式 m:多行匹配test

2021-01-15 19:01:09 1600

原创 js包装类

String Number Boolean包装类1.1包装类1.2 String包装类的方法1.23charAt()1.24 charCodeAt()1.25 fromCharCodeAt()1.26 slice()1.27 substring()1.28 substr()1.29 split()1.30 toLowerCase()1.31 toUpperCase()1.32 concat()1.33 indexof()1.34 lastIndexOf();包装类1.1包装类<script t

2021-01-15 18:29:35 241

原创 js Date和Math两个对象

Date Math1.Date1.1直接创建一个Date对象1.2创建一个指定的时间对象1.3 获取当前日期（月日）*==Date.now() :获取当前代码执行时的时间戳==*2.Math==-Math和其他的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法==1.Date1.1直接创建一个Date对象 var dat = new Date(); console.log(dat); //-->Mon Jan 11 2021 2

2021-01-15 18:06:34 78

原创 js数组小练习

1.练习，数组存着一组对象，提取年龄大于18的对象，并把它们放进一个新的数组<script type="text/javascript"> //script练习，提取年龄大于18的对象，并把它们放进一个新的数组 function Person(name, age, gender){ this.name = name; this.age = age; this.gender = gender; } var per = new Person("小王"

2021-01-11 16:36:58 535

原创 js数组及数组方法（forEach等）

2021-01-11 16:29:46 810

原创 javascript垃圾回收--

js垃圾回收其实你不用管，浏览器自己就干了，想看的话就看看下面的黄字==JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们需要做的就是要将不再使用的对象设置nu11即可==其实你不用管，浏览器自己就干了，想看的话就看看下面的黄字垃圾回收（GC) -就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾这些垃圾积攒过多以后，会导致程序运行的速度过慢，所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾 -当一个对象没有任

2021-01-11 13:39:23 87

原创 javascript call apply 和arguments

call apply argumentscall apply argumentscall apply argumentsarguments是类数组对象，但他不是数组function fun2(){ console.log(Array.isArray(arguments)); } fun2();-->false<script type="text/javascript"> //call()和apply()/* -这两个方法都

2021-01-11 13:31:17 81

原创 js原型prototype

原型prototype创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样就不用为每一个对象添加，也不会影响到全局作用域创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样就不用为每一个对象添加，也不会影响到全局作用域原型prototype * 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype * 这个属性对应着一个对象，这个对象就是我们所谓的原型对象 * 如果函数作为普通函数调用protot

2021-01-11 13:13:55 57

原创 js 超详解构造函数

构造函数1.定义（建议直接看下面代码）2.执行流程及别称3.例子3.1“造人”3.2“造狗”创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写1.定义（建议直接看下面代码）/** * 创建一个构造函数， * 专门用来创建Person对象的 * 构造函数就是一个普通的函数， * 创建方式和普通函数没有区别， * 不同的是构造函数习惯上首字母大写 * */见下例： function Person(){ } var

2021-01-04 22:49:34 106

原创 javascript 趣讲工厂模式“造人”

继承程序员的优良传统---懒1.废话不多，上代码2.工厂模式：上代码2.1首先，我们来“造人 creatPerson()”2.2"啪"的一下，很快啊，造完了，造个其他的物种咋样，creatDog()造狗3.工厂模式：缺点==使用工厂方法创建的对象，使用的构造函数都是Object所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象==1.废话不多，上代码 var obj = { name:"林徽因", age:19, sayname:function(

2021-01-04 21:05:29 78

空空如也

空空如也