JQ Properties and CSS

1.attr (NAME|PROPERTIES|KEY,VALUE|FN)

Sets or returns the property value of the selected element

$ ("img"). attr ("src");

Returns the SRC attribute value for all images in a document

$ ("img"). attr ({src: "test.jpg", alt: "Test Image"});

Set SRC and ALT attributes for all images

$ ("img"). attr ("src", "test.jpg");

Set src properties for all images

$ ("img"). attr ("title", function () {return this.src});

Set the value of the SRC attribute to the value of the title property

2.REMOVEATTR (name)

Remove an attribute from each matching element

$ ("img"). Removeattr ("src");

Delete the src attribute of an image in a document

3.prop (NAME|PROPERTIES|KEY,VALUE|FN)

Gets the value of the first element in a matching element

$ ("input[type= ' checkbox ']"). Prop ("checked");

Select the check box is true, not checked to false

$ ("input[type= ' checkbox ']"). Prop ({  disabled:true});

Disables all check boxes on the page.

$ ("input[type= ' checkbox ']"). Prop ("disabled", false); $ ("Input[type= ' checkbox ']"). Prop ("checked", true);

Disable and select the check boxes on all pages

$ ("input[type= ' checkbox ']"). Prop ("Checked", function (I, Val) {  return!val;});

Use the function to set the check box on all pages to be selected.

4.renmoveProp (name)

Used to delete a property set set by the. Prop () method

var $para = $ ("P"); $para. Prop ("Luggagecode", 1234); $para. Append ("The Secret Luggage Code is:", String ($para. Prop (" Luggagecode ")),". "); $para. Removeprop ("Luggagecode"); $para. Append ("Now the Secret Luggage code is:", String ($para. Prop ("Luggagecode")), ".");

Set a paragraph Number property, and then delete it

5.addClass ()

Adds the specified class name for each matching element

$ ("P"). AddClass ("selected"); $ ("P"). addclass ("selected1 selected2");

Add the ' selected ' class to the matched element

$ (' ul Li:last '). addclass (function () {  return ' item-' + $ (This). index ();});

Add a different class to Li

6.removeClass ()

Removes all or the specified class from all matching elements.

$ (' Li:last '). Removeclass (function () {    return $ (this). Prev (). attr (' class ');});

Removes the last duplicate class from the previous element

7.toggleClass ()

Delete (add) A class if it exists (does not exist).

$ ("P"). Toggleclass ("selected")

Toggle the ' selected ' class for matching elements

var count = 0;  $ ("P"). Click (function () {      $ (this). Toggleclass ("Highlight", count++% 3 = = 0);  });

Add a ' highlight ' class to three clicks per click

