事件绑定
事件绑定
jquery事件的简单操作：
$().事件类型(function事件处理);
$().事件类型();
jquery事件绑定
$().bind(事件类型，function事件处理);
$().bind(类型1 类型2 类型3，事件处理); //给许多不同类型的事件绑定同一个处理
$().bind(json对象); //同时绑定多个不同类型的事件
(事件类型：click mouseover mouseout focus blur 等等)
事件处理：有名函数、匿名函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
//1、bind()事件绑定使用
//同一个对象绑定多个click事件
$(function(){
$('div').bind('click',function(){
console.log('谁在碰我');
});
$('div').bind('click',function(){
console.log('谁又碰我');
});
$('div').bind('mouseover',function(){
//给div设置背景
$(this).css('background-color','lightgreen');
});
$('div').bind('mouseover',function(){
//给div设置背景
//$(this).css('background-color','lightblue');
});
});
//2、bind()事件绑定简单使用
//为多个不同类型事件绑定同一个处理
//注意：事件彼此通过 “一个”空格分隔
$(function(){
$('div').bind('click mouseover mouseout',function(){
console.log('hello');
});
});
//3、bind()事件绑定简单使用
//通过一个json对象同时绑定多个不同事件
$(function(){
var jn = {
click:function(){
console.log('谁敢碰我？？？');
},
mouseover:function(){
console.log('轻轻的我来了。。');
},
mouseout:function(){
console.log('我又走了');
}
}
$('div').bind(jn);
});
</script>
<style type='text/css'>
div{width:300px;height:200px;background-color:lightblue;}
</style>
</head>
<body>
<h2>jquery事件绑定</h2>
<div></div>
</body>
</html>取消事件绑定
① $().unbind(); //取消全部事件
② $().unbind(事件类型); //取消指定类型的事件
③ $().unbind(事件类型，处理); //取消指定类型的指定处理事件
注意：第③种取消事件绑定，事件处理必须是有名函数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
//unbind()取消事件绑定操作
//以下f1和f2要定义到最外边，使用没有任何影响
function f1(){
console.log('这是f1');
}
function f2(){
console.log('这是f2');
}
$(function(){
$('div').bind('click',function(){
console.log('谁在碰我？');
});
$('div').bind('click',function(){
console.log('谁又在碰我？');
});
$('div').bind('click',f1);
$('div').bind('click',f2);
$('div').bind('mouseover',function(){
$(this).css('background-color','lightgreen');
});
$('div').bind('mouseout',function(){
$(this).css('background-color','lightblue');
});
});
function cancel(){
//取消事件绑定
//$('div').unbind();//取消全部事件
//$('div').unbind('click');//取消指定类型的全部事件
$('div').unbind('click',f2);//取消指定类型的具体处理事件（要求：事件处理是“有名函数”）
}
</script>
<style type='text/css'>
div{width:300px;height:200px;background-color:lightblue;}
</style>
</head>
<body>
<h2>取消事件绑定</h2>
<div></div>
<input type='button' value='取消' onclick='cancel()'>
</body>
</html>事件绑定是丰富事件操作的形式而已。
从dom2级事件操作开始，同一个对象可以绑定多个同类型的事件，具体如下：
dvnode.addEventListener(‘click’,fn);
dvnode.addEventListener(‘click’,fn);
$(‘div’).click(function);
$(‘div’).click(function);
事件委派
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type='text/javascript' src='jquery-1.4.4.js' ></script>
<script type="text/javascript">
//
$(function(){
/*
从jQuery1.7开始， .live() 方法已经过时了。请使用.on()附加事件处理程序。 旧版本的jQuery中用户，应优先使用.delegate()来取代.live()。
*/
//live()事件委派，后续添加的li节点也会有与兄弟一样的事件设置
$('li').live('click',function(){
alert($(this).html());
});
});
function add(){
$('ul').append('<li>赵</li>');
}
</script>
</head>
<body>
<h2>事件委派</h2>
<ul>
<li>刘</li>
<li>关</li>
<li>张</li>
</ul>
<input type='button' value='添加' onclick='add()'>
</body>
</html>事件对象、阻止浏览器默认动作、阻止事件冒泡
动画效果
基本动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<!--script type='text/javascript' src='jquery-1.4.4.js' ></script-->
<script type="text/javascript">
//
function f1(){
//隐藏 hidden
//hide([时间参数 毫秒][,处理函数])
$('div').hide(3000,function(){
alert('我消失了');
});
}
function f2(){
//显示 show
//show([时间参数 毫秒][,处理函数])
$('div').show(3000,function(){
alert('我又回来啦');
});
}
function f3(){
$('div').toggle(3000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
</head>
<body>
<h2>基本动画效果</h2>
<div></div>
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关" onclick="f3()" />
</body>
</html>垂直动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<!--script type='text/javascript' src='jquery-1.4.4.js' ></script-->
<script type="text/javascript">
//
function f1(){
//隐藏
$('div').slideUp(2000);
}
function f2(){
//显示
$('div').slideDown(2000);
}
function f3(){
//
$('div').slideToggle(2000);
}
$(function(){
setInterval('f3()',2000);
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
</head>
<body>
<h2>垂直动画</h2>
<div></div>
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关" onclick="f3()" />
</body>
</html>颜色渐变动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<!--script type='text/javascript' src='jquery-1.4.4.js' ></script-->
<script type="text/javascript">
//
function f1(){
//隐藏
$('div').fadeOut(2000);
}
function f2(){
//显示
$('div').fadeIn(2000);
}
function f3(){
//fadeTo(speed,0-1透明度 [,callback])
$('#two').fadeTo(2000,0.3);
}
function f4(){
$('#one').fadeToggle(2000);
}
</script>
<style type="text/css">
#one {width:300px; height:200px; background-color:blue;
font-size:35px; font-weight:bold;
position:absolute; left:40px; top:40px;
}
#two {width:300px; height:200px; background-color:green;
font-size:35px; font-weight:bold;
position:absolute; left:60px; top:60px;
}
</style>
</head>
<body>
<h2>颜色渐变动画</h2>
<div id="one">this is one div</div>
<div id="two">this is two div</div>
br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="透明" onclick="f3()" />
<input type="button" value="开关" onclick="f4()" />
</body>
</html>jquery封装的ajax
具体操作：
$.get(url [,data] [,fn回调函数] [, dataType]);
data:给服务器传递的数据，请求字符串 、json对象 都可以设置
fn：回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理
dataType：服务器返回数据类型，html、text、xml、json
(该ajax是异步的get方式请求)
$.post(url[,data][,fn回调函数][, dataType]);
该方法与$.get()方法使用完全一致，不同的是其为post方式请求
$.ajax({ //json对象
url:请求地址,
data:给服务器传递的数据,
dataType:数据从服务器返回格式html、text、xml、json
type:get/post请求方式
success:function(){} ajax成功请求后的回调函数，可以做后续处理使用
async:[true]异步/false同步，
cache:[true]缓存/false不缓存,
})
10.php
<?php
//echo print_r($_GET);
echo '{"addr":"北京","weather":"sun"}';<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<!--script type='text/javascript' src='jquery-1.4.4.js' ></script-->
<script type="text/javascript">
//
function f1(){
//$.get(url [,data] [,fn回调函数] [, dataType]);
//$.get('./10.php');
//$.get('./10.php','name=tom&age=20',function(msg){alert(msg);});
//$.get('./10.php',{name:'tomj',age:21},function(msg){alert(msg)});
$.get('./10.php',{name:'jim',age:21},function(msg){
alert(msg.addr+' --- '+msg.weather)
},'json');
}
function f2(){
//$.ajax({url: ,data: ,dataType: ,type:get/post,success:fu})
$.ajax({
url:'./10.php',
data:{title:'jquery学习',date:'4-1'},
dataType:'json',
type:'post',
success:function(msg){
alert(msg.addr+' -- '+msg.weather);
}
});
}
</script>
</head>
<body>
<h2>ajax请求</h2>
<input type="button" value="请求1" onclick="f1()" />
<input type="button" value="请求2" onclick="f2()" />
</body>
</html>地区三级联动
技术：jquery + ajax + xml/json
省份的获取和显示
xml文件太长了，不贴了
$(function(){
//页面加载完毕立即获得省份信息
//ajax去服务器端获得省份信息
$.ajax({
url:'./ChinaArea.xml',
type:'get',
dataType:'xml',
success:function(msg){
//alert(msg);//object XMLDocument
$(msg).find('province').each(function(k,v){
var nm = $(this).attr('province');
var id = $(this).attr('provinceID');
$('#province').append('<option value="'+id+'">'+nm+'</option>');
});
}
});
});显示对应城市信息
//通过省份显示城市信息
function showcity(){
//获得选中省份的value值
var pid = $('#province').val();
//只保留省份的前两们id
pid = pid.substr(0,2);
//清空旧的城市信息
$('#city').empty();
//获得xml地区信息的city标签，条件是id开始内容是pid
$(xmldom).find('City[CityID^='+pid+']').each(function(){
var nm = $(this).attr('City');
var id = $(this).attr('CityID');
$('#city').append('<option value="'+id+'">'+nm+'</option>');
});
}全部代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<!--script type='text/javascript' src='jquery-1.4.4.js' ></script-->
<script type="text/javascript">
var xmldom = null; //声明变量用于存储全部的xml document对象信息
$(function(){
//页面加载完毕立即获得省份信息
//ajax去服务器端获得省份信息
$.ajax({
url:'./ChinaArea.xml',
type:'get',
dataType:'xml',
success:function(msg){
//alert(msg);//object XMLDocument
$(msg).find('province').each(function(k,v){
//k代表province下标，v和this分别代表每个province的dom对象
var nm = $(this).attr('province');
var id = $(this).attr('provinceID');
$('#province').append('<option value="'+id+'">'+nm+'</option>');
});
xmldom = msg;
}
});
});
//通过省份显示城市信息
function showcity(){
//获得选中省份的value值
var pid = $('#province').val();
//只保留省份的前两们id
pid = pid.substr(0,2);
//清空旧的城市信息
$('#city').empty();
//获得xml地区信息的city标签，条件是id开始内容是pid
$(xmldom).find('City[CityID^='+pid+']').each(function(){
var nm = $(this).attr('City');
var id = $(this).attr('CityID');
$('#city').append('<option value="'+id+'">'+nm+'</option>');
});
}
function showarea(){
var cid = $('#city').val();
cid = cid.substr(0,4);
$('#area').empty();
$(xmldom).find('Piecearea[PieceareaID^='+cid+']').each(function(){
var nm = $(this).attr('Piecearea');
var id = $(this).attr('PieceareaID');
$('#area').append('<option value="'+id+'">'+nm+'</option>');
});
}
</script>
</head>
<body>
<h2>地区三级联动</h2>
省份：
<select id="province" onchange="showcity()">
<option value="0">-请选择-</option>
</select>
城市：
<select id="city" onchange='showarea()'>
<option value="0">-请选择-</option>
</select>
地区：
<select id="area">
<option value="0">-请选择-</option>
</select>
</body>
</html>迷你版jquery开发
选择器：#id、tag标签
方法：css()、attr()、each()方法
(在each()方法里边可以清楚知道jquery里边this如何代表dom对象)
制作选择器
各种方法的封装
学习”迷你版jquery”要认识到的地方：
① jquery里边的大部分方法有“遍历机制”
② jquery方法里边的参数this是代表dom对象
jquery插件开发
什么是jquery插件
jquery框架本身给我们提供了一些方法供使用。但是方法的数目是有限的，其不能任意满足我们对各种功能的需求。那么我们自己可以来给jquery框架开发、扩展一些额外功能方法。
开发、扩展jquery框架额外方法的过程就是“插件开发”
两种形式丰富方法
① 给$.fn(给jquery对象)丰富
$.fn.成员 = 值;
$.fn.extend(json对象);
② 给$(给$对象)丰富
$.成员 = 值;
$.extend(json对象);
开发图片自动切换插件
/*
date:2015/4/1 17:09
author:itcast0105
example:
html_code:
<h2>图片切换插件使用</h2>
<img src="./img/1.jpg" alt="" width="300" height="200" />
jquery_code:
$(function(){
$.picbofang();
});
*/
//实现picbofang()方法
$.picbofang = function(){
tihuanpic = function(){
//获得当前图片的序号
var picid = $('img').attr('src').substr(6,1);
var nextid = ++picid;
if(nextid==7)
nextid=1;
$("img").attr('src',"./img/"+nextid+".jpg");
}
setInterval("tihuanpic()",1000);
}
使用”成品jquery插件”的步骤
① 引入jquery的插件文件
② 引入对应的css样式、img图片、辅助的相关js文件
③ 检查jquery插件对本身jquery是否有要求
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
