- jQuery 事件 01-05
- jQuery 语法 01-05
- JQuery笔记（下） 01-05
- jQuery 效果-淡入淡出 01-05
- jQuery 选择器 01-05
- jQuery特效之使用Swiper.js构建图片视差 01-05
- 网站技术干货之bootstrap框架中利用模态框实现 01-05
- 《小白HTML5成长之路54》JS中如何设定静态变量 01-05
- 老男人自学HTML5 H5绘图线段和三角形 01-05
- WebSocket协议深入探究 01-05
jQuery 事件
发布者: superzhang | 发布时间:2018-01-05jQuery 是为事件处理特别设计的。
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
常见 DOM 事件：
鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleaveblurunloadjQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){// 动作触发后执行的代码!!});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready()
jQuery 语法
发布者: superzhang | 发布时间:2018-01-05通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
8.2、滑动
slideDown(speed,[callback])：向下滑动（显示）slideUp(speed,[callback])：向上滑动（隐藏）slideToggle(speed,[callback])：滑动切换jQuery 效果-淡入淡出
发布者: superzhang | 发布时间:2018-01-05通过 jQuery，您可以实现元素的淡入淡出效果。
点击展示 淡入/淡出 面板
实例
jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法。
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn()
jQuery 选择器
发布者: superzhang | 发布时间:2018-01-05jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
实例
用户点击按钮后，所有 <p> 元素都隐藏：
实例
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});
#id 选择器
jQuery #id
jQuery特效之使用Swiper.js构建图片视差轮播切换代码
发布者: superzhang | 发布时间:2018-01-05上效果先：底层是一个轮播图，上层又是一个轮播图。
爱慕iM
Swiper.js介绍及基本使用配置：Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。
使用及配置方法：
1、下载swiper最新版本https://github.com/nolimits4web/Swiper
2、在HTML Head中添加Swiper’s CSS and JS：
说明：案例中设置按钮的数据切换方式（data-toggle）是modal，数据目标（data-target）指向模态框的id（mod1）。
网页文件modal.html的代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
《小白HTML5成长之路54》JS中如何设定静态变量
发布者: superzhang | 发布时间:2018-01-05“小白，你知道什么是常量什么是变量么？”
“知道啊！常量是无法被更改的，比如数学上常用的Pi的值是3.1415926、数学常数的值、黄金分割的值等等，当然还包括一些明确知道的值，比如正常人的胳膊数量是2，单手手指数量是5等等。变量是可以被随意更改的，比如人的身高、公司每月收入支出等等。”，小白利索的回答道。
“你在javascript中怎么定义变量呢？”
小白说：“你不是告我用var进行定义么？”
老朱：“恩，通过var定义的变量或者直接赋值的变量，我们在使用的时候要更改他们的值是非常方便的，只需要重新赋值就可以了。可是经常在开发的过程中会碰到一些常量，我们并不希望用户
老男人自学HTML5 H5绘图线段和三角形
发布者: superzhang | 发布时间:2018-01-05一、canvas[ˈkænvəs]（油布、画布）元素：
1、H5新增专门用于绘图元素，用户可以在web中绘制各种图形，可以达到CAD效果；
2、canvas就是一个可以供绘图的容器，可以看成透明玻璃，类似PS的透明图层；
3、javasScript才是“画笔”。汗！！！还没学过JavaScript呀。。。。。。
二、代码：
<canvas id="mycanvas" width=" " height=" "></canvas> 默认画布大小300*150 标记id
<script> 启用JavaScript
var c = document.getElementById("mycanvas"); 使用ID寻找页面中的canvas
var context=c.getContext("2d") 创建2D绘制环境 [ˈkɑ:ntekst] 背景 环境
。。。。。。。。
</script>
绘制工具：getContext:
1、fillRect():绘制一个填充矩形，fillRect(x,y,weight height)
2、strokeRect(): 绘制一个矩形轮廓 [stroʊ
WebSocket协议深入探究
发布者: superzhang | 发布时间:2018-01-05一、内容概览
WebSocket的出现，使得浏览器具备了实时双向通信的能力。本文由浅入深，介绍了WebSocket如何建立连接、交换数据的细节，以及数据帧的格式。此外，还简要介绍了针对WebSocket的安全攻击，以及协议是如何抵御类似攻击的。
二、什么是WebSocketHTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。
对大部分web开发者来说，上面这段描述有点枯燥，其实只要记住几点：
WebSocket可以在浏览器里使用
支持双向通信
使用很简单
1、有哪些优点
说到优点，这里的对比参照物是HTTP协议，概括地说就是：支持双向通信，更灵活，更高效，可扩展性更好。
支持双向通信，实时性更强。
更好的二进制支持。
较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等
