jQuery(三)
回顾
-
查找元素
- filter():过滤元素 (not())
- hasClass():是否具有指定类
- is():是不是
- find():在子元素中查找
- children():获取子元素的集合
- next():下一个元素
- nextAll():后面所有的元素
- prev():前面的一个元素
- prevAll():前面所有的元素
- parent():父级元素
- parents():所有的父级元素
- sibling():同级元素
-
DOM操作
-
在内部添加元素
- A.append(B):将B插入到A的内部的后面
- A.appendTo(B):将A插入到B的内部的后面
- A.prepend(B):将B插入到A的内部的前面
- A.prependTo(B):将A插入到B的内部的前面
-
在外部添加元素
- A.after(B):将B插入到A的外部的后面
- A.insertAfter(B):将A插入到B的外部的后面
- A.before(B):将B插入到A的外部的前面
- A.insertBefore(B):将A插入到B的外部的前面
-
替换DOM元素
- A.replaceAll(B):用A替换所有的B
- A.replaceWith(B):用B替换A
-
删除DOM元素
- empty():清空元素的内容
- remove():删除元素
-
克隆DOM元素
- clone():复制节点,不复制对应的事件
- clone(true):复制节点和对应的事件
-
在内部添加元素
-
一些常用的方法和属性
- size():获取节点集合的长度
- length:获取节点集合的长度
- index():获取节点的索引
- data():缓存或获取缓存数据
- $.trim():去空格
- $.merge():合并数组
-
DOM和jQuery对象互换
- 通过$()和jquery()方法将DOM转成JQuery对象
- 通过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操作练习
<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绑定的事件” />
事件对象
事件对象中保存着与事件有关的信息
- 通过事件对象阻止冒泡
- 通过事件对象阻止浏览器的默认动作
hover
语法:hover(over_fun,out_fun),此方法实现鼠标移到到元素上和离开元素的效果
toggle
显示隐藏元素
- show(speed,[callback]) 显示
- hide(speed,[callback]) 隐藏
- 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>
向上向下
- slideUp(speed,[callback]):向上
- slideDown(speed,[callback]):向下
- 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>
淡入淡出
- fadeIn(speed,[callback])
- fadeOut(speed,[callback])
- fadeToggle(speed,[callback])
- 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
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页面
<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> ”;
}
?>
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格式的数据
- 新建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页面代码如下
<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():垂直滚动条距上的位置
- 能够使用bind()方法绑定事件
- 能够熟练使用jQuery的常规事件绑定语法
- 能够使用事件切换方法hover(),toggle()
- 能够使用jQuery的基本特效方法 show(),hide(),toggle()
- 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
- 能够使用jQuery的淡入淡出特效方法
- 能够理解jQuery中插件的作用
- 能够制作自定义插件
- 能够使用jQuery实现ajax的get请求
- 能够使用jQuery实现ajax的post请求