2017年08月_废柴前端

原创 CSS3之动画animation

一提起动画，给人的感觉就是高大上。在一个Web项目中，若想要交互效果Perfect的话，那必然动画的元素是少不了的，在CSS3没有出现之前，大部分的网页动画效果都是由JavaScript或者JQuery以及Flash完成的，这对于无法熟练使用JS的同学来说无疑是块难以跨越的坎，好了，废话不多说，直接进入正题。在CSS３中，要想实现一个动画，那么首先得先定义一个动画（暂时先不考虑浏览器兼容的问题

2017-08-27 12:32:50 529

原创基于JQuery的轮播图插件nivo-slider使用教程

现在市面上基于JQuery的轮播图插件种类繁多，各具特色，这对于具有选择困难症的童鞋来说就痛苦了，不知道选哪个，那么，今天小编就来帮你选择一款，号称最好的JQuery幻灯片插件，Nivo-Slider,这款插件无论是在交互效果，还是轮播效果，还是使用方法及功能都堪称完美。其效果可与Flash的幻灯片媲美，例如：这个flash的幻灯显示主要特性：号称世界最棒的jQuery幻灯插件1

2017-08-26 11:56:02 1924

原创前端图片在线转换Base64 图片编码Base64

首先讲一下什么是Base64编码：

2017-08-18 08:30:52 7714

原创 Json在线工具归纳

现在网络上关于Json的在线工具有很多，小编罗列了一些，相信总有一款适合你！1.JSON在线格式化工具：http://tools.jb51.net/code/jsonformat2.在线JSON代码检验、检验、美化、格式化工具【简单易用的格式化工具】： http://tools.jb51.net/code/json3.JSON在线格式化工具【代码高亮及可控缩进大小的格式化工具】: ht

2017-08-17 08:35:20 704 2

转载前端性能优化总结

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。前端性能优化分为如下几个方面：一、代码部署：1、代码的压缩与合并2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。3、使

2017-08-16 17:32:51 269

原创 jQuery $.ajax()方法参数详解

url:规定为String类型的字符串，是服务器的地址，获取数据或者推送数据的地方data：要求为Object或String类型的参数，发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，也就是键值对的形式type：规定数据提交的方式，为String类型的字符串，常

2017-08-16 11:14:20 292

原创 JQuery添加删除元素

