jQuery（三）

回顾

查找元素
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()：同级元素
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)：复制节点和对应的事件
一些常用的方法和属性
1. size()：获取节点集合的长度
2. length：获取节点集合的长度
3. index()：获取节点的索引
4. data()：缓存或获取缓存数据
5. $.trim()：去空格
6. $.merge()：合并数组
DOM和jQuery对象互换
1. 通过$()和jquery()方法将DOM转成JQuery对象
2. 通过get()和[]的方法将jQuery的对象转成DOM对象
链式操作：每个方法执行完毕后返回当前对象，所以我们能够实现链式操作。

jQuery设置事件处理

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

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

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

$(document).ready()事件

	DOM方式	jQuery方式
执行次数	只有最后一个window.onload()起作用	$(document).ready()可以无限制的使用
执行时间	在全部静态资源（文字，图片，js，样式）在浏览器显示完毕才执行加载事件	只要静态资源在内存中形成DOM结构就开始执行，这时候可能内容在浏览器还没有显示。

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

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

DOM操作练习

$(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>

<option>Berry</option>

<option>Ketty</option>

</select>

</div>

<div>

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

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

</div>

<div>

</div>

绑定事件（bind）

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

$(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>

反绑定事件（unbind）

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

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

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

#btn{

width:100px;

height:50px;

cursor:pointer;

background-color:#F90;

color:#F00;

}

</style>

$(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()绑定的事件

$(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>

</ul>

事件对象

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

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

hover

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

toggle

显示隐藏元素

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

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

#first{

width:300px;

height:200px;

background-color:#060;

color:#FFF;

}

</style>

$(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>

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

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

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

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

</div>

向上向下

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

$(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>

淡入淡出

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

$(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(参数,运行时间)

#first{

width:100px;

height:100px;

background-color:#060;

}

</style>

$(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>

动画的例题

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>

$(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>

</ul>

</body>

jQuery中的ajax

getScript()，getJSON()

$.get()，$.post()，$.load()

$.ajax()

jQuery对ajax进行了封装

$.ajax()

$.ajax()参数选项

url	请求的地址
type	请求的方式 get\|post
data	请求的数据
dataType	返回的数据类型： xml，html，script，json，jsonp，默认是text
success	function：当ajax执行成功后调用的函数
error	funtion：当ajax执行失败后调用的函数

例题

HTML页面

$(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>

PHP页面

<?php

echo $_GET[‘username’];

运行结果

$.get()和$.post()

load()

可以实现局部刷新

17-demo1.php

</div>

$(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> ”;

}

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>

</tr>

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

<tr>

</tr>

<?php endwhile;?>

</table>

运行结果

$.getScript()

用来加载脚本

写一个js脚本

动态加载js

$.getJSON()

获取JSON格式的数据

新建PHP页面

<?php

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

echo json_encode($stu);

新建HTML页面

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

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

在phpmyadmin.com中创建PHP页面

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

服务器返回XML格式

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

$(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(){

}

练习

例题：编辑表格内容

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>

$(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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

例题：导航栏

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>

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

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

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

});

</script>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

例题：弹出对话框

.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>

//定义窗口

$.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>

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

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

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

标签: DOM操作事件处理事件委托

Jquery（三）事件处理、DOM操作、事件委托

Ajax（一）使用场景、瀑布流、请求和响应、传参、用户注册

Jquery（二）元素集合查找、链式操作、DOM、缓存数据

Jquery（二）元素集合查找、链式操作、DOM、缓存数据

发表回复取消回复

Search

About Me

Winston Lee

About Me

Categories

Jquery（三）事件处理、DOM操作、事件委托

jQuery（三）

回顾

jQuery设置事件处理

$(document).ready()事件

DOM操作练习

绑定事件（bind）

反绑定事件（unbind）

一次性绑定（one）

事件委托和取消事件委托

事件对象

hover

toggle

显示隐藏元素

向上向下

淡入淡出

动画（animate）

动画的例题

jQuery中的ajax

$.ajax()

$.get()和$.post()

load()

$.getScript()

$.getJSON()

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

服务器返回XML格式

扩展jQuery插件

例题：编辑表格内容

例题：导航栏

例题：弹出对话框

Ajax（一）使用场景、瀑布流、请求和响应、传参、用户注册

Jquery（二）元素集合查找、链式操作、DOM、缓存数据

Jquery（二）元素集合查找、链式操作、DOM、缓存数据

发表回复 取消回复

Search

About Me

Winston Lee

About Me

Categories

Tags

发表回复取消回复