Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail the "JQuery operation and traversal elements and set its attributes, styles and content of the method", detailed content, clear steps, details handled properly, I hope that this "JQuery operations and traversal elements and set its attributes, styles and content of the method" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge bar.

I. operational attributes

Attribute classification

Inherent attribute

Href 、 src.

Common attribute

Id,class,name.

Custom attribute

Abc= '1234'

The method of manipulating attributes

Difference

1.prop cannot manipulate custom properties

2.prop gets the property of the Boolean type is true/false

Get attribute value

When attr (attribute name) operates checkbox, it gets the specified attribute value, returns checked when checked, and returns undefined when unchecked.

Op (attribute name) gets the attribute value with two attributes, true and false

Set property value

Attr (attribute name, attribute value)

Prop (attribute name, attribute value)

Remove attribut

RemoveAttr ("Properties")

Aa bb var ch2 = $("# ch2"); var ch3 = $("# ch3") / / get the inherent attribute console.log (ch2.attr ('type')); console.log (ch2.prop (' type')) / / get the common attribute console.log (ch2.attr ('name')); console.log (ch3.prop (' name')) / / get custom attribute prop cannot manipulate custom attribute console.log (ch2.attr ('abc')); console.log (ch3.prop (' abc')) / / undefined / / get the property of boolean type console.log (ch2.attr ('checked')); / / checked console.log (ch2.prop (' checked')) / / true / / set boolean type properties ch2.attr ("checked", 0); ch3.attr ("checked", "checked"); / / same effect ch2.prop ("checked", false) Ch3.prop ("checked", true); / / set custom attribute ch2.attr ("abc", '999'); / / prop cannot operate custom attribute ch3.prop ("abc",' 999') / /-- invalid setting / / setting the common property ch2.attr ("name", 'ab1'); ch3.prop ("name",' ab1') / / remove attribute ch2.removeAttr ("checked"); / / boolen type ch2.removeAttr ("abc"); / / Custom attribute ch2.removeAttr ("name") / / Common attribute ch2.removeAttr ("type"); / / unique attribute 2. Operation style

Attr ("class") gets the value of the class attribute, that is, the style name

Attr ("class", "style name") modifies the value of the class property, modifies the style

AddClass ("style name") add a style name

Css () adding a specific style is equivalent to directly setting the inline style

RemoveClass (class) remove style name

Div {padding: 8px; width: 180px;} .blue {background: blue } .organizer {font-size: 30px;} .green {background: green } css () method sets the element style sky blue bright red sky blue / / gets the value of the class attribute That is, style name var clas = $("# conBlue") .attr ("class") Console.log (clas); / / modify the value of the class property, modify the style $("# conBlue") .attr ("class", "green") / / overwrite the size, style and color of the font / / addClass ("style name") add the style name $("# conRed") .addClass ("larger") / / css () $("# conRed") .css ("color", "red") / / removeClass (class) removes the style name $("# remove") .removeClass ("larger"); III. Operation element content

Html ()

Gets or sets the content of the element that contains html content to identify plain text content

Value: html ()

Assignment: html ("html, content")

Text ()

Gets or sets the content of the element, which does not contain html content and can only identify plain text content

Value: text ()

Assignment: text ("html, content")

Val ()

Gets or sets the value of the element

Value: val ()

Assignment: val ('value')

The html () and text () methods set the element content / / get the content of the element var ht = $("h4") .html (); var te = $("h4") .text () Console.log (ht); console.log (te); / / set element content $("# html") .html ("bold effect"); $("# text") .text ("text bold effect") / / val () gets the element value var input = $('[type= "text"]') .val (); console.log (input) / / val () sets the element value $('[type= "text"]') .val ("jquery"); IV. Create and add elements

Prepend (content)

Insert an element or content at the beginning of the selected element, and the appended content parameters can be characters or HTML element tags.

$(content) .prependTo (selector)

Add a content element or content to the beginning of a selector element

Append (content)

Insert an element or content at the end of the selected element, and the appended content parameters can be characters or HTML element tags.

$(content) .appendto (selector)

Insert the content element or content into the selector element, which is at the end by default

Before ()

Inserts the specified element or content before the element: $(selector). Before (content)

After ()

Inserts the specified element or content after the element: $(selector) .after (content)

Div {margin: 10px 0px;} span {color: white Padding: 8px} .red {background-color: red;} .blue {background-color: blue } .green {background-color: green } male god idol little fresh meat / / create elements Var newP = $(paragraph tag) Console.log (newP); / / add the element prepend (content) before appending / / getting the element var str = "PDD" at the reference location; $('.green') .prepend (newP) $('.green') .prepend (str); / / prependTo (); var str2 = "spicy spicy pot" is appended internally; $(str2) .prependTo ($(".green")) / / append () and append $('.green') .append ("Jay Chou"); / / appendTo () Append $("Lin Junjie") .appendTo ($('.green')); / / append $(".red") .before ("Xue Zhiqian") before the same level of before / / after sibling and append $(".blue") .after ("Li Ronghao"); fifth, delete elements

Remove ()

Delete the selected element or specified child elements, including the entire tag and content

Empty ()

Clear the contents of the selected element

Span {color: white; padding: 8px; margin: 5px; float: left;} .green {background-color: green } .blue {background-color: blue } Delete element jquery Delete javase http protocol servlet / / delete / / $(".green") .remove () / / clear $(".green") .empty (); VI. Traversal elements

Format:

$("value") .each (function (index,element) {

});

Span {color: white; padding: 8px; margin: 5px; float: left;} .green {background-color: green } .blue {background-color: blue } traversal element each () jquery javase http protocol servlet $(".green") .each (function (index) Ele) {/ / Index position of the current element console.log (index) / / get the current dom object console.log (ele); console.log (this) / / uniform styling requires a jquery object $(ele) .attr ("class", "blue");}) Read this, the "JQuery operation and traversal elements and set its properties, styles and content of the method" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.