JQuery提供了添加元素的四种方法：append() - 在被选元素内部的结尾插入指定内容prepend() - 在被选元素内部的开头插入指定内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容实例： $(function () { $('#addText').click(function () {

2017-08-15 09:56:19 279

原创 JQuery获取设置内容及属性

JQuery捕获内容和属性①获取文本内容——text()、html()、val()text()：设置或返回所选元素的文本内容html()：设置或返回所选元素的内容（包括html标记）val()：设置或返回表单字段的值实例： get Text div{ color: #aa3a4f; f

2017-08-15 09:02:26 366

原创 JQuery基础篇之淡入淡出

在JQuery中，想要让一个元素隐藏起来，有很多种方法，同样，让一个隐藏的元素显示，也有对应的方法，调整里面的参数，就可以实现淡入淡出①显示元素：前提条件是元素已被隐藏方法：$("元素").show()调用此方法可以显示被隐藏的元素，括号里面可以自定义显示的时间，可以是“slow”，“fast”，也可以是毫秒数。 Title d

2017-08-14 14:14:31 262

原创 JQuery基础

概念·简介JQuery实质上是一个JavaScript库，它极大的简化了JavaScript的编程，是一个JavaScript文件，后缀名为“.js”。JQuery官网上提供了有两种JQuery文件可供下载，一种是压缩版的，另一种是未被压缩的。两者的区别就是：前者未排版，无注释，文件容量小；后者是经过排版的，有注释，容量大。两者皆可使用，看个人喜好需求下载。jQuery库包含以

2017-08-14 09:18:09 341

原创 JavaScript操作BOM

BOM概念BOM是浏览器对象模型的简称（Browser Object Model），BOM尚无正式标准，由于现代浏览器几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。Window对象所有浏览器都支持Window对象，它表示浏览器窗口。所有的JavaScript全局对象，函数，以及变量均自动成为Window的对象成员，全局变量是Window对

2017-08-10 10:02:51 272

原创 JavaScript创建、添加、删除元素

（1）createElement("元素名")：此方法可以创建一个新的元素。例如：createElement("p") ，表示创建了一个p标签（元素/段落）。（2）createTextNode("文本内容")：此方法可以创建一个文本节点。例如：createTextNode("我是新的内容")，表示创建了一个值为“我是新的内容”的文本节点。（3）appendChild("元素名称")：添加一

2017-08-09 13:38:05 1429

原创 JavaScript 操作HTML DOM元素

DOM概念DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。可以通过浏览器的开发者工具进行观察DOM。可以看出，整个文档是由一系列节点对象所组成的一棵树，节点（Node）包括元素节点（1表示）、属性节点（2表示）和文本节点（3表示）。以下例子均以此表格为例说明：

2017-08-09 09:26:31 472

原创 JavaScript捕获和冒泡

先看一个单击事件案例： .nav{ width:200px; height:200px; background: skyblue; cursor: pointer; } p{ cursor: pointer; } window.onload=function

2017-08-08 16:11:16 258

原创 JavaScript事件

事件的概念事件包含以下方面：（1）事件源（2）事件名（3）事件注册（4）事件处理以火灾为例：粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。{ 事件源：粤商大酒店201房间事件名：火灾事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责事件处理：喷水}JavaScrip

2017-08-08 10:12:21 186 1

原创 HTML基础

HTML笔记（1）.计算机语言的概念计算机采用二进制来识别信息，由0和1组成，人通过二进制和计算机交流，也就是机器语言。由于机器语言难理解，所以将“0 1 ”符号化，形成易于理解的汇编语言。计算机语言和汇编语言都属于低级语言，但对于非专业人员还是难于理解，进而产生了高级语言[W用1] ，（2）.标记语言的概念文本文件：只有文本内容，没有任何格式。

2017-08-02 16:33:27 155

原创 HTML常用标签汇总、CSS常用属性汇总

HTML标签汇总标签名属性及其取值作用单词意思是否记住 href：超链接url地址 target：_blank（规定页面在新窗口打开） _self（规定页面在本窗口打开） _top（使文档载入包含此链接的窗口） _parent（使文档

2017-08-02 16:33:23 2758

原创 CSS 选择器

CSS选择器包括元素选择器、id选择器、class选择器、属性选择器 1.元素选择器用标签名作为选择器，选中所有相应的元素。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> css选择器

2017-08-02 16:33:20 259

原创 CSS 定位

在css中，如果你要确定一个元素的位置，那么就需要用到定位的属性了，属性名：position。在css中，定位的方式有：static、fixed、relative、absolute。（1）static 静态定位（在网页中所有元素默认都是静态定位），即无定位，元素正常出现了流中。（2）fixed 固定定位，选择该属性值后，元素会固定在网页的某个位置。 positio

2017-08-02 16:33:17 175

原创 WebStorm2017.1.3破解教程

一. WebStorm简介 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国js开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的javascript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。2017版本介绍如下：版本编号：WebStorm 2017Web

2017-08-02 16:33:14 2992

原创 CSS 基础知识

1.1 基本概念 CSS是指层叠样式表（Cascading Style Sheets）。为什么要使用CSS？ HTML描述了要呈现的内容，而CSS则定义了这些内容的呈现形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作。有利于快速变换不同的呈现形式。在网页中使用CSS样式可以有三种方法：（1）内联样式：将样式定义在标签内的style属性中，内容和表现

2017-08-02 16:33:11 319

原创 HTML DIV标签

1. 标签分类常见的html标签大体上分为两种：内联标签、块级标签。内联标签：不会新起一行显示。（常见的有：label、span、a、input、img、select、sup、sub等）块级标签：在新的一行显示。（常见的有：div、h1~h6、p、hr、table、ul、ol、dl、pre、tr、fieldset）详情请参见html块状元素、内联元素。 DIV标签没有特定的或唯

2017-08-02 16:33:08 300

原创 HTML 常用标签

1.1 无序列表标签标签名：列表项属性：type —— 属性指定无序列表的符号，取值有以下几种“disc（实心圆点，默认值）/circle（空心得圆圈）/square（实心正方形）” 代码示例：江西广州深圳浙江 1.2 有序列表标签标签名：列表项

2017-08-02 16:33:05 422

原创 JavaScript数组及其常用方法（push、pop、shift···）

1.数组定义I. 数组的定义有三种方式：（1）var a=[]（2）var a=new Array();（3）var a=['','','','','']访问元素：数组名+下标。（注：数组下标从0开始，如果一个数组的长度为5，那么他最后一个元素的下标是4，而不是5，即范围为【0，4】）例如：a[0]访问的是数组a的第一个元素。数组的本质：一组变量的集合，或者说是一组内存

2017-08-02 10:47:37 533

原创 JavaScript函数—function()

1.函数的概念官方概念：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。定义一个函数时，要使用关键词function；没有关键词function就不是函数，小括号前面是函数名称，代码块写在大括号内，函数名的命名规则和变量名的命名规则一样，“见名思意”，“驼峰命名法”。关键词和函数名称之间用空格隔开，当没有函数名称时，这种函数称之为匿名函数，例如：var Btn=doc

2017-08-01 10:25:23 591

原创 JavaScript打印任意奇数行菱形

网上大部分打印菱形基本上是先打印出上半部分，再打印出下半部分，比较复杂，以下给出简单的方法：直接上代码： var row=Number(prompt('请输入打印行数（需为奇数）：')); var s=Math.floor(row/2)+1 for(var i=1;i<=row;i++){ for(var k=1;k<=Math.abs(s-i);k++)

2017-08-01 10:12:22 4462

僵小蛋的博客