网页编程day-45：jQuery的事件和动画
2019-09-28 本文已影响0人
开源oo柒
一、jQuery操作页面属性
- append：向每个匹配的元素内部追加内容。
- appendTo：把所有匹配的元素追加到另一个指定的元素元素集合中。
//创建新的元素
var p=$("<p><b>test6</b></p>")
//增加子元素--->现有元素之后
$("#div1").append(p);
p.appendTo("#div1");
- Prepend：向每个匹配的元素内部前置内容。
- prependTo：把所有匹配的元素前置到另一个、指定的元素元素集合中。
//创建新的元素
var p=$("<p><b>test6</b></p>")
//添加子元素--->现有元素之前
$("#div1").prepend(p);
p.prependTo("#div1");
- Before: 在每个匹配的元素之前插入内容。
- Afterd: 在每个匹配的元素之后插入内容。
//创建新的元素
var p=$("<p><b>test6</b></p>")
//平 级的添加元素---现有元素之前
p.insertBefore("#div1");
$("#div1").before(p);
//平级添加元素--->现有元素之前
p.insertAfter("#div1");
$("#div1").after(p);
- replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。
- empty()：删除指定的子节点元素
- remove([expr])：从DOM中删除所有匹配的元素。
//创建新的元素
var p=$("<p><b>test6</b></p>")
//替换指定的节点元素
$("div p:nth-child(1)").replaceWith(p);
p.replaceAll("div p:nth-child(5)");
//删除指定的节点元素
$("#div1").remove();
$("div p:nth-child(3)").remove();
//清空内容
$("#div1").empty();//清空子元素
$("div p:nth-child(2)").empty();//清空文本内容
- 实例：jQuery操作元素节点的实例：实现添加和删除；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function insert(){
var p=$('<p>'+
'照片：<input type="file" name="" id="" value="" />'+
'<input type="button" name="" id="" value="删除" onclick="delete2(this)" />'+
'</p>');
$("#p2").before(p);
}
function delete2(obj){
$(obj).parent().remove();
}
</script>
</head>
<body>
<form action="" method="post">
<p>
用户名：
<input type="text" name="" id="" value="" />
</p>
<p>
照片：
<input type="file" name="" id="" value="" />
<input type="button" name="" id="" value="添加" onclick="insert()" />
</p>
<p id="p2">
<input type="button" name="" id="" value="提交" />
<input type="button" name="" id="" value="清空" />
</p>
</form>
</body>
</html>
结果
二、jQuery中事件处理
- ready(fn)：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
// 在这里写你的代码...
});
- click([[data],fn])：单击事件，触发每一个匹配元素的click事件。
- dblclick([[data],fn])：双击事件，触发每一个匹配元素的dblclick事件。
/****事件的基础绑定****/
$("#inp1").click(function(){
{
alert("单机事件");
}
});
$("#inp1").dblclick(function(){
alert("双击事件");
});
- blur([[data],fn])：失去焦点，触发每一个匹配元素的blur事件。
- focus([[data],fn])：获取焦点，触发每一个匹配元素的focus事件。
- change([[data],fn])：内容改变，触发每个匹配元素的change事件。
//失去焦点
$("p").blur( function () {
alert("Hello World!");
} );
//无法使用文本框
$("input[type=text]").focus(function(){
this.blur();
});
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
-
mousedown([[data],fn])：mousedown事件在鼠标在元素上点击后会触发。
-
mouseup([[data],fn])：mouseup事件会在鼠标点击对象释放时。
-
keyup([[data],fn])：keyup事件会在按键释放时触发。
-
keydown([[data],fn])：keydown事件会在键盘按下时触发。
//keyup事件会在按键释放时触发
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
//keydown事件会在键盘按下时触发。
$(window).keydown(function(event){
switch(event.keyCode) {
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
}
});
- bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。
- one(type,[data],fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
- trigger事件操作：在每一个匹配的元素上触发某类事件。
- 事件的解绑：
/************bind事件绑定**********/
$("#inp2").bind('click',function(){
alert("单机事件")
})
//支持json数据格式
$("#inp2").bind({'click':function(){},'dbclick':function(){},'blur':function(){} });
/*****one一次事件绑定******/
$("#inp3").one('click',function(){
alert("一次事件绑定");
})
/********trigger事件操作**********/
$("#inp4").click(function(){
$("#inp1").trigger('dblclick');
$("#inp3").trigger('click');
})
/********事件的解绑*******/
$("#inp5").click(function(){
//事件的解绑
//解绑指定对象上的所有事件
$("#inp1").unbind();
//解绑指定的事件
$("#inp1").unbind("dblclick");
})
/*事件绑定*/
$(".inp6").live('click',function(){
alert("单机事件绑定")
})
$("body").append('<input type="button" name="" id="" class="inp6" value="事件绑定2" />');
三、jQuery中的动画功能
-
show([speed,[easing],[fn]])：显示隐藏的匹配元素。
-
hide([speed,[easing],[fn]])：隐藏显示的元素。
-
toggle([speed],[easing],[fn])：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
-
slideUp([speed,[easing],[fn]])：这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
-
slideDown([speed],[easing],[fn])：这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
-
fadeIn([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
-
fadeOut([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡出效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
height: 300px;
background-color: red;
}
#div2{
height: 300px;
background-color: green;
display: none;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#but").click(function(){
//获取div对象
var div1=$("#div1");
var div2=$("#div2");
//隐藏动画
div1.hide(3000);
//显示动画
div1.show(3000);
//隐藏的显示----显示的隐藏
$("div").toggle(3000);
//向上滑动
div1.slideUp(3000);
//向下滑动
div1.slideDown(3000);
//滑动上--->滑动下 滑动下--->滑动上
$("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
//淡入
div2.fadeIn(3000);
})
})
</script>
</head>
<body>
<input type="button" name="but" id="but" value="动画按钮" />
<hr />
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
四、jQuery的封装原理
1.jQuery封装的原理：
1.js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖；
2.使用对象封装，将代码封装到对象中，但是如果对象被覆盖，则全部失效，风险极高;
3.使用工厂模式，将代码进行封装，但是并没有解决问题;
4.将封装的函数名去除，避免覆盖，但是函数没有办法被调用;
5.匿名自调用，可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取;
6.使用闭包，将数据一次性挂载到window对象下。
2.匿名函数的自调用：
//无参数的匿名函数的执行
(function(){
alert("我是匿名函数");
})();
//有参数匿名函数的执行
(function(aa,bb,cc){
alert("有参匿名函数"+aa+"==="+bb+"---"+cc);
})(1,2,3);
(function(){
var a=100;
window.vv=a;//在运行的时候吧a 的值挂载到window对象上
alert(a);
})();
function testB(){
alert(window.vv);
alert(vv);
}
HTML代码：
<body>
<h1>jQuery中的封装原理</h1>
<h3>匿名函数的自调用</h3>
<h4>闭包原理</h4>
<input type="button" name="" id="" value="测试" onclick="testB()" />
</body>
3.闭包的优点：
function testA(){
var a=10;
function testC(){
var c=100;
return c;
}
var z=testB();
alert(z);
}
1）可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护；
2）防止可修改变量，因为内部的变量外部是无法访问的，并且也不可修改的；安全。
3）读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
4.jQuery插件：
链接：jQuery插件库
五、jQuery的案例操作
1.HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 导入jQuery
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/books.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>jQuery操作表格</h3>
<hr />
<input type="button" name="fx" id="fx" value="反选" />
<input type="button" name="" id="addRow" value="新增一行" />
<input type="button" name="" id="delRow" value="删除行" />
<input type="button" name="" id="copyRow" value="复制行" />
<table border="1px" cellspacing="3px" cellpadding="0" id="ta">
<tr>
<td width="50px">
<input type="checkbox" name="chks" id="chks" value="1" />
</td>
<td width="200px">书名</td>
<td width="200px">作者</td>
<td width="200px">数量</td>
<td width="200px">操作</td>
</tr>
<tr id="">
<td>
<input type="checkbox" name="chk" id="chk" value="2" />
</td>
<td>《java编程之道》</td>
<td>wollo</td>
<td>10</td>
<td>
<input type="button" name="aa" id="aa" value="修改数量" onclick="change(this)" />
<input type="button" name="" id="" value="删除" onclick="del(this)" />
</td>
</tr>
<tr id="">
<td>
<input type="checkbox" name="chk" id="chk" value="3" />
</td>
<td>《python和我的故事》</td>
<td>赵老师</td>
<td>10</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="change(this)" />
<input type="button" name="" id="" value="删除" onclick="del(this)" />
</td>
</tr>
<tr id="">
<td>
<input type="checkbox" name="chk" id="chk" value="4" />
</td>
<td>《web开发详解》</td>
<td>张老师</td>
<td>20</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="change(this)" />
<input type="button" name="" id="" value="删除" onclick="del(this)" />
</td>
</tr>
</table>
</body>
</html>
html效果图
2.jQuery代码：实现新增行、反选、删除行、复制行
$(function() {
//确定全选和全部选的操作
$("#chks").click(function() {
var flag = $(this).prop("checked");
$("input[name=chk]").prop("checked", flag);
})
//判断是否全选
$("input[name=chk]").click(function() {
var flag = true;
var chk = $("input[name=chk]");
chk.each(function() {
if (!$(this).prop("checked")) {
flag = false;
return;
}
})
$("#chks").prop("checked", flag);
})
//反选操作
$("#fx").click(function() {
var chx = $("input[type=checkbox]");
chx.each(function() {
//获得多选框的初始的状态
var flag = $(this).prop("checked");
$(this).prop("checked", !flag);
})
})
//新添加一行
$("#addRow").click(function() {
//获得table对象
var tab = $("#ta")
tab.append('<tr id="">' +
'<td> <input type="checkbox" name="chk" id="chk" value="2" /></td>' +
'<td>《java编程之道》</td>' +
'<td>wollo</td>' +
'<td>10</td>' +
'<td>' +
'<input type="button" name="aa" id="aa" value="修改数量" onclick="change(this)" /> ' +
'<input type="button" name="" id="" value="删除" onclick="del(this)" />' +
'</td>' +
'</tr>')
})
//删除多行的操作
$("#delRow").click(function() {
var del = $("input[name=chk]:checked")
if (del.length == 0) {
alert("至少选择一行");
} else {
//执行删除的操作
del.parent().parent().remove();
}
})
//复制行
$("#copyRow").click(function() {
var copy = $("input[name=chk]:checked");
if (copy.length == 0) {
alert("至少选择一行")
} else {
//执行copy
//复制
var tr = copy.parent().parent().clone();
//粘贴
$("#ta").append(tr);
}
})
})
3.实现修改数量、删除
//修改数量
function change(th) {
//获得tr节点
var par = $(th).parent().parent();
par.children().eq(3).html("<input type='text' size='4px' onblur='bul(this)' />")
}
//失去焦点输入数据
function bul(th) {
//获得tr节点
var par = $(th).parent().parent();
par.children().eq(3).html(th.value);
}
//删除操作
function del(th) {
//获得tr节点
var dt = $(th).parent().parent();
dt.remove();
}
最终效果
