python 之 前端开发( jQuery事件、动画效果、.each()、 .data())
11.58 事件
11.581 事件绑定方法与解绑
绑定事件:
// 绑定方式一:
$('.box1').click(function () {
alert('绑定方式一')
});
// 绑定方式二:
$('.box1').on("click",function () {
alert('绑定方式一')
});
// 绑定方式三:
$('.box1').bind('click',{'a':'b'} function (e) {
alert('绑定方式二');
console.log(e.data);
});
$('.box1').bind('mouseover mouseout', function () { // 绑定多个事件做同一件事
console.log('绑定多个事件做同一件事')
});
$('.box1').bind({
'mouseup': function () {
console.log('mouseover');
},
'mousedown': function () {
console.log('mouseout');
}
});
解绑事件:
// 移除事件,unbind没有参数则代表移除所有事件
setTimeout(function () {
$('.box1').unbind('mouseover');
}, 3000);
setTimeout(function () {
$('.box1').unbind();
}, 10000)
.off("click",function(){
xxxxx
})
11.582 绑定事件示例
点击事件:click
// click与dblclick只应该存在一个,大多数都是单击事件
$('.box1').click(function (event)
// console.log(event.type); // event.type事件的类型为:click
console.log(event.target); // event.target指的是点击的那个元素
})
$('.box1').dblclick(function (event) {
console.log(event.target); // event.target指的是点击的那个元素
})
鼠标:mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
$('.box1').mousedown(function (event) {
console.log('按照鼠标左键不松手');
});
$('.box1').mouseup(function (event) {
console.log('按照鼠标左键松手');
});
$('.box1').mousemove(function (event) {
console.log('移动鼠标', event.pageX, event.pageY);
});
$('.box1').mouseover(function (event) {
console.log('元素以及该元素的子元素在鼠标移入时都会触发,当前的div是:', event.target.innerText);
});
$('.box1').mouseout(function (event) {
console.log('元素以及该元素的子元素在鼠标离开时都会触发,当前的div是:', event.target.innerText);
});
$('.box1').mouseenter(function (event) {
console.log('元素以在鼠标移入时都会触发(与子元素无关),当前的div是:', event.target.innerText);
});
$('.box1').mouseleave(function (event) {
console.log('元素以在鼠标移入时都会触发(与子元素无关),当前的div是:', event.target.innerText);
});
对于input框:focus、blur、input
input能够实时检测 textarea,input:text,input:password,input:search这几个元素的内容变化,但IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代,使用jQuery库的话直接使用on同时绑定这两个事件即可
$('#inp').on("focus", function () {
console.log('鼠标聚焦');
});
$('#inp').on("blur", function () {
console.log('鼠标失去焦点');
});
// 当input框的值发生变化时,实时触发
$("#inp").on("input", function () {
console.log($(this).val());
})
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
按键:keydown、keyup
$('#inp').keydown(function (e) {
console.log(e.keyCode);
});
$(window).on("keydown", function (e) { // 获取用户按下那个按键
console.log(e.keyCode);
if (e.keyCode === 16){
flag = true;
}
});
$('#inp').keyup(function (event) { // 绑定一个按键抬起的事件
console.log('键盘按键弹起');
});
$(window).on("keyup", function (e) {
console.log(e.keyCode);
if (e.keyCode === 16){
flag = false;
}
});
change:
//表单事件change
$('#inp').change(function () {
console.log(this.value); //失去焦点时就会得到值
});
$('input[name=sex]').change(function (event) {
console.log(this.value);
});
$('#select').change(function () {
console.log(this.value);
});
选中checkbox框:select
//表单事件select,CheckBox框被选中时触发
$('#inp1').select(function () {
console.log(this.value);
});
$('#inp2').select(function () {
console.log(this.value);
});
提交事件:submit
//表单事件submit
$('#form').submit(function (event) {
console.log($('input[name=user]').val());
console.log($('input[name=pwd]').val());
event.preventDefault();
});
hover:不能使用on绑定hover事件
//hover事件
$(".father").hover( // 鼠标移到.father上时让.son添加一个.show
function () {
$(this).find(".son").addClass("show");
},
function () { // 鼠标移出.father上时让.son移除一个.show
$(this).find(".son").removeClass("show");
})
11.583 事件冒泡应用之事件委托
添加的事件不能用于动态增加事件,例如之前我们在做表格的增删改时,每新增一行内容都需要重新绑定事件,基于事件委托就可以解决该问题
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件
$('ul').on('mouseover','li',function (e) {
$(e.target).css('background-color','#ddd').siblings().css('background-color','white');
// e.stopPropagation();
return false;
})
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
11.584 页面加载完成执行
$(document).ready(function(){
在这里写你的JS代码...
})
简写:
$(function(){
你在这里写你的代码
})
与window.onload()函数的区别:window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用,且只能使用一次;jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数),可以使用多次
11.59 动画效果
1、show() 显示隐藏的匹配元素 语法:show(speed,callback)
参数:
speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值(如:1000毫秒==1秒)
callback:在动画完成时执行的函数,每个元素执行一次
2、hide
hide(speed,callback)跟show使用方法类似,表示隐藏显示的元素。可以通过show()和hide()方法,来动态控制元素的显示隐藏
3、toggle
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
1、slideDown 通过高度变化(向下增大)来到动态地显示所有匹配的元素,在显示完成后触发一个回调函数用法和参数跟上面类似
2、slideUp 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。用法和参数跟上面类似
3、slideToggle 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数跟toggle用法类似
1、fadeIn/fadeOut 通过不透明度的变化来实现所有匹配元素的淡入/淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化
2、fadeTo 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
3、fadeToggle 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。实现淡入淡出的效果就是使用此方
animate、stop、delay
1、animate 概念:用于创建自定义动画的函数 语法:animate(params,[speed],[fn])
参数:
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
fn:在动画完成时执行的函数,每个元素执行一次。
2、stop 概念:停止所有在指定元素上正在运行的动画 语法:stop([clearQueue],[jumpToEnd])
参数:
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等
3、delay 概念:用来做延迟的操作 语法:delay(1000),一秒之后做后面的操作
11.510 .each()
// 为每一个li标签添加class="c1"
$("li").each(function(){
$(this).addClass("c1");
});
//使用内置$.each()进行迭代
var arry=[11,22,33,44];
$.each(arry,function(k,v){
console.log(k,v);
});
注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()方法
也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:
$("li").addClass("c1"); // 对所有标签做统一操作
终止each循环
return false;
11.511 .data()
.data(key, value): 在匹配的元素上存储任意相关数据/保存一些状态。
$("div").data("k",100); //给所有div标签都保存一个名为k,值为100
.data(key):返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
$("div").data("k"); //返回第一个div标签中保存的"k"的值 100
.removeData(key):移除存放在元素上的数据,不加key参数表示移除所有保存的数据
$("div").removeData("k"); //移除元素上存放k对应的数据
python 之 前端开发( jQuery事件、动画效果、.each()、 .data())的更多相关文章
- 前端基础-jQuery的动画效果
阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- 前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div" ...
- jQuery的事件,动画效果等
一.事件 click(function(){}) 点击事件 hover(function(){}) 悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...
随机推荐
- codeforces1276A As Simple as One and Two
C.As Simple as One and Two A. As Simple as One and Two time limit per test 3 seconds memory limit pe ...
- learning scasl notes
接收类型参数的类和特质是“泛型”的,但是它们生成的类型是"参数化". ”泛型“的意思是我们用一个泛化的类或特质来定义许许多多具体的类型. 如果说S是类型T的子类型,那么Queue[ ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
- C博客作业01--分支丶顺序结构
1.本章学习总结 1.1学习内容总结 分支结构 if else-if语句与switch语句都具有选择判断的功能,但是在使用时又有所区别,按题目的不同要求与题意选择不同语句. if else-if语句表 ...
- Tcl二进制数据
binary format 格式化描述符 参数1 参数2...参数N binary scan 二进制数据 格式化描述符 变量1 变量2 ... 变量N 格式化描述符由两部分组成,第一是格式化类型关键字 ...
- 帝国CMS排行榜调用标签
[e:loop={0,9,4,0,'newstime>UNIX_TIMESTAMP()-86400*30','onclick desc'}]<li><a href=" ...
- SpringMVC(上)
一.SpringMVC简介 (1)springMVC概述 Spring MVC属于SpringFrameWork的后续产品,Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块. 使用 ...
- modao账户
chairman987@163.com 墨刀注册 p@ssw0rd OR 123456
- 2019软工实践_Alpha(6/6)
队名:955 组长博客:https://www.cnblogs.com/cclong/p/11913269.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...
- uniapp - 关于ios调试
[ios调试] 1.一台windows电脑.一根apple数据线(一旦连接以后,apple设备就会自动识别itunes软件,如果没有安装会提示) 2.安装itunes (爱思助手) 3.官方教程:ht ...