回顾

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请求