Html5个人笔记总结

第一部分，HTML5基础

1,什么是HTML5?
(Hyper Text Markup Language) 超文本标记语言,用于描述网页的一种语言。

2,HTML5相关知识？
HTML
XHTML
Css
Css3
JavaScript
JQuery
HTML5

3,HTML5新特性？
1,绘画：canvas标签
2,媒介：video和audio元素
3,存储：本地离线存储
4,新元素：article,footer,header,nav,section
5,新控件：calendar,date,time,email,url,search
6,浏览器：Safari,Chrome,Firefox,Opera,IE9

HTML基础讲解
4,声明：

5,HTML基础标签：head,body

6,HTML标题

...

等标签进行定义

7,HTML段落

标签定义段落

8,HTML连接
标签定义连接

9,HTML图像
标签定义图像

10,HTML元素
是从开始标签到结束标签的所有代码。即元素的内容
空元素在开始标签进行闭合。如：

大多数的元素有属性，都可以嵌套的。如：
hello

11,HTML属性
标签可以拥有属性为元素提供更多是信息。
属性是以键值对的形式。如：href=" www.baidu.com"
常用标签属性：

align:对齐方式； bgcolor:背景颜色； target:规定在何处打开链接；
通用属性：class:规定元素的类名；id：规定元素的唯一ID; style:规定元素的样式; title:规定元素的额外信息;

12,HTML格式化
粗体文本
大号字
着重文字
斜体字
小号字
加重语气
_{下标字

^{上标字

插入字

删除字

13,HTML样式

标签：

内联样式表

14,HTML链接

数据：文本链接;图片链接;

属性：href属性指向另一个文档的链接; name属性创建文档内的链接;

img标签属性；alt 替换文本属性; width 宽 ; height 高;

15,HTML表格

表格

行

页眉

主体

页脚

列属性

16,THML列表

标签：有序; 无序; 列表项; 列表; 列表项;
描述;

无序列表：标签属性 disc , circle, square;

有序列表：标签属性 A, a, I, i, start;

嵌套列表：标签

自定义列表：标签

17,HTML块

块的元素：块元素显示时，通常以新行开始; 如：

内联元素：内联元素通常不会以新行开始; 如：

元素：元素也被称为块元素，其主要的组合HTML元素的容器。

元素：元素是内联元素，可作为文本的容器。

18,HTML布局

①div布局

②table元素布局

19，表单用于获取不同类型的用户输入

20，常用表单标签

表单

输入域

文本域
</div>
<div style="background-color:inherit">
<label> 控制标签
</div>
<div style="background-color:inherit">
<fieldset> 定义域
</div>
<div style="background-color:inherit">
<legend> 域的标题
</div>
<div style="background-color:inherit">
<select> 选择列表
</div>
<div style="background-color:inherit">
<optgroup> 选项组
</div>
<div style="background-color:inherit">
<option> 下拉列表选项
</div>
<div style="background-color:inherit">
<button> 按钮
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit">
21，PHP环境搭建
</div>
<div style="background-color:inherit">
网站： www.apachefriends.org 下载安装XAMPP
</div>
<div style="background-color:inherit">
其中，运行 xx.hph的目录：/xampp/htdocs
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit">
打开eclipse--help-->install new software
</div>
<div style="background-color:inherit">
输入： http://download.eclipse.org/releases
</div>
<div style="background-color:inherit">
找到：Programming Languages-->PHP Development Tools (PDT)
</div>
<div style="background-color:inherit">
安装后重起，open perspective-->PHP
</div>
<div style="background-color:inherit">
新建工程-->（将工作空间变化到 /xampp/htdocs）
</div>
<div style="background-color:inherit">
或在拷贝xx.php 到/xampp/htdocs中
</div>
<div style="background-color:inherit">
运行：在浏览器中输入：localhost/xx.php
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit">
22，表单提交数据和PHP交互
</div>
<div style="background-color:inherit">
在PHP服务端：//$_GET:指的是用get方式提交; $_POST:post方式
</div>
<div style="background-color:inherit">
echo "用户名".$_POST['name']."<br>密码".$_POST['password'];
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit">
在IDEA端：
</div> <form action=" http://localhost/MyService/Service.php" method="post">
<div style="background-color:inherit">
<br style="background-color:inherit">
</div> 用户名：<input type="text" name="name"><br>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div> 密码：<input type="password" name="password">
<div style="background-color:inherit">
<br style="background-color:inherit">
</div> <br>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div> <input type="submit" value="提交">
<div style="background-color:inherit">
<br style="background-color:inherit">
</div> </form>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit">
23，HTML框架
</div>
<div style="background-color:inherit">
框架标签（frame）
</div>
<div style="background-color:inherit">
框架集标签（<frameset>）
</div>
<div style="background-color:inherit">
常用标签：noresize:固定框架大小；cols:列；rows:行；
</div>
<div style="background-color:inherit">
内联框架：iframe
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit">
24，HTML5背景
</div>
<div style="background-color:inherit">
背景标签：background--图片背景
</div>
<div style="background-color:inherit">
背景颜色：Bgcolor--颜色背景
</div>
<div style="background-color:inherit">
颜色：是由一个十六进制符号来定义的。这些符号由红色，绿色和蓝色的值组成（RGB）
</div>
<div style="background-color:inherit">
颜色值最小值：0（#00）
</div>
<div style="background-color:inherit">
颜色值最大值：255（#FF）
</div>
<div style="background-color:inherit">
红色：#FF0000
</div>
<div style="background-color:inherit">
绿色：#00FF00
</div>
<div style="background-color:inherit">
蓝色：#0000FF
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit">
25，HTML实体
</div>
<div style="background-color:inherit">
HTML中预留字符串必须被替换成字符实体。
</div>
<div style="background-color:inherit">
如：< , > , % 例：<html> 写成： <html>
</div>
<div style="background-color:inherit">
<table border="1" width="382" style="font-size:12px; border-collapse:collapse; margin-top:10px; margin-bottom:10px; color:rgb(0,0,0); font-family:arial,宋体,sans-serif">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)">
<div style="color:rgb(51,51,51); background-color:inherit">
显示结果
</div> </th>
<th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)">
<div style="color:rgb(51,51,51); background-color:inherit">
描述
</div> </th>
<th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)">
<div style="color:rgb(51,51,51); background-color:inherit">
实体名称
</div> </th>
<th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)">
<div style="color:rgb(51,51,51); background-color:inherit">
实体编号
</div> </th>
</tr>
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
<br style="background-color:inherit">
</div> </td>
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
空格
</div> </td>
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">

