jQuery简介

jQuery是一个开源的，JavaScript脚本库。

jQuery体系

部署jQuery开发环境

1. 去网站下载jquery代码

脚下留心：从官方网站同一个版本可以下载2个文件，一个是源文件，一个是压缩文件，我们开发的时候使用压缩文件。

1. 在页面引入jQuery文件

jQuery选择器

jQuery中，所有的操作都要转成jQuery对象进行操作。通过$()将元素转成JQuery对象。

$()=jQuery()

基本选择器

id选择器、class选择器、标签选择器、组合选择器、后代选择器，子类选择器

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<!—引入jQuery文件–>

<script type=”text/javascript” src=’js/jquery-1.11.3.min.js’></script>

<script type=”text/javascript”>

//但页面加载完成时

$(document).ready(function(e) {

//当按钮点击的时候

$(‘#btn’).click(function(e) {

//$(‘#first’).addClass(‘indianred’); //id选择器

//$(‘.second’).addClass(‘indianred’); //class样式

//$(‘th’).addClass(‘indianred’); //标签选择器

//$(‘#first,.second’).addClass(‘rose’); //组合选择器

//$(‘.second td’).addClass(‘red’); //后代选择器

//$(‘.second>td’).addClass(‘red’); //后代选择器

//$(‘#first+.second’).addClass(‘indianred’); //紧挨着#first的.second

$(‘#first~.second’).addClass(‘indianred’); //#first后所有的.second

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

<tr class=’second’>

<th colspan=”3″><table width=”100%” border=”1″>

<tr>

<td>aa</td>

<td>bb</td>

<td>&nbsp;</td>

</tr>

</table></th>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

过滤选择器

1. 位置过滤
   1. :first——第一个元素
   2. :last——最后一个元素
   3. :even——第偶数个元素（下标从0开始）
   4. :odd——第奇数个元素
   5. :eq(index)——第index元素
   6. :gt(index)——大于第index的元素
   7. :lt(index)——小于第index的元素

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘tr:first’).addClass(‘indianred’); //第一个tr

//$(‘tr:last’).addClass(‘indianred’); //最后一个tr

//$(‘tr:even’).addClass(“indianred”); //第偶数个元素（下标从0开始)

//$(‘tr:odd’).addClass(“indianred”); //第奇数个元素

//$(‘tr:eq(2)’).addClass(‘indianred’); //第2个元素

$(‘tr:gt(1)’).addClass(‘indianred’); //大于1的元素

$(‘tr:lt(1)’).addClass(‘rose’); //小于1的元素

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

1. 内容过滤
   1. :contains(‘内容’)，包含指定内容的元素
   2. :has() 包含某个子元素
   3. : not() 去除某个元素
   4. :header 匹配所有标题h1~h6
   5. :empty 匹配所有空元素
   6. :parent 匹配父节点

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘div:contains(“锄禾”)’).addClass(‘indianred’); //包含”锄禾”的div

//$(‘div:has(p)’).addClass(‘indianred’); //含有p标记的div

//$(‘div:has(#first)’).addClass(‘indianred’); //含有#first的div

//$(‘div:not(.no1)’).addClass(‘indianred’); //去除掉.no1的div

//$(‘:header’).addClass(‘indianred’); //选中所有的h1~h6

//$(‘:empty’).addClass(’empty’); //匹配所有空元素

$(‘#first:parent’).addClass(’empty’); //匹配#first的父节点

});

});

</script>

<div class=”first no1″><p>锄禾日当午</p></div>

<div class=”first”><p id=”first”>汗滴禾下土</p></div>

<h1>一级标题</h1>

<h2>二级标题</h2>

<div></div>

<input type=”button” value=”点击” id=”btn” />

1. 子元素过滤选择器
   1. :first-child——父元素的第一个子元素
   2. :last-child——父元素的最后一个子元素
   3. :only-child——父元素只有一个元素的节点
   4. :nth-child(编号,even,odd)——父元素下的指定编号，偶数，奇数的子元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘li:first-child’).addClass(‘indianred’); //li父元素的第一个子元素

//$(‘li:last-child’).addClass(‘indianred’); //li父元素的最后一子元素

//$(‘li:only-child’).addClass(‘indianred’); //li父元素只有一个元素的节点

//$(‘li:nth-child(2)’).addClass(‘indianred’); //li父元素下第2个子元素，从1开始

//$(‘li:nth-child(even)’).addClass(‘indianred’); //li父元素下第偶数个子元素

$(‘li:nth-child(odd)’).addClass(‘indianred’); //li父元素下第奇数个子元素

});

});

</script>

<ul>

<li>三国演义</li>

<li>水浒传</li>

<li>西游记</li>

</ul>

<ul>

<li>钢铁侠</li>

<li>超人</li>

</ul>

<ul>

<li>大棒子</li>

</ul>

<input type=”button” value=”点击” id=”btn” />

1. 表单过滤选择器
   1. :input——匹配input, select, textarea，button标签
   2. :text——匹配文本框
   3. :password——匹配密码框
   4. :enabled——可以的元素
   5. :radio——单选按钮
   6. :checkbox——复选框
   7. :checked——选中的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:input’).addClass(‘indianred’); //表示input,select,textarea，button标签

//$(‘:text’).addClass(‘indianred’); //文本框

//$(‘:password’).addClass(‘indianred’); //密码框

//$(‘:enabled’).addClass(‘indianred’); //可用的元素

//$(‘:radio,:checkbox’).addClass(‘style1’); //单选按钮和复选框

$(‘:checked’).addClass(‘style1’); //选中的元素

});

});

</script>

姓名：<input type=”text” disabled=”disabled”/><br />

密码：<input type=”password” /><br />

性别：<input type=”radio” name=”sex” value=”男” checked=”checked” />男

<input type=”radio” name=”sex” value=”女” />女<br />

爱好：<input type=”checkbox” value=”爬山” checked=”checked” />爬山

<input type=”checkbox” value=”游泳” />游泳 <br />

籍贯：<select>

<option>上海</option>

<option>北京</option>

</select><br />

意见和建议：<textarea></textarea> <br />

<input type=”submit” value=”提交” />

<input type=”reset” value=”重置” />

<input type=”button” value=”点击” id=”btn” />

<button>这也是按钮</button>

1. 属性过滤选择器
   1. [属性]：匹配带有指定属性的元素
   2. [属性=value]：匹配属性=value的元素
   3. [属性!=value]：匹配属性!=value的元素
   4. [属性^=value]：匹配属性以value开头的元素
   5. [属性$=value]：匹配属性以value结尾的元素
   6. [属性*=value]：匹配属性以包含value的元素
   7. [属性1=value1][属性2=value2]：同时具有属性1和属性2的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:text[class]’).addClass(‘indianred’); //带有class属性的文本框元素

//$(‘[class]’).addClass(‘indianred’); //带有class属性的所有元素

//$(‘:text[name=firstname]’).addClass(‘indianred’); //name=firstname的文本框元素

//$(‘:text[name!=firstname]’).addClass(‘indianred’); //name!=firstname的文本框元素

//$(‘:text[name^=first]’).addClass(‘indianred’); //name属性的值以first开头的元素

//$(‘:text[name$=name]’).addClass(‘indianred’); //name属性的值以name结尾的元素

//$(‘:text[name*=stna]’).addClass(‘indianred’); //name属性中带有stna的元素

$(‘:text[name$=name][class]’).addClass(‘indianred’);//name属性的值以name结尾的元素，同时带有class属性

});

});

</script>

<input type=”text” name=”firstname” value=”张” class=’stu’ /> <br />

<input type=”text” name=”middlename” value=”三” /><br />

<input type=”text” name=”lastname” value=”峰” /><br />

<input type=”text” name=”firstcity” value=”上海” class /><br />

<input type=”button” value=”点击” id=”btn” />

<div class=””>锄禾日当午</div>

操作属性

1. jQuery对象.attr(属性)：获取对象的属性值，只获取第一个元素
2. jQuery对象.attr(属性,值)：将值付给所有的jQuery对象
3. jQuery对象.attr(属性,function(){}); //将函数的返回值付给属性
4. jQuery对象.attr({属性:属性值,属性:属性值})
5. jQuery对象.removeAttr(属性名)

操作类

1. addClass(类名)——添加类
2. removeClass(类名)——删除类
3. toggleClass(类名)——交替

直接样式操作

1. css(name)：获取样式的值
2. css(name,value)：给样式赋值
3. css({样式:值，样式:值})

offset()：偏移

坐标原点是浏览器客户端的左上角

注意：

宽度、高度操作

1. width()：获取宽度
2. width(value)：设置宽度
3. height()：获取高度
4. height(value)：设置高度

操作HTML和文本

1. html()：获取HTML代码
2. html(value)：将value作为HTML付给元素
3. text()：获取文本
4. text(value)：将value的值作为文本付给元素

值操作

1. val()：获取值
2. val(value)：给value属性赋值

each循环

方法一：$.each(数组/对象，回调函数)

方法二：jQuery元素.each(回调函数)

例题（复选框选择）

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//全选

$(‘:button:first’).click(function(e) {

$(‘:checkbox’).attr(‘checked’,’checked’);

});

//反选

$(‘:button:eq(1)’).click(function(e) {

$(‘:checkbox’).each(function(index, element) {

$(this).attr(‘checked’,!$(this).attr(‘checked’));

});

});

//取消全选

$(‘:button:last’).click(function(e) {

$(‘:checkbox’).removeAttr(‘checked’);

});

});

</script>

<input type=”button” value=”全选” />

<input type=”button” value=”反选” />

<input type=”button” value=”取消全选” />

<form>

<input type=”checkbox” value=”读书” name=”hobby” />读书<br />

<input type=”checkbox” value=”游泳” name=”hobby”/>游泳<br />

<input type=”checkbox” value=”看报” name=”hobby”/>看报<br />

</form>

脚下留心：jQuery版本不同，有少部分方法也会有差异。

多学一招：通过val()实现选中功能

1. 能够在html代码中引入jQuery库
2. 能够理解选择器的作用
3. 能够说出或使用多种选择器
4. 能够组合使用选择器
5. 能够使用jQuery操作html属性
6. 能够使用jQuery操作css属性
7. 能够熟练使用jQuery()的页面载入事件ready()
8. 能够理解each()的作用
9. 能够使用each()方法遍历jQuery对象
10. 能够解释dom对象和jQuery对象的区别
11. 能够将dom对象和jQuery对象相互转换
12. 能够使用bind()方法绑定事件
13. 能够熟练使用jQuery的常规事件绑定语法
14. 能够使用事件切换方法hover(),toggle()
15. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
16. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
17. 能够使用jQuery的淡入淡出特效方法
18. 能够将内容插入到元素内部或外部
19. 能够清空元素内容或删除元素本身
20. 能够使用replaceWith()替换元素
21. 能够复制指定元素
22. 能够把内容从外面包裹上新元素
23. 能够使用元素查找或匹配的多个方法
24. 能够理解jQuery中插件的作用
25. 能够制作自定义插件
26. 能够使用jQuery实现ajax的get请求
27. 能够使用jQuery实现ajax的post请求

过滤元素

1. filter()：过滤元素
2. hasClass()：检查有没有指定的类
3. is()：检查有没有指定的选择器

在元素集合中查找

1. find()：在子元素中查找
2. children()：匹配子元素集合
3. next()：查找下一个元素
4. nextAll()：后面所有元素
5. prev()：前面的元素
6. prevAll()：前面所有元素
7. siblings()：所有同辈元素
8. parent()：元素的父节点
9. parents()：元素的父节点的集合

<script type=”text/javascript”>

