2016.11.15Web的学习
StackOverFlow 优快云 vs layer ajax jq22插件
一、
1、html ：超文本标记语言，一种网络语言
2、JavaWeb里面的项目都是通过浏览器+网页来显示效果的
二、固定规范：
1、有一个开始<html> 与之对应的结束标签</html>
2016.11.16
一、
1、html标签是成对出现的，有开始标签和结束标签
2、html不区分大小写
3、换行：<br/> 换行横线<hr/> <p></p>段落标签
4、html的操作思想：html里面的内容都是用标签来包裹，如果要改变内容的样式和风格，只需要改变标签的属性。
5、文字标签<font/></font>:
1)、文字大小：size(1~7) 大于7时默认为7
2)、文字颜色：color 设置方式：手写 、颜色面板上找（16进制）
3）、html文字注释<!----->
4）、<p></p>段落标签
5）、b表示粗体 i表示斜体 u表示下划线 s表示删除标签
6、标题标签<h1></h1> (h1~h6) 大小从大到小
<html>效果为<html> 因为如果直接写<html>会默认标签不会显示
 :空格符号
&:连接符号
7、列表标签：
1）、<d1><dt>亚洲</dt>
<dd>中国</dd>
<dd>日本</dd>
</d1> 表示列表的范文
dt表示上层内容，dd表示下层内容
效果：亚洲
中国
日本
8、有序标签：<ol type="1">
<li>张柏芝</li>
<li>钟欣桐</li>
<li>黄圣依</li>
</ol>
效果：1.张柏芝
2.钟欣桐
3.黄圣依
9、无序标签：默认实心圆 空心圆circle
<ul>
<li>张柏芝</li>
<li>钟欣桐</li>
<li>黄圣依</li>
</ul>
效果：
?张柏芝
?钟欣桐
?黄圣依
10、在网页中嵌入图片，通过标签<img width="88" height="99" src="图片路径"/>
图片路径：绝对路径、相对路径
一般用相对路径的方式，图片和网页文件要在同一个目录下，如果在文件的下一层需要加一个文件夹名称
如果在网页文件的上一层，表示方式为../img.jpg
11、<a></a>是超链接标签
<a href ="网址">请点击这里</a>
<a href ="#">不跳转到其他页面</a>
align="";调整文字位置
12、定位资源:<a name="top">顶部</a>
<a href="#top">回到顶部</a>//意思是回到“顶部”这两个字这个位置
13、原样输出：<pre >内容</pre>
14、表格标签：没有列一说，一行一行的布置，在每行里面加入单元格
<table></table>
<tr></tr> 行，放置于table中
<td></td> 单元格，放置于tr中
<th/><th> 单元格，和td差不多，但可以把字体加粗
border设置表格线的粗细 ，是属性，放在标签中
合并单元格：
rowspan="4" 横向合并
colspan="3" 竖向合并
15、表单标签：
<form>
<input type="txt"/>//如果不设置value属性，默认为on
</form>
文本：txt；密码：password；单选按钮：radio，后面必须加上name属性，且必须相同,否则不能单选，复选框：checkbox，设置name属性，
而且必须相同，导入文件:file; 提交表单数据至表单处理程序：submit,重置按钮<input type="reset"/>，填写的数据清空
下拉框<select name="dd" value ="name">
<option values="aa">aa</option>
注：在使用表单标签的时候有一个原则，在输入项里面需要输入name属性，其数据会被拼接到网上，传输到服务器上面
16.frame _top _parent _self _blank表示新开页面
values 会显示出汉字
2016.11.17
一、1、（1）、<form action ="网址" method="post"></form>把信息提交给哪个网址
<input type="password" name ="pwd" >
注册页面中的数据最终会提交给服务器的某个文件，action设置提交数据的地址，若不指定地址就默认提交给当前页面，默认当前
（2）、method 设置表单提交数据的方式两种get和post，post提交方式更安全
get和post的区别：
get请求：
1）、地址栏会显示提交的数据，安全级别低，
2）、而且数据大小有限制，数据最终会拼接到网址上。
post请求：
1）、将数据置于请求体里面，较为安全，
2）、post提交的数据大小没有限制。
（3）
1）、 <input type="radio" name="sex" checked="checked">男<input type ="radio" name="sex">女<br/>
<input type="checkbox" name="box" checked="checked">游泳
checked的作用是在单选按钮和复选框上面预先指定一个，然后我们自己用鼠标修改
2）、<select name="borth_month"/>
<option name="月" >月</option>
<option name="1"selected="selected">1</option>
selected的作用是在下拉菜单里预先设置一个值，然后自己修改
（4）、注册按钮<input type="submit" value ="注册"/>改为<input type="image" src="1.jpg"/>，注册按钮就会变成我们
导入的图片1.jpg。
（5）、其他常用标签：
b:加粗；s：删除线；u:下划线；i:斜体；sub：下标；sup上标；p：段落；
css: div自动换行
span：在一行显示
（6）、在css样式设置里面：
1）、添加下划线：text-decoration:underline;
2)、删除线： text-decoration:line-through;
2、滚动字幕;<marquee></marquee>
align:对其方式：top/middle/bottom
bgcolor:设置文字卷动范围的背景颜色
loop:文字卷动次数
height:设定字幕高度
width:设定字幕宽度
scrollamount:指定每次移动速度，值越大移动越快
scrolldelay:文字每次滚动的停顿时间，单位毫秒，时间越短滚动越快
hspace:指定字幕左右空白区域的大小
vspace:指定字幕上下空白区域的大小
direction：指定文字卷动方向，left/right/up/down
behavior:指定移动方式，scroll表示滚动播出，slibe表示滚动到一方后停止，alternate表示滚动到一方后向相反的方向滚动
3、<frameset clos="40%,40%,*">
<frame src="">
</frameset>
把一个窗口分成几份clos竖直方向、rows水平方向
二、css:层叠样式表(让网页更好看，减少重复代码，提高功能性，提高后期代码的可维护性)
css不能单独存在，必须依附于html文件，主要是修改网页的外观，可以解决html样式代码的重复定义，可以提高后期
代码的可维护性，并且增加网页的效果（好看），css就是讲网页内容和样式相互分离，提高代码的可维护性和功能性。
1、css和html的四种结合方式：
1）、每个html标签都有一个style属性，把css和html结合在一起,style作为属性
格式：style="属性：属性值；属性：属性值；"
<div style="background-color:red;color:green">千里之行始于足下，九成之台始于足下</div>
2）、让html的样式和内容相互分离，css写在head头标签中style作为标签
<style >
div{background-color:blue;
color:green}
</style>
</head>
<body>
<div >千里之行始于足下，九成之台始于足下</div>
</body>
3）、在style标签中使用，@import url(css的文件路径)，将css单独创建一个css文件，这样实现html和css的分离
缺点：在某些浏览器中不起作用，兼容性差，一般使用第四种
4）、使用头标签引入外部css文件，首先创建一个css文件
<link rel="stylesheet" type="text/css" href="div.css"/>
2、css的基本选择器：css的优先级：由上到下，由外到内，优先级有低到高
1）、标签选择器
选择器名称：{属性与属性值之间以冒号":",多个值之间以空格隔开；属性之间以分号";"隔开
属性：属性值；
属性：属性值；
........
}
<style >
div{background-color:blue;
color:green}
</style>
</head>
<body>
<div >千里之行始于足下，九成之台始于足下</div>
</body>
2）、类选择器class，每个标签都有class属性，class属性可以作为选择器的名称
div.aa2{background:green;
color:blue;
}
<div class="aa2" >千里之行始于足下</div>
3）、id选择器：每个html标签都是有id属性，这个id值就是选择器的名称（#id），每个标签的id都不能与其他标签相同，
id是唯一的身份标识。
#mm{background:green;
color:blue;
}
<div class="aa2" id="mm">千里之行始于足下</div>
3、css的扩展选择器
4、css的盒子模型：目前编写页面的主流思想，每个页面都需要div包裹起来，若要修改这个模型的样式，只需要设置这个div
将不同的模型封装到不同的div里面
使用css来定义这些div页面模式
margin外边框 padding内边框 padding-(四个方向)
border-top border-bottom border-right border-left
5、css的布局漂浮：float（一般不用，有些浏览器不兼容）
left（文本流，向对象的右边） right（向对象的左边） none(默认为不漂浮)
6、css的布局定位：
position漂浮：
static 默认值：无特殊定位，队形遵循html定位原则
absolute 将对象从文档流中拖出 使用left right top bottom 对其进行绝对定位
relative相对定位
216.11.18
1、font-style的三种属性：
normal-文本正常显示
italic-文本斜体显示
oblique-文本倾斜显示
2、id选择器>class选择器>标签选择器
如果id选择器、class选择器、标签选择器共同存在的话 ，如果里面有相同的属性，优先级高的会替代优先级低的，如果作用一个内容中的
几个选择器的属性都不一样，会产生叠加的效果，but 如果在一个标签中写上<div class="aa" id="bb" style="color">内容</div>
就会以style为准
3、扩展选择器:关联选择器，组合选择器，伪类元素选择器
1）、关联选择器： 语法外面的标签+空格（必须有空格）+里面的标签
2）、组合选择器：（不同内容设置成相同的属性）
标签（class、id）+","+另外一个标签（class、id）
3）、伪类选择器：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
4）、伪元素选择器：
"first-line" 伪元素用于向文本的首行设置特殊样式 fist-letter对第一个字母设置
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
4、 <meta http-equiv="refresh" content="2;url=href.html"/ ><br/> ;//两秒后转转到href.html的文件页面中
<a href="href.html" target="_self">立即跳转</a>
5、<embed> 标签定义嵌入的内容，比如插件。wmode:窗口；transparent:透明
<embed src="../javaweb04/homework01/flash/1.swf" width="300px" height="100px" wmode="transparent" />
6、title可以在鼠标放的地方显示出来
7、 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：
div
{
overflow-x:hidden;
}
8 、text-shadow:5px 5px 5px red; 文本阴影
2016.11.21
二、javascript
1、javascript是一种脚本语言，嵌套在html中，和静态页面相结合，是基于对象和事件驱动的脚本语言，主要应用于客户端
理解：javascript是嵌套在html中，使静态页面产生动态效果，并且基于对象和事件驱动的一种脚本语言！
特点：交互性、安全性、跨平台性
基于对象：对象创建好了，直接拿过来用
驱动时间：点击事件、滑动事件。。。
客户端：本地的浏览器，也就是说js是在浏览器中运行的html、css、js都是通过浏览器执行，称之为前端语言
2、1）、交互性：客户端和服务端能够互相交互
2）、安全性：不能操作本地磁盘
3）、跨平台性：可以跨平台
3、javascript和java没有关系，js是网景公司，java是（sun公司）后被oracle收购
4、js和java的区别：js是网景公司开发的一种脚本语言，是基于对象，只需要浏览器解析就可以执行，是一种弱类型的语言
java是sun公司开发的，是面向对象的，java需要先编译成字节码文件再执行
5、js由3个部分组成：ECMAScript(解释器)、BOM（操作html的能力）、DOM（浏览器）
6、javascript不能单独使用，需要和html结合使用，两种方式：
1）、使用标签<script type="text/javascript"></script>
2）、新建一个js文件，用<script type="text/javascript" src="xx.js"></script>引入
在body中，两种结合方式取其一
7、alter();弹出对话框
8、js基本语法：
1）、变量函数运算符区分大小写
2）、每行末尾的分号可以写可不写，但建议写
3）、js中原始类型有5种，都是用关键字var
5种类型：String number boolean null undifined
例如：var str="你好"；
var num=222；
var boolean=true;
var s;//结果会是undifined
alert(str+","+typeof(str));
typeof判断是什么数据类型
9、if switch for while do..while
1)、switch分支语句，switch(x)中的x支持所有数据类型
10、字符串+数字为连接，字符串若为数字，能和一个数进行减法运算，若不为数字和一个数相减
会得到一个非数NaN
11、boolean 中false默认位0或者null，true默认为1；
12、"==""==="
1) 、"=="值相等，就为true，左右两边可能数据类型不相等
var s="123";
if(s==123）{
alter(s);
}else{
alter("dad");
} //结果为123，为true
2) 、"===",不仅数值相等，类型也要相等
13、打印document.write();里面可以为常量、变量、html代码
14、数组的定义：三种方式
1）、静态var arr=[2,"hello",null,true,6,7]; 注意和java区别开
2）、动态var arr=new Array(5);数组长度为5；//里面的元素为一个代表数组长度
3）、var arr= new Array(125,15,12,3,1)和第一种一样
数组的长度可以变化，而且可以储存不同类型的数据 数组长度length
15、方法的定义：3中形式
1）、function 方法名（形参列表）{//形参列表直接写变量名
方法体
返回值可有可无，根据业务需求
如果用return返回，则调用的时候要用alert()或者document.write();
}
2）、匿名方法 ：常用
var test=function(){}
3）、动态方法
使用js中的内置对象Function()
var test= new Function("形参列表"，"方法体");
二、计时器
1、setInterval
2、setTimeout
三、getElementById：通过id获得元素
2016.11.22
一、
1、java和js中方法的区别：
java中有重载，js中没有
js的方法体中，都有一个默认没有显示的数组
js的方法的新参没有赋值类型
2、line-height线条高度，设置可以让图片上的文字在中间
在js中点击按钮跳转页面：window.location.href="url"
3、var date= new Date(); 打印当地时间
document.write(date.toLocaleString());
//2016/11/23 上午8:52:37
4、var arr=[2,5,6];
var arr2=[3,69,1];
var arr3=["李元帅"];
document.write(arr.concat(arr2,arr3));
//2,5,6,3,69,1,李元帅 用于连接各个值
document.write(arr.join("--"));//join就是表示用什么连接符号来连接
5、var str="how are you doing ,yes ok";
document.write(str.split(""));//从什么地方分割
//h,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,,,y,e,s, ,o,k
//2--5--6
6、document.getElementById("div").innerHTML="<div id='div1'></div>"//这里面是标签里面的内容
2016.11.23
一、日期date
二、Math
1、Math.max(2,3);返回其中较大值
2、Math.min(2,3);返回其中较小值
2、Math.round(2.56);四舍五入
三、全局方法：
1、eval("方法体");
四、
1、encodeURI不编码的字符有82个
decodeURI 解码
2、encodeURIComponent不编码的字符有71个
decodeURIComponent 解码
例子
var str="你好，我是的嘛李渊算"
var stre=encodeURIComponent(str);
document.write(stre+"<br/>");
var strd=decodeURIComponent(stre);
document.write(strd+"<br/>");
3、isNaN是非数
document.write(isNaN(123));//结果false，不是非数
4、var f=parseFloat("44","55");
document.write(f);//44
var f=parseFloat("44.52");
document.write(f);//44.52
var f=parseFloat("44.0");
document.write(f);//44
5、arguments 数组名
五：BOM对象
navigator的属性，得到浏览器信息
1、document.write(navigator.appName);//当前浏览器名称
2、useAgent
screen得到浏览器屏幕的信息
history 历史信息 back forward go
window
3、confirm()和alert（）类似，confirm有确定取消按钮
当confirm为true，点击确定弹出的是为true时的内容，反之是取消的内容
2016.11.24
1、阻止定时器不断创建对象的方法：
方法一：if()判断
if(id==null){
id=setInterval(test,1000)在继续方法中
}
clearInterval();//在暂停方法中
id=null;
2、innerHTML和value返回的值是string类型
二、jQuery:是一个javaScript函数库
YUI Prototype Mootools Dojo ExtJS
在html中 src="jquery数据库路径"
1、$表示jQuery对象，所以文件中的$可以替换成jQuery
2、prototype、jQuary、base都是用$作为起始符
3、jquery是比较优秀的js库
4、$(function(){//调用jquery的方法
$("input").click(function(){//作用在哪个标签上，用什么事件触发，然后这个标签要干嘛，调用方法
$("p").hide();//找到了这个标签要干嘛
})
})
5、基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
6、var jq=jQuery.noConflict(), 把jq代替$符号使用
2016.11.25
一 、jquery选择器的使用：
1、能够方便快速的找到html标签，并且可以设置其样式
jquery选择器浏览器兼容性比较好支持（css1-css3）
$("p").css（"color","red"） 得到标签的对象后，设置其样式
$("p").click(function(){ //得到标签后，为其定义事件
alert("第一个jquery代码")
})
2、 $("*") 选取所有元素 //$("*").hide();隐藏所有
$("#div") id="div"的元素；
$(".ss") 所有class="ss"的元素；
$("p") 所有<p>元素；
$(".mm .aa") 所有class="mm"下所有class="aa"的元素；
$("p:first") 第一个<p>元素；
$("p:last") 最后一个<p>元素；
$("tr:even") 所有偶数<tr>元素；
$("tr:odd") 所有奇数<tr>元素；
$(":contains('haha')") 包含指定字符串的所有元素；
$("p:hidden") 所有隐藏的<p>元素；
$("th,td.dd")所有带有匹配选择的元素;
$("[href]") 所有带有href属性的元素；
$("[href='#']") s所有href的值等于"#"的元素；
$("[href!='#']") 所有href的属性值不等于"#"的值；
$("href$='.jpg'") 所有href的值带有‘.jpg’结尾的元素；
$(":input") 所有<input>元素；
$(":text") 所有type="text"的<input>元素
$(":botton") 所有type="botton"的<input>元素
其他类型类似
2、事件
$("p").slideToggle();//使用滑动效果
$("p").hide(1000);//p段落在1秒之内慢慢消失
$("p").show(1000);//p段落在1秒之内慢慢出现
$("p").toggle(可以加时间)；//隐藏和显示来回切换
3、淡入淡出
fadeIn //淡入
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
fadeOut //淡出
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
4、//如果有多个<p>标签，eq(0)表示第一个，eq(1)表示第二个
$(function(){
$("p").eq(1).css("color","red");
})
5、//size()表示标签的个数
$(function(){
alert($("p").size());
})
6、//get(i),
//判断第i个元素是否存在
7、var div=document.getElementById("div");
div.style.fontSize="20px";设置标签中字体的大小
8、jquery ui是以js为基础的 页面的控件
9、jquery是制作网页的，封装了js和css、ajax，操作起来更加方便，简洁，减少写代码的量
问题：页面控件上面的一个标签上面有许多的class，他们的作用分别是什么
2016.11.26
1、$("div>p").css("color","red");//p是div的子标签，这表示可以改变div的子标签的样式，
等价于$("div").children(p).css("color","red")
2、$("div+p").css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div下面的那个p标签的样式；
等价于$("div").next(p).css("color","red")
3、$("div~p").css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div下面的所有p标签的样式；
等价于$("div").nextAll(p).css("color","red")
4、$("div").prev("p")css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div上面的那个p标签的样式；
5、$("div").prevAll("p")css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div上面的所有p标签的样式；
6、$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止
7、$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止
8、$("a[title^='你']")//对title属性值开头为“你”的a标签进行操作
9、$("a[title$='你']")//对title属性值结尾为“你”的a标签进行操作
10、$("a[title*='你']")//对title属性值“你”的所有a标签进行操作
2016.11.27
1、如果导入了base库，就会和jquery发生冲突，可以这样：
jQuery.noCoflict();
var $$=jQuery;
$(function () {
alert($('#box').ge(0));
alert($$('#box').width());
});
2、页面标签可以置于js代码的后面
2016.11.28
1、jquery能够非常方便的得到html页面中的任何元素对象、
2、能够动态的对元素的对象设置样式和属性
3、容错性比较高，如果没有元素对象不会报错
4、若没有特殊要求，id和class之间优先选用id，效率会更高
5、id选择器：通过id值获得所在标签的元素对象，然后对元素对象进行操作
6、过滤选择器：通过特定的过滤规则来筛选出所需的元素对象，以":"开头
7、gt(x)/lt(x)索引值大于x或者小于x $("div:gt(2)").css("color","red");索引值大于2的元素对象眼色设置为红色
8、header //头标签，表示所有<h><h>头标签
9、改变<input type="text" value="都比">里面的value值：
$(function(){
$("input").val("我改成嘿嘿嘿了");
})
10、$("div:empty").text("我把猴子换了")
<div></div>//可以在空标签中添加文字
11、has()方法
$("div:has(a)").css("color","green");//div中包含a标签，如果用has，最好外围是div
12、hidden()方法
$("#dd").hide();
$("#dd:hidden").show(2000) //将id为dd的隐藏内容在2秒内显示出来
$("#dd").css('border','1px solid #ff6699');
$("div:visible").css("color","red");//将可见的div标签中的内容变成红色
13、CSS text-decoration 属性 a {text-decoration: none} //消除链接中的下划线
14、line-height 行间距离 text-indent：5px;首行缩进
15、$("p:contain('数字'").css("color","red");//所有包含数字两个字的都会变成红色
2016.11.29
1、jquery中对话框dialog，dialog可以代替js中alert
语法：$("#aa").dialog()//()里面可以写很多东西
2、 可以同时打开多个dialog，只要设置不同的id；
3、对话框弹出位置：上下左右：top bottom left right
左上：left top 左下：left bottom
右上:right top 右下:right bottom
默认为中：center
注意：左上，左下，右上，右下必须以left或者right在前面才有效果
4、设置宽度：
width:400,
height:400,//后面是逗号，然后没有px；
5、enable/disable 对可选和不可选的元素进行操作
6、<input type="text" disabled="disabled"> //该文本框不可选
7、在jQuery中只有花括号或者没有括号，得用逗号"，"隔开，像"})"可以跟分号";"
8、buttons的用法：buttons是为对话框增加按钮的属性，比如要在对话框中添加取消确定按钮，可以按下面方法：
buttons:{
"确定":function(){},
"取消":function(){},
}
9、关闭对话框的方法：
$(this).dialog("close") //关闭对话框本身，this可以换成标签、class、id
$(this).dialog("open") //打开对话框本身，this可以换成标签、class、id
10、对话框尺寸的设置：
对话框尺寸的设置有：width,height,maxWidth,minWidth,maxHeight,minHeight;
设置的方式：
$("#reg").dialog({
width:520,
heigth:1314,
......
})
我们发现两个问题，创建的对话框可以调整大小，怎么办，可以用一个属性：resizable，默认是true,可以调整大小的
还有就是移动问题，如果不想让他移动，可以用draggable，默认为true，可以移动
resizable:true, //可以调整大小
resizable:false, //不能调整大小
draggable:true, //可以移动
draggable:false, //不可以移动
11、使用show和hide属性实现淡入淡出的效果
show:true, //淡入
hide:true, //淡出
show和hide的特效：
1）、blind
2）、bounce
3）、clip
4）、slide
5)、drop
6）、fold
7）、highlight
8）、puff
9）、scale
10）、pulsate
使用方式：
show="blind",
hide="bounce",
12、modal ：当弹出对话框时我们可以使用modal来限制用户对弹出框以外的界面进行操作，默认为false，可以操作
使用方式：
modal:true, //不能操作
modal：false, //可以操作
13、dialog方法的事件
分别有focus、create、open、beforeClose、close
形式：create:function(e,ui){//创建时的事件，可以是对话框，比如我要创建一个对话框是，弹出一个对话框，问是不是要创建一个
("#div").dialog({ 对话框，这个框我可以创建两个按钮，分别是“确定“和“取消”，点击“确定”时，我们可以绑定一个创建另外
buttons:{ 一个对话框的事件，当点击“取消”，调用关闭当前对话框的属性,还有一个更实际的实例，我们玩LOL的时候
"取消":function(){ 不小心点到了有上角的叉叉，如果不在退出之前进行判断一下的话，尤其是在打排位选英雄的时候，一点叉叉就退
$(this).dialog("close"); 出，那就太坑了
},
"确定":function(){
$(this).dialog("close")
("#div2").dialog({
........
})
},
},
})
},
14、按钮：（button）
1）、使用button
2）、修改button的样式，原始按钮属性是由浏览器确定的，我们可以通过jquery ui来修改按钮样式
3）、button方法、属性
4）、建议将<input>改为<button>
15、单选框按钮设置的时候注意的几个问题
1）、比如男女单选框的时候，我们需要把男和女用<label>包裹，而且label标签里面需要for属性，并且要和iput里面的id名称一样，
作用是当我们用鼠标点击男或者女的时候也能选择
<form id="reg_form">
<label for="male">男</label><input type="radio" name="radio" id="male">
<label for="female">女</label><input type="radio" name="radio" id="female">
</form>
2）、input标签中的name属性必须要有，而且各个input的name标签名称必须一样，因为这样才能实现单选按钮的功能
3）、如果要引入插件，并且男女之间没有缝隙，可以在这外面包裹一个标签，然后用这个标签调用buttonset()方法，当然也可以用button()
16、icons：在按钮上面放图标，但是请记住，在button按钮上面放图标的时候，尽量用<button>标签，别用<input>标签
使用方法：
icons:{
primary:"ui-icon-search"
}
17、可以直接在button（）的括号里面添加属性值，比如：disable、enable、destory、refresh
2016.11.30
一、 Ajax:通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，
对网页的某部分进行更新。
1、Ajax：表单插件
1）、传统表单提交----需要多次跳转页面
从服务端获取数据-----获得的是一个页面
导致结果：用户体验不好 极大小号服务器和客户资源、浏览
2、ajaxForm() ajaxSubmit() 两个核心方法
3、ajaxSubmit返回类型：text xml json
4、post请求封装get请求
5、beforeSubmit
6、url：数据请求地址，简单来说就是我们把信息提交给服务器的地址，并且要让服务器把信息返回给我们 ！
type：数据提交方式，分为post和get方式，就是我们用哪种方式提交给服务器！
target：服务器返回的数据在哪里展示，比如我在文本框下面定一个id=box的div标签，target:"#box",表示就在文本框下面展现了
dataType:数据的返回格式，有四种分别是null、xml、text、json
clearForm:成功提交完数据后清空页面上的表单，为boolean类型，true表示清空，false为不清空
resetForm:成功提交完数据后重置页面上的表单，为boolean类型，true表示重置，false表示不重置
clearForm和resetForm的区别：从字面上理解就知道clearForm是清空表单数据，而resetForm是让表单恢复到原先状态，也许表单默认就
有数据！
data:{
aaa:"111",
......
}
表示向表单中加入数据，提交给服务器！
7、beforeSubmit:function(formData,jqForm,options){
return true;//继续向下执行
或者
return false;//程序在此处终止，不再执行
}
（其中：formData可以根据索引来得到表单中的数据：
formData[0].value //表示第一个数据的值
formData[0].name //表示第一个数据的名称
jqForm表示表单的对象
options表示得到表单的属性：
options.type //得到表单请求的方式（post或者get））
8、success:function(responseText,statusText){//responseText表示服务器返回的内容,statusText表示一个标识：success或者error
alert(responseText+","+statusText) //responseText,statusText，形参，可以随便写，但为了表达出其作用，最好写的能让人辨别
}
9、error：function(event,errorText,errorType){//提交失败时使用，errorText表示错误的内容，errorType表示错误的类型
alert(errorText+","+errorType)
}
10、一定要在服务器上运行localhost/文件名，而且要提交的内容要用表单包裹，method和action属性是属于表单的（容易写在submit里面）切记！！
出现输完内容之后内容数据就被清空的原因是因为没有在localhost上运行！
还要看服务器默认能识别哪个文件名称
二、XML
1、什么是DOM：一种文档的标准化模型，比如对于HTML和XML，DOM定义了它们的所有文档元素的对象和属性，以及访问他的方法
XML DOM是用于获取、更改、删除、添加XML元素的标准
2、微软的XML解析器加载XML
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); //第一行创建空的微软 XML 文档对象
xmlDoc.async="false"; //第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
xmlDoc.load("books.xml"); //第三行告知解析器加载名为 "books.xml" 的文档
xmlDoc.loadXML(txt); //告知解析器加载名为 "txt" 的文本。
注释：loadXML() 方法用于加载字符串（文本），而 load() 用于加载文件。
3、火狐及其他浏览器加载XML：
1）、JavaScript 片段把 XML 文档 ("books.xml") 载入了解析器：
xmlDoc=document.implementation.createDocument("","",null); //第一行创建空的 XML 文档对象
xmlDoc.async="false";
xmlDoc.load("books.xml");
2）、JavaScript 片段把名为 txt 的字符串载入解析器中：
parser=new DOMParser(); //第一行创建一个空的 XML 文档对象
xmlDoc=parser.parseFromString(txt,"text/xml"); //第二行告知解析器加载名为 txt 的字符串
注释：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。
4、 函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。
函数 loadXMLString()，位于外部 JavaScript 中，用于加载 XML 字符串。
5、
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
6、responseText：目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。
如果 readyState 为 4，这个属性保存了完整的响应体。
7、responseXML
对请求的响应，解析为 XML 并作为 Document 对象返回。
8、由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时
候读取这一属性会导致一个异常。
9、statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404
的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。
10、事件句柄：
onreadystatechange
每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
11、readyState：返回XMLHTTP请求的当前状态
2016.12.01
1、自动补全的代码需要紧放在需要补全代码的后面
var host=[]；方括号里面的数据为数据源，项目开发时，通过ajax动态的从服务器获得对应的数据，比如把"刘"提交给服务器
//服务器端 根据客户端提交的“刘” 在数据库中查询 { 刘德华，刘庆宇.....} ---查询到的数据返回给客户端
2、datepicker();日历插件
3、tooltip();标题插件
如：$("div input[title]").tooltip({ //里面可以写方法属性
position:{
my:"left center"
at:"right+5 center"
}
})
4、在jquery中用each遍历每个元素：
1）如果元素存在标签、class或id：
$("p").each(function(){
alert(this) //弹出p标签每一个子标签元素
})
2）如果直接是一个数组：
var arr=[1,2,3,5,8,5];
$.each(arr,function(){
alert(this);
})
5、在jquery中用grep过滤一个数组或者集合中的元素，比如我要过滤arr01=[2,5,12,1,66,44,55]中小于12的元素
1）、 例：var arr01=[2,5,12,1,66,44,55]
var temp=$.grep(arr01,function(n,i){n<12}) //在后面还可以填invert判断，默认为false,n<12,true表示>=12
alert(temp)
2）、我要把str="1,5,6,"美国","日本"" 中字符串找出来可以用这个isNaN来判断
例：var str="1,5,6,"美国","日本"" ;
var str02=str.split(","); //先用split的方式把一个字符串以逗号为标识分割成一个个字符串组成的数组
var tmp=$.grep(str02,function(n,i){return isNaN(n)});
alert(tmp)
6、还有一种方式是循环原数组并且可以改变该数组的元素，就是map，比如我要让arr02=[55,11,33,21],中的每个元素增大十倍
例： var arr02=[55,11,33,21]；
$.map(arr02,function(n,i){return n*10})
7、split()方法就是以什么样的方式切割字符串
8、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果等于-1，表示没有检索到该字符串
slice() 方法可从已有的数组中返回选定的元素。slice(start,end)
9、自动补全：
//关闭自动补全
$('#email').autocomplete('close');
//禁用自动补全
$('#email').autocomplete('disable');
//启用自动补全
$('#email').autocomplete('enable');
//删除自动补全
$('#email').autocomplete('destroy');
//获取自动补全 jQuery 对象
$('#email').autocomplete('widget');
$(".text").autocomplete({
source:function(request,response){ //request是一个对象，他有一个属性term,term表示用户输入的内容
response使用来绑定数据源
alert(request.term);//可以获得你输入的值
response(["aa","aaaa","aaaaaa","bb"]) //展示补全结果
},
})
邮箱补全实例：$("#email").autocomplete({
source: function (request, response) {
var hosts = ["qq.com", "163.com" ,"139.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//邮箱域名集合
var term = request.term; //获取用户输入的内容；
var name = term; //邮箱的用户名
var host = ""; //邮箱的域名 例如qq.com、 163.com
// @
var ix = term.indexOf('@'); //@的位置
var result = []; //最终呈现的邮箱列表
//当用户输入的数据（email）里存在@的时候，就重新给用户名和域名赋值
if (ix > -1) { //如果@符号存在，就表示用户已经输入用户名了。
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) { //如果name有值 即：不为空
//如果用户已经输入@和后面的全部或部分域名，那么就找到相关的域名提示，比如abc@1或者abc@163.com 就提示abc@163.com
//如果用户还没有输入@或后面的域名。那么就把所有的域名都提示出来
var getHosts = []; //根据用户名填写的域名我们在hosts里面找到对应的域名集合
if (host) { //并且host也有值的时候
/*
例如 用户输入的@后的字符串为 1，通过下面的$.grep.... getHosts = ["163.com" ,"139.com"]
*/
getHosts = $.grep(hosts, function (val, key) { // 给getHosts赋值
if (val.indexOf(host) > -1) {
return val;
};
});
}
else { //用户 还没有输入@ 后面的内容
getHosts = hosts;
}
// 根据用户是否输入 @ 后面的内容，得到一个新的数组，这个数组里面是 匹配的邮箱域名
// 1 ----- getHosts = ["163.com" ,"139.com"]
//163 ---- getHosts = ["163.com" ]
//163.com ---- getHosts = ["163.com" ]
var abc = $.map(getHosts, function (val) { //这个val就是getHosts里的每个域名元素。
return name + "@" + val;
});
result.push(term);//假如我只定义了qq.com，和163.com这两个邮箱列表，那么在用户输入其他的邮箱的时候我也有提示的功能，比如我在输入abc@yahoo.cn的时候，我也有提示的功能。 这时候，我就需要将用户输入的数据添加到result这个邮箱域名集合当中
result = result.concat(abc);//然后再将abc这个集合也加入到result当中 形成一个新的数组然后赋值给result
}
//result.push(term); //或者这样也行，不过这样的话用term就在数组里面的位置就是最后一个了。提示的时候也就在最后一个了。我们一般想让它显示在第一个
//result.unshift(term); //或者这样也行; unshift方法的作用是：将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
response(result);
// response(abc);
} ,
10、将日历日期汉化代码：
$.datepicker.setDefaults({ //将日历日期该成中文
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
});
$("#birth").datepicker();//调用日历
2016.12.02
1、ajax：Asynchronous JavaScript and XML，（异步的javascript和XML）
2、
1）、 优势：
不需要插件
用户体验好
提高web程序性能
可以减轻带宽负担
2）、 劣势：
不同版本浏览器对xmlhttprequest支持度不同
前进后退功能破坏（因为ajax永远在当前页）
搜索引擎支持度不够
开发调试工具缺乏
3、load()方法
1）、load()方法是jquery封装了的方法，使用load方法需要导入jquery插件
2）、通过jquery封装的，不需要考虑浏览器的兼容性
3）、jquery对ajax进行了三层封装
（1）底层：$.ajax()
（2）第二层：$("#box").load()、$.get()、$.post()
（3）最高层：$.getScript()、$.getJSON()
4)、load()方法中有三个形参：
url:必选，请求url地址,您希望加载的 URL。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
data：可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
callback：可选的 callback 参数是 load() 方法完成后所执行的函数名称。
5）、$(function(){
$("#button").click(function(){
$("#box").load("test.php",
{
url: "abc",
},
function(response,status,xhr){ //response:返回响应的内容；status表示响应的状态：success或者error
if(xhr.status==200){ //xhr:XMLhttprequest对象，它有以下属性：
xhr.status:200（正常） 404（找不到地址）
alert("ppp"); xhr.statusText：OK（正常） Not found（找不到地址）
}else{ xhr.responseText:返回文本内容
xhr.responseXML:如果响应主体是XML格式，返回XML DOM文档
alert("错误！");
}
}
)
})
})
6、get()方法中data的三种形式：
1）、 $.get("test.php?url=abc&name=黄晓明",function(response,status,xhr){//在地址后面加个问号加参数，不同形参用&连接
$("#box").html(response)
})
2）、
$.get("test.php","url=abc&name=李白",function(response){//和前面逗号隔开，把形参写在引号里面，不同形参用&连接
$("#box").html(response)
} )
3）、$.get("test.php",{url:"abc",name:"李白"},function(response){//用花括号{}，写键值对
alert(response)
})
})
7、post()方法中data的两种形式：(post不能使用问号传参)!
1）、 $.post("test.php","url=abc&name=李白",function(response){//和前面逗号隔开，把形参写在引号里面，不同形参用&连接
$("#box").html(response)
} )
2）、$.post("test.php",{url:"abc",name:"李白"},function(response){//用花括号{}，写键值对
alert(response)
})
8、//PHP(test.php)文件返回的数据是纯文本，默认是html或text
$('input').click(function () {
$.post('test.php', {
url : 'ycku'
},function (response, status, xhr) {
$('#box').html(response);
}, 'html');
});
9、从服务器json文件中返回来的内容：
$.post("test.json",function(response,status,XMLhttprequest){
alert($(response)[0].url); //因为json中都是对象组成的数组，有索引，根据索引来得到
})
10、从服务器XML文件中返回来的内容：
$.post("test.xml",function(response,status,xmlhttprequest){
alert($(response).find("root").find("boss").text())//通过find来找到其中root子节点下面boss节点下面的文本节点
})
11、 //如果服务器返回的数据格式为html，则在客户端加载整张网页
$('input').click(function () {
$.post('test.html',function (response, status, xhr) {
//alert(response);
$('#box').html(response);
}, 'html'); //默认type就已经是xml
});
12、
//如果服务器返回的数据的格式为xml，强行设置为html，则会连xml标签也返回
$('input').click(function () {
$.post('test.xml',function (response, status, xhr) {
alert(response);
}, 'html'); //默认type就已经是xml
});
2016.12.05
1、验证插件：
2016.12.06
1、cookie是网页用来在客户端保存数据的一种小文件，如 用户登录信息，购物信息...微小数据的保存，较为持久的保存，数据存储在磁盘上
网页无法操作磁盘，所以网页是无法将自己保存在磁盘上，所以需要用cookie来将网页上的小数据较为持久的保存在磁盘上。
需要先导入cookie插件
2、$.cookie("user","data",{
expires:7,//七天后，这个cookie数据失效
path:"/", //路径
domain:"www.bbb.com"，//域名
secure:true, //以加密的方式保存
});
3、过期时间 expires
路径
域名
设置cookie是否需要用加密的方式保存，默认为false
4、alert($.cookie("user"));得到名称为user的 数据，多个的话取第一个
//加密后就无法用此方法得到cookie的值
5、$.cookie.raw=false,//默认为false，false为要编码，true不编码
$.cookie("user","郭碧婷"),
alert($.cookie("user"));//会自动解码
alert($.cookie().user);//得到名为user的数据
6、删除cookie数据
$.removeCookie("user",{ //根据指定路径删除cookie的内容
path:"/",
});
7、<a href="javascript:void(0)">dd</a> //空链接
8、实现注册和登录的功能
1）、先写4个标签 用户 注册 |登录 退出
原因是先将用户和退出隐藏起来，就是注册|登录，在重置表单之前就要保存用户名，
$.cookie("user",$("#user").val())
然后再表单提交成功的代码后面写上
//显示用户，退出，隐藏注册，登录
$("#remember,#login_out").show();
$("#reg_a,#login_in").hide();
$("#remember").html($.cookie("user"));
2）、退出时就用if判断：
//如果已经有登录命令，再怎么刷新都不会取消登录
if($.cookie("user")){
$("#remember,#login_out").show();
$("#reg_a,#login_in").hide();
$("#remember").html($.cookie("user"));
}else{
$("#remember,#login_out").hide();
$("#reg_a,#login_in").show();
}
//点击退出时
$("#login_out").click(function(){
$.removeCookie("user");
window.location.href="/code2/";
})
3）、判断用户名是否已经被注册就用remote判断：
rules规则里面：
remote : { //用户名相同就会报错
url : 'is_user.php',//这php文件要写判断逻辑
type : 'POST',
},
massages规则里面：
remote : '帐号被占用！',
登录功能：
实现保存七天的功能：先写一个checked框，然后用if语句判断：
if ($('#check').is(':checked')) {
$.cookie('user', $('#login_user').val(), {
expires : 7,
});
} else {
$.cookie('user', $('#login_user').val());
}
其他的和注册类似
2016.12.7
1、tabs()选项卡
2、accordion()折叠菜单
//省加载该市的数据(省的表单元素在java代码中产生的, jquery第一次扫描dom表单时不存在, 所以要用live方法为未来产生的元素绑定一个change值改变事件处理函数)
$("select[name=province]").live("change",function(){
StackOverFlow 优快云 vs layer ajax jq22插件
一、
1、html ：超文本标记语言，一种网络语言
2、JavaWeb里面的项目都是通过浏览器+网页来显示效果的
二、固定规范：
1、有一个开始<html> 与之对应的结束标签</html>
2016.11.16
一、
1、html标签是成对出现的，有开始标签和结束标签
2、html不区分大小写
3、换行：<br/> 换行横线<hr/> <p></p>段落标签
4、html的操作思想：html里面的内容都是用标签来包裹，如果要改变内容的样式和风格，只需要改变标签的属性。
5、文字标签<font/></font>:
1)、文字大小：size(1~7) 大于7时默认为7
2)、文字颜色：color 设置方式：手写 、颜色面板上找（16进制）
3）、html文字注释<!----->
4）、<p></p>段落标签
5）、b表示粗体 i表示斜体 u表示下划线 s表示删除标签
6、标题标签<h1></h1> (h1~h6) 大小从大到小
<html>效果为<html> 因为如果直接写<html>会默认标签不会显示
 :空格符号
