In this blog we will learn how to manipulate the page contents using jQuery.
The topics we will learn in today's blog are:
- Overview of content manipulation:
- Creating, setting, and getting content
- Manipulating attributes
- Inserting Content
- Wrapping, replacing, removing content
- Working with CSS information
- Working with CSS classes
- Working with CSS positioning
- Working with CSS sizing information
- Overview of content manipulation:
- Once you’ve used selectors and filters to retrieve web page content, you usually want to do something with it
- Sometimes you want to create new content to dynamically add into the page
- jQuery has functions for creating, copying, deleting, and moving content around, as well as wrapping page content in other content
- jQuery provides cross-browser support for working with CSS, including positioning and sizing information
- To create new HTML content, you simply pass a string containing new HTML to the $() function:
- In addition to this method, you can use the html() and text() methods to get and set content on
- To inspect or change the value of attribute on elements, use jQuery’s attr functions
- JQuery provides several functions for inserting content into the document, both before and after existing page elements
- jQuery can wrap existing content in the page, replace content, copy content, and remove it
- jQuery’s CSS functions provide easy, cross-browser access for setting properties and working with positioning and sizing information
- The css() function allows you to retrieve and set CSS styles for a set of matched elements
- jQuery provides a set of functions for working with CSS classes on page elements
- Classes can be easily added, removed, toggled, and detected
- The CSS positioning functions provide cross-browser support for figuring out the positions of elements
- To retrieve cross-browser sizing information for elements, use the jQuery size-related CSS function
Creating, setting, and getting content:
Var newHeader = $(“My new header”);
Var myStr = “My new header”;
Var newHeader = $(myStr);
Function | Purpose |
html() | Returns the HTML content of the first matched element |
html(newcontent) | Sets the HTML content of every matched element |
text() | Returns the text content of the first matched element |
text(newtext) | Sets the text content for all matched elements |
Manipulating attributes:
Function | Purpose |
attr(name) | Accesses property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned |
attr(properties) | Set a series of attributes on all matched element using an object notation syntax. This is the best used for setting large numbers of properties at once $(“img”).attr({ src: “/images/hat.gif”, title: “jQuery”, alt: “jQuery Logo”}); |
attr(key, value) | Sets a single property to a value on all matched elements |
attr(key, fn) | Sets a single property to a computed value, on all matched elements. Instead of supplying a string value, a function is provided that computes the value of the attribute |
removeAttr(name) | Removes the named attribute from all matched elements |
Inserting Content:
Function | Purpose |
append(content) | Appends content to the inside of every matched element |
appendTo(selector) | Appends all of the matched elements to another, specified, set of elements |
prepend(content) | Prepends content to the inside of every matched element |
prependTo(selector) | Prepends all the matched elements to another, specified, set of elements |
after(content) | Inserts content after each of the matched elements |
before(content) | Inserts content before each of the matched elements |
insertAfter(selector) | Inserts all of the matched elements after another, specified, set of elements |
insertBefore(selector) | Inserts all of the matched elements before another, specified, set of elements |
Wrapping, replacing, removing content:
Function | Purpose |
wrap(html) | Wraps each matched element with the specified HTML content |
wrap(element) | Wraps each matched element with the specified element |
wrapAll(html) | Wraps all the elements in the matched set with the specified HTML content |
wrapAll(element) | Wraps all the elements in the matched set into a single wrapper element |
wrapInner(html) | Wraps the inner child contents of each matched element (including text nodes) with an HTML structure |
wrapInner(element) | Wraps the inner child contents of each matched element (including text nodes) with a DOM structure |
replaceWith(content) | Replaces all matched elements with the specified HTML or DOM elements |
replaceAll(selector) | Replaces the elements matched by the specified selector with the matched elements |
empty() | Removes all child nodes from the set of matched elements |
remove() | Removes all matched elements from the DOM |
clone() | Clone matched DOM elements and selects the clones |
clone(bool) | Clone matched DOM elements, and all their event handlers, and select the clones |
Working with CSS information:
Filter | Purpose |
css(name) | Returns the value for the named CSS property for the first matched element |
css(properties) | Sets the CSS properties of every matched element using an object-notation syntax: var cssObj = { ‘background-color’ : ‘#ddd’, ‘font-weight’ : ‘ ‘ ‘color’ : ‘rgb(0, 40, 244)’ } $(this).css(cssObj); |
css(property, value) | Sets a single style property to a value on all matched elements. If a number is provided, it is automatically converted into a pixel value, with the following exception: z-index, font-weight, opacity, zoom, and line-height |
Working with CSS classes:
CSS Functions | Purpose |
addClass(class) | Adds the specified class(es) to each of matched elements |
hasClass(class) | Returns true if the specified class is present on at least one of the set of matched elements |
removeClass(class) | Removes all the specified class(es) from the set of matched elements |
toggleClass(class) | Adds the specified class if it is not present, removes the specified class if it is present |
toggleClass(class, switch) | Adds the specified class if the switch is true, removed the specified class if the switch is false |
Working with CSS positioning:
CSS Functions | Purpose |
offset() | Gets the current offset of the first matched element, in pixels, relative to the document |
offsetParent() | Returns a jQuery collection with the positioned parent of the first matched element |
position() | Gets the top and left position of an element relative to its offset parent |
scrollTop() | Gets the scroll top offset of the first matched element |
scrollTop(val) | Sets the scroll top offset to the given value on all matched elements |
scrollLeft() | Gets the scroll left offset of the first matched element |
scrollLeft(val) | Sets the scroll left offset to the given value on all matched elements |
Working with CSS sizing information:
CSS Functions | Purpose |
height() | Gets the current computed, pixel, height of the first matched element |
height(val) | Sets the CSS height of every matched element |
width() | Gets the current computed, pixel, width of the first matched element |
width(val) | Sets the CSS width of every matched element |
innerHeight() | Gets the inner height (excluding the border and including the padding) for the first matched element |
innerWidth() | Gets the inner width (excluding the border and including the padding) for the first matched element |
outerHeight(margin) | Gets the outer height (includes the border and padding by default) for the first matched element. If the margin argument is true, then the margin values are also included |
outerwidth(margin) | Gets the outer width (includes the border and padding by default) for the first matched element. If the margin argument is true, then the margin values are also included |
No comments:
Post a Comment