- 博客(45)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 常见排序算法的Javascript实现
近日准备实习面试，以下是常见排序算法JS实现，转载备用。原文链接JavaScript实现排序算法冒泡排序冒泡排序的基本思想是从头遍历要排序的数组，比较相邻两个数，如果前面位置的数大于后面位置的数，那么就将两者进行交换，否则不做任何操作。遍历完一次之后，最大的数就放到了数组最后的位置。然后再从头遍历数组，进行同样的操作，就可以将第二大的数放到倒数第二个位置，依此进行下去，直到所有数都排好位置为止。冒
2017-03-09 10:15:59
889
1
原创 一次网页请求背后的连接
一次网页请求背后的连接 想成为一个优秀的前端，对互联网协议是必须要了解的。本文使用WireShark抓包工具，对一次网页请求背后的TCP连接、HTTP请求进行了详细的展示。对网页请求中浏览器使用的并行连接、持久连接以及TCP连接建立关闭的过程均有所分析讨论，对HTTP如何封装在TCP中进行数据请求以及数据的响应返回也有所展示。供学习交流之用。TCP简介本文从传输层的报文开始，下层网络IP层、链
2016-12-07 10:55:39
5893
1
原创 JSX语法详解
JSX语法详解 本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提
2016-12-02 14:24:43
80944
6
原创 React-"Refs and the DOM"
React-“Refs and the DOM” 学习是一件反反复复的事情，今天回顾react官方文档中Refs and the DOM，大致翻译一遍，将笔记摘录备忘。React的典型数据流中，props是父组件和子组件交互的唯一方式。要修改子组件，你需要使用新的porps重新render它。然而有的时候我们又需要在典型数据流之外去修改一个子组件。被修改的子组件可能是一个React组件实例或者
2016-11-29 12:16:32
1118
1
原创 Redux与纯JS入门实例讲解
Redux与纯JS入门实例讲解 学习Redux可能是一个噩梦，我猜应该每个人都读过那篇”You Might Not Need Redux”然后扔掉了手中的电脑。如果一来就是npm install --save react-redux，你很可能在做了几个TodoList之类的例程之后还是不甚清楚redux究竟是做什么的，或者没那么清楚。或许，你需要的仅仅是一个不包含react的redux例子。r
2016-11-28 09:46:46
4818
5
原创 利用css的target选择器实现纯css相册
在看CSS选择符的时候注意到一个特别有意思的选择符–:target，随后在http://benschwarz.github.io/gallery-css/发现利用该选择符可以做出如此漂亮的gallery，干净利落无需js代码(强迫症及完美主义必备)，网站上有一套讲解教程，但是是付费的。今天把我实现的过程以及某些细节分享出来，供学习使用。在开始之前强烈建议先看一下css必会选择符我这里有一个在线预览
2016-11-21 12:29:32
2239
原创 css选择器拾遗
前言：说大量学习‘前端’的人CSS选择器水准停留在元素选择、类选择、ID选择、简单的属性选择、：hover以及后代选择器是不过分的。很多人觉得类似~、+这种同辈选择符不过是鸡肋一般的存在，实际上随着CSS3的兴起，CSS已经能够承担大量之前必须依靠js才能完成的页面效果，有些效果让你难以置信，而且美得没话说。纯CSS代码不仅有更好的性能，而且解救了一大批强迫症。这一切的基础都在于CSS选择器，请认真
2016-11-21 12:15:50
827
原创 十分详细的React入门实例
学习React不是一蹴而就的事情，入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例，实例并不难，但对于初学者而言，足够认清React的思考和编写过程。认真完成这个实例的每一个细节会让你受益匪浅。接下来我们开始吧！代码下载预览首先说明一下，本例究竟做了什么。本文实现了一个单页面人员管理系统的前台应用。包括以下功能：人员基本信息列表；人员的录入及删除；人员详细信息的
2016-09-26 10:06:23
84242
37
原创 使用css及简单的js实现酷炫的响应式slider
真的是好久都没有写博客了，这几个月一直很忙。这几天暑假在家，闲来无事，从前端到后台写了一个网站，算是新的个人博客吧。本文的demo和下载就挂在上面。今天在这里分享一个十分常见的应用，轮播。我们经常在网站中看到slider，既实用又好看。这里主要用css和少量的jQuery(其实用原生js也很简单)来实现一个响应式的幻灯片slider。这里主要给大家提供一种思路，还有实现中的一些细节处理，具体的功能，
2016-08-09 16:06:40
4975
1
原创 css浮动基本规则
说到元素的浮动，首先要明确一个概念就是包含块(containing block)。所谓浮动元素的包含块，就是其最近的块级祖先元素。我们后面会举例来说明。这里关于浮动的问题，主要有以下几点：1、浮动元素的外边界不能超过其包含块的内边界。2、浮动元素的外边界是另一浮动元素的外边界。3、浮动元素的顶端不能比之前出现的浮动元素的顶端更高。4、浮动元素顶端不超过当前行。5、clear属性。1、浮动
2016-06-11 21:33:53
8042
原创 常用jQuery选择器详解
元素选择是一切操作的前提，jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器')$('选择器 上下文')2、使用基本css选择器关于基本的css选择器可以看一下css选择器详解。这里列出几种最基本的使用css选择器的用法。2.1 元素选择器$('a'); //选择所有a元素$('di
2016-05-26 14:46:56
5571
翻译 美化加载失败的图片(Stying broken images)
原文出处https://bitsofco.de/styling-broken-images/翻译：王浴昊注明出处，本文可以转载。加载失败的图片很丑陋。事实上并不一定要如此。我们可以通过对<img>元素应用css样式来提供比默认选择更爽的体验。两个关于<img>元素的事实为了理解我们可以如何美化加载失败的图片，我们先要搞明白两种<img>元素的表现方式。1、我们可以将常规的排版相关(typograp
2016-05-25 10:13:39
2084
原创 css选择器详解
1、元素选择器2、类选择器3、ID选择器4、属性选择器5、派生选择器1、元素选择器最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。用法十分简单，例如：html {background-color: black;}p {font-size: 30px; backgroud-color: gray;}
2016-05-23 11:08:10
12639
2
原创 使用百度地图API在页面添加百度地图应用
目录：页面预览准备工作代码实现相关链接本文我们使用百度提供的地图API，通过8行代码就可在自己的网页引入百度地图的应用。操作十分便捷，功能又十分强大。1、页面预览很多时候我们希望在自己的页面中嵌入一个地图应用，方便向他人直观地提供自己的位置信息。本文我们利用百度提供的api，在自己的网页中嵌入百度地图的应用。完成后界面预览如上图所示，当然我们这里只关注图中百度地图那一块。2、准备工作百度地
2016-05-20 09:46:31
13204
原创 使用jquery制作漂亮相册集
目录：简单的图像翻滚漂亮的相册集资源文件简单的图像翻滚image-rollover常被用在交互式导航栏上，当我们的鼠标移动到导航栏时，按钮的外观改变。例如我们以如下几幅黑白缩略图作为导航图表，当鼠标移动到指定图标时，图标变为明亮的彩色图片。预览如下：该页面的代码十分简单，我们以此为例逐步实现图像的翻滚：img-rollover.html<!DOCTYPE html><html><head
2016-04-28 13:49:37
8774
3
原创 使用jQuery让事件动起来
目录：三步实现jQuery方式处理事件$(document).ready()与window.onloadthis和$(this)常用的hover()和toggle()通过点击文章标题展开、隐藏新闻内容三步实现jQuery方式处理事件发生在Web页面的每一件事情都可以称为事件，为了使Web页面具有交互性，我们采用的方法是通过编写程序来响应事件。例如，鼠标移动到导航栏时显示帅气的下拉菜单；鼠
2016-04-26 16:37:02
4904
8
原创 JavaScript DOM(二)
HTML元素特性与DOM属性Element类型节点Text类型节点HTML元素特性与DOM属性HTML标签中的attribute和DOM对象的property是比较容易混淆的两个概念，实际上这二者对于理解”文档对象模型”是十分重要的。通常我们会把HTML标签的attribute译为”特性”而把DOM对象的property译为”属性”。文档对象模型(DOM)是针对HTML和XML文档的一个API
2016-04-18 14:50:38
4027
原创 JavaScript DOM(一)
目录：DOM家谱树节点的基本属性和方法document与getElement方法DOM家谱树DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。其中节点被分为几种不同的类型，每种类型表示文档中不同的信息或标记。每个节点又拥有各自的属性和方法，同时和其他节点存在着某种关系。DOM将文档描述的层次结构可以表示为一种”树型”模型，更确切地说，是一种家谱树。它使用parent，ch
2016-04-15 16:16:42
5214
原创 JavaScript事件基础知识
目录一、DOM0级事件处理二、事件冒泡与事件捕获三、DOM2级事件处理四、IE事件处理程序及跨浏览器支持五、事件对象一、DOM0级事件处理事件，由WEB页面中发生的一些特定行为触发。比如在某个页面元素上按下鼠标左键，按下键盘某个按键，某对象获得或丢失焦点时均会触发对应的事件。JavaScript和HTML的交互就是通过事件来实现的。我们使用事件侦听器对事件进行“注册”，事件发生时便执行相
2016-04-12 13:19:16
4601
1
原创 JavaScript图解继承(多图)
在JavaScript中，继承主要是通过原型链来实现的。原型链和前文所说的原型对象密切相关。原型对象可以参考JavaScript构造函数和原型对象。为了彻底搞清楚JavaScript的继承，我们先搞清楚原型链是什么。原型链继承我们知道，所有的引用类型都默认继承了Object，因而所有自定义类型都拥有toString()、valueOf等默认方法。我们只是知道这个结论，但现在我们更感兴趣的是这个继承关
2016-04-08 13:47:54
4650
3
原创 JavaScript构造函数及原型对象
JavaScript中没有类的概念，所以其在对象创建方面与面向对象语言有所不同。JS中对象可以定义为”无序属性的集合”。其属性可以包含基本值，对象以及函数。对象实质上就是一组没有特定顺序的值，对象中每个属性、方法都有一个名字，每个名字都映射到了一个值，因此我们可以将对象想象称为一个散列表。JS是一种基于对象的语言，对象的概念在JS体系中十分的重要，因此有必要清楚地了解一下JS中对象创建的常用方法
2016-04-07 10:00:41
25682
24
原创 JavaScript深入理解函数参数列表及“不存在重载”
函数的参数JS和其他大多数语言一个较为明显的区别就在于函数参数的处理上。因为在JS中调用函数的时候，传入的参数数据类型是可以不固定的，个数也无所谓多少个。听起来很奇怪，实际上，JS中的参数在内部是用一个数组表示的，不论传入的参数属于什么数据类型，有多少个，函数接收的都是这个数组。解析器并不对数组内容进行检查。（在JS中，数组的长度是可变的，存储元素的类型也是不固定的。）我们知道了函数参数保存在一个数
2016-04-03 11:36:37
2449
原创 JavaScript常用对象Array(2)
数组的join方法数组拼接concat方法数组切分slice方法强大的splice方法indexOf以及lastIndexOf方法几种常用的迭代方法数组的join方法我们知道，数组的toString()以及toLocaleString()方法会返回以逗号分隔的数组字符串。但是如果我们希望分隔符不是单一的逗号，我们可以选择使用join()方法。join()方法可以接受一个参数，这个参数就是
2016-04-03 11:26:10
1376
1
原创 JavaScript常用对象Array(1)
Array类型几乎是JavaScript中最常用的类型了。JavaScript中数组的概念与Java，C中类似，但有两点需要强调：1、Array中每一项保存的数据类型可以不同。例如第一项保存一个字符串数据，第二项保存一个数值等。2、Array数组的长度是可以动态调整的。也就是可以随时对一个数组增添新的内容。Array对象的创建Array对象的访问、添加元素Array对象转换为字符串Array
2016-04-01 14:23:38
1975
原创 HTML框架集示例
HTML框架集我们可以通过框架，在一个浏览器窗口中显示多个页面。HTML框架集的使用十分简单，我们需要用到如下2个标签：<frameset></frameset><frame></frame>frameset的属性frameset主要有以下属性：rowscolsboeder 该属性用于指定框架边框宽度，单位为px。frameborder 该属性为1时显示框架边框，0时不显示框架边框。b
2016-03-31 09:46:26
11512
1
原创 JavaScript Date及Number对象
可以说，JS中所有事物都是对象。这是一门基于对象的语言。里面的字符串，数组，函数，日期乃至数字都是对象。对象实际上就是一种带有属性和方法的数据类型。Date对象Number对象Date对象日期和时间，在Web应用中随处可见，也必不可少。JS脚本内置了Date对象，该对象为我们提供了一些列操作时间和日期的方法。JS的时间标准构造当前时间对象获取时间对象信息设置时间对象信息日期信息转换为
2016-03-30 16:16:34
3907
原创 JavaScript中String对象常见方法及属性
JavaScript String对象简介在JavaScript，基本数据类型有Number型、String型、Boolean型、Undefined型、Null型、Function型等。String对象就是和基本数据类型中的String类型相对应的JavaScript脚本内置对象。（熟悉Java的话，可以类比Java基本数据类型和基本数据类型封装类的概念。）在JavaScript脚本程序中，Stri
2016-03-30 12:57:29
6914
原创 双线性插值法图像放缩示例
算法原理简介双线性插值是一阶插值，常用于图像的旋转、缩放处理。它利用原图中对应的四个点的像素值来确定目标图像中的像素值。为了便于理解，我们来看两张尺寸不一样的图片：原图变换图假设原图图片的宽度为yw，高度为xh变换图的宽度为jw，高度为ih于是对于变换图中任意一个像素点（j’, i’）我们可以用以下的方法映射到原图中去：y' = yw/jw * j'x' = xh/ih * i'通常情况下，y’
2016-03-27 17:07:20
7662
1
原创 给Web程序加上IP过滤器
Servlet过滤器简介Web应用中可以使用过滤器对所有的访问和请求进行处理，Servlet过滤器处于客户端和目标资源的中间层。当服务器收到一个客户端请求，首先判断该请求是否与过滤器对象相关联，若是，则将该请求交由过滤器进行处理。处理完毕后，交给其他业务。当所有业务处理完毕，需要将响应返回客户端时，容器同样会将响应交给过滤器进行处理，过滤器处理完毕后发回客户端。注意，过滤器可能不止一个，如字符编码过
2016-03-24 15:10:28
5761
4
原创 自适应阈值大津法(OTSU)介绍及代码实现
算法原理最大类间方差法是由日本学者大津于1979年提出的，是一种自适应的阈值确定法，又叫大津法,简称OTSU。我用最简单的方式解释一下算法原理：这个算法的思想就是假设阈值T将图像分成了前景和背景两个部分。求出这两个部分的类间方差：前景像素个数占比x(前景平均灰度 - 全图平均灰度)2 + 背景像素个数占比x(背景平均灰度 - 全图平均灰度)2将阈值从0~255遍历一次，使上述类间方差最大的阈值T即
2016-03-24 11:16:44
15144
3
原创 推荐初学者Java Web入门笔记及实例
在Java Web的学习过程中，参考了很多资料书以及例程，这里整理了JSP、Servlet、JavaBean的入门基础知识以及数据库基本操作实例和初学者进行分享。整个过程力求由浅入深，多动手实践，先有感性的认识再逐步学习完善相关理论。对于比较抽象的Servlet生命周期，JSP中编译指令和include动作指令等概念，我进行了实验探讨，十分有助于初学者的理解。自己在学习过程中数据库的配置搭建，Tom
2016-03-21 15:31:07
7289
4
原创 JDBC常用接口PrepareStatement
在新手推荐JSP+JavaBean+Servlet MVC模式用户注册模块中，有关数据库的操作，我们用到了： String sql ="select * from tb_user WHERE username=?"; PreparedStatement ps = connection.prepareStatement(sql); ps.setString(1, username); R
2016-03-21 15:06:13
7459
原创 新手推荐JSP+JavaBean+Servlet MVC模式用户注册模块
经过一段时间的学习，实现了第一个JSP程序、简单的Servlet程序以及JSP+Javabean的简单Web计算器。这里作为一个综合性的练习，利用经典的MVC设计理念，实现一个用户注册模块的设计。在这里，JavaBean由于具有良好的重用性和扩展性，作为数据的逻辑处理充当模型层(Model)；JSP和HTML专门负责与用户交互的视图，不包含任何的业务逻辑，充当(View)层；最后后端的请求控制等事务
2016-03-20 12:07:17
16046
4
原创 一个简单的Servlet程序
Servlet简介Servlet是什么？简单地说，它就是一个java程序，是一个运行在web服务器上的程序。它可以对Web浏览器或其他HTTP客服端程序发出的请求进行处理。但是使Servlet能够处理以上请求的前提条件是Servlet对象要被布置在Servlet容器当中，我们这里用的Servlet容器就是我们前面用到的Tomcat服务器。Servlet的使用和JSP不同，它需要web.xml文件的配
2016-03-17 19:40:06
16232
5
原创 JavaBean简介
什么是JavaBean实际上，JavaBean就是一个Java类，只不过是一些遵循特定接口格式的Java类。为了直观地说明问题，我们直接看一个例子：Add.javapublic clas Add { public static void main(String args[]) { int a = 10; int b = 20; int c; c = a + b;
2016-03-17 15:03:09
1465
1
原创 实验说明Servlet的生命周期
Servlet的生命周期Servlet是运行在服务器端的程序，它的运行状态由Servlet容器（简称容器）来维护。通常，在容器收到客户对Servlet的请求时，容器会判断这个Servlet是否为第一次被访问，如果是第一次被访问，则会创建一个Servlet实例同时调用该实例的init()方法，进行初始化。每个Servlet只会被创建一个实例，同时也只会被初始化一次。然后将这个实例一直保存在内存中，对所
2016-03-15 20:30:22
3057
原创 一个简单的JSP+JavaBean web计算器
什么是JavaBean实际上，JavaBean就是一个Java类，只不过是一些遵循特定接口格式的Java类。为了直观地说明问题，我们直接看一个例子：Add.javapublic clas Add { public static void main(String args[]) { int a = 10; int b = 20; int c; c = a + b;
2016-03-14 12:52:59
8139
3
原创 实验说明JSP中include指令和include动作指令的区别
关于include指令和include动作指令的介绍见JSP基本语法(三)首先，我们来看一下include指令所包含的内容与当前页面是一个整体是什么意思。我们在Tomcat安装目录下的webapps文件夹下新建一个文件夹includeTEST，在这里进行一些实验。在includeTEST文件夹下新建一个include.jsp：<%@ page language="java" import="java
2016-03-13 16:41:41
2662
1
原创 JSP基本语法
在实现了第一个JSP程序之后，对JSP编程会有一个直观感性的认识。这样会为进一步深入学习JSP提供很大的帮助。这里我们对JSP的运行机制、原理进行进一步的介绍。JSP运行原理JSP程序的执行是由Web浏览器端的页面请求来驱动的。当Web浏览器发送一个页面请求时，Web服务器会首先判断该请求是否为JSP页面请求，如果只是一般的HTML/XML请求，服务器会直接把HTML/XML**页面代码**传送给W
2016-03-13 10:30:03
9834
原创 第一个JSP程序
本文我们建立第一个JSP程序，对JSP开发有个感性的认识。首先进入Tomcat安装目录下的webapps文件夹，然后新建一个名为firstJSP的文件夹。进入该目录，用Notepad++创建一个html文件，写入以下代码，文件名保存为htmlInfo.html：<html> <head> <title>Input Information</title> </head> <body>
2016-03-12 01:18:55
6966
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人