css( )

除了可以为元素添加样式外,还可用来查询元素,某样式值
alert($('.cls1').css('width')); //100px(返回带单位的值)
注意:原生CSS样式中有-的去掉并且将后面的单词第一个字母大写

关于宽高

alert($('.box').width( ));             alert($('.box').height( ));              获取元素的原始宽高(不带单位)

alert($('.box').innerWidth( ));     alert($('.box').innerHeight( ));      获取元素的宽度+padding 不计入border

alert($('.box').outerWidth( ));     alert($('.box').outerHeight( ))       获取元素的宽度+padding+border

alert($(document).width( ));       alert($(document).height( ));      浏览器inner宽高

添加节点

删除节点

empty( )                    $('a').empty( );                清空a的所有子节点

remove()                   $('a:eq(3)').remove( );      删除$('a:eq(3)')这一整个节点

替换节点

replaceAll( )           $('<a href="http://www.baidu.com">百度链接地址</a>').replaceAll('a');                 用<a href="http://www.baidu.com">百度链接地址</a>替换全部a

replaceWith( )                 $('a').replaceWith('<a href="http://www.baidu.com">百度链接地址</a>');    ( 与replaceAll()效果一样 )

包含节点

wrap( )                           $('a').wrap('<li class="one">');                用每个li分别包含每个a

unwrap( )                        $('a').unwrap('<li class="one">');            取消全部包含在a外面的li

wrapAll( )                        $('a').wrapAll('<li class="one">');             一个li包含全部a

$('a:not(.no)').wrapAll('<li class="one">');     如果a.no下面有a的话 则a.no会被顶到li节点后

wrapInner( );                  $('a').wrapInner('<li class="one">');        将a的文本用li包含起来

复制节点 clone( )                           $('a.no').clone( ).appendTo('.one');           克隆$('a.no')并把它添加到('.one')节点里的后面
offset( ) 设置匹配元素相对于文档的偏移(位置)                                               属性1:top    属性2:left
delay( ) 延迟多少毫秒后触发
index( ) 获取当前元素索引
点击  $('#one').click(function( ){

});

绑定

on绑定                            $('#one').on('click',function( ){ })           取消on事件 用off( )

bind绑定                          $('#one').bind('click',function(){ })

unbind取消绑定                $('.unbind').bind('click',function( ){ $('.bind').unbind('click'); });

动态添加的按钮要绑定事件的话  则使用live                                          $('.live').live('click',function( ){ });

one一次性事件                  $('.one').one('click',function(){ alert('资料一但确定就无法修改,您确定吗?'); });

点击切换  $('.toggle').toggle(function( ){ },function( ){ },function( ){ },...)
hover  hover事件                        $('button').hover(function( ){ },function( ){ });                    当hover只添加一个回调函数时 则效果相当于mouseover
animate( )

animate(json,时间,回调函数) 以json形式传参 回调函数为可选项
$('button').click(function( ){
  $('#one').animate({left:'900px',top:'600px',},1000,function( ){
    $('#one').animate({width:'100px',height:'100px'},1000);
    });
});

动画目标值的设定可以是累加或者累减                    $(this).animate({left:'+=500px'},500)

动画按顺序执行                                                  $(this).animate({left:'600px'},2000).animate({top:'550px'},2000)

stop( )  stop( ) 停止动画队列

使用stop( )会立即停止当前的动画
如果下面有动画没有执行完 会立即执行下一个动画

stop(true)                   如果鼠标移除元素的时候会停止当前的动画而执行下一个动画而不是立即执行hover移开的动画 如果想移开的同时立即执行hover的移除动画 则添加true参数

三种常见动画

slideDown(500);向下展开      slideUp(500);向上缩起                   参数为执行动画的时间 无透明度效果

show(1000);展示                  hide(1000);                                隐藏有伸缩效果和透明度改变效果

fadeIn(1000);淡入                fadeOut(1000);                           淡出无伸缩效果

转载于:https://www.cnblogs.com/dreamerC/p/6192556.html

