JQ中的方法、事件及动画
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形式传参 回调函数为可选项 动画目标值的设定可以是累加或者累减 $(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); 淡出无伸缩效果 |
JQ中的方法、事件及动画的更多相关文章
- JavaScript中的方法事件和函数的方法的三种方法
js中的很多事件 而事件相对应的就是方法(函数 )那么今天所说的就是这三种方法 已onclick事件为例 1: 基本方法 <div id="a" onclick= ...
- jq中 load()方法 简介
load()方法会在元素的onload事件中绑定一个处理函数.如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内 ...
- 关于JQ中ready()方法的几种写法总结
——习惯贵在坚持,天才在于积累. 好久没写博客的我,似乎是忘记了当初写博客的初衷是要在博客笔记中提升自己的写作能力和积累自己的知识要点. 废话不多说. ready()方法作用: 在页面加载完成后,立即 ...
- jq中 offset()方法, scrollTop()方法以及scrollLeft()方法
offset()方法是用来获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效. scrollTop()方法是用来获取元素的滚动条距离顶端的距离. scro ...
- jq中哪个方法有回调函数
animate();id为btn的div ,位置由页面下方-100px出现,后消失 $(“#btn”).animate({ position:"absolute",bottom:& ...
- jq中的ajax
jq对ajax进行了封装,在jq中$.ajax()方法是最底层的方法,第二层是load() , get() , post()方法,第三层是$.getScript()和$.getJSON().基本第二种 ...
- jq中的$操作符与其他js框架冲突
解决办法: jq中存在方法:noConflict() 可返回对 jQuery 的引用. 使用示例: var jq = $.noConflict(); jq(document).ready(functi ...
- onload事件属性,JQ中的load,ready方法
onload事件属性,JQ中的load,ready方法 前言 页面中的很多操作,需要我们在所需资源下载完成后,才可以进行操作,而资源没有及时下载,我们进行操作的话,是会报错.因此我们需要熟练掌握哪些事 ...
- 锋利的jQuery中的事件与动画
奋夜的奋斗 ---- 事件与动画 ---- 来自地狱的战镰 小小的单词难不倒我们哦!!!!!!! bind:绑定 unbind:接触绑定 toggle:栓牢 fadeou ...
随机推荐
- SQL Server 默认跟踪(Default Trace)
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) 查看默认跟踪信息(Default Tr ...
- SQL Server 解读【已分区索引的特殊指导原则】(2)- 唯一索引分区
一.前言 在MSDN上看到一篇关于SQL Server 表分区的文档:已分区索引的特殊指导原则,如果你对表分区没有实战经验的话是比较难理解文档里面描述的意思.这里我就里面的一些概念进行讲解,方便大家的 ...
- markdown语法练习
Markdown练习 这篇文章 主要用于练习markdown各种基本语法. 这篇文章 主要用于练习markdown各种基本语法. 1.标题设置 1.通过在文字下方添加"="或者&q ...
- jQuery之on
在jQuery1.9版本中,已经去掉了live和delegate方法,从而将on方法的地位进一步提升. jQuery如此推崇on方法,必有其牛逼的地方.那么我们就有必要了解这个on,并在代码中利用它, ...
- 本地maven仓库使用及配置
本地仓库的创建 下载 nexus-2.11.4-01-bundle.zip 解压并运行C:\nexus-2.11.4-01-bundle\nexus-2.11.4-01\bin\jsw\windows ...
- webapp应用---cordova.js 3.7.0插件安装总结
今天是2014年的最后一天,年终总结什么的就不写了.记录一下今天的工作内容.如果不知道phoneGap,那么就不需要往下看了,phoneGap现在已经叫cordova了,叫什么不重要,重要的是它对we ...
- php左侧分类列表显示菜单
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...
- C语言 第五章 循环结构练习
一.计算15+16+17 …98+99的和 for实现 #include "stdio.h" void main() { //15+16+17 …98+99 ; ;i<=;i ...
- 1Z0-053 争议题目解析690
1Z0-053 争议题目解析690 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 690.The database users regularly complain about t ...
- 重温JSP学习笔记--三大指令九大内置对象
最近在温习javaweb的相关基础知识,鉴于我弄丢了记满了整整一本的笔记,决定以后把笔记和一些学习上的心得以及碰到的一些问题统统都放在网上,今天看了一下jsp的相关基础,以下是笔记: JSP三大指令: ...