2018年04月_前端小99

原创 jQuery - 获取并设置 CSS 类

jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性$(document).ready(function(){ $("button").cli...

2018-04-25 16:00:50 282

原创 jQuery - 删除元素

删除元素/内容如需删除元素和内容，一般可使用以下两个 jQuery 方法：remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素jQuery remove() 方法jQuery remove() 方法删除被选元素及其子元素。<script>$(document).ready(function(){ $("button").click(funct...

2018-04-25 15:07:01 923

原创 jQuery - 添加元素

添加新的 HTML 内容append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容jQuery append() 方法jQuery append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。$(document).ready(function(){ $("#btn...

2018-04-25 14:39:20 909

原创 jQuery - 获取内容和属性

jQuery DOM 操作jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。DOM = Document Object Model（文档对象模型）DOM 定义访问 HTML 和 XML 文档的标准："W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"获得内容...

2018-04-25 14:23:05 194

原创 HTML DOM树知识梳理

转载点击打开链接为什么会提到Dom树呢，或许它对于我们很好地理解网页各个元素，标签和控件搭配，以及各种js，css等的加载会有一些帮助。笔者在工程中遇到了一些小问题，本质就是dom树的东西掌握的不扎实。所以借此来梳理一下。1.HTML DOMok, 我们先来看一下W3school中怎么解释这个概念和结构的。W3school是一个很不错的网站，很适合初学者和基础不扎实的人。HTML DOM 定义...

2018-04-25 09:15:57 5148 1

原创 jQuery链Chaining

通过 jQuery，可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：$(document).ready(function() { $("button").click(functio...

2018-04-25 09:00:55 261

原创 jQuery Callback 方法

jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow")speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。实例以下实例在隐藏效果完全实现后回调函数:使用callback<script>$(docu

2018-04-24 15:59:36 770

原创 jQuery 停止动画

jQuery stop() 方法jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。语法:$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goT...

2018-04-24 15:48:14 1054

原创 jquery中的动画

jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的...

2018-04-24 15:26:32 253

原创 jQuery 效果 - 淡入淡出滑动的方法

jQuery Fading 方法通过 jQuery，您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法：fadeIn() 淡入fadeOut() 淡出fadeToggle() 淡入淡出fadeTo() 改变颜色的深浅淡入效果<!DOCTYPE html><html><head><meta charset="utf-8"&g...

2018-04-24 14:17:04 1435

原创 jqurey中的效果隐藏、显示、

jQuery hide() 和 show()通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/jq...

2018-04-24 11:38:11 541

原创 jquery中的事件

什么是事件？页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。选取单选按钮点击元素在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。常见 DOM 事件：鼠标事件键盘事件表单事件文档/窗口事件click 段落被点击keypress 键按下的过程submitload 图像全部加载时...

2018-04-24 11:11:09 496

转载 jQuery选择器探究：语法汇总

首先概略汇总一下jQuery常见选择器，大概分为这么几类：基本选择器、层次选择器、过滤选择器。基本选择器包含id/class/tag等，层次选择器包含祖孙、父子、兄弟、同级选择器四种，过滤选择器比较多样化，有根据当前元素在同级元素集合中的位置选择的，有根据相对父元素的子元素选择的，有根据属性选择的，也有根据内容选择的，还有表单元素等多种过滤选择器。一基本选择器ID选择器 #id类选择器 .cla...

2018-04-24 10:22:14 164

原创 jquery中的语法以及选择器

jQuery 语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action()美元符号定义 jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的 action() 执行对元素的操作实例:$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有 <p> 元素...

2018-04-24 10:11:17 1075

原创什么是jquery？以及它的调用方法

什么是 jQuery ？jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities提示：除此之外，Jquery还提供了大量的插件。网页中添加 jQuery可以通...

2018-04-24 09:23:41 947

转载 javascript中全局变量和局部变量的区别

[javascript] view plain copy<script type="text/javascript"> var a = "Hello"; function test(){ var a; alert(a); a = "World"; alert(a); } </script> [javas...

2018-04-23 15:31:35 4545

原创内联 SVG

什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引...

2018-04-23 11:51:14 248

原创 AJAX 异步请求处理

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。AJAX 是一种在无需重新加载整个网页的情况下...

2018-04-23 11:12:24 9561 1

原创 asp与php的区别

ASP网站与PHP网站的6大区别　　1、速度　　当我第一次运行PHP脚本程序时，我不禁对自己说：“太快了”，当时我是在仪态166MHZ的机器上运行我的程序的，但运行的速度仍然很快。 ASP是永远也不会象PHP这样快的，因为ASP是建立在COM体系结构之上的。　　当用VBScript写ASP脚本时，实际上实在使用COM的对象，当向用户浏览器发送信息时，它用的是Response对象的write方法，当...

2018-04-23 10:40:46 8140

原创 onkeydown、onkeyup、onclick、onchange、oninput、onpropertychange 的用法和区别

onkeydown、onkeyup、onclickonkeydown 是按键按下时触发；onkeyup 是按键弹起时触发；onclick 是按键按下并弹起时触发。有一种情况，就是按住按键不放，此时会不断地触发 onkeydown，但 onkeyup、onclick 只是在抬起按键的时候触发一次。要实时检测正在输字的文本框中输入了多少文字，怎么办？用 onkeyup 不可取！因为我们前面讲过，如果按...

2018-04-23 10:31:39 1039

原创 SUI Mobile

page集合容器 page集合容器，里面可以放多个平行的page。其他page 作为内联页面由路由控制展示<div class="page"> 这个page设置的是内容部分的颜色样式(必写)  <header class="bar bar-nav"> 设置的是标题内容在顶部 ...

2018-04-20 14:10:01 4675 1

原创 SUI Mobile的导包问题

SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。轻量的UI库SUI Mobile 非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件。对于只有HTML&CSS的组件，你只...

2018-04-19 14:55:59 1157 1

转载什么是CDN

转载链接：https://www.zhihu.com/question/37353035/answer/175217812来源：知乎CDN全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络基本思路：尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更

2018-04-19 14:02:32 6608 1

转载使用CSS3 Media Queries实现网页自适应

原文来源：http://webdesignerwall.com翻译：http://xinyo.org当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效

2018-04-19 10:30:05 598

原创 css图像拼合技术(以图标代替链接的导航栏)

图像拼合s - 悬停效果#navlist{position:relative;}#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}#navlist li, #navlist a{height:44px;displa

2018-04-19 09:42:16 711

原创 CSS 图像透明/不透明opacity

创建透明对象，设置悬停效果img{opacity:0.4;filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */}图片透明度

2018-04-19 09:18:52 991

原创 CSS 图片廊

.tooltip { position: relative; display: inline-block; }.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; t

2018-04-18 17:43:12 897

原创 CSS3 transition 四大属性

属性定义及使用说明transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

2018-04-18 16:37:17 3647

原创 CSS 提示工具(Tooltip)

基础提示框(Tooltip)实例解析HTML) 使用容器元素 (like ) 并添加 "tooltip" 类。在鼠标移动到上时显示提示信息。提示文本放在内联元素上(如 ) 并使用class="tooltiptext"。CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:abs

2018-04-18 15:31:00 1302

转载程序员如何应对「给我弄个网站吧」的请求？

编者按：昨天，我们在这篇《“你是程序员，帮我修个电脑吧” “不会，滚”》的文章中，发起了个投票。结果发现三个选项中，打败「修电脑」，位居榜首最令大家“抓狂”的选项，竟然是「我想要创业，你帮我建个网站吧，就像淘宝那样的，一定很好做吧」。一般，遇到此类情况，我们可以选择两种处理方式：第一种，直怼式。例如：“我给你100

2018-04-18 14:47:56 300

原创 CSS visibility 属性

属性定义及使用说明visibility属性指定一个元素是否是可见的。提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。默认值：visible继承：yes版本：CSS2JavaScript 语法：object.style.vi

2018-04-18 14:03:45 3177

原创 css下拉菜单

基本下拉菜单当鼠标移动到指定元素上时，会出现下拉菜单。.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9;

2018-04-18 12:01:35 230

原创 css导航栏垂直display：block 水平 display:inline

导航栏=链接列表作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：列表中删除边距和填充： list-style-type:none; margin:0; padding:0;垂直导航条实例ul { list-style-type: non...

2018-04-18 10:05:55 1730

原创 css中的伪类与伪元素

a:link { } /* 未访问链接*/a:visited { }/* 已访问链接 */a:hover { } /* 鼠标移动到链接上 */a:active { } /* 鼠标点击时 */注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后...

2018-04-17 16:01:39 412

原创 CSS 组合选择符

在 CSS3 中包含了四种组合方式:后代选取器(以空格分隔)子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分隔）后代选择器子元素选择器相邻兄弟选择器后续兄弟选择器...

2018-04-17 09:08:59 235

原创 CSS 布局 - 水平 & 垂直对齐

元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。外边距设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配：案列:<style>.center { margin: auto; width:50%; border: 3px solid #73AD21; padding: ...

2018-04-13 15:06:14 2519

原创 css浮动案例

彼此相邻的浮动元素清除浮动 - 使用 clear元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。事例案列：<style>* { box-sizing: border-box;}body { ma...

2018-04-13 11:45:15 2159

转载 NodeJS、NPM安装配置步骤(windows版本)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的使用包管理器 npm来管理所有模块的安装、配置、删除等操作，使用起来非常方便，但是想要配置好npm的使用环境还是稍微有点复杂，下面跟着我一起来学习在windows系统上配置NodeJS和NPM吧。工具/原料Wind...

2018-04-13 11:36:19 1875 5

转载 browsersync的使用方法

使用browsersync两年时间了，最近一段时间放弃了，不是browsersync的问题，是自己的问题，简单的说是，以前项目都是静态文件，直接用browsersync自带服务器跑起来就好，后来用nodejs express做项目，用到了arttemplate当模版渲染，发现每次修改html后，必须重启nodejs才能生效，导致browsersync失效了，后来就放弃了。今天花了点时间找了下原因，...

2018-04-13 11:34:39 8122

原创 CSS轮廓outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 border:1px solid red; outline-style:dotted; outline-color:#00ff00;<!DOCTYPE html><html><head><met...

2018-04-08 14:45:56 361

空空如也

空空如也