&:连接符号
7、列表标签：
1）、<d1><dt>亚洲</dt>
<dd>中国</dd>
<dd>日本</dd>
</d1> 表示列表的范文
dt表示上层内容，dd表示下层内容
效果：亚洲
中国
日本
8、有序标签：<ol type="1">
<li>张柏芝</li>
<li>钟欣桐</li>
<li>黄圣依</li>
</ol>
效果：1.张柏芝
2.钟欣桐
3.黄圣依
9、无序标签：默认实心圆 空心圆circle
<ul>
<li>张柏芝</li>
<li>钟欣桐</li>
<li>黄圣依</li>
</ul>
效果：
?张柏芝
?钟欣桐
?黄圣依
10、在网页中嵌入图片，通过标签<img width="88" height="99" src="图片路径"/>
图片路径：绝对路径、相对路径
一般用相对路径的方式，图片和网页文件要在同一个目录下，如果在文件的下一层需要加一个文件夹名称
如果在网页文件的上一层，表示方式为../img.jpg
11、<a></a>是超链接标签
<a href ="网址">请点击这里</a>
<a href ="#">不跳转到其他页面</a>
align="";调整文字位置
12、定位资源:<a name="top">顶部</a>
<a href="#top">回到顶部</a>//意思是回到“顶部”这两个字这个位置
13、原样输出：<pre >内容</pre>
14、表格标签：没有列一说，一行一行的布置，在每行里面加入单元格
<table></table>
<tr></tr> 行，放置于table中
<td></td> 单元格，放置于tr中
<th/><th> 单元格，和td差不多，但可以把字体加粗
border设置表格线的粗细 ，是属性，放在标签中
合并单元格：
rowspan="4" 横向合并
colspan="3" 竖向合并
15、表单标签：
<form>
<input type="txt"/>//如果不设置value属性，默认为on
</form>
文本：txt；密码：password；单选按钮：radio，后面必须加上name属性，且必须相同,否则不能单选，复选框：checkbox，设置name属性，
而且必须相同，导入文件:file; 提交表单数据至表单处理程序：submit,重置按钮<input type="reset"/>，填写的数据清空
下拉框<select name="dd" value ="name">
<option values="aa">aa</option>
注：在使用表单标签的时候有一个原则，在输入项里面需要输入name属性，其数据会被拼接到网上，传输到服务器上面
16.frame _top _parent _self _blank表示新开页面
values 会显示出汉字
2016.11.17
一、1、（1）、<form action ="网址" method="post"></form>把信息提交给哪个网址
<input type="password" name ="pwd" >
注册页面中的数据最终会提交给服务器的某个文件，action设置提交数据的地址，若不指定地址就默认提交给当前页面，默认当前
（2）、method 设置表单提交数据的方式两种get和post，post提交方式更安全
get和post的区别：
get请求：
1）、地址栏会显示提交的数据，安全级别低，
2）、而且数据大小有限制，数据最终会拼接到网址上。
post请求：
1）、将数据置于请求体里面，较为安全，
2）、post提交的数据大小没有限制。
（3）
1）、 <input type="radio" name="sex" checked="checked">男<input type ="radio" name="sex">女<br/>
<input type="checkbox" name="box" checked="checked">游泳
checked的作用是在单选按钮和复选框上面预先指定一个，然后我们自己用鼠标修改
2）、<select name="borth_month"/>
<option name="月" >月</option>
<option name="1"selected="selected">1</option>
selected的作用是在下拉菜单里预先设置一个值，然后自己修改
（4）、注册按钮<input type="submit" value ="注册"/>改为<input type="image" src="1.jpg"/>，注册按钮就会变成我们
导入的图片1.jpg。
（5）、其他常用标签：
b:加粗；s：删除线；u:下划线；i:斜体；sub：下标；sup上标；p：段落；
css: div自动换行
span：在一行显示
（6）、在css样式设置里面：
1）、添加下划线：text-decoration:underline;
2)、删除线： text-decoration:line-through;
2、滚动字幕;<marquee></marquee>
align:对其方式：top/middle/bottom
bgcolor:设置文字卷动范围的背景颜色
loop:文字卷动次数
height:设定字幕高度
width:设定字幕宽度
scrollamount:指定每次移动速度，值越大移动越快
scrolldelay:文字每次滚动的停顿时间，单位毫秒，时间越短滚动越快
hspace:指定字幕左右空白区域的大小
vspace:指定字幕上下空白区域的大小
direction：指定文字卷动方向，left/right/up/down
behavior:指定移动方式，scroll表示滚动播出，slibe表示滚动到一方后停止，alternate表示滚动到一方后向相反的方向滚动
3、<frameset clos="40%,40%,*">
<frame src="">
</frameset>
把一个窗口分成几份clos竖直方向、rows水平方向
二、css:层叠样式表(让网页更好看，减少重复代码，提高功能性，提高后期代码的可维护性)
css不能单独存在，必须依附于html文件，主要是修改网页的外观，可以解决html样式代码的重复定义，可以提高后期
代码的可维护性，并且增加网页的效果（好看），css就是讲网页内容和样式相互分离，提高代码的可维护性和功能性。
1、css和html的四种结合方式：
1）、每个html标签都有一个style属性，把css和html结合在一起,style作为属性
格式：style="属性：属性值；属性：属性值；"
<div style="background-color:red;color:green">千里之行始于足下，九成之台始于足下</div>
2）、让html的样式和内容相互分离，css写在head头标签中style作为标签
<style >
div{background-color:blue;
color:green}
</style>
</head>
<body>
<div >千里之行始于足下，九成之台始于足下</div>
</body>
3）、在style标签中使用，@import url(css的文件路径)，将css单独创建一个css文件，这样实现html和css的分离
缺点：在某些浏览器中不起作用，兼容性差，一般使用第四种
4）、使用头标签引入外部css文件，首先创建一个css文件
<link rel="stylesheet" type="text/css" href="div.css"/>
2、css的基本选择器：css的优先级：由上到下，由外到内，优先级有低到高
1）、标签选择器
选择器名称：{属性与属性值之间以冒号":",多个值之间以空格隔开；属性之间以分号";"隔开
属性：属性值；
属性：属性值；
........
}
<style >
div{background-color:blue;
color:green}
</style>
</head>
<body>
<div >千里之行始于足下，九成之台始于足下</div>
</body>
2）、类选择器class，每个标签都有class属性，class属性可以作为选择器的名称
div.aa2{background:green;
color:blue;
}
<div class="aa2" >千里之行始于足下</div>
3）、id选择器：每个html标签都是有id属性，这个id值就是选择器的名称（#id），每个标签的id都不能与其他标签相同，
id是唯一的身份标识。
#mm{background:green;
color:blue;
}
<div class="aa2" id="mm">千里之行始于足下</div>
3、css的扩展选择器
4、css的盒子模型：目前编写页面的主流思想，每个页面都需要div包裹起来，若要修改这个模型的样式，只需要设置这个div
将不同的模型封装到不同的div里面
使用css来定义这些div页面模式
margin外边框 padding内边框 padding-(四个方向)
border-top border-bottom border-right border-left
5、css的布局漂浮：float（一般不用，有些浏览器不兼容）
left（文本流，向对象的右边） right（向对象的左边） none(默认为不漂浮)
6、css的布局定位：
position漂浮：
static 默认值：无特殊定位，队形遵循html定位原则
absolute 将对象从文档流中拖出 使用left right top bottom 对其进行绝对定位
relative相对定位
216.11.18
1、font-style的三种属性：
normal-文本正常显示
italic-文本斜体显示
oblique-文本倾斜显示
2、id选择器>class选择器>标签选择器
如果id选择器、class选择器、标签选择器共同存在的话 ，如果里面有相同的属性，优先级高的会替代优先级低的，如果作用一个内容中的
几个选择器的属性都不一样，会产生叠加的效果，but 如果在一个标签中写上<div class="aa" id="bb" style="color">内容</div>
就会以style为准
3、扩展选择器:关联选择器，组合选择器，伪类元素选择器
1）、关联选择器： 语法外面的标签+空格（必须有空格）+里面的标签
2）、组合选择器：（不同内容设置成相同的属性）
标签（class、id）+","+另外一个标签（class、id）
3）、伪类选择器：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
4）、伪元素选择器：
"first-line" 伪元素用于向文本的首行设置特殊样式 fist-letter对第一个字母设置
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
4、 <meta http-equiv="refresh" content="2;url=href.html"/ ><br/> ;//两秒后转转到href.html的文件页面中
<a href="href.html" target="_self">立即跳转</a>
5、<embed> 标签定义嵌入的内容，比如插件。wmode:窗口；transparent:透明
<embed src="../javaweb04/homework01/flash/1.swf" width="300px" height="100px" wmode="transparent" />
6、title可以在鼠标放的地方显示出来
7、 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：
div
{
overflow-x:hidden;
}
8 、text-shadow:5px 5px 5px red; 文本阴影
2016.11.21
二、javascript
1、javascript是一种脚本语言，嵌套在html中，和静态页面相结合，是基于对象和事件驱动的脚本语言，主要应用于客户端
理解：javascript是嵌套在html中，使静态页面产生动态效果，并且基于对象和事件驱动的一种脚本语言！
特点：交互性、安全性、跨平台性
基于对象：对象创建好了，直接拿过来用
驱动时间：点击事件、滑动事件。。。
客户端：本地的浏览器，也就是说js是在浏览器中运行的html、css、js都是通过浏览器执行，称之为前端语言
2、1）、交互性：客户端和服务端能够互相交互
2）、安全性：不能操作本地磁盘
3）、跨平台性：可以跨平台
3、javascript和java没有关系，js是网景公司，java是（sun公司）后被oracle收购
4、js和java的区别：js是网景公司开发的一种脚本语言，是基于对象，只需要浏览器解析就可以执行，是一种弱类型的语言
java是sun公司开发的，是面向对象的，java需要先编译成字节码文件再执行
5、js由3个部分组成：ECMAScript(解释器)、BOM（操作html的能力）、DOM（浏览器）
6、javascript不能单独使用，需要和html结合使用，两种方式：
1）、使用标签<script type="text/javascript"></script>
2）、新建一个js文件，用<script type="text/javascript" src="xx.js"></script>引入
在body中，两种结合方式取其一
7、alter();弹出对话框
8、js基本语法：
1）、变量函数运算符区分大小写
2）、每行末尾的分号可以写可不写，但建议写
3）、js中原始类型有5种，都是用关键字var
5种类型：String number boolean null undifined
例如：var str="你好"；
var num=222；
var boolean=true;
var s;//结果会是undifined
alert(str+","+typeof(str));
typeof判断是什么数据类型
9、if switch for while do..while
1)、switch分支语句，switch(x)中的x支持所有数据类型
10、字符串+数字为连接，字符串若为数字，能和一个数进行减法运算，若不为数字和一个数相减
会得到一个非数NaN
11、boolean 中false默认位0或者null，true默认为1；
12、"==""==="
1) 、"=="值相等，就为true，左右两边可能数据类型不相等
var s="123";
if(s==123）{
alter(s);
}else{
alter("dad");
} //结果为123，为true
2) 、"===",不仅数值相等，类型也要相等
13、打印document.write();里面可以为常量、变量、html代码
14、数组的定义：三种方式
1）、静态var arr=[2,"hello",null,true,6,7]; 注意和java区别开
2）、动态var arr=new Array(5);数组长度为5；//里面的元素为一个代表数组长度
3）、var arr= new Array(125,15,12,3,1)和第一种一样
数组的长度可以变化，而且可以储存不同类型的数据 数组长度length
15、方法的定义：3中形式
1）、function 方法名（形参列表）{//形参列表直接写变量名
方法体
返回值可有可无，根据业务需求
如果用return返回，则调用的时候要用alert()或者document.write();
}
2）、匿名方法 ：常用
var test=function(){}
3）、动态方法
使用js中的内置对象Function()
var test= new Function("形参列表"，"方法体");
二、计时器
1、setInterval
2、setTimeout
三、getElementById：通过id获得元素
2016.11.22
一、
1、java和js中方法的区别：
java中有重载，js中没有
js的方法体中，都有一个默认没有显示的数组
js的方法的新参没有赋值类型
2、line-height线条高度，设置可以让图片上的文字在中间
在js中点击按钮跳转页面：window.location.href="url"
3、var date= new Date(); 打印当地时间
document.write(date.toLocaleString());
//2016/11/23 上午8:52:37
4、var arr=[2,5,6];
var arr2=[3,69,1];
var arr3=["李元帅"];
document.write(arr.concat(arr2,arr3));
//2,5,6,3,69,1,李元帅 用于连接各个值
document.write(arr.join("--"));//join就是表示用什么连接符号来连接
5、var str="how are you doing ,yes ok";
document.write(str.split(""));//从什么地方分割
//h,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,,,y,e,s, ,o,k
//2--5--6
6、document.getElementById("div").innerHTML="<div id='div1'></div>"//这里面是标签里面的内容
2016.11.23
一、日期date
二、Math
1、Math.max(2,3);返回其中较大值
2、Math.min(2,3);返回其中较小值
2、Math.round(2.56);四舍五入
三、全局方法：
1、eval("方法体");
四、
1、encodeURI不编码的字符有82个
decodeURI 解码
2、encodeURIComponent不编码的字符有71个
decodeURIComponent 解码
例子
var str="你好，我是的嘛李渊算"
var stre=encodeURIComponent(str);
document.write(stre+"<br/>");
var strd=decodeURIComponent(stre);
document.write(strd+"<br/>");
3、isNaN是非数
document.write(isNaN(123));//结果false，不是非数
4、var f=parseFloat("44","55");
document.write(f);//44
var f=parseFloat("44.52");
document.write(f);//44.52
var f=parseFloat("44.0");
document.write(f);//44
5、arguments 数组名
五：BOM对象
navigator的属性，得到浏览器信息
1、document.write(navigator.appName);//当前浏览器名称
2、useAgent
screen得到浏览器屏幕的信息
history 历史信息 back forward go
window
3、confirm()和alert（）类似，confirm有确定取消按钮
当confirm为true，点击确定弹出的是为true时的内容，反之是取消的内容
2016.11.24
1、阻止定时器不断创建对象的方法：
方法一：if()判断
if(id==null){
id=setInterval(test,1000)在继续方法中
}
clearInterval();//在暂停方法中
id=null;
2、innerHTML和value返回的值是string类型
二、jQuery:是一个javaScript函数库
YUI Prototype Mootools Dojo ExtJS
在html中 src="jquery数据库路径"
1、$表示jQuery对象，所以文件中的$可以替换成jQuery
2、prototype、jQuary、base都是用$作为起始符
3、jquery是比较优秀的js库
4、$(function(){//调用jquery的方法
$("input").click(function(){//作用在哪个标签上，用什么事件触发，然后这个标签要干嘛，调用方法
$("p").hide();//找到了这个标签要干嘛
})
})
5、基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
6、var jq=jQuery.noConflict(), 把jq代替$符号使用
2016.11.25
一 、jquery选择器的使用：
1、能够方便快速的找到html标签，并且可以设置其样式
jquery选择器浏览器兼容性比较好支持（css1-css3）
$("p").css（"color","red"） 得到标签的对象后，设置其样式
$("p").click(function(){ //得到标签后，为其定义事件
alert("第一个jquery代码")
})
2、 $("*") 选取所有元素 //$("*").hide();隐藏所有
$("#div") id="div"的元素；
$(".ss") 所有class="ss"的元素；
$("p") 所有<p>元素；
$(".mm .aa") 所有class="mm"下所有class="aa"的元素；
$("p:first") 第一个<p>元素；
$("p:last") 最后一个<p>元素；
$("tr:even") 所有偶数<tr>元素；
$("tr:odd") 所有奇数<tr>元素；
$(":contains('haha')") 包含指定字符串的所有元素；
$("p:hidden") 所有隐藏的<p>元素；
$("th,td.dd")所有带有匹配选择的元素;
$("[href]") 所有带有href属性的元素；
$("[href='#']") s所有href的值等于"#"的元素；
$("[href!='#']") 所有href的属性值不等于"#"的值；
$("href$='.jpg'") 所有href的值带有‘.jpg’结尾的元素；
$(":input") 所有<input>元素；
$(":text") 所有type="text"的<input>元素
$(":botton") 所有type="botton"的<input>元素
其他类型类似
2、事件
$("p").slideToggle();//使用滑动效果
$("p").hide(1000);//p段落在1秒之内慢慢消失
$("p").show(1000);//p段落在1秒之内慢慢出现
$("p").toggle(可以加时间)；//隐藏和显示来回切换
3、淡入淡出
fadeIn //淡入
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
fadeOut //淡出
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
4、//如果有多个<p>标签，eq(0)表示第一个，eq(1)表示第二个
$(function(){
$("p").eq(1).css("color","red");
})
5、//size()表示标签的个数
$(function(){
alert($("p").size());
})
6、//get(i),
//判断第i个元素是否存在
7、var div=document.getElementById("div");
div.style.fontSize="20px";设置标签中字体的大小
8、jquery ui是以js为基础的 页面的控件
9、jquery是制作网页的，封装了js和css、ajax，操作起来更加方便，简洁，减少写代码的量
问题：页面控件上面的一个标签上面有许多的class，他们的作用分别是什么
2016.11.26
1、$("div>p").css("color","red");//p是div的子标签，这表示可以改变div的子标签的样式，
等价于$("div").children(p).css("color","red")
2、$("div+p").css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div下面的那个p标签的样式；
等价于$("div").next(p).css("color","red")
3、$("div~p").css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div下面的所有p标签的样式；
等价于$("div").nextAll(p).css("color","red")
4、$("div").prev("p")css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div上面的那个p标签的样式；
5、$("div").prevAll("p")css("color","red");//<div>和<p>标签是同一级的标签，这表示改变div上面的所有p标签的样式；
6、$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止
7、$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止
8、$("a[title^='你']")//对title属性值开头为“你”的a标签进行操作
9、$("a[title$='你']")//对title属性值结尾为“你”的a标签进行操作
10、$("a[title*='你']")//对title属性值“你”的所有a标签进行操作
2016.11.27
1、如果导入了base库，就会和jquery发生冲突，可以这样：
jQuery.noCoflict();
var $$=jQuery;
$(function () {
alert($('#box').ge(0));
alert($$('#box').width());
});
2、页面标签可以置于js代码的后面
2016.11.28
1、jquery能够非常方便的得到html页面中的任何元素对象、
2、能够动态的对元素的对象设置样式和属性
3、容错性比较高，如果没有元素对象不会报错
4、若没有特殊要求，id和class之间优先选用id，效率会更高
5、id选择器：通过id值获得所在标签的元素对象，然后对元素对象进行操作
6、过滤选择器：通过特定的过滤规则来筛选出所需的元素对象，以":"开头
7、gt(x)/lt(x)索引值大于x或者小于x $("div:gt(2)").css("color","red");索引值大于2的元素对象眼色设置为红色
8、header //头标签，表示所有<h><h>头标签
9、改变<input type="text" value="都比">里面的value值：
$(function(){
$("input").val("我改成嘿嘿嘿了");
})
10、$("div:empty").text("我把猴子换了")
<div></div>//可以在空标签中添加文字
11、has()方法
$("div:has(a)").css("color","green");//div中包含a标签，如果用has，最好外围是div
12、hidden()方法
$("#dd").hide();
$("#dd:hidden").show(2000) //将id为dd的隐藏内容在2秒内显示出来
$("#dd").css('border','1px solid #ff6699');
$("div:visible").css("color","red");//将可见的div标签中的内容变成红色
13、CSS text-decoration 属性 a {text-decoration: none} //消除链接中的下划线
14、line-height 行间距离 text-indent：5px;首行缩进
15、$("p:contain('数字'").css("color","red");//所有包含数字两个字的都会变成红色
2016.11.29
1、jquery中对话框dialog，dialog可以代替js中alert
语法：$("#aa").dialog()//()里面可以写很多东西
2、 可以同时打开多个dialog，只要设置不同的id；
3、对话框弹出位置：上下左右：top bottom left right
左上：left top 左下：left bottom
右上:right top 右下:right bottom
默认为中：center
注意：左上，左下，右上，右下必须以left或者right在前面才有效果
4、设置宽度：
width:400,
height:400,//后面是逗号，然后没有px；
5、enable/disable 对可选和不可选的元素进行操作
6、<input type="text" disabled="disabled"> //该文本框不可选
7、在jQuery中只有花括号或者没有括号，得用逗号"，"隔开，像"})"可以跟分号";"
8、buttons的用法：buttons是为对话框增加按钮的属性，比如要在对话框中添加取消确定按钮，可以按下面方法：
buttons:{
"确定":function(){},
"取消":function(){},
}
9、关闭对话框的方法：
$(this).dialog("close") //关闭对话框本身，this可以换成标签、class、id
$(this).dialog("open") //打开对话框本身，this可以换成标签、class、id
10、对话框尺寸的设置：
对话框尺寸的设置有：width,height,maxWidth,minWidth,maxHeight,minHeight;
设置的方式：
$("#reg").dialog({
width:520,
heigth:1314,
......
})
我们发现两个问题，创建的对话框可以调整大小，怎么办，可以用一个属性：resizable，默认是true,可以调整大小的
还有就是移动问题，如果不想让他移动，可以用draggable，默认为true，可以移动
resizable:true, //可以调整大小
resizable:false, //不能调整大小
draggable:true, //可以移动
draggable:false, //不可以移动
11、使用show和hide属性实现淡入淡出的效果
show:true, //淡入
hide:true, //淡出
show和hide的特效：
1）、blind
2）、bounce
3）、clip
4）、slide
5)、drop
6）、fold
7）、highlight
8）、puff
9）、scale
10）、pulsate
使用方式：
show="blind",
hide="bounce",
12、modal ：当弹出对话框时我们可以使用modal来限制用户对弹出框以外的界面进行操作，默认为false，可以操作
使用方式：
modal:true, //不能操作
modal：false, //可以操作
13、dialog方法的事件
分别有focus、create、open、beforeClose、close
形式：create:function(e,ui){//创建时的事件，可以是对话框，比如我要创建一个对话框是，弹出一个对话框，问是不是要创建一个
("#div").dialog({ 对话框，这个框我可以创建两个按钮，分别是“确定“和“取消”，点击“确定”时，我们可以绑定一个创建另外
buttons:{ 一个对话框的事件，当点击“取消”，调用关闭当前对话框的属性,还有一个更实际的实例，我们玩LOL的时候
"取消":function(){ 不小心点到了有上角的叉叉，如果不在退出之前进行判断一下的话，尤其是在打排位选英雄的时候，一点叉叉就退
$(this).dialog("close"); 出，那就太坑了
},
"确定":function(){
$(this).dialog("close")
("#div2").dialog({
........
})
},
},
})
},
14、按钮：（button）
1）、使用button
2）、修改button的样式，原始按钮属性是由浏览器确定的，我们可以通过jquery ui来修改按钮样式
3）、button方法、属性
4）、建议将<input>改为<button>
15、单选框按钮设置的时候注意的几个问题
1）、比如男女单选框的时候，我们需要把男和女用<label>包裹，而且label标签里面需要for属性，并且要和iput里面的id名称一样，
作用是当我们用鼠标点击男或者女的时候也能选择
<form id="reg_form">
<label for="male">男</label><input type="radio" name="radio" id="male">
<label for="female">女</label><input type="radio" name="radio" id="female">
</form>
2）、input标签中的name属性必须要有，而且各个input的name标签名称必须一样，因为这样才能实现单选按钮的功能
3）、如果要引入插件，并且男女之间没有缝隙，可以在这外面包裹一个标签，然后用这个标签调用buttonset()方法，当然也可以用button()
16、icons：在按钮上面放图标，但是请记住，在button按钮上面放图标的时候，尽量用<button>标签，别用<input>标签
使用方法：
icons:{
primary:"ui-icon-search"
}
17、可以直接在button（）的括号里面添加属性值，比如：disable、enable、destory、refresh
2016.11.30
一、 Ajax:通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，
对网页的某部分进行更新。
1、Ajax：表单插件
1）、传统表单提交----需要多次跳转页面
从服务端获取数据-----获得的是一个页面
导致结果：用户体验不好 极大小号服务器和客户资源、浏览
2、ajaxForm() ajaxSubmit() 两个核心方法
3、ajaxSubmit返回类型：text xml json
4、post请求封装get请求
5、beforeSubmit
6、url：数据请求地址，简单来说就是我们把信息提交给服务器的地址，并且要让服务器把信息返回给我们 ！
type：数据提交方式，分为post和get方式，就是我们用哪种方式提交给服务器！
target：服务器返回的数据在哪里展示，比如我在文本框下面定一个id=box的div标签，target:"#box",表示就在文本框下面展现了
dataType:数据的返回格式，有四种分别是null、xml、text、json
clearForm:成功提交完数据后清空页面上的表单，为boolean类型，true表示清空，false为不清空
resetForm:成功提交完数据后重置页面上的表单，为boolean类型，true表示重置，false表示不重置
clearForm和resetForm的区别：从字面上理解就知道clearForm是清空表单数据，而resetForm是让表单恢复到原先状态，也许表单默认就
有数据！
data:{
aaa:"111",
......
}
表示向表单中加入数据，提交给服务器！
7、beforeSubmit:function(formData,jqForm,options){
return true;//继续向下执行
或者
return false;//程序在此处终止，不再执行
}
（其中：formData可以根据索引来得到表单中的数据：
formData[0].value //表示第一个数据的值
formData[0].name //表示第一个数据的名称
jqForm表示表单的对象
options表示得到表单的属性：
options.type //得到表单请求的方式（post或者get））
8、success:function(responseText,statusText){//responseText表示服务器返回的内容,statusText表示一个标识：success或者error
alert(responseText+","+statusText) //responseText,statusText，形参，可以随便写，但为了表达出其作用，最好写的能让人辨别
}
9、error：function(event,errorText,errorType){//提交失败时使用，errorText表示错误的内容，errorType表示错误的类型
alert(errorText+","+errorType)
}
10、一定要在服务器上运行localhost/文件名，而且要提交的内容要用表单包裹，method和action属性是属于表单的（容易写在submit里面）切记！！
出现输完内容之后内容数据就被清空的原因是因为没有在localhost上运行！
还要看服务器默认能识别哪个文件名称
二、XML
1、什么是DOM：一种文档的标准化模型，比如对于HTML和XML，DOM定义了它们的所有文档元素的对象和属性，以及访问他的方法
XML DOM是用于获取、更改、删除、添加XML元素的标准
2、微软的XML解析器加载XML
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); //第一行创建空的微软 XML 文档对象
xmlDoc.async="false"; //第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
xmlDoc.load("books.xml"); //第三行告知解析器加载名为 "books.xml" 的文档
xmlDoc.loadXML(txt); //告知解析器加载名为 "txt" 的文本。
注释：loadXML() 方法用于加载字符串（文本），而 load() 用于加载文件。
3、火狐及其他浏览器加载XML：
1）、JavaScript 片段把 XML 文档 ("books.xml") 载入了解析器：
xmlDoc=document.implementation.createDocument("","",null); //第一行创建空的 XML 文档对象
xmlDoc.async="false";
xmlDoc.load("books.xml");
2）、JavaScript 片段把名为 txt 的字符串载入解析器中：
parser=new DOMParser(); //第一行创建一个空的 XML 文档对象
xmlDoc=parser.parseFromString(txt,"text/xml"); //第二行告知解析器加载名为 txt 的字符串
注释：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。
4、 函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。
函数 loadXMLString()，位于外部 JavaScript 中，用于加载 XML 字符串。
5、
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
6、responseText：目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。
如果 readyState 为 4，这个属性保存了完整的响应体。
7、responseXML
对请求的响应，解析为 XML 并作为 Document 对象返回。
8、由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时
候读取这一属性会导致一个异常。
9、statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404
的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。
10、事件句柄：
onreadystatechange
每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
11、readyState：返回XMLHTTP请求的当前状态
2016.12.01
1、自动补全的代码需要紧放在需要补全代码的后面
var host=[]；方括号里面的数据为数据源，项目开发时，通过ajax动态的从服务器获得对应的数据，比如把"刘"提交给服务器
//服务器端 根据客户端提交的“刘” 在数据库中查询 { 刘德华，刘庆宇.....} ---查询到的数据返回给客户端
2、datepicker();日历插件
3、tooltip();标题插件
如：$("div input[title]").tooltip({ //里面可以写方法属性
position:{
my:"left center"
at:"right+5 center"
}
})
4、在jquery中用each遍历每个元素：
1）如果元素存在标签、class或id：
$("p").each(function(){
alert(this) //弹出p标签每一个子标签元素
})
2）如果直接是一个数组：
var arr=[1,2,3,5,8,5];
$.each(arr,function(){
alert(this);
})
5、在jquery中用grep过滤一个数组或者集合中的元素，比如我要过滤arr01=[2,5,12,1,66,44,55]中小于12的元素
1）、 例：var arr01=[2,5,12,1,66,44,55]
var temp=$.grep(arr01,function(n,i){n<12}) //在后面还可以填invert判断，默认为false,n<12,true表示>=12
alert(temp)
2）、我要把str="1,5,6,"美国","日本"" 中字符串找出来可以用这个isNaN来判断
例：var str="1,5,6,"美国","日本"" ;
var str02=str.split(","); //先用split的方式把一个字符串以逗号为标识分割成一个个字符串组成的数组
var tmp=$.grep(str02,function(n,i){return isNaN(n)});
alert(tmp)
6、还有一种方式是循环原数组并且可以改变该数组的元素，就是map，比如我要让arr02=[55,11,33,21],中的每个元素增大十倍
例： var arr02=[55,11,33,21]；
$.map(arr02,function(n,i){return n*10})
7、split()方法就是以什么样的方式切割字符串
8、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果等于-1，表示没有检索到该字符串
slice() 方法可从已有的数组中返回选定的元素。slice(start,end)
9、自动补全：
//关闭自动补全
$('#email').autocomplete('close');
//禁用自动补全
$('#email').autocomplete('disable');
//启用自动补全
$('#email').autocomplete('enable');
//删除自动补全
$('#email').autocomplete('destroy');
//获取自动补全 jQuery 对象
$('#email').autocomplete('widget');
$(".text").autocomplete({
source:function(request,response){ //request是一个对象，他有一个属性term,term表示用户输入的内容
response使用来绑定数据源
alert(request.term);//可以获得你输入的值
response(["aa","aaaa","aaaaaa","bb"]) //展示补全结果
},
})
邮箱补全实例：$("#email").autocomplete({
source: function (request, response) {
var hosts = ["qq.com", "163.com" ,"139.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//邮箱域名集合
var term = request.term; //获取用户输入的内容；
var name = term; //邮箱的用户名
var host = ""; //邮箱的域名 例如qq.com、 163.com
// @
var ix = term.indexOf('@'); //@的位置
var result = []; //最终呈现的邮箱列表
//当用户输入的数据（email）里存在@的时候，就重新给用户名和域名赋值
if (ix > -1) { //如果@符号存在，就表示用户已经输入用户名了。
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) { //如果name有值 即：不为空
//如果用户已经输入@和后面的全部或部分域名，那么就找到相关的域名提示，比如abc@1或者abc@163.com 就提示abc@163.com
//如果用户还没有输入@或后面的域名。那么就把所有的域名都提示出来
var getHosts = []; //根据用户名填写的域名我们在hosts里面找到对应的域名集合
if (host) { //并且host也有值的时候
/*
例如 用户输入的@后的字符串为 1，通过下面的$.grep.... getHosts = ["163.com" ,"139.com"]
*/
getHosts = $.grep(hosts, function (val, key) { // 给getHosts赋值
if (val.indexOf(host) > -1) {
return val;
};
});
}
else { //用户 还没有输入@ 后面的内容
getHosts = hosts;
}
// 根据用户是否输入 @ 后面的内容，得到一个新的数组，这个数组里面是 匹配的邮箱域名
// 1 ----- getHosts = ["163.com" ,"139.com"]
//163 ---- getHosts = ["163.com" ]
//163.com ---- getHosts = ["163.com" ]
var abc = $.map(getHosts, function (val) { //这个val就是getHosts里的每个域名元素。
return name + "@" + val;
});
result.push(term);//假如我只定义了qq.com，和163.com这两个邮箱列表，那么在用户输入其他的邮箱的时候我也有提示的功能，比如我在输入abc@yahoo.cn的时候，我也有提示的功能。 这时候，我就需要将用户输入的数据添加到result这个邮箱域名集合当中
result = result.concat(abc);//然后再将abc这个集合也加入到result当中 形成一个新的数组然后赋值给result
}
//result.push(term); //或者这样也行，不过这样的话用term就在数组里面的位置就是最后一个了。提示的时候也就在最后一个了。我们一般想让它显示在第一个
//result.unshift(term); //或者这样也行; unshift方法的作用是：将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
response(result);
// response(abc);
} ,
10、将日历日期汉化代码：
$.datepicker.setDefaults({ //将日历日期该成中文
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
});
$("#birth").datepicker();//调用日历
2016.12.02
1、ajax：Asynchronous JavaScript and XML，（异步的javascript和XML）
2、
1）、 优势：
不需要插件
用户体验好
提高web程序性能
可以减轻带宽负担
2）、 劣势：
不同版本浏览器对xmlhttprequest支持度不同
前进后退功能破坏（因为ajax永远在当前页）
搜索引擎支持度不够
开发调试工具缺乏
3、load()方法
1）、load()方法是jquery封装了的方法，使用load方法需要导入jquery插件
2）、通过jquery封装的，不需要考虑浏览器的兼容性
3）、jquery对ajax进行了三层封装
（1）底层：$.ajax()
（2）第二层：$("#box").load()、$.get()、$.post()
（3）最高层：$.getScript()、$.getJSON()
4)、load()方法中有三个形参：
url:必选，请求url地址,您希望加载的 URL。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
data：可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
callback：可选的 callback 参数是 load() 方法完成后所执行的函数名称。
5）、$(function(){
$("#button").click(function(){
$("#box").load("test.php",
{
url: "abc",
},
function(response,status,xhr){ //response:返回响应的内容；status表示响应的状态：success或者error
if(xhr.status==200){ //xhr:XMLhttprequest对象，它有以下属性：
xhr.status:200（正常） 404（找不到地址）
alert("ppp"); xhr.statusText：OK（正常） Not found（找不到地址）
}else{ xhr.responseText:返回文本内容
xhr.responseXML:如果响应主体是XML格式，返回XML DOM文档
alert("错误！");
}
}
)
})
})
6、get()方法中data的三种形式：
1）、 $.get("test.php?url=abc&name=黄晓明",function(response,status,xhr){//在地址后面加个问号加参数，不同形参用&连接
$("#box").html(response)
})
2）、
$.get("test.php","url=abc&name=李白",function(response){//和前面逗号隔开，把形参写在引号里面，不同形参用&连接
$("#box").html(response)
} )
3）、$.get("test.php",{url:"abc",name:"李白"},function(response){//用花括号{}，写键值对
alert(response)
})
})
7、post()方法中data的两种形式：(post不能使用问号传参)!
1）、 $.post("test.php","url=abc&name=李白",function(response){//和前面逗号隔开，把形参写在引号里面，不同形参用&连接
$("#box").html(response)
} )
2）、$.post("test.php",{url:"abc",name:"李白"},function(response){//用花括号{}，写键值对
alert(response)
})
8、//PHP(test.php)文件返回的数据是纯文本，默认是html或text
$('input').click(function () {
$.post('test.php', {
url : 'ycku'
},function (response, status, xhr) {
$('#box').html(response);
}, 'html');
});
9、从服务器json文件中返回来的内容：
$.post("test.json",function(response,status,XMLhttprequest){
alert($(response)[0].url); //因为json中都是对象组成的数组，有索引，根据索引来得到
})
10、从服务器XML文件中返回来的内容：
$.post("test.xml",function(response,status,xmlhttprequest){
alert($(response).find("root").find("boss").text())//通过find来找到其中root子节点下面boss节点下面的文本节点
})
11、 //如果服务器返回的数据格式为html，则在客户端加载整张网页
$('input').click(function () {
$.post('test.html',function (response, status, xhr) {
//alert(response);
$('#box').html(response);
}, 'html'); //默认type就已经是xml
});
12、
//如果服务器返回的数据的格式为xml，强行设置为html，则会连xml标签也返回
$('input').click(function () {
$.post('test.xml',function (response, status, xhr) {
alert(response);
}, 'html'); //默认type就已经是xml
});
2016.12.05
1、验证插件：
2016.12.06
1、cookie是网页用来在客户端保存数据的一种小文件，如 用户登录信息，购物信息...微小数据的保存，较为持久的保存，数据存储在磁盘上
网页无法操作磁盘，所以网页是无法将自己保存在磁盘上，所以需要用cookie来将网页上的小数据较为持久的保存在磁盘上。
需要先导入cookie插件
2、$.cookie("user","data",{
expires:7,//七天后，这个cookie数据失效
path:"/", //路径
domain:"www.bbb.com"，//域名
secure:true, //以加密的方式保存
});
3、过期时间 expires
路径
域名
设置cookie是否需要用加密的方式保存，默认为false
4、alert($.cookie("user"));得到名称为user的 数据，多个的话取第一个
//加密后就无法用此方法得到cookie的值
5、$.cookie.raw=false,//默认为false，false为要编码，true不编码
$.cookie("user","郭碧婷"),
alert($.cookie("user"));//会自动解码
alert($.cookie().user);//得到名为user的数据
6、删除cookie数据
$.removeCookie("user",{ //根据指定路径删除cookie的内容
path:"/",
});
7、<a href="javascript:void(0)">dd</a> //空链接
8、实现注册和登录的功能
1）、先写4个标签 用户 注册 |登录 退出
原因是先将用户和退出隐藏起来，就是注册|登录，在重置表单之前就要保存用户名，
$.cookie("user",$("#user").val())
然后再表单提交成功的代码后面写上
//显示用户，退出，隐藏注册，登录
$("#remember,#login_out").show();
$("#reg_a,#login_in").hide();
$("#remember").html($.cookie("user"));
2）、退出时就用if判断：
//如果已经有登录命令，再怎么刷新都不会取消登录
if($.cookie("user")){
$("#remember,#login_out").show();
$("#reg_a,#login_in").hide();
$("#remember").html($.cookie("user"));
}else{
$("#remember,#login_out").hide();
$("#reg_a,#login_in").show();
}
//点击退出时
$("#login_out").click(function(){
$.removeCookie("user");
window.location.href="/code2/";
})
3）、判断用户名是否已经被注册就用remote判断：
rules规则里面：
remote : { //用户名相同就会报错
url : 'is_user.php',//这php文件要写判断逻辑
type : 'POST',
},
massages规则里面：
remote : '帐号被占用！',
登录功能：
实现保存七天的功能：先写一个checked框，然后用if语句判断：
if ($('#check').is(':checked')) {
$.cookie('user', $('#login_user').val(), {
expires : 7,
});
} else {
$.cookie('user', $('#login_user').val());
}
其他的和注册类似
2016.12.7
1、tabs()选项卡
2、accordion()折叠菜单
//省加载该市的数据(省的表单元素在java代码中产生的, jquery第一次扫描dom表单时不存在, 所以要用live方法为未来产生的元素绑定一个change值改变事件处理函数)
$("select[name=province]").live("change",function(){
扫一扫
1588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
