jQuery的事件,动画效果等

一.事件

  click(function(){})      点击事件

  hover(function(){})       悬浮事件,这是jQuery封装的,js没有不能绑定事件

  focus(function(){})        聚焦事件,多用于input

  blur(function(){})        离开聚集事件,与聚焦事件相反

  change(function(){})     内容改变时触发,多用于input,select

  keyup(function(e){})      $(window)对象获取,键盘抬起时触发,形参为e, e.keyCode可以回去键的码值

  keydown(function(e){})    键盘按下时触发

  mouseover(function(e){})   鼠标移上去时触发

  mouseenter(function(e){})     鼠标进入标签时触发

  input(function(e){})      实时监听input输入值变化,只能绑定事件才能触发

二.绑定事件

  $("#id").on("事件",function(){})    

三.阻止后续事件执行

  return false;    可以阻止后续时间执行,打断事件执行

  e.stopPropagation()    e.是函数的形参传入的

四.事件委托

  利用别的标签来捕获事件,可以操作后来添加的标签,还可以优化内存提高性能

  $("受托方").on("事件","委托人",function(){})    $(this)还是"委托人"

五.动画效果

  1.基本效果

    .show(毫秒)      显示

    .hide()          隐藏

    .toggle()         切换

  2.滑动,像窗帘一样,必须有宽高才行

    .slideDown(毫秒)    显示

    .slideUp()        隐藏

    .slideToggle()       切换

  3.渐变

    .fadeIn(毫秒)      显示

    .fadeOut()        隐藏

    .fadeToggle()      切换

  4.自定义

    animate(样式,毫秒)

六.each循环

  1.遍历数组

    $.each(list,function(index,value){})    传入的是数组的索引和值

  2.遍历jQuery对象

    $("#id").each(function(){})        可以对遍历的标签在函数中进行操作

    return false:       终止循环遍历

    return;          跳出本次循环遍历    

七. .data()

  $("#id").data("key","value");     给标签保存一个属性

  $("#id").data("key")        获取属性值

  $("#id").removeData("key")       删除数据

八.插件

  1.新增一个对象

    jQuery.extend(object)

jQuery.extend({
    min:function(a,b){return a < b ? a : b;},
    max:function(a,b){return a > b ? a : b;}
})
多个对象用逗号隔开
// 调用
jquery.min(1,2);

新增对象和调用

  2.合并到一个jQuery对象中

    jQuery.fn.extend(object)

jQuery.fn.extend({
      check:function(){},
      uncheck: function(){}
})

合并到jQuery对象中

jQuery.fn.extend({
      check:function(){},
      uncheck: function(){}
})

合并到jQuery对象中

原文地址:https://www.cnblogs.com/q767498226/p/10398717.html

时间: 2024-10-08 13:31:13

jQuery的事件,动画效果等的相关文章

CSS3+Jquery实现带动画效果的下拉选择框

CSS3+JQuery实现带动画效果的下拉选择框. 元素结构为: 1 <div class="box"> 2 <p>this is the first li</p> 3 <div id="blank"></div> 4 <ul> 5 <li class="selected">this is the first li</li> 6 <li >

CSS3+Jquery制作的动画效果电子表

<!DOCTYPE HTML> <html> <head> <title>CSS3+Jquery制作的动画效果电子表丨石家庄网络公司-河北品牌策划公司</title> <style type="text/css"> body{ background:#202020; font:bold 12px Arial, Helvetica, sans-serif; margin:0; padding:0; min-width

前端 之 jQuery: 简介, 选择器, 动画效果, 属性操作; (一)

jQuery 简介 jQuery 选择器 jQuery 动画效果 jQuery 属性操作 jQuery 简介 为什么要使用jQuery: 答: 因为优秀. 什么是 jQuery: jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可. 关于jQuery的相关资料: 官网:http://jquery.com/ 官网API文档:http://api.jquery.com/

Jquery基础(动画效果的轮播图特效)

jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery选择器 基本选择器 $('*') / $('.div') / $('div') / $('#first') / 多项选择器 $('#first, div, .second') 层级选择器 $('aside summary') //aside的子元素summary $('aside > det

jquery学习随笔(动画效果)

show hide jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显 示内容和隐藏内容. $('.show').click(function () { //显示 $('#box').show(); }); $('.hide').click(function () { //隐藏 $('#box').hide(); }); //使用.show()和.hide()的回调函数,可以实现列队动画效果. $('.show').click(function

JQuery中的动画效果

JQUERY DAY03: * 动画效果 * 显示与隐藏 * show() - 显示 * 无参版本 - 不具有动画效果 * show(speed,callback)有参版本 - 具有动画效果 * speed - 设置动画执行的时长,单位为毫秒 * 三个预定义值 - slow|normal|fast * callback - 当动画执行完毕后执行的函数 * hide() - 隐藏 * 无参版本 - 不具有动画效果 * hide(speed,callback)有参版本 - 具有动画效果 * spee

JQuery入门(7)动画效果

一.显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).hide(speed,callback); show()的语法形式:$(selector).show(speed,callback); speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast"或毫秒. callback 参数是隐藏或显示完成后所执行的函数名称,两个参数都是可选的. 示例如下:

关于jquery自带动画效果的stop()问题

首先先来看一下jquery中stop()的用法 stop()用于在动画执行前停止正在执行的动画 stop(stopAll,goToEnd)的两个参数为布尔值: stopAll:true/false:是否停止对象接下来所有的动画: goToEnd:true/false;停止方式是直接将动画播放到结束位置还是停止在当前位置. jquery中的fadeIn.fadeOut,slideDown.slideUp如果设置stop(false,false),动画停止的位置将被记录下来,下一次动画走到上次被停止

jquery 隐藏 显示 动画效果

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("p"