$(document).ready(function(e) {

$(“:button”).click(function(e) {

//$(‘form’).find(‘:text’).css(‘background-color’,’#930′); //在子元素中查找

/*

$(‘form>fieldset’).children(‘input’).each(function(index, element) { //获取子元素

console.log($(this));

});

*/

//$(‘#firstname’).next().next().css(‘background-color’,’#930′);

//$(‘#firstname’).nextAll().css(‘background-color’,’#930′);

//$(‘#city’).prev().prev().css(‘background-color’,’#930′);

//$(‘#city’).prevAll().css(‘background-color’,’#930′);

//$(‘#lastname’).siblings().css(‘background-color’,’#930′);

//$(‘#lastname’).parent().css(‘background-color’,’#930′);

$(‘#lastname’).parents(‘body’).css(‘background-color’,’#930′);

});

});

</script>

<p>锄禾日当午</p>

<form>

<fieldset>

<legend>在元素中查找</legend>

姓：<input type=”text” id=”firstname” value=”张” /><br />

名：<input type=”text” id=”lastname” value=”三峰” /><br />

城市：<input type=”text” id=”city” value=”上海” /><br>

<input type=”button” value=”点击” id=”btn” />

</fieldset>

</form>

链式操作

把多个操作用“.”连成一行，用来简化操作。

原理：每个方法执行完毕后，将当前对象返回出来。

例题

DOM操作

在元素的内部添加内容

1. 在内部的后面添加内容
   1. A. append(B)：将B添加到A里面的后面
   2. A. appendTo(B)：将A添加到B里面的后面

1. 在内部的前面添加内容
   1. A.prepend(B)：在A的内部的前面添加B的内容
   2. A.prependTo(B)：将A添加到B的内部的前面

在元素的外部添加内容

1. 在元素外部的后面
   1. A.after(B)：将B插入到A外部的后面
   2. A.insertAfter(B)：将A插入到B的外部的后面

1. 在元素外部的前面
   1. A.before(B)：将B插入到A的外部的前面
   2. A.insert Before(B)：将A插入到B的外部的前面

例题（年月日）

效果：选择年和月，自动显示对应的天数

<script type=”text/javascript”>

//添加option标签

function insertOption(end,target){

for(var i=1;i<=end;i++){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#’+target));

}

}

//添加年

function addYear(){

var yy=<?php echo date(‘Y’)?>;

for(var i=yy;i>=yy-100;i–){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#year’));

}

}

//添加月

function addMonth(){

insertOption(12,’month’)

}

//添加日

function addDay(){

$(‘#day’).html(”);

var yy=$(‘#year’).val();

var mm=$(‘#month’).val();

if(mm==1||mm==3||mm==5||mm==7||mm==8||mm==10||mm==12){

insertOption(31,’day’);

}else if(mm==2){

if(yy%4==0 && yy%100!=0 || yy%400==0){

insertOption(29,’day’)

}else{

insertOption(28,’day’);

}

}

else

insertOption(30,’day’);

}

$(document).ready(function(e) {

addYear();

addMonth();

addDay();

$(‘#year,#month’).change(function(e) {

addDay();

});

});

</script>

<form id=”form1″ name=”form1″ method=”post” action=””>

<select name=”year” id=”year”></select>年

<select name=”month” id=”month”></select>月

<select name=”day” id=”day”></select>日

</form>

运行结果

例题（模拟126邮箱注册效果）

Sprits技术

将页面用到的许多小图拼到一个大图上，通过CSS来显示不同的区域。可以有效的减少往返次数。

<style type=”text/css”>

/*按钮的样式*/

.btn{

width:119px;

height:37px;

background-image:url(images/glb_v2.png);

background-repeat:no-repeat;

background-position:-146px -362px;

cursor:pointer;

}

/*鼠标移动到按钮上*/

.btn:hover{

background-position:-289px -362px;

}

</style>

用户名：<input type=”text” /><br />

<input type=”button” value=”返回” class=”btn” />

<input type=”button” value=”提交” class=”btn” />

运行结果

模仿126邮箱注册

<style type=”text/css”>

*{

margin:0px;

padding:0px;

font-size:14px;

font-family:’微软雅黑’;

}

dt,dd{

float:left;

}

.txt{

width:300px;

height:17px;

border:#7B7B7B solid 1xp;

}

.bg>span,.span{

width:14px;

height:14px;

display:inline-block;

background:url(images/glb_v2.png) no-repeat -36px -288px;

}

.bg{

color:#C00;

display:none;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//设置样式

$(‘#pwd’).blur(function(e) {

var pwd=$(this).val();

if(!(pwd.length>=6 && pwd.length<=16)){

//方法一：

/*

$(‘dd>div:first’).hide(); //隐藏

$(‘dd>div:last’).show(); //显示

*/

//方法二

var span=$(‘<span>’).addClass(‘span’);

$(‘dd>div:first’).html(‘密码长度是6~16个字符’).prepend(span)

}

});

});

</script>

</head>

<body>

<form>

<dl>

<dt>密码：</dt>

<dd>

<input type=”password” id=”pwd” class=”txt” />

<div>6~16个字符，区分大小写</div>

<!–<div class=”bg”><span></span>密码长度是6~16个字符</div> –>

</dd>

</dl>

</form>

替换DOM元素

1. replaceAll(选择器)
2. replaceWith(内容)

例题

<style type=”text/css”>

.light{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#key’).blur(function(e) {

if($(this).val()==”)

return;

//清空样式

$(‘.light’).each(function(index, element) {

$(this).replaceWith($(this).text()); //通过自己的文本替换自己节点

});

//添加样式

var reg=new RegExp($(this).val(),’g’); //实例化正则表达式而

var str=$(‘#content’).html().replace(reg,'<span class=”light”>’+$(this).val()+'</span>’); //内容替换

$(‘#content’).html(str);

});

});

</script>

</head>

<body>

<input type=”text” id=”key” />

<div id=”content”>

<h3>月饼机_月饼机价格月饼机老品牌值得信赖</h3>

杭州旭众新型小型月饼机厂家 出面出馅更加稳定,小型月饼机厂家 一机多用,价格实惠!老品牌小型月饼机厂家 值得信赖.更有服务到家,全国联保.购机无忧!小型月饼机厂家

</div>

运行结果

删除DOM元素

1. empty()：清空节点中的内容
2. remove()：删除节点

克隆DOM元素

1. clone()：只复制对象节点
2. clone(true)：复制对象节点及对应的事件

获取对象的长度和对象的索引

获取长度的方法

1. length
2. size()

获取元素的索引

index()：索引号从0开始

DOM对象和jQuery对象互换

如果要用jQuery的方法就必须要转成jQuery对象

如果要用JS方法必须转成DOM对象

实现转换：

1. 将DOM对象转成JQuery对象：通过$()或jQuery()
2. 将JQuery对象转成DOM对象：通过get()或数组的方式

缓存数据

1. data(name)：获取缓存数据
2. data(name,value)：缓存数据

几个常用的方法

1、$.merge()

2、$.trim()

1. 能够解释dom对象和jQuery对象的区别
2. 能够将dom对象和jQuery对象相互转换
3. 能够将内容插入到元素内部或外部
4. 能够清空元素内容或删除元素本身
5. 能够使用replaceWith()替换元素
6. 能够复制指定元素
7. 能够把内容从外面包裹上新元素
8. 能够使用元素查找或匹配的多个方法
9. 能够使用bind()方法绑定事件
10. 能够熟练使用jQuery的常规事件绑定语法
11. 能够使用事件切换方法hover(),toggle()
12. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
13. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
14. 能够使用jQuery的淡入淡出特效方法
15. 能够理解jQuery中插件的作用
16. 能够制作自定义插件
17. 能够使用jQuery实现ajax的get请求
18. 能够使用jQuery实现ajax的post请求

回顾

1. 查找元素
   1. filter()：过滤元素 （not()）
   2. hasClass()：是否具有指定类
   3. is()：是不是
   4. find()：在子元素中查找
   5. children()：获取子元素的集合
   6. next()：下一个元素
   7. nextAll()：后面所有的元素
   8. prev()：前面的一个元素
   9. prevAll()：前面所有的元素
   10. parent()：父级元素
   11. parents()：所有的父级元素
   12. sibling()：同级元素
2. DOM操作
   1. 在内部添加元素
      1. A.append(B)：将B插入到A的内部的后面
      2. A.appendTo(B)：将A插入到B的内部的后面
      3. A.prepend(B)：将B插入到A的内部的前面
      4. A.prependTo(B)：将A插入到B的内部的前面
   2. 在外部添加元素
      1. A.after(B)：将B插入到A的外部的后面
      2. A.insertAfter(B)：将A插入到B的外部的后面
      3. A.before(B)：将B插入到A的外部的前面
      4. A.insertBefore(B)：将A插入到B的外部的前面
   3. 替换DOM元素
      1. A.replaceAll(B)：用A替换所有的B
      2. A.replaceWith(B)：用B替换A
   4. 删除DOM元素
      1. empty()：清空元素的内容
      2. remove()：删除元素
   5. 克隆DOM元素
      1. clone()：复制节点，不复制对应的事件
      2. clone(true)：复制节点和对应的事件
3. 一些常用的方法和属性
   1. size()：获取节点集合的长度
   2. length：获取节点集合的长度
   3. index()：获取节点的索引
   4. data()：缓存或获取缓存数据
   5. $.trim()：去空格
   6. $.merge()：合并数组
4. DOM和jQuery对象互换
   1. 通过$()和jquery()方法将DOM转成JQuery对象
   2. 通过get()和[]的方法将jQuery的对象转成DOM对象
5. 链式操作：每个方法执行完毕后返回当前对象，所以我们能够实现链式操作。

jQuery设置事件处理

1、$().事件类型(事件处理函数) ——设置事件处理

2、$().事件类型() ——处罚事件处理

脚下留心：JQuery事件和DOM事件基本是一一对应，比DOM事件少“on”这个单词。

$(document).ready()事件

很显然：$(document).ready()可以极大的提高web响应速度。

多学一招：$(document).ready()可以简化为

DOM操作练习

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘:button’).click(function(e) {

var i=$(‘:button’).index($(this)); //找出索引号

if(i==0){ //全部左移

$(‘select:first option’).appendTo($(‘select:last’));

}

else if(i==1){ //选中左移

$(‘select:first option:checked’).appendTo($(‘select:last’));

}

else if(i==2){ //全部右移

$(‘select:last option’).appendTo($(‘select:first’));

}

else if(i==3){ //选中右移

$(‘select:last option:checked’).appendTo($(‘select:first’));

}

});

});

</script>

<select size=”10″ multiple=”multiple”>

<option>张三</option>

<option>李四</option>

<option>王五</option>

<option>赵六</option>

<option>Tom</option>

<option>Berry</option>

<option>Ketty</option>

<option>Rose</option>

</select>

</div>

<div>

<input type=”button” value=” >> ” title=”全部左移”/><br />

<input type=”button” value=” > ” title=”左移”/> <br />

<input type=”button” value=” << ” title=’全部右移’/><br />

<input type=”button” value=” < ” title=’右移’/> <br />

</div>

<div>

<select size=”10″ multiple=”multiple”></select>

</div>

绑定事件（bind）

语法：bind(事件,回调函数)

<script type=”text/javascript”>

$(function(){

//1、绑定事件

/*

$(‘#username’).bind(‘mouseover’,function(){

if($(this).val()==’请输入用户名’)

$(this).val(”);

}).bind(‘mouseout’,function(){

if($.trim($(this).val())==”)

$(this).val(‘请输入用户名’);

})

*/

//2、通过json格式一次绑定多个事件

/*

var json={

‘mouseover’:function(){

if($(this).val()==’请输入用户名’)

$(this).val(”);

},

‘mouseout’:function(){

if($.trim($(this).val())==”)

$(this).val(‘请输入用户名’);

}

};

$(‘#username’).bind(json);

*/

//3、不同的事件，同一个事件处理

$(‘#username’).bind(‘click mouseover mouseout’,function(){

console.log(‘aa’);

})

})

</script>

<input type=”text” id=”username” value=”请输入用户名” />

反绑定事件（unbind）

如果一个元素不需要执行某个事件了，只需要反绑定即可。

1、对象.unbind(事件)：反绑定某个事件

2、对象.unbind()：反绑定所有事件

<style type=”text/css”>

#btn{

width:100px;

height:50px;

cursor:pointer;

background-color:#F90;

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

var flag=false; //开关

$(‘#btn’).click(function(e) {

if(!flag){

var t=5;

$(this).text(t);

var id=window.setInterval(function(){

$(‘#btn’).text(–t);

if(t==0){

clearInterval(id); //关闭时钟

//$(‘#btn’).unbind(‘click’); //反绑定click事件

$(‘#btn’).unbind(); //反绑定所有事件

}

},1000);

flag=true;

}

console.log(‘抢红包’);

});

});

</script>

<div id=”btn”>5秒之后关闭抢红包</div>

一次性绑定（one）

事件委托和取消事件委托

jQuery对象.live() 绑定在祖辈元素上的事件处理函数可以对后代的触发做出响应。

jQuery对象.die() 从元素中删除通过live()绑定的事件

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘li’).live(‘click’,function(e) { //将click事件绑定到li的祖辈元素中

alert($(this).html());

});

//添加li

$(‘:button:first’).click(function(e) {

$(‘<li>重庆</li>’).appendTo($(‘ul’));

});

//取消live绑定的事件

$(‘:button:last’).click(function(e) {

//$(‘li’).die(‘click’); //取消通过live()绑定的click()事件

$(‘li’).die(); //取消live绑定的所有事件

});

});

</script>

<ul>

<li>北京</li>

<li>上海</li>

</ul>

<input type=”button” value=”添加li” />

<input type=”button” value=”取消live绑定的事件” />