</div> </td>
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
<br style="background-color:inherit">
</div> </td>
</tr>
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
<
</div> </td>
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
小于号
</div> </td>
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
<
</div> </td>
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit">
<div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
<< p="">
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" id="btn">提交</a>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
5，sortable（排序）
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
$("#sortable").sortable();//可拖动排序
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit"> <span style="background-color:inherit">二，Widgets（小部件）</span>
</div>
<div style="background-color:inherit">
1，Accordion（折叠；手风琴效果）
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:27px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
$("#accordion").accordion();//可折叠，手风琴效果
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
2，Autocomplete（自动填充）
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
/承载提示内容/
</div>
<div style="min-width:2px; background-color:inherit">
var autoTags=["iwen","ime","html","css","javascript","java","android", "ios"];
</div>
<div style="min-width:2px; background-color:inherit">
$("#tags").autocomplete({
</div>
<div style="min-width:2px; background-color:inherit">
source:autoTags//指定其资源
</div>
<div style="min-width:2px; background-color:inherit">
});
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
3，Datepicker（时间选择器）
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
$("#datepicker").datepicker();//事件选择器
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
4，Dialog( 对话框)
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
$("#btn_dialog").button().on("click",function(){
</div>
<div style="min-width:2px; background-color:inherit">
$("#div2").dialog();//弹出对话框
</div>
<div style="min-width:2px; background-color:inherit">
});
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
5，ProgressBar( 进度条)
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
pb =$("#pb");
</div>
<div style="min-width:2px; background-color:inherit">
// pb.progressbar({value:50});
</div>
<div style="min-width:2px; background-color:inherit">
pb.progressbar({max:100});
</div>
<div style="min-width:2px; background-color:inherit">
setInterval(changePb,100);//设置定时器
</div>
<div style="min-width:2px; background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="min-width:2px; background-color:inherit">
/设置改变pb进度条/
</div>
<div style="min-width:2px; background-color:inherit">
function changePb(){
</div>
<div style="min-width:2px; background-color:inherit">
current++;
</div>
<div style="min-width:2px; background-color:inherit">
if(current>=100){
</div>
<div style="min-width:2px; background-color:inherit">
current=0;
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
pb.progressbar("option","value",current);//设置增加的数值：
</div>
<div style="min-width:2px; background-color:inherit">
}
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
6，Menu（菜单）
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
$("#menu").menu({position:{at:"left bottom"}});//设置显示位置：左下方
</div>
<div style="min-width:2px; background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="min-width:2px; background-color:inherit">
.ui-menu:after{
</div>
<div style="min-width:2px; background-color:inherit">
content: ".";
</div>
<div style="min-width:2px; background-color:inherit">
display: block;
</div>
<div style="min-width:2px; background-color:inherit">
/在左右两侧均不允许浮动元素。/
</div>
<div style="min-width:2px; background-color:inherit">
clear: both;
</div>
<div style="min-width:2px; background-color:inherit">
visibility: hidden;
</div>
<div style="min-width:2px; background-color:inherit">
line-height: 0;
</div>
<div style="min-width:2px; background-color:inherit">
height: 0;
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
.ui-menu .ui-menu-item{ //条目的属性
</div>
<div style="min-width:2px; background-color:inherit">
display: inline-block;
</div>
<div style="min-width:2px; background-color:inherit">
float: left;
</div>
<div style="min-width:2px; background-color:inherit">
margin: 0;
</div>
<div style="min-width:2px; background-color:inherit">
padding: 10;
</div>
<div style="min-width:2px; background-color:inherit">
width: auto;
</div>
<div style="min-width:2px; background-color:inherit">
}
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
7，Slider（滑动按钮）
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
var slider=$("#slider");
</div>
<div style="min-width:2px; background-color:inherit">
// slider.slider();
</div>
<div style="min-width:2px; background-color:inherit">
var valueSpan= $("#span");
</div>
<div style="min-width:2px; background-color:inherit">
slider.slider({
</div>
<div style="min-width:2px; background-color:inherit">
// change:function(e,ui){//传递两个参数，拖动后显示拖动值。
</div>
<div style="min-width:2px; background-color:inherit">
// valueSpan.text(slider.slider("option","value"));
</div>
<div style="min-width:2px; background-color:inherit">
// }
</div>
<div style="min-width:2px; background-color:inherit">
slide:function(e,ui){//拖动过程中，不断变化着。
</div>
<div style="min-width:2px; background-color:inherit">
valueSpan.text(slider.slider("option","value"));
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
});
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
8，spinner( 下拉列表)
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
/下拉列表/
</div>
<div style="min-width:2px; background-color:inherit">
var sp=$("#input");
</div>
<div style="min-width:2px; background-color:inherit">
sp.spinner();
</div>
<div style="min-width:2px; background-color:inherit">
sp.spinner("value","10");
</div>
<div style="min-width:2px; background-color:inherit">
$("#btn3").click(function(){
</div>
<div style="min-width:2px; background-color:inherit">
alert(sp.spinner("value"))//获取spinner的值
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
/Tags标签/
</div>
<div style="min-width:2px; background-color:inherit">
$(function(){
</div>
<div style="min-width:2px; background-color:inherit">
$("#tag").tabs();
</div>
<div style="min-width:2px; background-color:inherit">
});
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit"> <span style="background-color:inherit">三，Effects（效果）</span>
</div>
<div style="background-color:inherit">
1，AddClass,Bind
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
/Addclass:改变的class，执行时间，动画效果，完成监听
</div>
<div style="min-width:2px; background-color:inherit">
/
</div>
<div style="min-width:2px; background-color:inherit">
$(".div5").on("click",function(){
</div>
<div style="min-width:2px; background-color:inherit">
$(this).addClass("changeddiv",1000,"easeInCirc",function(){
</div>
<div style="min-width:2px; background-color:inherit">
alert("动画完成");
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
$(document).click(function(){//点击执行百叶窗的效果：方向
</div>
<div style="min-width:2px; background-color:inherit">
$("#toggle").toggle("blind",{direction:"down"});
</div>
<div style="min-width:2px; background-color:inherit">
});
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
2，Color Animation, hide, removeClass
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
/Animtion 修改背景/
</div>
<div style="min-width:2px; background-color:inherit">
$("#btn_toggle").click(function(){
</div>
<div style="min-width:2px; background-color:inherit">
$("#elem").animate({color:"green",
</div>
<div style="min-width:2px; background-color:inherit">
backgroundColor:"rgb(99,99,99)",
</div>
<div style="min-width:2px; background-color:inherit">
borderColor:"rgb(199,199,199)"});
</div>
<div style="min-width:2px; background-color:inherit">
/向左逐渐隐藏，执行三秒/
</div>
<div style="min-width:2px; background-color:inherit">
$("#toggle").hide("drop",{dirction:"left"},3000);
</div>
<div style="min-width:2px; background-color:inherit">
/RemoveClass:移除class/
</div>
<div style="min-width:2px; background-color:inherit">
$(".div5").removeClass("changeddiv",1000,"easeInCirc",function(){
</div>
<div style="min-width:2px; background-color:inherit">
alert("动画完成");
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
});
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
3，show,toggleClass
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
/逐渐显示/
</div>
<div style="min-width:2px; background-color:inherit">
$("#toggle").show("drop",2000);
</div>
<div style="min-width:2px; background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="min-width:2px; background-color:inherit">
$(this).toggleClass("changeddiv",2000,"easeOutSine");//将添加和移出class集中一体
</div> </td>
</tr>
</tbody>
</table>
</div>
<br style="background-color:inherit">
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <strong><span style="font-size:24px"><br style="background-color:inherit"> </span></strong>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">第八部分，jQuery Mobile基础</span></strong></span></span>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><br> </span>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit">一，了解JQuery Mobile</span>
<div style="background-color:inherit">
1，JQuery Mobile：是jQuery在手机上和平板设备上的版本，jQuery Mobile给主流移动平台带来jQuery核心库，与jQuery核心库一样，你不需要安装任何东西，只需将. js和. css文件直接包含到你的web页面中即可，这样，jQuery Mobile 的功能就好像被放到你的指尖，供你随时使用
</div>
<div style="background-color:inherit">
2，jQuery Mobile事件：是针对移动端浏览器的事件。
</div>
<div style="background-color:inherit">
触摸事件：当用户触摸屏幕是触发
</div>
<div style="background-color:inherit">
滑动事件：当用户上下滑动时触发
</div>
<div style="background-color:inherit">
定位事件：当设备水平或者垂直翻转时触发
</div>
<div style="background-color:inherit">
页面事件：当页面显示，隐藏，创建，加载或未加载时触发
</div>
<div style="background-color:inherit">
3，下载： http://jquerymobile.com/
</div>
<div style="background-color:inherit">
4，使用jQueryMobile
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</div>
<div style="min-width:2px; background-color:inherit">
<title>JQuery Mobile</title>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<script src="js/jquery-2.1.3.min.js"></script>
</div>
<div style="min-width:2px; background-color:inherit">
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</div>
<div style="min-width:2px; background-color:inherit">
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
</div>
<div style="min-width:2px; background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="page">
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="header" data-position="fixed">
</div>
<div style="min-width:2px; background-color:inherit">
<h1>这是头部</h1>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div role="main">
</div>
<div style="min-width:2px; background-color:inherit">
<p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="footer" data-position="fixed">
</div>
<div style="min-width:2px; background-color:inherit">
<h1>这是脚部</h1>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit"> <span style="background-color:inherit">二，Mobile Widgets</span>
</div>
<div style="background-color:inherit">
1，page
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
<a href="#pagetwo" data-transition="slide">跳转到第二个页面</a>
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#pagetwo" data-rel="dialog">打开一个dialog</a>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
2，button
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
<button>按钮</button>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-shadow">按钮</a>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" >按钮</a>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-btn-inline" >按钮1</a>
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-btn-inline" >按钮2</a>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="controlgroup" data-type="horizontal">
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮1</a>
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮2</a>
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮3</a>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-btn-a ">主题1</a>
</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" class="ui-btn ui-btn-b ">主题2</a>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
3，checkbox，radio，collapsible
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<label>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="checkbox">苹果
</div>
<div style="min-width:2px; background-color:inherit">
</label>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<fieldset data-role="controlgroup" data-type="horizontal">
</div>
<div style="min-width:2px; background-color:inherit">
<label>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="checkbox">苹果
</div>
<div style="min-width:2px; background-color:inherit">
</label>
</div>
<div style="min-width:2px; background-color:inherit">
<label>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="checkbox">苹果
</div>
<div style="min-width:2px; background-color:inherit">
</label>
</div>
<div style="min-width:2px; background-color:inherit">
<label>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="checkbox">苹果
</div>
<div style="min-width:2px; background-color:inherit">
</label>
</div>
<div style="min-width:2px; background-color:inherit">
</fieldset>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<label>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="radio" name="rl" id="man">男
</div>
<div style="min-width:2px; background-color:inherit">
</label>
</div>
<div style="min-width:2px; background-color:inherit">
<fieldset data-role="controlgroup" >
</div>
<div style="min-width:2px; background-color:inherit">
<label>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="radio" name="rl" id="man">男
</div>
<div style="min-width:2px; background-color:inherit">
</label>
</div>
<div style="min-width:2px; background-color:inherit">
<label>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="radio" name="rl" id="woman">女
</div>
<div style="min-width:2px; background-color:inherit">
</label>
</div>
<div style="min-width:2px; background-color:inherit">
</fieldset>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="collapsible" data-collapsed="false">
</div>
<div style="min-width:2px; background-color:inherit">
<h4>Heading</h4>
</div>
<div style="min-width:2px; background-color:inherit">
<p>这是展开的内容</p>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="collapsible" data-content-theme="false">
</div>
<div style="min-width:2px; background-color:inherit">
<h4>Heading</h4>
</div>
<div style="min-width:2px; background-color:inherit">
<p>这是展开的内容</p>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="collapsible" data-content-theme="false">
</div>
<div style="min-width:2px; background-color:inherit">
<h1>系列</h1>
</div>
<div style="min-width:2px; background-color:inherit">
<ul data-role="listview">
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">item1</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">item2</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">item3</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
</ul>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
4，gird，listview
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:1469px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-grid-b">
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-block-a">
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-bar ui-bar-a">Hello A</div>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-block-b">
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-bar ui-bar-a">Hello B</div>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-block-c">
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-bar ui-bar-a">Hello C</div>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-grid-b">
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-block-a">
</div>
<div style="min-width:2px; background-color:inherit">
Hello A
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="a" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="b" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="a" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-block-b">
</div>
<div style="min-width:2px; background-color:inherit">
Hello B
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="a" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="a" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-block-c">
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-bar ui-bar-a">Hello C</div>
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="a" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="a" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" data-theme="a" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-grid-solo">
</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-block-a">
</div>
<div style="min-width:2px; background-color:inherit">
<input type="button" value="按钮">
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<ul data-role="listview" data-filter="true" data-inset="true">
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">A</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">B</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">C</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
</ul>
</div>
<div style="min-width:2px; background-color:inherit">
<form class="ui-filterable">
</div>
<div style="min-width:2px; background-color:inherit">
<input id="autoinput" data-type="search">
</div>
<div style="min-width:2px; background-color:inherit">
</form>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true">
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">A</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">B</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">C</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">B</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">D</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">A</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">E</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
</ul>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">A</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">A</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">addd</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">B</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">Big ddd </a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">bbb </a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">C</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">Code</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">D</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">E</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
</ul>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
5，navbar, popup
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="navbar">
</div>
<div style="min-width:2px; background-color:inherit">
<ul>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#" class="ui-btn-active">A</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">B</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
<li><a href="#">C</a></li>
</div>
<div style="min-width:2px; background-color:inherit">
</ul>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<a href="#pp" data-rel="popup" class="ui-btn">弹出窗口</a>
</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="popup" id="pp">
</div>
<div style="min-width:2px; background-color:inherit">
<p>这是一个弹出窗口</p>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<a href="#pop" data-rel="popup" data-position-to="window" data-transition ="fade">
</div>
<div style="min-width:2px; background-color:inherit">
<img src="images/logo11.png" class="pupphoto" style="width: 20%">
</div>
<div style="min-width:2px; background-color:inherit">
</a>
</div>
<div style="min-width:2px; background-color:inherit">
<div data-role="popup" id="pop">
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<a href="#" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
</div>
<div style="min-width:2px; background-color:inherit">
<img src="images/logo11.png" class="popphoto" style="height: 500px">
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
6,select，theme
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
data-theme="b"//a或b主题
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<div class="ui-field-contain">
</div>
<div style="min-width:2px; background-color:inherit">
<select name="select-native-1" id="select-native-1" data-iconpos="left">
</div>
<div style="min-width:2px; background-color:inherit">
<option value="1">这是第1个</option>
</div>
<div style="min-width:2px; background-color:inherit">

</div>
<div style="min-width:2px; background-color:inherit">
<option value="2" disabled="disabled">这是第2个</option>
</div>
<div style="min-width:2px; background-color:inherit">
<option value="3">这是第3个</option>
</div>
<div style="min-width:2px; background-color:inherit">
<option value="4">这是第4个</option>
</div>
<div style="min-width:2px; background-color:inherit">
</select>
</div>
<div style="min-width:2px; background-color:inherit">
</div>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit"> <strong>三，Mobile 事件</strong>
</div>
<div style="background-color:inherit">
1，pageinit: 页面加载完成之后触发
</div>
<div style="background-color:inherit">
2，tap: 触摸事件
</div>
<div style="background-color:inherit">
3，taphold : 长按事件
</div>
<div style="background-color:inherit">
4，swipe：滑动是处理
</div>
<div style="background-color:inherit">
5，swileft：向左滑动
</div>
<div style="background-color:inherit">
6，scrollstart：开始滚动时
</div>
<div style="background-color:inherit">
7，scrollstop：停止滚动时
</div>
<div style="background-color:inherit">
8，orientationchange:设备方向改变是触发
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
<script>
</div>
<div style="min-width:2px; background-color:inherit">
$(document).on("pageinit",function(){
</div>
<div style="min-width:2px; background-color:inherit">
// alert("hello");
</div>
<div style="min-width:2px; background-color:inherit">
$(".p").on("tap",function(){//点击隐藏
</div>
<div style="min-width:2px; background-color:inherit">
$(this).hide();
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
$(".btn").on("taphold",function(){//长按隐藏
</div>
<div style="min-width:2px; background-color:inherit">
$(this).hide();
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
$(".p1").on("swipe",function(){//滑动隐藏
</div>
<div style="min-width:2px; background-color:inherit">
$(this).hide();
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
$(".btn1").on("swiperight",function(){//右滑动隐藏
</div>
<div style="min-width:2px; background-color:inherit">
$(this).hide();
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
$(document).on("scrollstop",function(){//长按隐藏
</div>
<div style="min-width:2px; background-color:inherit">
alert("停止滑动了");
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
});
</div> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <strong><span style="font-size:24px"><br style="background-color:inherit"> </span></strong>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">九部分 CreateJS基础</span></strong></span></span>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><br> </span>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
<div style="background-color:inherit"> <span style="background-color:inherit">一，Create JS介绍</span>
</div>
<div style="background-color:inherit">
1，EaseJS
</div>
<div style="background-color:inherit">
①Create JS:
</div>
<div style="background-color:inherit">
是一款HTML5游戏开发的引擎。是一套可以构建丰富交互体验的HTML5游戏的开源工具包，旨在降低HTML5项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。
</div>
<div style="background-color:inherit">
②四款工具：
</div>
<div style="background-color:inherit">
EaselJS: 用来处理HTML5的canvas。
</div>
<div style="background-color:inherit">
TweenJS: 用来处理HTML5的动画调整和Javascript属性。
</div>
<div style="background-color:inherit">
SoundJS: 用来帮助简化处理音频相关API
</div>
<div style="background-color:inherit">
2，下载： http://createjs.com/
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit"> <span style="background-color:inherit">二，Create JS基础</span>
</div>
<div style="background-color:inherit">
1，容器
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
/创建舞台，文本，图形/
</div>
<div style="min-width:2px; background-color:inherit">
var stage=new createjs.Stage("gameView");
</div>
<div style="min-width:2px; background-color:inherit">
var gameView=new createjs.Container();//创建容器
</div>
<div style="min-width:2px; background-color:inherit">
stage.addChild(gameView);
</div>
<div style="min-width:2px; background-color:inherit">
var text=new createjs.Text("Hello easeljs","26px Arial","#777");
</div>
<div style="min-width:2px; background-color:inherit">
//stage.alpha=0.5;//半透明
</div>
<div style="min-width:2px; background-color:inherit">
//stage.x=100;//移动舞台里的内容
</div>
<div style="min-width:2px; background-color:inherit">
//stage.y=100;
</div>
<div style="min-width:2px; background-color:inherit">
//stage.scaleX=2;//缩放舞台里内容
</div>
<div style="min-width:2px; background-color:inherit">
//stage.scaleY=0.5;
</div>
<div style="min-width:2px; background-color:inherit">
var Rect=new createjs.Shape();//创建图形
</div>
<div style="min-width:2px; background-color:inherit">
Rect.graphics.beginFill("#FF0000");//设置颜色
</div>
<div style="min-width:2px; background-color:inherit">
Rect.graphics.drawRect(50,50,50,50);//参数1：x,参数2：y,参数3：宽度，参数4：高度。
</div>
<div style="min-width:2px; background-color:inherit">
gameView.addChild(text);//添加到容器中
</div>
<div style="min-width:2px; background-color:inherit">
gameView.addChild(Rect);
</div>
<div style="min-width:2px; background-color:inherit">
/引入js,添加container/
</div>
<div style="min-width:2px; background-color:inherit">
var c =new ChildContainer();
</div>
<div style="min-width:2px; background-color:inherit">
c.x=200;//移动
</div>
<div style="min-width:2px; background-color:inherit">
c.y=200;
</div>
<div style="min-width:2px; background-color:inherit">
gameView.addChild(c);
</div>
<div style="min-width:2px; background-color:inherit">
stage.update();//刷新
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
2，绘图
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit"> <span style="background-color:inherit">/对圆的封装/</span>
</div>
<div style="min-width:2px; background-color:inherit">
function Cricle(){
</div>
<div style="min-width:2px; background-color:inherit">
createjs.Shape.call(this);//。调用不加（）
</div>
<div style="min-width:2px; background-color:inherit">
this.setCircleType=function(type){
</div>
<div style="min-width:2px; background-color:inherit">
this._cricleType=type;
</div>
<div style="min-width:2px; background-color:inherit">
switch (type){
</div>
<div style="min-width:2px; background-color:inherit">
case Cricle.TYPE_RED:
</div>
<div style="min-width:2px; background-color:inherit">
this.setColor("#ff0000");
</div>
<div style="min-width:2px; background-color:inherit">
break;
</div>
<div style="min-width:2px; background-color:inherit">
case Cricle.TYPE_GREEN:
</div>
<div style="min-width:2px; background-color:inherit">
this.setColor("#00ff00");
</div>
<div style="min-width:2px; background-color:inherit">
break;
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
};
</div>
<div style="min-width:2px; background-color:inherit">
this.setColor=function (color){
</div>
<div style="min-width:2px; background-color:inherit">
this.graphics.beginFill(color);
</div>
<div style="min-width:2px; background-color:inherit">
this.graphics.drawCircle(0,0,50);
</div>
<div style="min-width:2px; background-color:inherit">
this.graphics.endFill();
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
this.setCircleType(Cricle.TYPE_RED);//设置默认颜色
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
Cricle.prototype=new createjs.Shape();//设置图形的入口
</div>
<div style="min-width:2px; background-color:inherit">
Cricle.TYPE_RED=1;//设置常量
</div>
<div style="min-width:2px; background-color:inherit">
Cricl
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
3，事件
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
Rect.addEventListener("click",function(e){//点击获取位置
</div>
<div style="min-width:2px; background-color:inherit">
alert("X=:"+ e.localX+", Y=:"+ e.localY);
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
Ellipse.addEventListener("dblclick",function(){//点击获取位置
</div>
<div style="min-width:2px; background-color:inherit">
alert("双击了事件");
</div>
<div style="min-width:2px; background-color:inherit">
});
</div>
<div style="min-width:2px; background-color:inherit">
/Ticker:类似计时器，实时更新舞台/
</div>
<div style="min-width:2px; background-color:inherit">
createjs.Ticker.setFPS(20);//设置帧数/s
</div>
<div style="min-width:2px; background-color:inherit">
createjs.Ticker.addEventListener("tick",handlerTick);
</div>
<div style="min-width:2px; background-color:inherit">
var speedX=10;
</div>
<div style="min-width:2px; background-color:inherit">
function handlerTick(){
</div>
<div style="min-width:2px; background-color:inherit">
/通过限制增加的范围实现，左右不断移动/
</div>
<div style="min-width:2px; background-color:inherit">
if(Rect.x<=0){//左边
</div>
<div style="min-width:2px; background-color:inherit">
speedX=Math.abs(speedX);
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
if(Rect.x>=350){//右边-方块宽
</div>
<div style="min-width:2px; background-color:inherit">
speedX=-Math.abs(speedX);
</div>
<div style="min-width:2px; background-color:inherit">
}
</div>
<div style="min-width:2px; background-color:inherit">
Rect.x+=speedX;
</div>
<div style="min-width:2px; background-color:inherit">
stage.update();
</div>
<div style="min-width:2px; background-color:inherit">
}
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit"> <span style="background-color:inherit">三，Create JS控件</span>
</div>
<div style="background-color:inherit">
1，Text
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
/1,创建文本/
</div>
<div style="min-width:2px; background-color:inherit">
var text=new createjs.Text("Hello easeljs","26px Arial","#777");
</div>
<div style="min-width:2px; background-color:inherit">
text.x=50;
</div>
<div style="min-width:2px; background-color:inherit">
text.y=50;
</div>
<div style="min-width:2px; background-color:inherit">
text.rotation=10;
</div>
<div style="min-width:2px; background-color:inherit">
var rect=new createjs.Shape();
</div>
<div style="min-width:2px; background-color:inherit">
rect.x=text.x;
</div>
<div style="min-width:2px; background-color:inherit">
rect.y=text.y;
</div>
<div style="min-width:2px; background-color:inherit">
rect.rotation=text.rotation;
</div>
<div style="min-width:2px; background-color:inherit">
stage.addChildAt(rect,0);//添加带有子元素的
</div>
<div style="min-width:2px; background-color:inherit">
createjs.Ticker.setFPS(10);
</div>
<div style="min-width:2px; background-color:inherit">
createjs.Ticker.addEventListener("tick",handlerTicker);
</div>
<div style="min-width:2px; background-color:inherit">
function handlerTicker(e){
</div>
<div style="min-width:2px; background-color:inherit">
count++;
</div>
<div style="min-width:2px; background-color:inherit">
text.text="Hello easeljs"+count+"!"
</div>
<div style="min-width:2px; background-color:inherit">
//每次text增加宽度，重绘rect
</div>
<div style="min-width:2px; background-color:inherit">
rect.graphics.clear().beginFill("#F00").drawRect(-10,-10,text.getMeasuredWidth()+10,50);
</div>
<div style="min-width:2px; background-color:inherit">
stage.update(e);
</div>
<div style="min-width:2px; background-color:inherit">
}
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit">
2，Bitmap
</div>
<div style="background-color:inherit">
<table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit">
<tbody style="background-color:inherit">
<tr style="background-color:inherit">
<td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit">
<div style="min-width:2px; background-color:inherit">
var bitmap=new createjs.Bitmap("images/e1.png");
</div>
<div style="min-width:2px; background-color:inherit">
bitmap.x=300;
</div>
<div style="min-width:2px; background-color:inherit">
bitmap.y=300;
</div>
<div style="min-width:2px; background-color:inherit">
gameView.addChild(bitmap);
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:inherit"> <span style="background-color:inherit">四，CreateJS之TweenJS</span>
</div>
<div style="background-color:inherit">
<br style="background-color:inherit">
</div>
<div style="background-color:inherit"> <span style="background-color:inherit">五，CreateJS 与flash生成js文件交互</span>
</div>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <strong><span style="font-size:24px"><br style="background-color:inherit"> </span></strong>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">第十部分，TypeScript基础</span></strong></span></span>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
<br style="background-color:inherit">
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">第十一部分，实战开发</span></strong></span></span>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px"><br> </span></strong></span></span>
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
1，围住神经猫
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
2，看你有多色
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
3，冰桶挑战
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
4，打企鹅
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
5，语音识别
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
6，极客学院页面-用户中心
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
7，极客学院页面-播放视频
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
8，极客学院页面-路径图
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
9，标签切换效果
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
10，回到顶部功能
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
11，导航栏
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
12，Tooltip
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
13，幽灵按钮
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
14，列表切换
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
15，侧边栏固定
</div>
<div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
16，照片墙
</div>
</div>
</div>
</div>
</div>
</div>

<div id="SOHUCS" sid="1753920033454571520"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>

<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">

<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>

<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>

<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML5,JavaScript,jQuery,CSS3,html5)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1773495574226599936.htm"
title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a>
<span class="text-muted">所谓远行Misnearch</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div>
</li>
<li><a href="/article/1773403175781466112.htm"
title="Python dict字符串转json对象，小数精度丢失问题" target="_blank">Python dict字符串转json对象，小数精度丢失问题</a>
<span class="text-muted">朝如青丝暮成雪</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print</div>
</li>
<li><a href="/article/1773347920293199872.htm"
title="Vue 常见面试题(一)" target="_blank">Vue 常见面试题(一)</a>
<span class="text-muted">安生生申</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）</div>
</li>
<li><a href="/article/1773256158274977792.htm"
title="javascript 日期转换为时间戳，时间戳转换为日期的函数" target="_blank">javascript 日期转换为时间戳，时间戳转换为日期的函数</a>
<span class="text-muted">cdcdhj</span>
<a class="tag" taget="_blank" href="/search/javascript%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0/1.htm">javascript学习日记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-</div>
</li>
<li><a href="/article/1773198631940194304.htm"
title="COMP315 JavaScript Cloud Computing for E Commerce" target="_blank">COMP315 JavaScript Cloud Computing for E Commerce</a>
<span class="text-muted">zhuyu0206girl</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform</div>
</li>
<li><a href="/article/1773191331473063936.htm"
title="JSON与AJAX：网页交互的利器" target="_blank">JSON与AJAX：网页交互的利器</a>
<span class="text-muted">入冉心</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据</div>
</li>
<li><a href="/article/1772738346825613312.htm"
title="javascript的数据类型及转换" target="_blank">javascript的数据类型及转换</a>
<span class="text-muted">田小田txt</span>

<div>一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa</div>
</li>
<li><a href="/article/1772631263593693184.htm"
title="javascript实现SM2加密解密" target="_blank">javascript实现SM2加密解密</a>
<span class="text-muted">人生在勤，不索何获</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div>前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu</div>
</li>
<li><a href="/article/1772618299398488064.htm"
title="Vue：为什么要使用v-cloak" target="_blank">Vue：为什么要使用v-cloak</a>
<span class="text-muted">刻刻帝的海角</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu</div>
</li>
<li><a href="/article/1772594886269272064.htm"
title="JavaScript快速入门笔记之二（变量、常量、数据类型）" target="_blank">JavaScript快速入门笔记之二（变量、常量、数据类型）</a>
<span class="text-muted">eshineLau</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据</div>
</li>
<li><a href="/article/1772541266194661376.htm"
title="前端埋点解决方案" target="_blank">前端埋点解决方案</a>
<span class="text-muted">zhu_zhu_xia</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func</div>
</li>
<li><a href="/article/1772500355632922624.htm"
title="vue时间组件：dayjs与moment" target="_blank">vue时间组件：dayjs与moment</a>
<span class="text-muted">煸橙干儿~~</span>
<a class="tag" taget="_blank" href="/search/VUE%E5%AE%9E%E6%88%98/1.htm">VUE实战</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2</div>
</li>
<li><a href="/article/1772084223755223040.htm"
title="APP UI自动化测试思路总结" target="_blank">APP UI自动化测试思路总结</a>
<span class="text-muted">程序员老鹰</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
<div>首先想要说明一下，APP自动化测试可能很多公司不用，但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的，所以为了更好的待遇，我们还是需要花时间去掌握的，毕竟谁也不会跟钱过不去。接下来，一起总结一下APPUI自动化测试的思路吧。一，开发语言选择通常用于自动化测试的编程语言有：Python、Java、Javascript、Ruby、C#、PHP等。一般我们会选择自己熟悉的编程语言来编写自</div>
</li>
<li><a href="/article/1772071635629703168.htm"
title="html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上" target="_blank">html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上</a>
<span class="text-muted">猫研所</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E6%89%8B%E6%9C%BA/1.htm">手机</a>
<div>对接的网易云信微信IMSDK，在h5上能建立起连接，在手机端不行，截图是h5的链接，下面是app的日志：20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI</div>
</li>
<li><a href="/article/1772022542693892096.htm"
title="JS的设计模式（23种）" target="_blank">JS的设计模式（23种）</a>
<span class="text-muted">是个车迷</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板，它们用来解决在软件设计中频繁出现的问题，如对象的创建、职责分配、对象间通信以及系统架构等。设计模式并不特指某个具体的代码片段，而是一种描述在特定上下文中如何组织程序结构和对象交互的通用指导原则。JavaScript设计模式涵盖了创建型模式（处理对象创建的方式）、结构型模式（关注对象</div>
</li>
<li><a href="/article/1771859536957734912.htm"
title="JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？" target="_blank">JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？</a>
<span class="text-muted">智伴科技</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven</div>
</li>
<li><a href="/article/1771649715369213952.htm"
title="【大咖力荐新手必备】软件开发入门，这300篇文章就够了！" target="_blank">【大咖力荐新手必备】软件开发入门，这300篇文章就够了！</a>
<span class="text-muted">高校俱乐部</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B%E5%BF%85%E5%A4%87/1.htm">新手必备</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81/1.htm">数据编码</a><a class="tag" taget="_blank" href="/search/IP/1.htm">IP</a>
<div>小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助</div>
</li>
<li><a href="/article/1770408572249767936.htm"
title="问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？" target="_blank">问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？</a>
<span class="text-muted">zoe_ya</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a>
<div>在当前基于React+TypeScript的生态中，你需要掌握一系列的技能和知识，以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点：基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript（ES6+）的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ</div>
</li>
<li><a href="/article/1770399006292246528.htm"
title="reactive 和ref区别和原理" target="_blank">reactive 和ref区别和原理</a>
<span class="text-muted">小王学前端️</span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>reactive和ref区别和原理在Vue3中，reactive和ref都是用来创建响应式数据的方法。它们的主要区别在于如何使用它们以及它们如何处理值.reactive是用来创建响应式对象的。当你传递一个普通的JavaScript对象给reactive，它会返回一个新的响应式对象，这个对象与原始对象具有相同的属性和值，但是当这些属性被修改时，Vue会自动跟踪这些更改并更新视图。import{rea</div>
</li>
<li><a href="/article/1770381258401054720.htm"
title="react 和vue区别" target="_blank">react 和vue区别</a>
<span class="text-muted">小王学前端️</span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>React和Vue是两个非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些关键的区别：设计理念：React更倾向于函数式编程，推崇组件的纯粹性和可预测性，而Vue则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。模板vsJSX：Vue使用基于HTML的模板语法，这使得开发者可以快速上手。而React使用JSX，它是JavaScript的语法扩展，允许在JavaScript</div>
</li>
<li><a href="/article/1770188547035299840.htm"
title="爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析" target="_blank">爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析</a>
<span class="text-muted">洛可可白</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E4%B8%93%E6%A0%8F/1.htm">前端专栏</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>前言欢迎来到我的技术小宇宙！这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。洛可可白：个人主页个人专栏：✅前端技术✅后端技术个人博客：洛可可白博客代码获取：bestwishes0203封面壁纸：洛可可白wallpaper文章目录爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析基本语法1</div>
</li>
<li><a href="/article/1770072115815448576.htm"
title="WEB界面jquery1.7.2版本升级到jquery3.6版本需要注意的问题" target="_blank">WEB界面jquery1.7.2版本升级到jquery3.6版本需要注意的问题</a>
<span class="text-muted">程序十八大</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>$.size();需要更改为$.length;原因：1.8版本的时候$.size()被废弃页面加载的时候，$(function(){})与onload=""谁先执行的问题。</div>
</li>
<li><a href="/article/1769981361290018816.htm"
title="速盾：cdn分流是什么意思" target="_blank">速盾：cdn分流是什么意思</a>
<span class="text-muted">速盾cdn</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
<div>CDN分流是一种通过内容分发网络（CDN）来优化网站访问速度和用户体验的技术。通过CDN分流，网站的静态资源可以被缓存到全球不同的CDN节点上，从而减少用户请求原始服务器的次数，提高了网站的响应速度和可靠性。本文将详细介绍CDN分流的原理、优势和应用场景。CDN分流的原理是通过将网站的静态资源（如HTML、CSS、JavaScript、图片、视频等）复制到CDN节点上，并将用户的请求转发到离用户最</div>
</li>
<li><a href="/article/1769783486312415232.htm"
title="vue的axios教程" target="_blank">vue的axios教程</a>
<span class="text-muted">可爱的小小小狼</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>ajax技术：不重新加载整个页面的情况下，异步地与服务器进行通信，并更新页面的部分内容Ajax（AsynchronousJavaScriptandXML）是一种使用JavaScript向服务器发送和接收数据的技术。Ajax的工作原理基于以下关键组件：XMLHttpRequest对象：XMLHttpRequest是浏览器提供的API，用于创建HTTP请求，并与服务器进行通信。通过XMLHttpReq</div>
</li>
<li><a href="/article/1769779961574522880.htm"
title="JS中的八种继承方法" target="_blank">JS中的八种继承方法</a>
<span class="text-muted">酥脆角</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>1.原型链继承：原型链继承是JavaScript中最基本的继承方式。每个对象都有一个原型对象，通过原型链将属性和方法沿着对象链传递下来。在原型链继承中，通过将子构造函数的原型对象指向父构造函数的实例，实现了继承。这意味着子对象可以访问父对象原型链上的属性和方法。functionParent(){this.name='Parent';}Parent.prototype.sayHello=functi</div>
</li>
<li><a href="/article/1769766366396612608.htm"
title="原型对象与原型链" target="_blank">原型对象与原型链</a>
<span class="text-muted">网站打工人</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/1.htm">原型模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>原型对象实际上每一个构造函数都有一个名为prototype的属性，就是原型的意思，prototype的是对象类据类型，称为构造函数的原型对象，每个原型对象都具有constructor属性代表了该原型对象对应的构造函数。 functionPerson(){  } //每个函数都有prototype属性 console.log(Person.prototype);了解了JavaScript中构造函数</div>
</li>
<li><a href="/article/1769765138031771648.htm"
title="计算机毕业设计之ssm图书馆预约占座系统平台" target="_blank">计算机毕业设计之ssm图书馆预约占座系统平台</a>
<span class="text-muted">B站计算机毕业设计超人</span>

<div>开发技术后台:springmvc+spring+mybatis（SSM）前台：JQuerylayUI百度echarts数据库：MySQL代码开源地址(码云gitee)https://gitee.com/bysj2021/library_seatB站演示Demo地址https://www.bilibili.com/video/BV1Q741147Ag/运行截图图书馆预约占座系统平台图书馆预约占座系统</div>
</li>
<li><a href="/article/1769760827419721728.htm"
title="JS中的继承" target="_blank">JS中的继承</a>
<span class="text-muted">浅墨_东</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在JavaScript中，有多种实现继承的方法。下面介绍几种常见的继承方式以及它们的优缺点：原型链继承原型链继承是JavaScript中最基本的一种继承方式。它的原理是通过将父类的实例作为子类的原型（prototype）来实现继承。functionParent(){this.name='Parent';}Parent.prototype.sayHello=function(){console.lo</div>
</li>
<li><a href="/article/1769728476581003264.htm"
title="HTML5球体下落粒子爆炸特效" target="_blank">HTML5球体下落粒子爆炸特效</a>
<span class="text-muted">酷爱码</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>HTML5球体下落粒子爆炸特效，源码由HTML+CSS+JS组成，双击html文件可以本地运行效果，也可以上传到服务器里面下载地址HTML5球体下落粒子爆炸特效</div>
</li>
<li><a href="/article/1769583340890947584.htm"
title="页面垂直居中实现方法（HTML/CSS）" target="_blank">页面垂直居中实现方法（HTML/CSS）</a>
<span class="text-muted">TdMaster</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在网页设计中，垂直居中是一个常见的需求。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。方法一：使用Flexbox布局Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。下面是一个使用Flexbox布局实现页面垂直居中的示例代码：body,html{height:100%;margin:0;display:flex;align-</div>
</li>
<li><a href="/article/72.htm"
title="Java开发中，spring mvc 的线程怎么调用？" target="_blank">Java开发中，spring mvc 的线程怎么调用？</a>
<span class="text-muted">小麦麦子</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
<div>今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。

问题：
    在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局</div>
</li>
<li><a href="/article/199.htm"
title="maven依赖范围" target="_blank">maven依赖范围</a>
<span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包

2.compile 只有编译和打包时才会依赖

3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包

4.runtime 运行时依赖，编译不依赖

5.默认compile

依赖范围compile是支持传递的，test不支持传递

1.传递的意思是项目A，引用</div>
</li>
<li><a href="/article/326.htm"
title="Jaxb org.xml.sax.saxparseexception : premature end of file" target="_blank">Jaxb org.xml.sax.saxparseexception : premature end of file</a>
<span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/premature/1.htm">premature</a><a class="tag" taget="_blank" href="/search/JAXB/1.htm">JAXB</a>
<div>如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误：
org.xml.sax.saxparseexception : premature end of file
很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In</div>
</li>
<li><a href="/article/453.htm"
title="CSS Specificity" target="_blank">CSS Specificity</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%87%8D/1.htm">权重</a><a class="tag" taget="_blank" href="/search/Specificity/1.htm">Specificity</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>
有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity
CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。
    规则：

HTML标签的权重是1

Class 的权重是10

Id 的权重是100

</div>
</li>
<li><a href="/article/580.htm"
title="java与servlet" target="_blank">java与servlet</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
<div>servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。
下面是java官方网站上对servlet的介绍： java官网对于servlet的解释写道
Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha</div>
</li>
<li><a href="/article/707.htm"
title="eclipse中安装maven插件" target="_blank">eclipse中安装maven插件</a>
<span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>1.首先去官网下载 Maven：
http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz
下载完成之后将其解压，
我将解压后的文件夹：apache-maven-3.2.3，
并将它放在 D:\tools目录下，
即 maven 最终的路径是：D:\tools\apache-mave</div>
</li>
<li><a href="/article/834.htm"
title="jpa@OneToOne关联关系" target="_blank">jpa@OneToOne关联关系</a>
<span class="text-muted">布衣凌宇</span>
<a class="tag" taget="_blank" href="/search/jpa/1.htm">jpa</a>
<div>Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。
Nruser实体类
//*****************************************************************
@Entity
@Table(name="nruser")
@DynamicInsert @Dynam</div>
</li>
<li><a href="/article/961.htm"
title="我的spring学习笔记11-Spring中关于声明式事务的配置" target="_blank">我的spring学习笔记11-Spring中关于声明式事务的配置</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a>
<div>这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中</div>
</li>
<li><a href="/article/1088.htm"
title="java 动态代理简单实现" target="_blank">java 动态代理简单实现</a>
<span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/handler/1.htm">handler</a><a class="tag" taget="_blank" href="/search/proxy/1.htm">proxy</a><a class="tag" taget="_blank" href="/search/dynamic/1.htm">dynamic</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a>
<div>dynamicproxy.service.HelloService
package dynamicproxy.service;

public interface HelloService {
public void sayHello();
}

dynamicproxy.service.impl.HelloServiceImpl
package dynamicp</div>
</li>
<li><a href="/article/1215.htm"
title="JDBC连接数据库" target="_blank">JDBC连接数据库</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/JDBC%E7%BC%96%E7%A8%8B/1.htm">JDBC编程</a><a class="tag" taget="_blank" href="/search/JAVA%E6%93%8D%E4%BD%9Coracle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">JAVA操作oracle数据库</a>
<div>
    如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;

JDBC链接数据库的代码和固定写法;

1,加载oracle数据库的驱动;
    &nb</div>
</li>
<li><a href="/article/1342.htm"
title="单例模式中的多线程分析" target="_blank">单例模式中的多线程分析</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
<div>谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。
饿汉式：
package com.bijian.study;

public class Singleton {

private Singleton() {
}

// 注意这是private 只供内部调用
private static</div>
</li>
<li><a href="/article/1469.htm"
title="javascript读取和修改原型特别需要注意原型的读写不具有对等性" target="_blank">javascript读取和修改原型特别需要注意原型的读写不具有对等性</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a>
<div>        对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有</div>
</li>
<li><a href="/article/1596.htm"
title="【持久化框架MyBatis3六】MyBatis3集成第三方DataSource" target="_blank">【持久化框架MyBatis3六】MyBatis3集成第三方DataSource</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/dataSource/1.htm">dataSource</a>
<div>MyBatis内置了数据源的支持，如：

<environments default="development">
<environment id="development">
<transactionManager type="JDBC" />
<data</div>
</li>
<li><a href="/article/1723.htm"
title="我程序中用到的urldecode和base64decode,MD5" target="_blank">我程序中用到的urldecode和base64decode,MD5</a>
<span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/MD5/1.htm">MD5</a><a class="tag" taget="_blank" href="/search/base64decode/1.htm">base64decode</a><a class="tag" taget="_blank" href="/search/urldecode/1.htm">urldecode</a>
<div>这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码：

string Base64Decode(const char* Data,int DataByte,int& OutByte)
{
//解码表
const char DecodeTable[] =
{
0, 0, 0, 0, 0, 0</div>
</li>
<li><a href="/article/1850.htm"
title="腾讯资深运维专家周小军：QQ与微信架构的惊天秘密" target="_blank">腾讯资深运维专家周小军：QQ与微信架构的惊天秘密</a>
<span class="text-muted">ronin47</span>

<div>社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心</div>
</li>
<li><a href="/article/1977.htm"
title="java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素" target="_blank">java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>

public class MinOfShiftedArray {

/**
* Q69 旋转数组的最小元素
* 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。
* 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。
*/
publ</div>
</li>
<li><a href="/article/2104.htm"
title="看博客，应该是有方向的" target="_blank">看博客，应该是有方向的</a>
<span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/%E5%8F%8D%E7%9C%81/1.htm">反省</a><a class="tag" taget="_blank" href="/search/%E7%9C%8B%E5%8D%9A%E5%AE%A2/1.htm">看博客</a>
<div>看博客，应该是有方向的:
我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.
我刚突然想到的:
1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。
2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.

为什么要写</div>
</li>
<li><a href="/article/2231.htm"
title="[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖" target="_blank">[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a>
<div>

     为什么这样说呢？因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。

      所以，为避免这种不确定性风险，我</div>
</li>
<li><a href="/article/2358.htm"
title="一个 sql优化（[精华] 一个查询优化的分析调整全过程！很值得一看）" target="_blank">一个 sql优化（[精华] 一个查询优化的分析调整全过程！很值得一看）</a>
<span class="text-muted">cwqcwqmax9</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
<div>见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011

Web翻页优化实例
提交时间: 2004-6-18 15:37:49      回复    发消息

环境：
Linux ve</div>
</li>
<li><a href="/article/2485.htm"
title="Hibernat and Ibatis" target="_blank">Hibernat and Ibatis</a>
<span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a>
<div>Hibernate VS iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi</div>
</li>
<li><a href="/article/2612.htm"
title="备份MYSQL脚本" target="_blank">备份MYSQL脚本</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>#!/bin/sh
# this shell to backup mysql
#1413161683@qq.com (QQ:1413161683 DuChengJiu)

_dbDir=/var/lib/mysql/
_today=`date +%w`
_bakDir=/usr/backup/$_today
[ ! -d $_bakDir ] && mkdir -p </div>
</li>
<li><a href="/article/2739.htm"
title="iOS第三方开源库的吐槽和备忘" target="_blank">iOS第三方开源库的吐槽和备忘</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a>
<div>转自
ibireme的博客做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。首先整理了一份
Github上排名靠</div>
</li>
<li><a href="/article/2866.htm"
title="html wlwmanifest.xml" target="_blank">html wlwmanifest.xml</a>
<span class="text-muted">eoems</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
<div>所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。

步骤：

加入到function.php

remove_action('wp_head', 'wp_generator');
//wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog

remov</div>
</li>
<li><a href="/article/2993.htm"
title="浅谈Java定时器发展" target="_blank">浅谈Java定时器发展</a>
<span class="text-muted">hacksin</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a>
<div>java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。
Timer与ScheduleThreadPoolExecutor对比：
1.

Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列</div>
</li>
<li><a href="/article/3120.htm"
title="移动端页面侧边导航滑入效果" target="_blank">移动端页面侧边导航滑入效果</a>
<span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascirpt/1.htm">javascirpt</a>
<div>效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码：
<!DOCTYPE html>
<h</div>
</li>
<li><a href="/article/3247.htm"
title="AspectJ+Javasist记录日志" target="_blank">AspectJ+Javasist记录日志</a>
<span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/aspectj/1.htm">aspectj</a><a class="tag" taget="_blank" href="/search/javasist/1.htm">javasist</a>
<div>在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。

@Override
public String get(String key) {
// long start = System.currentTimeMillis();
// System.out.println("Be</div>
</li>
<li><a href="/article/3374.htm"
title="redis学习笔记" target="_blank">redis学习笔记</a>
<span class="text-muted">MJC410621</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a>
<div>1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。
1，处理超大量的数据
2，运行在便宜的PC服务器集群上，
3，击碎了性能瓶颈。
1)对数据高并发读写。
2)对海量数据的高效率存储和访问。
3)对数据的高扩展性和高可用性。

redis支持的类型：

Sring 类型
set name lijie
get name lijie
set na</div>
</li>
<li><a href="/article/3501.htm"
title="使用redis实现分布式锁" target="_blank">使用redis实现分布式锁</a>
<span class="text-muted">qifeifei</span>

<div>在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：

public Long setnx(final byte[] key, final byte[] value) {
checkIsInMulti();
client.setnx(key, value);
ret</div>
</li>
<li><a href="/article/3628.htm"
title="BI并非万能，中层业务管理报表要另辟蹊径" target="_blank">BI并非万能，中层业务管理报表要另辟蹊径</a>
<span class="text-muted">张老师的菜</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/BI/1.htm">BI</a><a class="tag" taget="_blank" href="/search/%E5%95%86%E4%B8%9A%E6%99%BA%E8%83%BD/1.htm">商业智能</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8C%96/1.htm">信息化</a>
<div> BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。
       BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有</div>
</li>
<li><a href="/article/3755.htm"
title="安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题" target="_blank">安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题</a>
<span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/function/1.htm">function</a>
<div>1.在~/.bashrc最后加入
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"
2.重新启动terminal输入：

rvm use ruby-2.2.1 --default
把当前安装的ruby版本设为默</div>
</li>
</ul>
</div>
</div>
</div>

<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

</div>
</div>
</footer>

<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>

</body>

</html>
表格标题

表头

单元}}