jquery Learning Summary 02-Properties

Source: Internet
Author: User
Tags set set

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

Description: Sets and returns the property value of the selected element

Example:

Parameters:

Name (property name) String
Properties (as property's ' name/value pair ' object) Map
Key,value (property name, property value) String,object

Key,function (index,attr)

1. Property name

2. The function that returns the value of the property, the first parameter is the index value of the current element, and the second parameter is the original property value.

String,function

Description: Parameter name, which returns the SRC attribute value of all image img in the document

jquery Code

$ (' img '). attr (' src ')

Description: Parameter property, setting ALT and SRC attributes for all image img Elements

jquery Code:

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

Description: Parameter key,value, setting src attribute for all image img Elements

jquery Code:

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

Description: Parameter key, callback function, set the value of the SRC attribute to the value of the title property

jquery Code:

$ (' img '). attr (' title ', function () {    return this.src;});
2, removeattr (name)

Description: Removes an attribute from each of the matched elements

1.6 The following version of IE6 using jquery's Removeattr method to remove disabled is not valid. The workaround is to use $ ("XX"). Prop ("disabled", false);
Version 1.7 has been supported to remove disabled under IE6.

Example:

Description: Deletes the SRC attribute of an image in a document

HTML code:

<src/>

jquery Code:

$ (' img '). removeattr (' src ');

Results:

</> ]
3, prop (NAME|PROPERTIES|KEY,VALUE|FN)

Description: Gets the property value of the first element in a matching element collection

With some built-in properties for DOM elements or window objects, the browser may produce an error if the property is attempted to be deleted. jquery first assigns a property of the undefined value, ignoring any errors generated by the browser

Example:

Parameters:

Name (property name) String
Properties (as property's ' name/value pair ' object) Map
Key,value (property name, property value) String,object

Key,function (index,attr)

1. Property name

2. The function that returns the value of the property, the first parameter is the index value of the current element, and the second parameter is the original property value.

String,function

Description: Parameter name, check box is true, not checked to false

HTML code:

<inputtype= "checkbox"checked= "Checked" /><inputtype= "checkbox" /><inputtype= "checkbox"checked= "Checked" /><inputtype= "checkbox" /><inputtype= "checkbox"checked= "Checked" /><inputtype= "text" /><inputtype= "button"value= "Submit" />

jquery Code:

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

Description: Parameter properties, prohibit and select all check boxes on page

jquery Code:

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

Description: Parameter Key,value, disable and select all check boxes on the page

jquery Code:

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

Description: Parameter key, callback function, function to set all check boxes on the page to be selected

jquery Code:

$ (' input[type= ' checkbox "] '). Prop (' Checked ', function (index,val) {        return true;});
4, Removeprop (name)

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

With some built-in properties for DOM elements or window objects, the browser may produce an error if the property is attempted to be deleted. jquery first assigns a property of the undefined value, ignoring any errors generated by the browser

Example:

Description: Sets a paragraph number property and then deletes it.

jquery Code:

$ (' P '). Prop (' Luggagecode ', 1234); $ (' P '). Prop (' Luggagecode '); $ (' P '). Removeprop (' Luggagecode '); $ (' P '). Prop (' Luggagecode ');
5, AddClass (CLASS|FN)

Description: Adds the specified class name for each matching element.

Example:

Parameters:

Class (one or more CSS class names to add to the element, separated by a space) String

function (Index,class)

This function must return one or more space-delimited class names

The 1.index parameter is the index value of the object in this collection

The 2.class parameter is the original class attribute value for this object

function

Description: Parameter class, adding ' selected ' class for matching elements

jquery Code:

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

Description: Parameter function, add a different class to Li

jquery Code:

$ (' ul Li '). addclass (function (index,cls) {     return ' item-' + Index;})
6, Removeclass ([CLASS|FN])

Description: Removes all or a specified class from all matching elements

Example:

Parameters:

Class (one or more CSS class names to add to the element, separated by a space) String

function (Index,class)

This function must return one or more space-delimited class names

The 1.index parameter is the index value of the object in this collection

The 2.class parameter is the original class attribute value for this object

function

Description: Parameter class, removing the ' selected ' class from the matching element

jquery Code:

$ ("P"). Removeclass ("selected");

Description: Parameter function, delete the last element on the previous repeating class

jquery Code:

$ (' Li:last '). Removeclass (function () {    return $ (this). Prev (). attr (' class ');});
7, Toggleclass (CLASS|FN[,SW]) Note: If the tag already contains class, the class name will be deleted, or new

Description: Deletes (adds) a class if it exists (does not exist).

Example:

Parameters:

Class (classes name) String

Class,switch

1: CSS class name to toggle

2. A Boolean value that determines whether an element contains a class.

String,boolean
Switch (the Boolean value that determines whether the element contains a class.) ) Boolean

function (index, class,switch) [, switch]

1: A function that returns the name of the style class used to toggle on each element in the matching element collection. Receives the index position of the element and the element's old style class as an argument.

2: A Boolean value that is used to determine whether the style class is added or removed.

Function,boolean

Description: Parameter class, Toggle ' selected ' class for matching elements

jquery Code:

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

Description: Parameter Class,switch, add a ' highlight ' class to three clicks per click

jquery Code:

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

Description: Parameter function, set class property according to parent element

jquery Code:

$ (' Div.foo '). Toggleclass (function () {  if ($ (). Parent (). is ('. Bar ') {    return ' happy ';  } else {    Return ' sad ';  }});
8. HTML ([VAL|FN])

Description: 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.

In an HTML document, we can use the. html () method to get the contents of any one element. If the selector matches more than one element, only the HTML content of the first matching element is fetched.

Example:

Parameters:

Val (value for setting HTML content) String

function (index,html)

This function returns an HTML string

1.index is the index position of the element in the collection

2.html is the original HTML value

function

Description: No parameter, returns the contents of the P element.

HTML code:

< P >< span >jQuery</span></p>

jquery Code:

$ (' P '). html ();

Results:

"<span>jQuery</span>"

Description: Parameter val, setting the contents of all P elements

HTML code:

< P ></ P >

jquery Code:

$ (' P '). html ('<span>hello,world</span>')

Description: Parameter function, which uses functions to set the contents of all matching elements.

HTML code:

< P ></ P > < P ></ P > < P ></ P >

jquery Code:

$ (' P '). HTML (function (index) {    return '<span>hello,item ' +index + ' </ span > ';});
9. Text ([VAL|FN])

Description: 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.

Example:

Parameters:

Val (text used to set the content of the element) String

function (Index,text)

This function returns a string

1.index is the index position of the element in the collection

2.text is the original text value

function

No more details

10. Val ([Val|fn|arr])

Description: Gets the current value of the first element in the matching element collection.

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.

Example:

Parameters:

Val (the value to set) String

function (Index,value)

This function returns a value to set

1.index is the index position of the element in the collection

2.value is the original value

function

Array (value for Check/select)

Array (String)

Description: No parameters, gets the value in the text box

HTML code:

<inputtype= "checkbox"checked= "Checked" /><inputtype= "checkbox" /><inputtype= "checkbox"checked= "Checked" /><inputtype= "checkbox" /><inputtype= "checkbox"checked= "Checked" /><inputtype= "text" /><inputtype= "button"value= "Submit" />

jquery Code:

$ (' input[type=text] '). Val ()

Description: Parameter val, setting the value of the text box

jquery Code:

$ (' input[type=text] '). Val (' Hello World ')

Description: Parameter array, setting the value of a select and a multi-select Select

HTML code:

<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

jquery Code:

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

jquery Learning Summary 02-Properties

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.