JQuery learning notes (4)-set attributes and styles of elements, and jquery learning notes

JQuery learning notes (4)-set attributes and styles of elements, and jquery learning notes
I. Preface

This document describes how to use jQuery to obtain and operate on the attributes and css styles of elements.

Ii. DOM attributes and element attributes

1. Run the code

2. Analyze the code

Element property src:/images/logo_small.gif

Element attribute class: img_logo

DOM property currentSrc: http: // localhost/images/logo_small.gif

DOM attribute className: img_logo

3. Operate "DOM attributes"

1. Use the each function to traverse the jQuery package set

 <script >$ ("img "). each (function (index) {alert ("index:" + index + "| className:" + this. className + "| alt:" + this. alt); this. alt = "image"; alert ("index:" + index + "| className:" + this. className + "| alt:" + this. alt) ;}); </script>

2. Description of the each function

Each (callback)Returns:JQuery package set

Run the callback Method on each element in the package set. The callback method receives a parameter, indicating the index value of the current traversal, starting from 0.

4. Operate "element attributes"

1. In JavaScript, getAttribute and setAttribute can be used to operate the "element attribute" of an element"

<script>    var img = document.getElementsByClassName("img_logo")[0];    alert(img.getAttribute("src"));    img.setAttribute("src", "http://www.cnblogs.com");    alert(img.getAttribute("src"));</script>

2. In jQuery, the attr () function is used to encapsulate the attributes of all elements in the set.

$ ("Img"). attr ("src ");	Back to documentFirst matchSrc attribute value of the image
$ ("Img"). attr ({src: "test.jpg", alt: "Kimisme "});	IsAllSet src and alt attributes for images
$ ("Img"). attr ("src", "test.jpg ")	IsAllSet the src attribute for the image
$ ("Img"). attr ("title", function () {return this. src });	SetAllSet the value of the src attribute that matches the image to the value of the title attribute.
$ ("Img"). removeAttr ("src ");	Delete the src attribute of the image in the document

5. Modify css styles

$ ("P"). addClass ("selected "); $ ("P"). addClass ("colorRed borderBlue ");	Add the 'selected' class to the matched element. Add two classes
$ ("P"). hasClass ("selected ")	Determine whether the package set has class = selected
$ ("P"). removeClass ("selected "); $ ("P"). removeClass ();	Delete the 'selected' class from the matched element. Remove all classes
$ ("P"). toggleClass ("selected ");	Switch the 'selected' class to the matching element.
Var count = 0; $ ("p "). click (function () {$ (this ). toggleClass ("highlight", count ++ % 3 = 0 );});	Click to switch the highlighted style three times.

6. Set common attributes 1. high and wide correlation

$ ("P"). height ();	Obtains the height of the first matched paragraph.
$ ("P"). height (20 );	Set the height of all paragraphs to 20px.
$ ("P"). width ()	Obtains the width of the first matched paragraph.
$ ("P"). width (20 );	Set the width of all paragraphs to 20px.
InnerHeight ()
InnerWidth ()
OuterHeight ([margin])
OuterWidth ([margin])

Var p = $ ("p"); var offset = p. offset (); console. log (offset. top + "," + offset. left ); Obtains the relative offset of the matching element in the current window) Var p = $ ("p"); var position = p. position (); console. log (position. top + "," + position. left ); Obtains the offset (0, 8) of the matched element relative to the parent element) Var p = $ ("p"); var scrollTop = p. scrollTop (); console. log (scrollTop ); Returns the offset of the matching element relative to the top of the scroll bar (0) Var p = $ ("p"); var scrollTop = p. scrollTop (300 ); Set the vertical scroll bar value Var p = $ ("p"); var scrollLeft = p. scrollLeft (); console. log (scrollLeft ); Returns the offset (0) of the matching element relative to the left of the scroll bar) Var p = $ ("p"); var scrollLeft = p. scrollLeft (300 ); Set the offset relative to the left of the scroll bar VII. References

Http://www.cnblogs.com/zhangziqiu/archive/2009/05/05/jQuery-Learn-4.html