JQ中的方法、事件及动画相关推荐

  1. js中函数,方法,事件对比区分,什么是方法,什么是函数

    微信小程序开发交流qq群   581478349    承接微信小程序开发.扫码加微信. 正文: 简单的理解:函数是运行在本地的,方法是公用的.  事件是开关,通过某某事件触发某个函数 通常命名规范 ...

  2. JQ中$.each()方法的使用

    $.each()可以实现对数组,json和DOM结构等的遍历. 定义:以每一个匹配的元素作为上下文来执行一个函数. 注意点:$.each()中的 this 指的是DOM元素,而不是jQuery 对象, ...

  3. JQuery中的事件以及动画

    嘿嘿,今天学习了JQuery的事件以及动画,感觉即将学习完JQuery,在回忆起上周学习的JavaScript,感觉好多刚刚学习的知识点都记得模 糊啦,这个是很让失望的,这里只说明了一点,课是听过啦, ...

  4. 四、jQuery 中的事件和动画(嘎嘎详细)

    文章目录 前言 一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...

  5. 锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画

    锋利的Jquery读书笔记 第三章 jQuery中的DOM操作 jQuery中的事件 事件绑定 bind方法 合成事件 hover方法 toggle方法 事件冒泡 事件对象 停止事件冒泡 阻止默认行为 ...

  6. android监听器在哪里创建,[转载]android开发中创建按钮事件监听器的几种方法

    第一种:匿名内部类作为事件监听器类 Button button=(Button) findViewById(R.id.button); button.setOnClickListener(new On ...

  7. axios如何在nodejs项目里封装_【面经】jq 中 ajax 和 axios 区别,瀑布流布局,添加删除事件...

    [jq 中 ajax 和 axios 区别] jq的ajax 1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮 2.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery不合理 a ...

  8. jquery中ajax完整例子get,jq的ajax方法,jquery中ajax完整例子

    jq的ajax方法,jquery中ajax完整例子 相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and X ...

  9. 【转】C#中的弱事件:不同的解决方法

    中文原文:http://www.itgrass.com/a/csharp/C-sl/200811/05-8388.html 英文出处:http://www.codeproject.com/KB/cs/ ...

最新文章

  1. 使用SpringBoot发送邮件 在本地测试是好的 放到服务器连接超时问题
  2. Daydream a Little+偶尔做一下白日梦
  3. 6.1 网络应用模型
  4. 【Android 系统开发】使用 Source InSight 阅读 Android 源码
  5. 听说蒂姆·库克来了?这和我们有什么关系!
  6. 建立适合大数据成功的团队
  7. EXCEL中与数据库打交道的好工具-JXL
  8. 考研计算机专业课复试都有什么,2019计算机考研复试科目总结
  9. 王之泰201771010131《面向对象程序设计(java)》第三周学习总结
  10. 疫情之下,我们该如何选择工作?
  11. 人脸定点:关键点检测方法汇总
  12. 大连软件知名公司最新职位
  13. qt源码学习---QMetaObject(二)
  14. 精简BLL业务层,使用范型复用常用方法
  15. Android登陆界面设计demo
  16. Unity调整轴点的位置
  17. 三菱plc pwm指令_三菱PLC常用指令汇总,速存!
  18. 一篇文章带你搞定19年数学建模机场出租车优化问题示例讲解含代码
  19. JooMe:WiFi 分享中的无限可能
  20. 航司企业级大数据规划(方法论) - 企业级数据资产管理

热门文章

  1. python字典 items函数
  2. 不再颓废,重新开始,牛客第一题1016. 部分A+B (15)
  3. Authentication Error errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败
  4. PC 机 UART(NS8250)详解
  5. 适合程序员的四大字体
  6. nacos 配置中心和注册中心依赖后报错,提示 org.apache.http.impl.client.HttpClientBuilder 这个类找不到
  7. STM32开发 -- 低功耗模式详解(3)
  8. STM32开发 -- Gerrit的详细使用
  9. 深大转专业计算机,这所高校2020年1042人申请转专业!申请转出人数最多的竟是医学部...
  10. 汇编语言LAHF和SAHF指令