$ (' Div.foo '). Toggleclass (function () {  if ($ (). Parent (). is ('. Bar ') {    return ' happy ';  } else {    Return ' sad ';  }});

To set the class property based on the parent element

8.html ()

Gets the HTML content of the first matching element. This function cannot be used with XML documents. But it can be used in XHTML documents.

$ (' P '). html ();

Returns the contents of the P element

< b >World</b>! ");

Set the contents of all P elements

$ ("P"). The index of the P element of the HTML (function (n) {    return) is: "+ N;    }";

Use functions to set the contents of all matching elements

9.text ()

Gets the contents of all matching elements.

The result is text that is combined with the text content contained by all matching elements. This method is valid for both HTML and XML documents.

$ (' P '). text ();

Returns the text content of the P element

$ ("P"). Text ("Hello world!");

Set the text content of all p elements

$ ("P"). Text (function (n) {    return) the index of the P element is: "+ N;    }";

Use functions to set the text content of all matching elements

10.value ()

Gets the current value of the matching element.

In JQuery 1.2, you can return the value of any element. Includes select. If multiple selections, an array is returned that contains the selected value.

$ ("input"). Val ();

Gets the value in the text box

$ ("input"). val ("Hello world!");

Set the value of a text box

$ (' Input:text.items '). Val (function () {  return this.value + "+ this.classname;});

Set the value of a text box

<SelectID= "single">  <option>Single</option>  <option>Single2</option></Select><SelectID= "multiple"multiple= "multiple">  <optionselected= "Selected">Multiple</option>  <option>Multiple2</option>  <optionselected= "Selected">Multiple3</option></Select><BR/><inputtype= "checkbox"value= "Check1"/>Check1<inputtype= "checkbox"value= "Check2"/>Check2<inputtype= "Radio"value= "Radio1"/>Radio1<inputtype= "Radio"value= "Radio2"/>Radio2

$ ("#single"). Val ("Single2"), $ ("#multiple"). Val (["Multiple2", "Multiple3"]); $ ("input"). Val (["Check2", "Radio1"]);

Sets the value of a select and a select of multiple selections

Css

1.css ()

Accesses the style properties of the matching element.

In JQuery 1.8, when you use CSS properties in CSS () or animate (), we will automatically prefix (in the appropriate time) to the browser, for example ("User-select", "none"); In Chrome/safari Browser We will set to "-webkit-user-select", Firefox will use "-moz-user-select", IE10 will use "-ms-user-select".

$ ("P"). CSS ("color");

Gets the value of the color style property of the first paragraph.

$ ("P"). css ({"Color": "#ff0011", "Background": "Blue"});

Sets the font color for all paragraphs to red and the background to blue

$ ("P"). CSS ("Color", "red")

Set all paragraph fonts to red

  $ ("div"). Click (function () {    $ (this). css ({      width:function (index, value) {        return parsefloat (value) * 1.2;      },       height:function (index, value) {        return parsefloat (value) * 1.2;      }    );  });

Gradually increase the size of the DIV

2.offset

Gets the relative offset of the matching element at the current viewport.

The returned object contains two integer properties: Top and left, measured in pixels. This method is valid only for visible elements.

< P > Hello</p><p>2nd Paragraph</p  >

$ ("P:last"). Offset ({top:10, left:30});

Gets the offset of the second paragraph

3.positoon ()

Gets the offset of the matching element relative to the parent element.

The returned object contains two integer properties: Top and left. To calculate the results accurately, use pixel units on the padding, border, and fill properties. This method is valid only for visible elements.

< P > Hello</p><p>2nd Paragraph</p  >

var p = $ ("P:first"), var position = P.position (); $ ("P:last"). HTML ("Left:" + Position.left + ", Top:" + position.top);

Results

< P > Hello</p><p>left:15, top:15</p >

4.scrollTop ()

Gets the offset of the match element at the top of the scroll bar.

This method is valid for both visible and hidden elements.

< P > Hello</p><p>2nd Paragraph</p  >

var p = $ ("P:first"); $ ("P:last"). Text ("ScrollTop:" + p.scrolltop ());

< P > Hello</p><p>scrolltop:0</p  >

Gets the offset from the top of the first paragraph relative to the scroll bar

$ ("Div.demo"). scrolltop (300);

Sets the offset at the top of the relative scroll bar

5.scrollLeft ()

Gets the offset to the left of the matching element relative to the scrollbar.

This method is valid for both visible and hidden elements.

$ ("Div.demo"). ScrollLeft (300);

Sets the offset to the left of the relative scroll bar

6.height ()

Gets the height value (px) of the current calculation of the matching element.

After JQuery 1.2 can be used to get window and document the high

$ ("button"). Click (function () {    $ ("P"). Height (function (n,c) {    return c+10;    });  });

Increases the height of the P element by a 10-pixel amplitude

$ ("P"). Height (20)

Set the height of all paragraphs to 20

7.width ()

and high relative

8.innerHeight ()

Gets the inner area height of the first matched element (including padding, excluding borders).

This method is valid for both visible and hidden elements.

< P > Hello</p><p>2nd Paragraph</p  >

var p = $ ("P:first"); $ ("P:last"). Text ("Innerheight:" + p.innerheight ());

< P > Hello</p><p>innerheight:16</p >

Gets the first paragraph inner area height

9.innerWidth ()

and high relative

10.outHeight ()

Gets the outer height of the first matching element (including padding and borders by default).

This method is valid for both visible and hidden elements.

< P > Hello</p><p>2nd Paragraph</p  >

var p = $ ("P:first"); $ ("P:last"). Text ("Outerheight:" + p.outerheight () + ", Outerheight (True):" + P.outerheight (true));

< P > Hello</p><p>outerheight:35, Outerheight (true):  </p>

Gets the outer height of the first paragraph.

11.ourWidth ()

and high relative

JQ Properties and CSS