事件对象

事件对象中保存着与事件有关的信息

1. 通过事件对象阻止冒泡
2. 通过事件对象阻止浏览器的默认动作

hover

语法：hover(over_fun,out_fun)，此方法实现鼠标移到到元素上和离开元素的效果

toggle

显示隐藏元素

1. show(speed,[callback]) 显示
2. hide(speed,[callback]) 隐藏
3. toggle(speed,[callback]) 交替，如果当前是隐藏的，就显示。如果当前是显示的就隐藏

方法的参数有:fast（200毫秒） normal（400毫秒） slow（600号码），也可以指定任意毫秒数

<style type=”text/css”>

#first{

width:300px;

height:200px;

background-color:#060;

color:#FFF;

}

</style>

<script type=”text/javascript”>

$(document).ready(function(e) {

//显示

$(‘:button:eq(0)’).click(function(e) {

//$(‘#first’).show();

$(‘#first’).show(1000);

});

//隐藏

$(‘:button:eq(1)’).click(function(e) {

//$(‘#first’).hide();

//$(‘#first’).hide(‘slow’);

//$(‘#first’).hide(2000);

$(‘#first’).hide(‘slow’,function(){

$(‘:button’).remove();

})

});

//交替

$(‘:button:eq(2)’).click(function(e) {

//$(‘#first’).toggle();

$(‘#first’).toggle(600)

});

});

</script>

<input type=”button” value=”显示” />

<input type=”button” value=”隐藏” />

<input type=”button” value=”交替” />

<div id=”first”>

离离原上草，一岁一枯荣。<br />

野火烧不尽，春风吹又生。<br />

远芳侵古道，晴翠接荒城。<br />

又送王孙去，萋萋满别情。<br />

</div>

向上向下

1. slideUp(speed,[callback])：向上
2. slideDown(speed,[callback])：向下
3. slideToggle(speed,[callback])：交替向上向下

<script type=”text/javascript”>

$(document).ready(function(e) {

//向上

$(‘:button:eq(0)’).click(function(e) {

//$(‘#first’).slideUp();

$(‘#first’).slideUp(‘slow’);

});

//向下

$(‘:button:eq(1)’).click(function(e) {

//$(‘#first’).slideDown();

//$(‘#first’).slideDown(1000);

$(‘#first’).slideDown(1000,function(){

alert(‘执行完毕’)

})

});

//交替

$(‘:button:eq(2)’).click(function(e) {

$(‘#first’).slideToggle(); //交替向上向下

});

});

</script>

淡入淡出

1. fadeIn(speed,[callback])
2. fadeOut(speed,[callback])
3. fadeToggle(speed,[callback])
4. fadeTo(speed,不透明度[0-1])

<script type=”text/javascript”>

$(document).ready(function(e) {

//淡入

$(‘:button:eq(0)’).click(function(e) {

//$(‘#first’).fadeIn(); //淡入

$(‘#first’).fadeIn(1000);

});

//淡出

$(‘:button:eq(1)’).click(function(e) {

//$(‘#first’).fadeOut(); //淡出

$(‘#first’).fadeOut(1000);

});

//交替

$(‘:button:eq(2)’).click(function(e) {

$(‘#first’).fadeToggle(1000);

});

//淡出到

$(‘:button:eq(3)’).click(function(e) {

$(‘#first’).fadeTo(1000,0.3); //淡出到0.3

});

});

</script>

动画（animate）

语法:animate(参数,运行时间)

<style type=”text/css”>

#first{

width:100px;

height:100px;

background-color:#060;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script src=”/jquery-ui/ui/jquery.ui.effect.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#first’).click(function(e) {

$(this)

.animate({

‘width’:’50px’,

‘height’:’50px’

},500)

.animate({

‘width’:’150px’,

‘height’:’150px’

},1000)

.animate({

‘margin-left’:’300px’,

‘background-color’:’#FF0000′

},1000)

.animate({

‘margin-left’:’250px’,

},50)

.animate({

‘margin-left’:’300px’,

},50)

});

});

</script>

<div id=”first”></div>

动画的例题

<style type=”text/css”>

*{

margin:0px;

padding:0px;

}

ul{

list-style-type:none;

width:702px;

margin:100px auto;

}

li{

width:232px;

height:139px;

float:left;

border:#000 solid 1px;

overflow:hidden;

cursor:pointer;

}

li span{

width:100%;

height:30px;

display:inline-block;

background-color:rgba(0,0,0,0.3);

position:relative;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘li’).hover(function(){

$(this).find(‘span’).animate({‘top’:’-30px’},500)

},function(){

$(this).find(‘span’).animate({‘top’:’0px’},500)

})

});

</script>

</head>

<body>

<ul>

<li><img src=”images/01.jpg” width=”232″ height=”139″ /><span>我可以认识你吗</span></li>

<li><img src=”images/02.jpg” width=”232″ height=”139″ /><span>其实我注意你好久了</span></li>

<li><img src=”images/03.jpg” width=”232″ height=”139″ /><span>我喜欢你微笑的样子</span></li>

<li><img src=”images/04.jpg” width=”232″ height=”139″ /></li>

<li><img src=”images/05.jpg” width=”232″ height=”139″ /></li>

</ul>

</body>

jQuery中的ajax

jQuery对ajax进行了封装

$.ajax()

$.ajax()参数选项

例题

HTML页面

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#username’).blur(function(e) {

$.ajax({

‘url’:’./15-demo.php’,

‘type’:’get’,

‘data’:’username=’+encodeURIComponent($(‘#username’).val()),

‘dataType’:’text’,

‘success’:function(data){ //成功后执行

alert(data)

},

‘error’:function(){ //失败后执行

alert(‘请求失败’);

}

})

});

});

</script>

<input type=”text” id=”username” />

PHP页面

<?php

echo $_GET[‘username’];

运行结果

$.get()和$.post()

load()

可以实现局部刷新

17-demo1.php

<div id=”stu”>

</div>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘.pageno’).click(function(e) {

var pageno=$(this).text();

//$(‘#stu’).load(’17-demo2.php’,{‘pageno’:pageno}); //post传递

//$(‘#stu’).load(’17-demo2.php?pageno=’+pageno); //get传递

$(‘#stu’).load(’17-demo2.php?pageno=’+pageno,”,function(){

alert(‘加载完毕’);

})

});

});

</script>

<?php

mysql_connect(‘localhost’,’root’,’root’);

mysql_query(‘use `data`’);

mysql_query(‘set names utf8’);

$rs=mysql_query(‘select count(*) from stu’);

$rows=mysql_fetch_row($rs);

$pagecount=ceil($rows[0]/2);

for($i=1;$i<=$pagecount;$i++){

echo “<a href=’javascript:void(0)’ class=’pageno’>{$i}</a>&nbsp;”;

}

?>

17-demo2.php

<?php

mysql_connect(‘localhost’,’root’,’root’);

mysql_query(‘use `data`’);

mysql_query(‘set names utf8’);

$pageno=$_REQUEST[‘pageno’];

$startno=($pageno-1)*2;

$sql=”select * from stu limit $startno,2″;

$rs=mysql_query($sql);

?>

<table>

<tr>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

<th>地址</th>

<th>语文</th>

<th>数学</th>

</tr>

<?php while($rows=mysql_fetch_assoc($rs)):?>

<tr>

<td><?php echo $rows[‘stuNo’]?></td>

<td><?php echo $rows[‘stuName’]?></td>

<td><?php echo $rows[‘stuSex’]?></td>

<td><?php echo $rows[‘stuAge’]?></td>

<td><?php echo $rows[‘stuAddress’]?></td>

<td><?php echo $rows[‘ch’]?></td>

<td><?php echo $rows[‘math’]?></td>

</tr>

<?php endwhile;?>

</table>

运行结果

$.getScript()

用来加载脚本

写一个js脚本

动态加载js

$.getJSON()

获取JSON格式的数据

1. 新建PHP页面

<?php

$stu=array(‘tom’,’berry’,’ketty’);

echo json_encode($stu);

1. 新建HTML页面

$.get()和$.getJSON()可以跨域

注意：$.post()不能跨域

1. 在phpmyadmin.com中创建PHP页面

1. 在www.php.com中创建HTML页面，跨域请求

服务器返回XML格式

1. 将预先准备好的XML拷贝的到站点下
2. HTML页面代码如下

<script type=”text/javascript”>

$(document).ready(function(e) {

var xml; //保存XML对象

//加载国家

$.get(‘./location.xml’,function(data){

xml=$(data);

xml.find(‘country’).each(function(index, element) {

$(‘<option>’).text($(this).attr(‘name’)).val($(this).attr(‘id’)).appendTo($(‘#country’));

});

},’xml’);

//加载省

$(‘#country’).change(function(e) {

$(‘#province’).html(‘<option value=””>—请选择—</option>’);

var id=$(this).val();

xml.find(“[id=”+id+”]”).children().each(function(index, element) {

$(‘<option>’).text($(this).attr(‘name’)).val($(this).attr(‘id’)).appendTo($(‘#province’));

});

});

//加载市

$(‘#province’).change(function(e) {

$(‘#city’).html(‘<option value=””>—请选择—</option>’);

var id=$(this).val();

xml.find(“[id=”+id+”]”).children().each(function(index, element) {

$(‘<option>’).text($(this).attr(‘name’)).val($(this).attr(‘id’)).appendTo($(‘#city’));

});

});

});

</script>

</head>

<body>

国家：<select id=”country”><option value=””>—请选择—</option></select>

省：<select id=”province”><option value=””>—请选择—</option></select>

市：<select id=”city”><option value=””>—请选择—</option></select>

多学一招：实现省、市、县三级可以将数据保存在数据库，XML，JS数组/JSON。建议不要将数据放在数据库中。可以放在XML和JS中

扩展jQuery插件

JQuery中方法有两种，一种是JQuery对象的方法，另一种是jQuery元素的方法。扩展插件就分为这两种方式来定义。

1、扩展JQuery对象的方法

语法：

$.方法名=function(){

}

2、扩展jQuery元素的方法

$.fn.方法名=function(){

}

练习

例题：编辑表格内容

<style type=”text/css”>

table,td,th{

border:#000 solid 1px;

border-collapse:collapse;

margin:auto;

font-size:16px;

background-color:#F96

}

tr{

height:25px;

}

th{

background-color:#09F;

width:50%;

}

input{

border:none;

background-color:transparent;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//添加文件框

$(‘td’).click(function(e) {

var value=$(this).html(); //单元格的数据

if($(this).find(‘input’).length==0){

$(this).html(”); //清空td

$(‘<input>’).attr(‘type’,’text’).val(value).appendTo($(this)).trigger(‘focus’).trigger(‘select’)

}

});

//修改值

$(document).keyup(function(e) {

if(e.keyCode==13){

var src=$(e.target || e.srcElement); //获取事件发生时候当前的对象

if(src.is(‘input’)){

var value=src.val();

src.parent().html(value); //将值放到td中

}

}

});

});

</script>

<table width=”400″ cellpadding=”0″ cellspacing=”0″>

<tr>

<th>学号</th>

<th>姓名</th>

</tr>

<tr>

<td>001</td>

<td>张三</td>

</tr>

<tr>

<td>002</td>

<td>李四</td>

</tr>

<tr>

<td>003</td>

<td>王五</td>

</tr>

<tr>

<td>004</td>

<td>赵六</td>

</tr>

</table>

例题：导航栏

<style type=”text/css”>

*{

font-size:12px;

margin:0px;

padding:0px;

}

#daohang{

width:300px;

margin:50px 0px 0px 200px;

}

#daohang ul{

list-style-type:none;

width:100px;

}

#daohang .main{

background:url(images24/title.gif) repeat-x;

}

#daohang .main a{

text-decoration:none;

}

#daohang .main ul{

display:none;

background:#FC9;

}

#daohang .main ul li{

height:25px;

line-height:25px;

}

#daohang .main>span{

display:block;

height:25px;

line-height:25px;

background:url(images24/collapsed.gif) no-repeat 5px center;

font-size:14px;

padding-left:20px;

color:#FFF;

cursor:pointer;

}

#daohang .main .bg{

background-image:url(images24/expanded.gif);

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘.main>span’).click(function(e) {

$(this).toggleClass(‘bg’).next().slideToggle(‘slow’);

});

});

</script>

<div id=”daohang”>

<ul>

<li class=”main”>

<span>菜单项1</span>

<ul>

<li><a href=”#”>子菜单项11</a></li>

<li><a href=”#”>子菜单项12</a></li>

</ul>

</li>

<li class=”main”>

<span>菜单项2</span>

<ul>

<li><a href=”#”>子菜单项21</a></li>

<li><a href=”#”>子菜单项22</a></li>

</ul>

