jQuery总结三:DOM完全操作和动画

文章源自:淡忘~浅思
原文地址:http://www.ido321.com/1607.html

特性和属性

 方法              说明
.attr(key)         取得特性key的值
.attr(key,value)    设置特性key的值为value
.attr(key,fn)      将fn的返回值作为key的值
.attr(obj)           根据传入的键值对象参数设置特性的值
.removeAttr(key)     删除特性key的值
.prop(key)         取得属性key的值
.prop(key,value)    设置属性key的值为value
.prop(key,fn)      将fn的返回值作为key的值
.prop(obj)           根据传入的键值对象参数设置属性的值
.removeProp(key)     删除属性key的值
.addClass(class)     为匹配元素添加传入的类
.removeClass(class)  为匹配元素删除传入的类
.toggleClass(class)  对于匹配元素,如果存在类则删除,不存在则添加
.hasClass(class)     匹配元素中至少一个包含传入的类则返回true
.val()               获取第一个匹配元素的value属性值
.val(value)          设置每个匹配元素的value属性

关于特性和属性:DOM元素的特性(Attribute)和属性(Property)

内容操作

 方法       说明
.html()       获取第一个匹配元素的HTML内容
.html(value)  将每个匹配元素的HTML内容设置为value
.text()       获取所有匹配元素的文本,以字符串返回
.text(value)  将每个匹配元素的文本设置为value

CSS和尺寸相关

 方法                   说明
.css(key)                取得属性key的值
.css(key,value)           设置key的值为value
.css(obj)                 根据传入的键值参数设置CSS的属性值
offset()                  返回第一个匹配元素相对于视口的坐标(单位是像素)
.position()               返回第一个匹配元素相对.offsetParent()返回元素的坐标(单位是像素)
.scrollTop()              返回第一个匹配元素的垂直滚动位置
.scrollTop(value)         设置每个匹配元素的垂直滚动位置
.scrollLeft()            返回第一个匹配元素的水平滚动位置
.scrollLeft(value)        设置每个匹配元素的水平滚动位置
.height()                 返回第一个匹配元素的高度
.height(value)            设置每个元素的高度
.width()                  返回第一个匹配元素的度
.width(value)             设置每个元素的宽度
.innerHeight()            返回第一个匹配元素的高度(包含内边距,不包含边框)
.innerWidth()             返回第一个匹配元素的宽度(包含内边距,不包含边框)
.outerHeight([includeMargin])   返回第一个匹配元素的高度(包含内边距和边框,bool为true,则包含外边距,反之不包含)
.outerWidth([includeMargin])    返回第一个匹配元素宽度(包含内边距和边框,bool为true,则包含外边距,反之不包含)

DOM插入

 方法                说明
.append(content)       在每个匹配元素内部的末尾插入content
.appendTo(selector)    将匹配元素插入到与selector匹配的元素的内部的末尾
.prepend(content)      在每个匹配元素内部的开头插入content
.prependTo(selector)   将匹配元素插入到与selector匹配的元素的内部的开头
.after(content)     在每个匹配元素外部的后面插入content
.insertAfter(selector) 将匹配元素插入到与selector匹配的元素的外部的后面
.before(content)       在每个匹配元素部的前面插入content
.insertBefore(selector) 将匹配元素插入到与selector匹配的元素的外部的前面
.wrap(content)           匹配的每个元素包含在content中
.wrapAll(content)         匹配的每个元素作为一个整体包含在content中
.wrapInner(content)     匹配的每个元素的内部内容包含在content中
.unwrap()                 删除元素的父元素(反操作)

替换、删除和复制

 方法                  说明
.replaceWith(content)   将匹配的元素替换为content
.replaceAll(selector)   将与selector匹配的元素替换为匹配的元素
.empty()                 删除每个元素的子节点
.remove([selector])   从DOM中删除节点,selector可以用于筛选
.detach([selector])   从DOM中删除节点,selector可以用于筛选,并保留JQuery给元素添加的数据
.clone([withHandlers],[deepWithHandlers])   返回匹配元素的副本,也可以复制事件处理程序

数据

 方法             说明
.data(key)        获取第一个匹配元素的key键对应的数据
.data(key,value)    设置每个元素关联的key对应的数据值为value
.removeData(key)    删除每个元素与key键关联的数据

预定义动画

方法                      说明
.show()                 显示匹配元素
.show(speed,[callback]) 通过高度、宽度和透明度动画显示匹配元素
.hide()                 隐藏匹配元素
.hide(speed,[callback]) 通过高度、宽度和透明度动画隐藏匹配元素
.toggle([speed],[callback])    显示或隐藏匹配元素
.slideDown([speed],[callback])  以滑入方式显示匹配元素
.slideUp([speed],[callback])      以滑出方式隐藏匹配元素
.slideToggle([speed],[callback])  以滑动方式显示或隐藏匹配元素
.fadeIn([speed],[callback])       以淡入方式显示匹配元素
.fadeOut([speed],[callback])      以淡出方式隐藏匹配元素
.fadeToggle([speed],[callback])   以淡入淡出方式显示或隐藏匹配元素
.fadeTo(speed,opacity,[callback]) 调整匹配元素的透明度

自定义动画

方法                                         说明
.animate(attrs,[speed],[easing],[callback]) 针对指定的css属性自定义动画
.animate(attrs,options)                    .animate的底层接口,支持队列控制

队列操作

方法                            说明
.queue([queueName])           返回第一个匹配元素上的动画队列
.queue([queueName],callback)    在动画队列的最后添加回调函数
.queue([queueName],newQueue)    以新队列替换旧队列
.dequeue([queueName])           执行动画队列的下一个动画
.clearQueue([queueName])         清除所有未执行函数
.stop([clearQueue],[jumpToEnd])  停止当前动画,启动排列动画(若有)
.finish([queueName])             停止当前动画并将所有排列的动画理解提前到它们的目标值
.delay(duration,[queueName])     延迟duration毫秒执行队列中的下一个动画
.promise([queueName],[target])   在集合中所有排队的操作完成后返回一个待解决的承诺对象
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,157评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2
  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,121评论 29 470
  • 有个人在年仅二十岁时,居然说了这样一句话:“我始终感受到一亿玉碎[1]的局面必将到来,因此我将每篇作品都视为遗作来...
    Lily_Legacy阅读 1,005评论 2 14
  • 1.避免接触外界,独自实现欲望的满足,这种做法造成性格的改变。 2.放弃与他人联系,自慰的满足是一种反社会行为,使...
    钱昆阅读 1,207评论 0 0