Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "what is the common operation of DOM in jQuery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

DOM attribute operation

Attribute list

Property version description attr () 1. 0 sets or returns the properties of the document node. RemoveAttr () 1. 0 removes attributes from the document node. Prop () 1. 6 sets or returns the properties of the DOM element. RemoveProp () 1. 6 removes attributes from each matching element. AddClass () 1. 0 adds the CSS class name. RemoveClass () 1.0 removes the CSS class name. ToggleClass () 1.2Toggle the CSS class name (delete it if it exists and add it if it doesn't exist). Html () 1. 0 sets or returns the html content (that is, innerHTML) of the element. Text () 1. 0 sets or returns the text content of the element (HTML tags have been filtered out, that is, innerText in IE). Val () 1. 0 sets or returns the value of the element (mainly the value of the form element).

DOM document operation

First, add elements

1. Add internally

Append content to the inside of the current element to the end

Append ($(selector))

Appends the current element inside an element. However, because the current element will be moved as needed, the jQuery object has changed and can be restored by end ()

AppendTo ($(selector))

Prefix the content to the inside of the current element

Prepend ($(selector))

Precedes the current element inside an element. Similar to appendTo (), it changes the object

PrependTo ($(selector))

2. External addition

Insert content after the current element

After ($(selector))

Inserts the current element after an element. Similar to appendTo (), it changes the object

InsertAfter ($(selector))

Insert content before the current element

Before ($(selector))

Inserts the current element before an element. Similar to appendTo (), it changes the object

InsertBefore ($(selector))

II. Delete elements

Delete the current element, the text content contained in the element and the descendant elements will be deleted together, and the bound event will no longer exist

Remove ()

The current element is also deleted, but the bound event still exists

Detach ()

Clear the current element, whose text content and descendant elements will be deleted, but retain itself

Empty ()

III. Replacement elements

Move the original elements on the page to replace the currently selected page elements, or you can add new elements to replace them

ReplaceWith ((selector)) replaceWith ($(html))

Replacing an element with the currently selected element can make the old or new element on the page. The current element copy will also be copied as needed, thus changing the jQuery object

ReplaceAll ((selector)) replaceAll ($(html))

DOM style operation

1. Summary

By getting the style attribute on the dom element through JavaScript, we can dynamically assign style attributes to the element. In jQuery, we want to modify the style property dynamically, and we just need to use the css () method to do it.

II. Style operation function

CSS ()

The css () function is used to set or return the css style attribute value of the element matched by the current jQuery object. If you need to delete the specified css property, use the function to set its value to an empty string (").

Syntax format:

$("selector") .css (property [, value]) $("selector") .css (object)

Height ()

Used to set or return the height of the current matching element

Syntax format: $("selector") .height ([value])

If the value parameter is omitted, the height is obtained; if specified, the height is set.

Width ()

Used to set or return the width of the current matching element

Syntax format: $("selector") .width ([value])

InnerHeight (), innerWidth ()

Sets or returns the inner width or height of the current matching element

Syntax format:

$("selector") .innerHeight ([value]) $("selector") .innerWidth ([value])

OuterHeight (), outerWidht ()

Gets the outer height (outer width) of the current matching element

Syntax format:

$("selector") .outerHeight ([includeMargin]) $("selector") .outerWidth ([includeMargin])

DOM event action

1. Event API

The core event method of the jQuery object, the core event function, is mainly used to add, cancel, and trigger one or more event handlers bound to any event of an element (including custom events).

2. Methods

On () method

Description: the on () method adds one or more event handlers to the selected element and its child elements.

Syntax: $(selector) .on (event,childSelector,data,function,map)

Toggle ([speed], [easing], [fn])

Description: used to bind two or more event handler functions in response to alternate click events of the selected element. If the element is visible, switch to hidden; if the element is hidden, switch to visible.

Syntax: $(selector) .toggle (speed,easing,function)

Parameters:

Speed: the speed at which the effect is hidden / displayed. The default is "0" milliseconds. Possible value: slow,normal,fast.

Easing: optional parameter. Used to specify the switching effect, the default is "swing", and the parameter "linear" is available.

Fn: a function that is executed when the animation is complete, once for each element.

Change ([[data], fn])

Description: when the value of an element changes, the change event occurs. This event applies only to text fields (text field), as well as to textarea and select elements. When used with a select element, the change event occurs when an option is selected. When used with text field or text area, this event occurs when the element loses focus

Syntax: $(selector) .change (data,fn)

Click ([[data], fn])

Description: triggers a click event for each matching element. This function calls all functions that execute the binding to the click event.

Syntax: $(selector) .click (data,fn)

Mouseover ([[data], fn])

Description: the mouseover event occurs when the mouse pointer is over the element. This event is used most of the time with the mouseout event.

Unlike the mouseenter event, the mouseover event is triggered regardless of whether the mouse pointer passes over the selected element or its child elements. The mouseenter event is triggered only when the mouse pointer passes over the selected element

Syntax: $(selector) .Mouseover (data,fn)

Mouseout ([[data], fn])

1. Description: the mouseout event occurs when the mouse pointer is moved away from the element. This event is used most of the time with the mouseover event.

Syntax: $(selector) .mouseout (data,fn)

Select ([[data], fn])

Description: the select event occurs when text in a textarea or text type input element is selected

Syntax: $(selector) .select (data,fn)

This is the end of the content of "what are the common operations of DOM in jQuery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.