</li>

<li class=”main”>

<span>菜单项3</span>

<ul>

<li><a href=”#”>子菜单项31</a></li>

<li><a href=”#”>子菜单项32</a></li>

</ul>

</li>

</ul>

</div>

例题：弹出对话框

<style type=”text/css”>

.win{

width:250px;

background-color:#D0DEF0;

padding:2px;

position:absolute;

display:none;

}

.win #title{

padding:4px;

font-size:16px;

}

.win #title img{

float:right;

cursor:pointer;

}

.win #content{

height:150px;

background-color:#FFF;

}

</style>

</head>

<body>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

//定义窗口

$.win=function(){

//定位窗口

var left=parseInt(($(window).width()-$(‘#win’).width())/2+$(window).scrollLeft());

var top=parseInt(($(window).height()-$(‘#win’).height())/2+$(window).scrollTop());

$(‘#win’).css({‘left’:left,’top’:top})

//给关闭按钮添加事件

$(‘#title’).children(‘img’).click(function(e) {

$(‘#win’).hide();

});

return $(‘#win’);

}

$(document).ready(function(e) {

$(‘.buy’).click(function(e) {

$.win().show();

});

});

</script>

<div class=”win” id=”win”>

<div id=”title”><img src=”images25/close.gif” alt=”关闭” width=”15″ height=”15″ />购物车</div>

<div id=”content”>

</div>

</div>

<input type=”button” value=”放入购物车” class=”buy” style=”margin:auto; display:block” />

<div style=”height:1000px; width:2000px;”></div>

<input type=”button” value=”放入购物车” class=”buy” style=”margin:auto; display:block” />

scrollLeft()：水平滚动条距左的位置

scrollTop()：垂直滚动条距上的位置

1. 能够使用bind()方法绑定事件
2. 能够熟练使用jQuery的常规事件绑定语法
3. 能够使用事件切换方法hover(),toggle()
4. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
5. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
6. 能够使用jQuery的淡入淡出特效方法
7. 能够理解jQuery中插件的作用
8. 能够制作自定义插件
9. 能够使用jQuery实现ajax的get请求
10. 能够使用jQuery实现ajax的post请求

问题引入

在学习Ajax技术之前，我们先回顾一下之前，客户端和服务器是如何通讯的呢？我们客户端和服务器端的通讯往往是在浏览器的地址栏输入一个地址后或者点击一个a链接之后，浏览器帮我们发送http请求，去找服务器要对应的数据（html文本）；然后服务器接受请求，返回对应的数据，最后浏览器在将获取的数据在页面显示（页面渲染html–显示界面）。但是往往这个过程是会导致整个页面的刷新（网速比较卡、等待时间很长），相对来说用户体验不怎么友好。

这样的无跳转刷新，在有些时候是十分必要，例如 当用户在优酷观看VIP试看视频的过程中，试看完毕后，突然需要登录账号完成一些操作，而如果登录验证的过程必须跳转到服务器中才能完成，那么页面就会刷新，等跳转回来 又是长时间的广告，还要手动定位到之前播放的位置，给用户的访问带来极大的不便 ，因此在这里，一把会做一个弹框，做无跳转的登录。或者有的时候在看视频的时候，需要进行留言处理，也是需要进行无刷新完成的。

留言

网易云音乐

总之，很多时候用户只想更新页面的局部内容，而不是刷新整个页面，那我们是否可以在页面不刷新的情况下，还可以和服务器进行通讯，获取数据呢？

那什么是Ajax技术呢？

口语化定义-面试-日常用语

Ajax就是一门在浏览器不刷新的情况下，还可以和服务器进行通讯，数据传输的技术（一般数据传输的格式满足两种：1. xml 相对比较少 2. json 格式很多）。

注意1：客户端和服务器端进行通信的时候，其本质只能用文本做信息的传递，只是这个文本满足一定的人为规定的数据的格式，我们才有了XML传递或者json传递，以及jsonp传递。

注意2：Ajax技术是数据浏览器的技术，不同的浏览器对其有不同的实现方式(w3c IE低版本678)。js也是属于浏览器的技术（浏览器一个js解析环境）。浏览器也开放了一定的接口供js去操作Ajax。

官方定义

ajax全称 Async Javascript And XML（异步的JavaScript和XML），它是不指代某个特定的技术，主要有如下的技术一起组成：

Async ：指AJAX能够创建异步进程的请求

Javascript：AJAX实现的主体，就是用JS来实现的AJAX，js里面存在一个XMLHttpRequest构造函数

XML：一种数据格式，用户AJAX请求中客户端和服务器交换数据，除此以外还有JSON

现在所有局部刷新、无刷新操作 都叫”ajax”，它是使得JS能够同浏览器一样请求服务器，并且获取返回结果。

论文：（最原始的定义）

ajax发展历史

AJAX诞生于1998年，同期的互联网技术还有XML和CSS2.0，允许客户端发送请求到服务器的第一个应用来自于微软的Outlook Web Access开发小组，尔后称为IE4.0的一部分，并在IE5中开始运用。

AJAX真正被广泛认识是在2005年，伴随着一些大型互联网公司的产品中开始出现ajax，例如谷歌的邮箱产品Gmail 内置了一个Gtalk的网页聊天工具，聊天的过程中需要反复不断的刷新数据 而又不能跳转 这就是引起了人们好奇 也使得原本不太受关注的ajax得到了人们的青睐。

Ajax常见使用场景

1. Ajax技术一般用在账户注册时候用户名和邮箱是否重复检查
2. 还可以实现一种按需加载的布局加载数据的效果，瀑布流布局，按需加载
3. 无刷新分页显示数据
4. 无刷新留言
5. 无刷新登录…..

例如：

http://reg.email.163.com/unireg/

http://36kr.com/

http://www.iterduo.com/

网易邮箱注册

滚动加载

瀑布流布局

文档：

http://www.zhangxinxu.com/wordpress/2012/03/%E5%A4%9A%E6%A0%8F%E5%88%97%E8%A1%A8%E5%8E%9F%E7%90%86%E4%B8%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80-waterfall-layout/

下一个永远是惊喜（永远不知道下一个商品是否是最好的？）

花瓣网：http://huaban.com/all/

远古时代的无刷新技术

在没有ajax技术的时候，如何实现客户端和服务器进行无刷新的通信呢？

答：思考，如果要完成这个操作：

1. 必须要进行网络通信
2. 同时还可以接收到服务器端的响应

解决：

答：思考在前端里面那些技术是可以发送网络请求？

1. ajax可以（不使用）
2. img标签、link标签、script标签（js、执行）（都具有src 、href 属性都可以发送网络请求）
3. 网页嵌套iframe（页面放一个，显示出来，穿件隐身衣）【无刷新文件上传，如果是兼容低版本的IE做文件上传】（自行百度学习）

知道：可以使用script标签来完成网络请求？

客户端代码：

服务器端代码：

浏览器效果：

jQuery基本使用

jQuery是什么？

官网：http://jquery.com/

jQuery主要是帮我们做js代码的简化操作。

原始：

1. 获取某个元素 document.getElementById(‘div1’)
2. 获取内容 document.getElementById(‘div1’).innerHTML

通过上面的操作既麻烦、也存在兼容性问题（低版本IE和现代浏览器不兼容）

有人试想是否可以做一个工具库，可以简化操作。提出来jQuery（javascript + query）主要地方在于DOM元素的获取，自己进行操作（1. 获取dom元素的值 2. 设置css样式….）

简化：

1. 元素获取 $(‘#div1’) // 通过id获取DOM元素

2. 获取元素的值 $(‘#div1’).html() // 获取 id为div1的元素的html值

3. 设置样式 $(‘#div’).css(‘color’, ‘red’); // 设置字体验证

4. 设置样式类 $(‘#div’).addClass(‘box-red’); // 设置一个 .box-red的样式

5. 事件绑定 $(‘#btn1’).click(function(){ // 事件回调函数 });

目前主要存在三个大的版本。

1. x系列 [工具库代码有点大，做兼容]
2. x系列
3. x系列

这三个版本的使用的方式都是一样的，但是需要注意：2.x之后的版本不在兼容IE678。

为什么要使用jQuery呢？

从官网logo上的标语我们可以看到 write less, do more。 可以得知jQuery可以让我们用最少的代码完成最多的功能。

1. 提供了强大的选择器，可以快速的选取页面上的DOM元素
2. 提供了众多的方法
3. 强大的链式操作
4. 对浏览器的兼容性做了处理
5. …………

设计：less is more

选择器-内容-样式

从jQuery的字面意思理解： jQuery = javascript + Query，由此可以看出jQuery的强大之初在于其选择器，即强大的DOM节点查询。同时需要注意的是，jQuery的选择器基本和Css的选择器一样。

主要学习两个选择器

1. id选择器
2. 类选择器

id选择器

代码：

注意：这里通过 $(‘#container’) ID选择器选择DOM元素，返回值是一个对象，可以调用jQuery为对象提供的方法。

效果

类选择器

代码：

效果：

事件操作

代码：

效果

ajax入门使用

Ajax的使用，满足如下的步骤：

1. 实例化一个Ajax对象
2. 设置一个回调函数，帮我们处理后台返回的数据，当对象的一个属性readyState == 4 就可以操作数据了
3. 设置一个URL地址，并设置http的请求方式（get、post）
4. 发送请求

实操-ajax请求和响应

在页面不刷新的请求，现在给服务器进行通信，在客户端如何显示服务器返回的数据？

a. 客户端代码，发送Ajax请求

b. demo1.php后台处理请求

c. 效果: 当在客户端点击【按钮】的时候，会给服务器端发送请求，服务器的输出会作为响应返回给浏览器

实操-ajax传参

传递一定的参数，让ajax接收，然后让Ajax返回一定的信息，供客户端使用。

a. 在客户端编写一定的代码，显示服务器端返回的数据

b. demo2.php服务器端代码

c. 效果

实操-用户名校验

使用Ajax完成一个用户名是否重复的检测

a. 布置一个注册的表单，给用户名input框绑定一个失去焦点的事件，当失去焦点的时候，发送Ajax请求

效果：

b. 编写js代码，完成Ajax请求

c. demo3.php服务器端checkuser.php处理请求

效果：

Ajax之GET常见问题-面试问题

简介

Ajax常见的问题：主要是出现在IE低版本下。

1. IE的实现方式不一样（IE下存在兼容性的问题）（到时候我们不会写原生的ajax，使用jQuery提供的ajax工具方法）

1. IE下的GET提交的缓存问题（火狐 ctrl+f5）和参数中文（编码）的问题

IE6下测试XMLHttpRequest

一般在IE6下直接使用new XMLHttpRequest是不可以的，会保错，需要我们书写兼容性的代码。

网上找一个就行：

通过测试可以正常

函数文件位置：

IE6下get缓存问题

1. 引入ajax.js函数，ajax函数调用

1. demo6.php服务器代码

1. 在IE下存在一个缓存的问题，一般如果URL地址不变的情况下，IE是不会在发送http请求

一般解决方式：1. 在URL地址后面加一个随机数 2. 或者是加上一个时间戳

代码：

效果：

IE6下get中文问题

1. 中文的问题（注意：在IE6下不能得到正常的传递）

解决：对中文的字符进行编码后进行传输

encodeURIComponent函数

1. 客户端代码，引入ajax.js，调用ajax函数

1. demo7.php服务器端代码

效果

Ajax之POST常见问题

如何使用Ajax完成post提交？

答：在使用Ajax做post提交的时候，需要注意设置一个请求头的概念，并且这个请求头必须在open方法之后，send方法之前设置。POST请求头的设置无论是w3c还是IE都需要设置，并且在IE下中文也不用进行编码。

文档：http://www.w3school.com.cn/tags/att_form_enctype.asp

设置传输编码：application/x-www-form-urlencoded（表单做post提交 encrypt）

1. 在Ajax对象的open方法之后设置请求头即可，并且post提交的数据要写成一个字符串作为参数传递个send方法。

Ajax手册学习

手册解释

手册位置：

手册参数：

这个手册里面只要了解三个属性，两个常见方法。

Ajax状态变化

在使用ajax和服务器进行通信过程中，ajax的状态会产生一个变化，例如ajax对象产生，ajax发送请求，ajax对象成功获取服务器的响应….. 我们可以通过该对象 readyState 属性进行捕获，属性值有0-4 五个值，四种变化。我们可以捕获其变化，当状态变化的时候， onreadystatechange 对应的回调函数会自动进行触发。

1. 当我们使用Ajax去和服务器进行交互的过程，Ajax对象的状态是会发生变化的，我们可以使用xhr.readyState属性感知其变化。

效果

1. 总结：在使用xhr.readyState感知变化的过程中，可以看到从1变到4。在状态变为4的时候，我们可以使用xhr.responseText属性获取服务器返回的数据信息

客户端代码

demo9.php服务器端代码：

浏览器效果

注意：

1. 在下面的回调处理函数里面的 xhr.readyState属性的值可以从 0 到 4 ，存在有4种变化，5个状态。
2. 只有当状态成为4的时候，才可以获取到服务器返回的数据，服务器返回的数据会在对象的responseText属性或者是responseXML属性，如果请求的地址是一个XML文件，则会存放到该属性，其他的都是放到responseText属性里面。

xhr.onreadystatechange = function(){

// 服务器的数据何时可以正常的返回

console.log( xhr.readyState );

}

服务器返回的数据的概念

什么叫服务器返回的数据？

答：在ajax和服务器进行通信过程中，服务器肯定要返回点数据给ajax对象，那么主要存在以下四种返回数据。

PHP脚本返回HTML

1. 如果是请求的一个php文件URL地址（data.php），该脚本里面可以直接包含一段html代码，代表服务器返回的数据

客户端

demo10.php 服务端脚本

浏览器效果

PHP脚本输出变量数据

1. 如果是请求的一个php文件URL地址，脚本里面存在输出内容（echo 、var_dump 、print_r），代表服务器返回的数据

客户端

demo11.php 服务端脚本

浏览器效果

请求文本文件

1. 如果请求的是一个其他类型的文件URL地址，一般是文本文件，以如下格式结尾的文件.txt 、.html 、.htm 、.xhtml、 .shtml、json，里面的内容代表服务器返回的数据

客户端

top250.json 服务端脚本

浏览器效果

返回xml格式数据

1. 还可以请求一个XML文件URL地址，但是需要注意：这个时候接受服务器返回的数据，一般使用responseXML属性获取，是一个文档对象。

客户端

xml.xml服务器端代码

浏览器效果

注意：现在一般来说我们很少使用xml（难用，但是底层的效率还是很高，有些业务，是必须使用xml，银行金钱相关的业务，接口必须使用xml，xml存在DTD进行文档类型约束）作为数据传输格式（以前没有出现json的时候，都是使用的xml，但是现在基本所有的 项目的数据交互格式都是使用json，因为多种语言都对json进行支持，可以在多种语言之间会使用json作为官方的数据交互媒介 PHP支持json c语言 java支持json js支持json）。

Ajax案例-会员模块-curd-作业

功能需求

1. 在添加的时候做用户名唯一性检查

1. 做数据展示做一个无刷新分页

1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

功能需求

1. 在添加的时候做用户名唯一性检查

1. 做数据展示做一个无刷新分页（分页插件 layUI 闲心）

1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

实操-添加

用户注册-唯一性检验

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户唯一性处理

注意：这里的swal函数使用的是sweetalert插件提供的。

1. 在后台编写一个checkUser.php文件完成用户唯一性校验，可以注册返回1，不可以注册返回0

用户注册-添加入库

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户入库操作

注意：这里的swal函数使用的是sweetalert插件提供的。

3. 在后台编写一个addkUser.php文件完成用户入库操作，成功返回1，失败返回0

sweetalert插件

相关网站：

http://www.bootcdn.cn/sweetalert/

http://mishengqiang.com/sweetalert/

1. 在bootcdn网站查询sweetalert插件

1. 自己的页面引入对应的css和js资源文件，调用 swal 函数进行测试

效果：

实操-用户展示

用户的展示-无刷新分页

昨天使用了一个叫做layUI提供的一个layPage的分页插件。

功能需求分析：

代码实现：

1. 定义一个ulst.php展示用户的列表，默认获取显示第一页的数据

1. 定义一个formatDataEs6方法格式化用户信息，返回一个HTML字符串

1. 定义一个userList.php页面，接收分页请求，返回数据

underscore工具库

简介：

1. 编写一个HTML文件，引入underscore.js文件，编写js代码，调用该工具库提供的方法

注意：_.each() 用于遍历数组 _.uniq() 用于数组去重

2. 效果

实操-用户删除

功能需求：

1. 在ulst.php为table元素定义一个id属性

1. 为该table元素绑定一个点击事件

1. 定义一个ajaxDelUser函数，发送ajax请求，删除用户信息

事件优化处理机制简介

优化处理

json简介

①-json是什么？

1. 什么是json？

答：json是由一个叫做道格拉斯（道叔，josn规范的制定者，一般他是json发现者）发现的一种在多种语言（js\php\java\c\python…）之间进行数据传递的一个文本的数据格式。以前也可以使用XML来组织格式来交换数据，但是XML操作起来非常的麻烦，慢慢的更多的是使用json格式数据做传递。

注意：虽说现在json非常的流行，但不意味着XML没有使用的必要的。在很多的领域XML还是有其独特的优势，尤其是在数据传递格式非常严苛的情况下（DTD：文档约束，主要是可以去约束XML的定义），例如银行的系统。并且可以做小型的数据库、还可以做配置文件（Java里面很多的配置文件都是使用xml）。

注意：json也是可以作为配置文件的，例如composer的包管理器的配置文件。(现在很多的项目都是使用json作为配置文件)

注意：多种格式的数据都可以作为配置文件

1. php.ini
2. httpd.conf
3. conf.yaml
4. composer.json
5. config.xml

面试：json还是XML好？没有什么好或不好，主要是实际的业务需求，以及公司领导的安排。

官网：http://www.json.org.cn/

json是啥？

网站：http://www.json.org.cn/standard.htm

②-json格式到底是如何定义的？

形如下面的数据结构被称为json格式的文本，需要注意：json格式里面的 key/value对是无序的。和php里面的关联数组比较类型，也和js里面的json字面量对象很像。

定义语法：

{

“key”: “value1”, // value值是字符串的时候必须加上双引号，同时 key 必须要加双引号

“age” : 12,

“isBool”: true // 最后的key value 不能加逗号

}

通过工具进行校验：

https://www.bejson.com/

③-php里面如何处理json格式数据？

1. 如何把php里面的复合数据类型转换为json格式的字符串数据？（json_encode 1. 中文 gb2312 2. Unicode编码）

效果

1. 如何把json格式的数据转换为php里面的复合数组类型？(json_decode)

效果：

备注：如果json_decode($jsonString) 不加第二个参数，则转换成php里面的一个标准对象

效果

1. 注意小的细节：在php里面如果要把一个复合数据类型，里面的中文，转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

效果：

注意：如果中文使用的gb2312编码保存的，则转换不成功。

效果：

总结：在使用json_encode做复合数据类型转换的时候，如果数据里面存在中文，则必须是utf-8的编码，如果不是，则准换不成功。（千万注意：公司的老的项目使用的是gb2312编码的，这个时候在做接口处理的时候，特别注意，需要把gb2312转换成utf-8编码）。

4. 在php里面如果要把一个复合数据类型，里面的中文转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

代码：

header(‘Content-Type:text/html;charset=utf-8’);

$data = array(‘name’=> ‘中文’);

echo json_encode($data, JSON_UNESCAPED_UNICODE);

效果：

④-js里面如何处理json格式的数据？

1. 如何把js里面的复合数据类型转换成json格式的数据？

效果

1. 如何把json格式的数据转换成js里面的复合数据类型？

效果

注意：也可以使用eval 转换（eval可以执行一个满足js语法格式的字符串）

效果

网站：https://www.zhihu.com/question/19884767

1. 在jQuery里面也提供对应的转换函数，遍历函数

1. json2.js文件，可以在js里面把对象和字符串相互的转换（ JSON.parse 和 JSON.stringify 一样，只是做了一个浏览器的兼容性处理，一般在自己的项目的html文件，引入该文件即可，自己会做兼容操作：如果低版本的浏览器不存在JSON.parse 和 JSON.stringify 则使用json2.js文件里面提供的；如果浏览器存在两个方法，则使用浏览器本身提供的方法处理）

网站：https://github.com/douglascrockford/JSON-js

Ajax之文件上传

文章：http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

http://blog.csdn.net/inuyasha1121/article/details/51915742

①-简介

1. 使用Ajax实现文件的上传，但是这个标准只在w3c高版本的浏览器里面有实现，是属于一个ajax level2的标准。在低版本的IE里面是不兼容的。

网站：https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

1. 在使用Ajax做文件上传的时候，需要借助一个FormData对象，这个对象具有收集表单数据的能力，可以收集表单里面普通的数据，也可以收集文件信息。可以参考下面提供的文件。

②-FormData对象简单使用

在ajax里面做无刷新文件上传之前，我们需要先了解一个叫做FormData对象，然后这个对象可以帮我们去收集表单的数据（1. 基本数据 text 2. 可以收集上传文件）。

1. 设计一个如下的注册的表单（收集基本数据 text password）

效果

1. 利用FormData对象收集表单数据，然后使用Ajax技术发送给后台

注意：在使用FormData对象收集表单数据，使用Ajax发送POST请求的时候，不要设置请求头，如果设置，在服务器端，则无法正常收集post提交的数据信息。

1. 服务器定义一个 register.php 文件，接收ajax请求

③-文件上传-显示进度条效果

进度条效果

需求分析：

1. 由于我们上传要显示进度条，文件一般都是很大的文件，所以需要修改post上传数据的大小。
2. 整个表单提交的大小

b. 单个文件提供的大小

1. 创建一个上传文件的表单页面

效果

1. 使用Ajax做文件上传的时候，我们需要不断得知文件已经上传文件的大小和文件总大小的一个百分比。
   1. (loaded size )/ ( total size) 等于小的div宽度的百分比
   2. 如何获取文件已经上传的大小和总大小？

答：利用Ajax leval2 第一个新的方法（在这个Ajax对象上面存在一个upload属性，属性里面存在一个onprocess属性，可以这个属性设置一个回调函数，这个回调函数，会在有文件上传的时候，距离一定的间隔进行触发调用）

1. 在浏览器使用ajax完成图片上传

1. 定义一个register.php文件，接收ajax请求，完成上传

6. 效果

④-上传插件

现在一般来说我们很少自己使用ajax进行文件上传，一般都使用现成插件进行完成。底层的原理使用的 FormData 对象 + ajax ，注意，如果是低版本的IE浏览器也需要做无刷新文件上传，则FormData对象不能在使用，则我们可以使用 iframe技术进行无刷新上传。

插件：

1. 百度出的 webuploader

1. zyupload

Ajax跨域问题

①-什么是跨域？

答：当使用Ajax技术去请求本域名的资源信息的时候，是可以直接请求的。但是如果去别的域名的资源信息的时候，这个时候由于浏览器的一个同源政策的限定，是不允许直接去获取别的域名下的资源信息。

例如：www.sinsea.cn/index.html(ajax) —————>http://www.tngou.net/doc/food(提供的一个接口)

上面的这种请求就是一个跨域请求。

②-浏览器的同源政策是什么？

答：现代的浏览器默认只能让Ajax去请求本域名里面的资源信息，如果要请求域名的资源信息，则是不允许的。（备注：严格是是允许请求，但是请求后，会把响应的数据丢弃掉）

为什么浏览器存在同源政策的限定？

答：主要是为了安全。但是由于现在的项目融合比较多，肯定存在跨域的需求。

③-跨域示例

本域名：local.php.com

请求域名：local.test.com

两个域名不是同一个域。则使用ajax请求就会报错。

④-跨域成熟的解决方案

对于Ajax的跨域成熟的解决方案存在如下三种：

1. jsonp技术【最早技术来解决，比ajax还早】
2. 同域代理【需要自己服务器进行处理】
3. cors 响应头【缺陷 HTML5新标准，现代浏览器才支持】

目前使用最多应该是jsonp技术。其次就是同域代理。最后cors设置

jsonp的原理-只支持get方式-需要目标网站支持

简介

1. 由于同源政策的限定，Ajax是没办法直接请求别的域名的资源信息
2. 但是img script 等标签，可以发送网络请求，这些标签不受同源政策的限定
3. 我们可以动态去创造一个script标签，然后把它的src设置我们请求的地址，然后请求的时候还传递一些参数（传递一个叫做callback参数）
4. 请求的目标站，接受请求，过滤参数，对对应的数据格式化成json【把格式化后的json数据放置在传递过程中传递的一个叫做callback的回调函数里面】，然后在进行响应。

注意：jsonp只能完成get请求，同时jsonp需要目标网站的支持（把需要返回的数据填充在一个callback的回调函数里面）。

uuid相关资料：

http://www.jianshu.com/u/811a3c46491e

功能需求

请求历史上的今天进行数据获取

API接口：

https://api.asilu.com/

历史上的今天：

https://api.asilu.com/today/todayonhistory/

实操

1. 在自己网站定义一个页面，使用jsonp完成网络请求

效果

1. 引入jsonp.js文件，使用jsonp进行数据请求

3. 效果

同域代理

由于jsonp的技术需要目标网站的支持完成get请求，然后才可以完成请求。现在可以在自己的域名下创建一个动态的脚本文件.php（服务器端不受同源政策的限定），让这个php文件帮我们发送目标网站的请求。

原理图：

场景：

1. A域名希望通过Ajax请求B域名接口提供的天气信息，直接请求存在跨域，肯定是不允许的

2. A域名的Ajax可以先请求A域名的一个动态的脚本文本（携带一个参数？请求的B域名目标网站），让该脚本文件帮我们请求B域名的接口，然后请求完成后，把数据进行返回给本域名Ａ

3. A域名就可以通过中间的PHP脚本获取到数据

4. 中间的服务器充当的是一个代理人

代码：

A域名的Ajax请求

A域名的代理op.php 进行代理请求

效果

cors设置响应头-需要注意目前只支持w3c的浏览器

网站：http://www.cnblogs.com/Darren_code/p/cors.html

网站：http://www.cnblogs.com/hustskyking/

网站：http://www.cnblogs.com/TomXu/

原理：在目标网站设置一个允许访问的响应头。

在B域名的目标网站，设置一个响应头

在A域名可以直接使用Ajax调用B域名的资源信息

扩展-允许cors进行跨域

接口：https://cnodejs.org/api/v1/topics

总结：

对于ajax跨域，其真实的解决方法只有 cors（响应头）。

用的 jsonp 、同域代理（解决ajax不能跨域的一种方案）。

功能-自己实现

头条网站接口：

http://v.juhe.cn/toutiao/index?type=&key=d0c418c9d5324a8ddf197e85c3dc9c5a

不支持 jsonp 也不支持 cors 。那么只能进行同域代理。

效果

加载更多

一、概述

1、JavaScript简介

JavaScript被认为是客户端“脚本”，它不常叫“语言”，言外之意是比较简单，但是深入了解之后，你会发现 简单的外表下，蕴藏着丰富的内涵。

JavaScript是由Netscape（网景）提出并发展，它起初名为“livescript”，后从营销角度考虑更名为“javascript”，但它和java没有直接关系，顶多是js被期望发展成java那样面向对象的语言（基于对象）。

现在JavaScript标准由ECMA（European Computer Manufactures Assiocation）制定和维护，因此也叫“ECMAScript”，它是包含了网景的Javascript和微软的Jscript，最新的js版本是ES6（ECMAScript6.0）。

作为客户端脚本的JavaScript常用于网页浏览器的开发，然则它的设计却是一种通用性的脚本语言，可以被嵌入任何应用，例如嵌入falsh脚本化falsh player 嵌入applet脚本化java。

JavaScript应该包含：ECMAScript、DOM、BOM

2、应用场景

① 数据验证（表单验证）

② 网页特效（目前大多数的网页特效都是通过JS编写）

③ 编写网页小游戏

④ 服务器端编程，数据交互（Ajax、Node.js）

二、JavaScript基础回顾

1、检测JavaScript的执行情况

document.write();

alert(); === window.alert();

console.log(); — 它可以输出任何类型的变量，而且可以一次性输出多个变量。可以看到数据的结构。

2、JavaScript变量

1、命名规则

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

2、一条语句，多个变量

3、只声明变量，没有赋初值

4、重新声明变量

3、常量

常量必须给初始值；

常量不能改变值；

常量不能重新定义；

使用const来声明常量。

4、运算符

1、算数运算符

加减乘除 累加 累减

2、赋值运算符

编程中，“=”表示赋值，意思是将等号后面的值赋值给等号前面的变量。

3、用于字符串的+运算符《》

js中用“+”连接字符串，类似于php中的“点”。

如果“+”前后都是数值型，那么“+”表示加法运算。

4、比较运算符

大于、小于、大于等于…. 全等于、不全等

== ：表示相等判断，只判断值是否想等，不考虑数据类型。比如5 == ‘5’ 结果为true

=== ：表示全等判断，即考虑值是否想等，也考虑数据类型是否相同。比如5===’5’，结果为false。

5、三元运算符（三目、条件）

PHP：

$res = isset($_GET[‘type’]) ? ‘a’ : ‘b’;

JavaScript：

var a = 5==’5′ ? ‘hello’ : ‘nihao’;

6、逻辑运算符

and &&

or ||

!

5、流程控制

循环：for while do…while for…in

跳出循环：break continue

循环结构另一种写法

案例：

查找质数（素数），只能被1和它本身整除的数就是质数。1既不是质数也不是和数。

质数举例：2,3,5,7,11,13

和数举例：4,6,8,9,10

用程序查找100以内的质数。

跳出循环：

break跳出循环，终止该循环

continue跳过当前这次循环，继续执行下一次循环

6、函数

1、定义

function functionName(参数列表){

函数体

//return

}

2、函数参数默认值

JavaScript中函数的参数不能有默认值。ES6中的函数才允许参数有默认值。目前IE11不支持函数参数有默认值，但是火狐、谷歌、UC支持。

如果就想实现y有默认值这种效果，怎么办？

3、函数参数不固定

使用arguments可以获取到函数的所有参数。

arguments[0]表示函数的第一个参数

arguments[1]表示函数的第二个参数

….

以此类推。

arguments.length表示函数参数的个数。

4、函数作为变量

另一种把函数当做另一个函数的参数的形式：

5、函数自调用

6、函数在内存中的形式

7、数组

声明数组的方式：

①、var arr = new Array(数组的单元1, 单元2, 单元3….);

②、var arr = new Array(数字); //数字表示数组元素的个数

③、var arr = [数组的单元1, 单元2, 单元3….];

用length表示数组元素的个数，数组的长度。

8、数据类型

1、类型种类

PHP有8中数据类型：

4种基本数据类型：bool、string、int、float

2种复合数据类型：array、object

2种特殊数据类型：null、resource

JavaScript有7种数据：

3种基本数据类型：string、bool、number

2种复合数据类型：array、object

2种特殊数据类型：null、undefined

2、判断数据类型

使用typeof来判断变量的数据类型：

undefined – 如果变量是 Undefined 类型的

boolean – 如果变量是 Boolean 类型的

number – 如果变量是 Number 类型的

string – 如果变量是 String 类型的

object – 如果变量是一种引用类型（数组、对象）或 Null 类型的

注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 “object”。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

三、数据类型转化

1、转化成字符串

1、使用toString()方法。

常规转化：

用法：变量.toString();

基模式：

基模式针对的是整型的变量。

1110 十进制：

0*2⁰ + 1*2¹ + 1*2² + 1*2³ = 0 + 2 + 4 + 8 = 14

14 二进制：辗转相除法，最后取余数

14/2 = 7 ….. 0

7/2 = 3 …… 1

3/2 = 1 …….1

1/2 = 0 …….1

将余数反过来就是结果：1110

2、使用String()强制类型转化。

强制类型转化使用的方法是String();

用法：String(变量);

2、转化成数字

1、转化成整型parseInt()

parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN（not a number），不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

字符串中包含的数字字面量会被正确转换为数字，比如 “0xA” 会被正确转换为数字 10。不过，字符串 “22.5” 将被转换成 22，因为对于整数来说，小数点是无效字符。

parseInt() 方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成十进制整数。基是由 parseInt() 方法的第二个参数指定的.

2、转化成浮点型parseFloat()

parseFloat() 方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成整数。

不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的。parseFloat() 会把这个小数点之前的字符转换成数字。这意味着字符串 “11.22.33” 将被解析成 11.22。

使用 parseFloat() 方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，而不是用八进制或十六进制。该方法会忽略前导 0，所以八进制数 0102 将被解析为 102。对于十六进制数 0xA，该方法将返回 NaN，因为在浮点数中，x 不是有效字符。（注释：经测试，具体的浏览器实现会返回 0，而不是 NaN。）

此外，parseFloat() 方法也没有基模式。

3、强制类型转化Number()

3、转化成布尔

当要转换的值是至少有一个字符的字符串(非空字符串)、非 0 数字或对象时，Boolean() 函数将返回 true。

如果该值是空字符串、数字 0、undefined 或 null，它将返回 false。

四、执行流程

1、全局环境

js在运行时，首先会创建一个全局执行环境，这个全局环境就是定义一个全局对象，页面中所有的内容（不同的script中的内容） 都是这个全局对象的成员，在浏览器javascript中（嵌入网页的js）这个全局对象是window。

除此之外，还可以调用window对象中的a或者b，看一下window对象中是否有这两个成员。

2、执行流程

读一段（一个script标签）代码 编译（分析词法、句法） 执行（输出、调用） 继续读下一段script

对于同一个script代码段中的函数来说，函数会预先加载。也就是说可以先调用函数，后声明函数。

但是不能在前一个script代码段中调用后一个script代码段中的函数。

3、错误类型

编译错误：对词法、句法的分析，也就是语法上有没有错误。

执行错误：输出、调用函数等。

如果出现语法上的错误，当前的script代码段的内容全部终止执行

如果发现执行错误，当前script代码段错误之前的代码还能够正常执行，错误之后的代码会终止执行。

无论发生哪种错误，都不会影响下一个script代码段。

4、异常处理

可以用try…catch…来处理。在js中，错误处理类是Error（类似于PHP中的Exception）。

自然抛出：

手动抛出：

五、作用域（链）

1、作用域分类

js中只有全局作用域和局部作用域，ES6中还有块作用域。

2、作用域

作用域就是变量有效的活动空间。比如函数内部的用var声明的变量，它的活动空间就是函数内部，那么函数内部就是改变量的作用域。

局部作用域：函数内部。

全局作用域：函数外部。

案例一：函数内部可以使用函数外部的变量

复杂一点的案例

案例二：函数外部不能够使用函数内部用var声明的变量

案例三：函数外部能够使用函数内部没有用var声明的变量

案例四：带参数的情况

4、作用域链

当访问一个变量的时候，首先看当前的作用域中是否有这个变量的声明，如果有，直接使用它，如果没有，那么去上一层作用域中查找，上一层作用域如果也没有该变量的声明，则继续向上一层作用域中查找，直到全局作用域。这个链式的查找方式就是作用域链。

六、事件

1、事件定义

事件由什么组成：

用户的行为（鼠标行为、键盘行为） + JavaScript引擎 + 事件表达式

2、事件表达式

3、事件绑定的三种方式

1、使用dom对象，绑定事件（动态绑定）

这种方式完全不用考虑html。

这种方式，就是获取要绑定事件的dom对象，然后给其绑定一个事件处理函数即可。

事件处理函数中的 this表示绑定该事件的dom对象。

2、行内绑定

直接在标签内绑定一个事件。

这种绑定事件的方式，js中的this表示当前的标签的dom对象。

3、行内绑定

这种绑定方式中的this表示window对象。

4、常用事件

页面事件

onload ：当页面载入完毕后触发

焦点事件

onfocus ：当获取焦点时触发

onblur ：当失去焦点时触发

鼠标事件

onmouseover ：当鼠标悬浮时触发

onmouseout ：当鼠标离开时触发

键盘事件

onkeypress ：当键盘按下时触发

onkeydown ：当键盘按下时触发

onkeyup ：当键盘弹起时触发

其他事件：

onclick ： 单击事件

onchange ： 改变选项时触发的事件（多用于select>option）

onresize：当窗口改变大小时触发的事件

onscroll：当滚动条滚动时，触发的事件

onsubmit：当表单提交时触发的事件

5、案例-点击页面中的li，能够显示它的下标

先找到页面中的li，然后用循环的方式给每个li都绑定一个单击事件

错误的输出方式：

正确的方式：

七、案例—标签页效果

目录

一、回顾与加强

1、JavaScript错误类型及特点

1、编译类型的错误

编译错误就是语法错误。

2、执行错误

语法上没有错误，结合上下午出现的错误，比如调用了一个不存在的变量或函数等。

2、事件

1、事件驱动式

事件驱动式由：用户的行为+JavaScript引擎捕获用户的行为+调用处理函数。实际上就是一个事件的组成。

2、事件处理函数的绑定与执行

①、行内绑定

在HTML标签内指定事件并写处理程序。

②、行内绑定—动态绑定

如果事件的处理程序又大段的js代码，那么直接写到行内，肯定是不合理的，解决的办法是将大段的js代码封装成函数，然后触发事件的时候，调用这个函数。

③、动态绑定

通过获取元素（标签、节点）的dom对象，然后给dom对象绑定事件的方式来实现事件的绑定。

3、在事件处理程序中，this分别表示什么

①、行内绑定

②、行内绑定—动态执行

③、动态绑定

二、闭包

1、概念

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

2、特点（作用）

1、和作用域的特定一致

可以在函数内部使用函数外部的变量。

2、使用闭包，内存不会释放

3、案例

1、点击页面中的三个li标签，能够正常输出li的下标

上面案例的另一种写法：

2、页面刷新后，每隔1秒分别输出1/2/3/4/5

三、DOM

1、什么是DOM

DOM全称是Document Object Model（文档对象模型），它是JS将HTML按文档结构和内容层次抽象出的模型，使得JS有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。

DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点，都是一个dom节点对象。

2、节点与DOM模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点，用document对象表示

每个 HTML 元素是元素节点，比如html、head、body、a、h1

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点，比如href

注释是注释节点

3、节点之间的关系

4、元素节点查询操作

1、基于文档（document）查询

document.getElementById(元素id); //得到一个dom对象

document.getElementsByTagName(标签名); //得到的是一个数组，数组的每个单元是一个dom对象

前面这两种方法推荐使用，因为兼容性好。

document.getElementsByClassName(类名); //IE8+支持，就是从IE9支持 得到的是一个数组，数组的每个单元是一个dom对象

document.getElementsByName(元素的name属性); //得到的是一个数组

//h5中提供的方法

document.querySelector(css选择器); //IE7+支持 得到的是一个dom对象

document.querySelectorAll(css选择器); //IE7+支持 得到的是一个数组

测试的html：

js代码及效果：

2、相互关系查询

①、根据父节点查找子节点

②、根据子节点查父节点

③、查询兄弟节点

3、遗留DOM

早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。

document.body 访问body节点

document.forms 访问所有的表单 返回集合

document.formName[index].name 访问表单项

document.anchors 访问所有的锚点 返回集合

document.links 访问所有的链接 返回集合

document.images 访问所有的图片 返回集合

document.all 访问所有的元素

5、元素节点增删改操作

1、增加元素节点/创建节点

方法一：父节点.appendChild(子节点)

方法二：父节点.insertBefore(新节点, 参照的节点);

2、修改节点

方法：父节点.replaceChild(新节点, 待替换的节点);

3、删除节点

方法：父节点.removeChild(子节点);

6、属性节点操作

1、获取元素的属性

elementNode.attributes 获取元素的所有属性

elementNode.getAttribute() 读取一个属性值

elementNode.属性名 获取元素的属性

2、添加/修改元素的属性

elementNode.setAttribute() 设置（修改/添加）一个属性值

elementNode.属性名 = 值 设置元素的属性

3、删除元素的属性

elementNode.removeAttribute() 删除一个属性

4、判断元素是否有哪个属性

elementNode.hasAttribute() 检测是否有某个属性，有返回true，没有返回false

5、案例—全选，反选，取消

代码见19全选反选取消.html

7、操作css样式

1、设置css样式：

语法： node.style.css样式 = 值

不带中横线的css：node.style.样式 = 值。比如有color，border，width

带中横线的，样式要去掉中横线，后面的首字母大写，backgroundColor、fontSize、lineHeight

2、获取css样式

使用node.style.样式的方式只能获取行内样式和js已经设置过的样式。

在IE8及更低版本浏览器中支持node.currentStyle.样式

高版本浏览器支持getComputedStyle(node).样式

兼容的性的写法：

8、DOM属性

DOM有四个属性，分别是：

innerHTML

获取/设置元素里的html内容

nodeName

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

nodeType

表示节点的类型

元素 1

属性 2

文本 3

注释 8

文档 9

案例：完成兼容性的查找子节点的方法，及查找上一个兄弟的方法，及查找下一个兄弟的方法

获取子元素的兼容性写法：

获取上一个兄弟的兼容性写法：

获取下一个兄弟的兼容性写法：

9、获取元素的位置

offsetLeft 元素在网页中水平坐标值 ele.offsetLeft

offsetTop 元素在网页中垂直坐标值 ele.offsetTop

offsetWidth 元素在页面中占据的宽度 ele.offsetWidth

offsetHeight 元素在页面中占据的高度 ele. offsetHeight

HTML+css：

js及输出结果：

scrollLeft 滚动条在容器中水平滚动的距离 ele.scrollLeft

scrollTop 滚动条在容器中垂直滚动的距离 ele.scrollTop

测试的时候，先将页面设置的大一点，能看到滚动条：

当滚动条滚动的时候，输出滚动的距离：

0、知识点补充

查找节点：

firstChild lastChild：会把空白计算在内

firstElementChild lastElementChild ：只查找元素类型的子节点，不会计算空白，但是在IE8+才支持

克隆节点：cloneNode()

一、案例—淡入效果

1、做默认的html+css

2、每隔两秒生硬的变化

加入临界条件，控制inIndex和outIndex的范围：

3、创建一个设置透明图的方法

4、让图片慢慢变化

5、解决变化过程中，最后一张总是显示的问题

变化过程中，待显示的图片的透明度还没有达到1，也就是半透明状态，而其他图片的z-index值又都为1，z-index值相同的话，默认总是显示最后一张。

解决的办法，变化这一刻（在变化的1秒钟之内），待显示的图片的z-index设置为3，其他的图片的z-index的值设置为1，让待隐藏的图片的z-index值为2.

二、事件与事件对象

1、事件监听与移除事件监听

事件监听要解决的问是给一个dom对象绑定多个事件。

1、事件监听

针对IE8+及火狐浏览器，使用addEventLister()，在绑定事件的时候，不要写on。

针对IE8及更低版本浏览器使用attachEvent()，绑定的事件倒序执行。

写一个兼容性的函数：

2、移除事件监听

兼容性写法：

2、事件对象

事件对象存在于事件处理函数中。

事件对象就是描述当前事件的具体的情况的对象。这个对象根据事件的不同，内容可能会发生细微的变化，比如键盘事件，事件对象就会包括keyCode，比如单击事件，事件对象就会包含点击的坐标。

获取事件对象的兼容性写法：

shiftKey：表示是否按了shift键，如果按了返回true，没有按返回false

ctrlKey：表示是否按了ctrl键，如果按了返回true，没有按返回false

altKey：表示是否按了alt键，如果按了返回true，没有按返回false

keyCode：表示键盘的代码，是一个数字，每个键都会对应一个数字。具体查看“键盘KeyCode对照表.docx”

判断是否按了@键：

3、阻止冒泡事件

1、什么是冒泡事件？

在点击b这个div的时候，由于b在a的上面，也相当于点击了a。所以会触发两个事件，这种情况就是冒泡事件。

2、如何阻止冒泡行为

如果要阻止冒泡，

标准浏览器使用evt.stopPropagation()

IE内核浏览器使用window.event.cancelBubble = true;

4、阻止默认行为

比如表单提交或者超链接跳转，都会有一个地址，点击表单中的提交按钮或者超链接就会跳转到相应的地址。如果点击之后不希望这样跳转，就使用js方法阻止它，这就是阻止默认行为。

另外的方法：

三、案例—可编辑的表格

1、完成html+css布局

css：

2、隔行换色

3、找到包括名字的td，并绑定单击事件

4、点击td后，将input放到td中

设置input的样式，阻止产生多个input

5、给input绑定事件

四、面向对象概述

1、什么是对象

我喜欢大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子的女孩。比如有孙俪，范冰冰。

上面这句话中的“大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子”表示一类人，在程序中就是一个类。而孙俪，范冰冰是符合这类的人，在程序中就的对象。

2、面向对象编程

面向对象编程简称OOP（Object-Oritened Programming）为软件开发人员敞开了一扇大门，它使得代码的编写更加简洁、高效、可读性和维护性增强。它实现了软件工程的三大目标：（代码）重用性、（功能）扩展性和（操作）灵活性，它的实现是依赖于面向对象的三大特性：封装、继承、多态。在实际开发中 使用面向对象编程 可以实现系统化、模块化和结构化的设计 它是每位软件开发员不可或缺的一项技能。

五、自定义对象

1、构造函数和类的说明

PHP中要声明一个对象的话，必须先声明一个类，然后通过关键字new实例化得到一个对象。

在js中，没有类的概念，只有构造函数的概念，js中会把构造函数当做类。

在ES6（ECMAScript6）中才引入了类的概念。

2、this关键字和成员

用this关键字，在构造函数中添加成员：

this表示根据Person实例化的每个对象。当前用的是哪个对象，this就表示哪个对象。

3、删除成员

使用的关键字是delete。delete关键字用于删除对象的成员，既可以删除成员属性，也可以删除成员方法。

4、练习

案例目的是设置dom对象的css样式：

使用的办法不是直接设置，而是将设置dom对象css样式写到对象的成员方法中

完成链式调用：

5、自定义对象在内存中的表现形式

创建一个对象后，会在内存中栈和堆都开辟一个新的空间，堆中存储的是对象的实际内容，栈区存放的是堆的地址。

删除其中一个对象，会不会对另外的对象有影响？

六、json格式的对象

1、json简介

json就是符合某种格式的字符串。

JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析

JSON是独立于语言和平台的。所有的编程语言都认识JSON，这一点和XML一样。

2、json格式

有两种写法：

①：方括号在外层，和JavaScript中的数组格式一样。

[‘apple’, ‘banana’, ‘pear’, ‘orange’, ‘xigua’]

[{id:1, name:’宋江’, nickname:’及时雨’}, {id:2, name:’卢俊义’, nickname:’玉麒麟’},{id:1, name:’林冲’, nickname:’豹子头’}]

②、大括号在外，和JavaScript中的对象格式一样。

{键:值, 键:值, ….}

{键:[], 键:[], …}

只要是[]，就要符合中括号的语法（和数组写法一样）;

只要是大括号，就要符合大括号的语法（键:值, …）

3、json格式的对象

我们最终要讨论的是JavaScript的对象写法，只不过这种写法和json的格式一样。

成员属性和成员方法：

调用成员：

七、内置对象

手册位置：上面的JavaScript—左侧的JavaScript—右侧的参考书

1、Object

2、String对象

使用方法：

属性

length：表示字符串的长度。

方法：

indexOf() – 查找一个字符串是否存在，返回值是存在的位置（存在的情况），或-1（不存在）

substr() – 截取字符串。两个参数，第一个参数表示起始位置可以是负数；第二个参数可选，表示长度，非负，不填表示到结尾

substring() –截取字符串。两个参数，都是非负数。分别表示起始位置和结束位置，第二个参数不写表示到结尾

slice() –截取字符串。两个参数，第一个表示起始位置，可以是负数。第二个是结尾位置。注意结尾位置不能在起始位置之前。

split() – 将字符串分割成数组。两个参数，第一个表示分隔符，第二个可选表示数组的最大长度

replace – 替换字符串中的值。两个参数，第一个表示查找的值，第二个表示替换后的值。

3、Date对象

使用方法，先new Date()，得到一个对象，然后用这个对象调用它里面的成员方法。

4、Array对象

属性：

length，表示数组元素个数

方法：

concat() 连接两个或更多的数组，并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

shift() 删除并返回数组的第一个元素

slice() 从某个已有的数组返回选定的元素

splice() 删除元素，并向数组添加新元素。

toString() 把数组转换为字符串，并返回结果。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

5、Math对象

方法：

abs(x) 返回数的绝对值。 正数的绝对值是它本身，负数的绝对值是它的相反数。

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

random() 返回 0 ~ 1 之间的随机数。包含0，不包含1。[0,1)

随机整数公式：Math.floor(i + Math.random() * (j – i + 1))

round(x) 把数四舍五入为最接近的整数。

6、window对象

方法：

alert(); — 弹出一个警告框

confirm(‘你确定要删除吗’); 点击确定返回true，点击取消返回false

prompt() – 弹出一个可输入的对话框，点击确定返回输入的内容，点击取消返回null

open() – 打开一个新窗口

var s =setTimeout(“js代码或js函数”, 毫秒数) – 表示多少毫秒后，执行前面的js代码或函数，只执行一次

var t =setInterval(“js代码或js函数”, 毫秒数) – 表示每隔多少毫秒，执行一次前面的js代码或函数。

clearTimeout(s); — 清除由setTimeout产生的定时器

clearInterval(t); — 清除由setInterval产生的定时器

7、navigator

navigator.userAgent，从这个结果中可以查看到浏览器及浏览器的版本。

8、screen

screen.availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

screen.availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

screen.height返回显示屏幕的高度

screen.width返回显示屏幕的宽度

9、history

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。

10、location

reload() – 刷新页面，和点击浏览器中的刷新按钮是一个意思，如果添加参数为true表示强制刷新，和按Ctrl+F5一样，都表示清除缓存刷新。

location的属性：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

http://javascript.ruanyifeng.com/

一、原型（原型链）

1、原型对象

案例：根据构造方法创建两个对象，看内存中的存在形式

内存存在形式：

根据内存图，可以看出，在内存中，两个对象的成员方法占用了两个空间，但实际上这两个方法完全一样，没有必要占用两个空间。

解决的办法就是使用原型对象。把两个对象相同的内容都放到构造方法的原型对象中。

原型对象和构造器的关系：

原型对象和构造器的关系：

将person中的jineng方法放到它的原型对象中。

2、原型链

原型对象也是对象。它也可以充当其他构造器的原型对象。

上图中，Object对象是person的原型对象，根据person实例化得到p1对象，p1对象是Boy构造器的原型对象，根据Boy实例化得到b1.

在查找一个对象的成员属性的时候，优先从对象自身查找，如果没有从它的构造方法中查找，如果构造方法中也没有，那么去构造方法的原型对象中查找，如果还没有，那么都构造器的原型对象的构造器中查找，一直找到Object对象为止。这种链式的查找方式就是原型链。

3、扩展内置对象

内置对象有：String、Array、Date、Math、等。

比如使用String对象的方法：

var s = new String(‘hello’);

s.substr();

String是JavaScript内置的一个构造函数。

如果在String这个构造函数的原型对象上绑定一个方法的话，那么所有的字符串都可以使用这个方法。

其他我们所学的哪些String对象中的方法，都是String的原型中的方法。

4、DOM对象的原型对象

DOM对象实际上就是通过getElement….这类方法获取页面中的元素、属性等生产的对象。

完成链式的设置dom对象的css的方法：

三、定义类或对象多种方式

手册位置：上面JavaScript 左侧的JavaScript 到页面最下方点击“马上学生JavaScript高级教程吧” 左侧找到定义类或对象

1、原始的定义对象的方式（构造函数方式）

这种方式创建对象，如果创建多个对象的话，会为每个对象在内存中生成一个新的空间，比较占内存。

2、原型对象方式

3、混合方式（构造方法方式+原型对象方式）

原则是：

把所有的对象的成员属性全部写到构造方法中，

把所有的对象的成员方法全部写到原型对象上。

4、动态混合方式

有些开发人员认为混合方式看起来不想是一个类，因为成员方法的绑定在构造函数外面，使用动态混合方式可以解决。

5、到底采用哪种方式

在开发中，用的最多的就是混合方式和动态混合方式。

四、私有和封装

在JavaScript中，没有类，那么只能模拟私有的成员。

五、静态属性和方法

PHP中调用静态成员：类名::成员

六、继承

1、原型链方式继承

通过指定构造函数的原型对象方式，可以实现继承。

2、对象冒充方式继承

1、原始的对象冒充

2、call和apply完成继承

3、实际开发中，使用哪种方式实现继承

答案是使用混合方式，对于成员属性，使用对象冒充方式，对于成员方法，使用原型链方式

七、操作符instanceof

用来判断一个对象的构造器是否是xxx

语法：Obj instanceof Constructor

person的prototype是Object对象，Object对象的构造器是Object函数，所以检测p1的构造器的时候，person和Object都返回true。

八、for…in

用来遍历数组和对象的。

语法：

for(var x in arr){

//通过指定下标的形式，找到数组的每个单元，如 arr[x];

}

九、顶层函数

顶层函数也就是全局函数，这些函数的调用不需要使用对象去调用。

比如有Number()、String()。

在手册的位置：上方的JavaScript 左侧的JavaScript 右侧的参考书 左侧JavaScript对象列表中有一个Functions.

encodeURI()不会对“：;/?:@&=+$,#”进行编码，如果要对这些字符进行编码的话，使用encodeURIComponent()；

十、面向对象应用案例 – 贪吃蛇

1、分析

游戏有有三个对象，一个地图、一个食物、一条蛇。

所以默认先创建三个对象。

2、完成地图类（构造函数）

地图有宽、高、背景颜色。这都是地图这个对象属性。

3、完成食物类

计算食物的left和top的方案：

把食物放到地图中：

首先把Map类的对象，升级为全局变量。

在地图类中用一个成员属性_map表示地图那个div

把食物放到地图上：

4、开发一条静态的小蛇

蛇是由三个小div组成，每个小div都有宽度、高度、背景颜色、定位。

将蛇显示在地图上：

5、蛇移动

写一个蛇移动的方法，这个方法实际上就是改变蛇的坐标即可。

每隔两秒调用一个move方法，并重新生成蛇。

从新显示蛇的时候，会发现蛇越来越长，原因是每次显示蛇（show方法调用的时候），都会重新创建一个div，这样的话，div会越来越多，解决的办法是判断：

6、控制蛇的方向

通过按键（上下左右键）控制蛇的运动方向

1、通过按键获取键盘的keyCode

2、将keyCode传递给snake类的direct方法

3、direct方法设置蛇的方向的属性directtion

4、在move方法中，根据directtion属性，设置蛇头的坐标

7、吃食物

判断，如果蛇头的坐标和食物的坐标一致，就表示吃到了

解决食物不会减少的问题：

8、其他问题还有，越来越快，快到某一个点应该保持这个速度就可以了

9、边界问题，判断蛇头的坐标是否超出边界的坐标

10、不能撞自身，判断蛇头坐标是否和蛇身中的某一节坐标相同

DOM操作：

元素：获取节点，添加节点，修改节点，删除节点，克隆节点

属性：获取元素的属性，增删改属性

事件绑定：

domObj.onclick = function(){

//这个函数不是直接执行，由用户的行为来触发这个函数

}

常用事件：

window.onload事件：

onclick

onkeyup / onkeydown / onkeypress

onmouseover / onmouseout

onfocus / onblur

onchange

正则表达式

一、概述

1、概述

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个字符串中是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。

匹配就是在某个字符串中查找你想要查找的内容（由正则表达式决定），如果查找到了，就表示匹配。没有查找到就表示不匹配。

abacabad

正则表达式本身是一门独立的技术，可以被大多数编程语言所使用，如Javascript、PHP、Java

2、应用场景

（1）表单验证里面，验证字符的合法性，如邮箱是否合法，手机号是否合法等等。

（2）信息过滤，如论坛帖子或者评论中的非法字符，例如 sql注入、js脚本注入、煽动性的言论。

（3）信息采集，采集别人网站上面的内容，例如整页采集时 筛选出需求的部分

（4）信息替换。

（5）页面伪静态的规则

二、入门案例

1、正则用法说明

这个案例是在字符串str中查找是否有p。

正则语法：

以两条斜线，作为正则表达式起始和结尾的定界符。不能加引号。

match是字符串方法，所以应该由字符串调用。意思是在字符串中匹配要查找的值，如果匹配将返回匹配的内容，如果不匹配返回null。

2、全局修饰符g

g是global，表示全局的意思，它是正则表达式语法中的修饰符，修饰符应该放到定界符(/)的后面。

三、正则语法

1、量词

n+ 匹配任何包含至少一个 n 的字符串。匹配一个或多个前导字符（前导字符就是紧挨着+的前一个字符）

n* 匹配任何包含零个或多个 n 的字符串。前导字符有没有都行

n? 匹配任何包含零个或一个 n 的字符串。

n{X} 匹配包含 X 个 n 的序列的字符串。

n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。

n{X,} 匹配包含至少 X 个 n 的序列的字符串。

n$ 匹配任何结尾为 n 的字符串。从末尾开始匹配

^n 匹配任何开头为 n 的字符串。（注意位置在前面）

^n$ 表示只匹配字符串n。也就是匹配整个字符串。

2、元字符

. 表示单个字符，表示任意字符。除了换行和行结束符。

.* 表示任意字符串（0个或多个任意字符，除了换行和行结束符）

\w 匹配任何数字、字母、下划线。一个\w表示一个字符。

\W 匹配任何非数字、非字母、非下划线。

\d 查找数字。

\D 查找非数字字符。

\s 查找空白字符。

\S 查找非空白字符。

\b 匹配单词边界。（边界字母个数没有限制；\b放前面表示匹配单词前面的边界，\b表示匹配单词后面的边界）

\B 匹配非单词边界。

\n 查找换行符。

\r 查找回车符。

\t 查找制表符。

3、方括号

方括号表示一个范围，也称为字符簇。

[abc] 查找方括号之间的任何字符。

[^abc] 查找任何不在方括号之间的字符。（方括号中的^表示取反）

[0-9] 查找任何从 0 至 9 的数字。表示一个字符

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。包括下划线。

[5-8] 查找5 <= 目标 <= 8的字符

(red|blue|green) 查找任何指定的选项。（竖线|表示或者）

4、修饰符

i 执行对大小写不敏感的匹配。

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m 执行多行匹配。

5、转义字符

四、分组/捕获和反向引用

捕获和反向引用的语法的解释：

正则中出现的小括号，就叫捕获或者分组

在正则语法中（在/…/内），在捕获的后面，用“\1”来引用前面的捕获。用\2表示第二个捕获的内容….

在正则语法外（如replace时），用“$1”来引用前面的捕获。

禁止引用

(?:正则) 这个小括号中的内容不能够被引用

五、匹配中文（utf-8编码）

每个字符（中文、英文字母、数字、各种符号、拉丁文、韩文、日文等）都对应着一个Unicode编码。

查看Unicode编码，找到中文的部分，然后获取中文的Unicode编码的区间，就可以用正则匹配了。

中文的Unicode编码从4E00开始，到9FA5结束。

[4E00-9FA5]

完整的Unicode编码表：http://blog.csdn.net/hherima/article/details/9045861

六、环视（断言/零宽断言）

every(?=n) 匹配任何其后紧接指定字符串 n 的字符串。

查找a，什么样的a呢？后面必须是b的a

every(?!n) 匹配任何其后没有紧接指定字符串 n 的字符串。

查找a，什么样的a呢？后面不能是b的a

另外，还会看到(?!B)[A-Z]这种写法，其实它是[A-Z]范围里，排除B的意思，前置的(?!B)只是对后面数据的一个限定，从而达到过滤匹配的效果。

七、正则对象的属性和方法

正则对象中的成员方法和属性的正确调用方式：

1、exec方法和lastIndex属性

exec方法执行一个正则匹配，只匹配一次，匹配到结果就返回一个数组类型的结果，匹配不到就返回null。并将表示匹配的位置 置为下一个匹配的位置。

lastIndex一个整数，标示开始下一次匹配的字符位置。没有更多匹配重置lastIndex为0.

依次调用exec匹配下一个的例子：

匹配带子表达式的例子：

带子表达式并且依次调用的例子：

2、test方法

test方法检测目标字符串和正则表达式是否匹配，如果匹配返回true，不匹配返回false。

八、支持正则表达式的 String 对象的方法

1、search()

在字符串中搜索符合正则表达式的结果。如果找到结果返回结果的位置，停止向后检索，也就是说忽略全局标识符g；如果没有匹配结果，返回-1.

2、match()

在字符串中检索匹配正则表达式的子串；如果匹配，返回包含匹配结果的一个数组；不匹配返回null。

不加全局g的情况：

获取的结果只是第一个匹配的内容，匹配的内容中的第一个单元是匹配的结果，后面的单元是子表达式

加全局的g的情况：

获取的结果是所有匹配的内容，但是不包含子表达式。

多次调用和调用一次效果一样。

3、split()

将字符串分割成数组：

4、replace()替换

默认只替换一次，加g全部替换

替换的时候，使用”$1″表示第一个字表达式：

替换abc为a[a-b-c]c hds h[h-d-s]s

替换aaa bbb ccc为Aaa Bbb Ccc

九、案例

1、匹配手机号格式是否正确

要求：

基本的要求：11位，1打头，纯数字

特别精细的话，必须联系各大运营商，查看23位都是什么，比如有136的，但是可以没有163的。

2、匹配邮箱格式是否正确

邮箱：

@前面有4~16个字符（都可以有数字，字母，下划线，点 ，中横线）

@后面点前面：允许数字字母组合，长度2~10位

点后面：只允许出现字母，长度为2~5；

还有一种情况是后面是两个点，如xxxx@xx.com.cn

3、解决结巴程序

把叠字的字符串，换成单子，比如，“今今今今天天天天天天天天中午吃吃吃了泡面”换成“今天中午吃了泡面”

4、用户名验证

注册的时候，要求用户名：长度4~10位，不能是纯数字，不能是纯字母，不能有特殊符号，不能以数字打头。

十、PHP中的正则表达式

语法和JavaScript中的正则语法基本一致。

PHP中的正则函数：

1、preg_match()

基础语法练习：

基础语法和js中正则语法基本相同。

具体查看preg_match的用法：

带有子表达式的例子：

2、preg_match_all();

执行正则表达式的全局匹配

查看匹配情况（不带子表达式）：

查看匹配情况（带子表达式）：

3、preg_replace();

案例：解决贪婪问题？

4、php中匹配中文