静夜思(李白)

床前明月光,疑是地上霜。

举头望明月,低头思故乡。

">
立诚勿怠,格物致知
It's all about connecting the dots

DOM manipulation methods in jQuery

The following is some DOM manipulation methods.

Attributes and properties

Attributes and properties
Manipulation method Description
.attr(key) Gets the attribute named key.
.attr(key, value) Sets the attribute named key to value.
.attr(key, fn) Sets the attribute named key to the result of fn (called separately on each matched element).
.attr(obj) Sets attribute values given as key-value pairs.
.removeAttr(key) Removes the attribute named key.
.prop(key) Gets the property named key.
.prop(key, value) Sets the property named key to value.
.prop(key, fn) Sets the property named key to the result of fn (called separately on each matched element).
.prop(obj) Sets property vales given as key-value pairs.
.removeProp(key) Removes the property named key.
.addClass(class) Adds the given class to each matched element.
.removeClass(class) Removes the given class from each matched element.
.toggleClass(class) Removes the given class if present, and adds it if not, for each matched element.
.hasClass(class) Returns true if any of the matched elements has the given class.
.val() Gets teh value attribute of the first matched element.
.val(value) Sets the value attribute of each element to value.

Content

Content
Manipulation method Description
.html() Gets the HTML content of the first matched element.
.html(value) Sets the HTML content of each matched element to value.
.text() Gets the textual content of all matched elements as a single string.
.text(value) Sets the textual content of each matched element to value.

CSS

CSS
Manipulation method Description
.css(key) Gets the CSS attribute named key.
.css(key, value) Sets the CSS attribute named key to value.
.css(obj) Sets the CSS attribute value given as key-value pairs.

Dimensions

Dimensions
Manipulation method Description
.offset() Gets the top and left pixel coordinates of the first matched element, relative to the viewport.
.position() Gets the top and left pixel coordinates of the first matched element, relative to the element returned by .offsetParent().
.scrollTop() Gets the vertical scroll position of the first matched element
.scrollTop(value) Sets the vertical scroll position of all matched elements to value.
.scrollLeft() Gets the horizontal scroll position of the first matched element.
.scrollLeft(value) Sets the horizontal scroll position of all matched elements to value.
.height() Gets the height of the first matched element.
.height(value) Sets the height of all matched elements to value.
.width() Gets the width of the first matched element.
.width(value) SEts the width of all matched elements to value.
.innerHeight() Gets the height of the first matched element, including padding, but not border.
.innerWidth() Gets the width of the first matched element, including padding, but not border.
.outerHeight(includeMargin) Gets the height of the first matched element, including padding, border, and optional margin.
.outerWidth(includeMargin) Gets the width of the first matched element, including padding, border, and optional margin.

Insertion

Insertion
Manipulation method Description
.append(content) Inserts content at the end of the interior of each matched element.
.appendTo(selector) Inserts the matched elements at the end of the interior of the elements matched by selector.
.prepend(content) Inserts content at the beginning of the interior of each matched element.
.prependTo(selector) Inserts the matched elements at the beginning of the interior of the elements matched by selector.
.after(content) Inserts content after each matched element.
.insertAfter(selector) Inserts the matched elements after each of the elements matched by selector.
.before(content) Inserts content befre each matched element.
.insertBefore(selector) Inserts the matched elements before each of the elements matched by selector.
.wrap(content) Wraps each of the matched elements within content.
.wrapAll(content) Wraps all of the matched elements as a single unit within content.
.wrapInner(content) Wraps the interior content of each of the matched elements within content.

Replacement

Replacement
Manipulation method Description
.replaceWith(content) Replaces the matched elements with content.
.replaceAll(selector) Replaces the elements matched by selector with the matched elements.

Removal

Removal
Manipulation method Description
.empty() Removes the child nodes of each matched element.
.remove([selector]) Removes the matched nodes (optionally filtered by selector) from the DOM.
.detach([selector]) Removes the matched nodes (optionally filtered by selector) from the DOM, preserving jQuery data attached to them.
.unwrap() Removes the element’s parent.

Copying

Copying
Manipulation method Description
.clone([withHandlers], [deepWithHandlers]) Makes a copy of all matched elements, optionally also copying event handlers.

Data

Data
Manipulation method Description
.data(key) Gets the data item named key associated with the first matched element.
.data(key, value)) Sets the data item named key associated with each matched element to value.
.removeData(key) Removes the data item named key associated with each matched element.
赞(0) 打赏
文章名称:《DOM manipulation methods in jQuery》
文章链接:https://www.orzzone.com/dom-manipulation-methods-in-jquery.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册