1 line
4.7 KiB
JSON
1 line
4.7 KiB
JSON
{"name":"prop","type":"method","title":".prop()","deprecated":null,"removed":null,"desc":"Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.","categories":["attributes","manipulation/general-attributes","version/1.6"],"entries":[{"return":[{"type":"String"},{"type":"Boolean"}],"signatures":{"added":"1.6","argument":{"desc":"The name of the property to get.","name":"propertyName","type":"String"}},"examples":{"desc":"Display the checked property and attribute of a checkbox as it changes.","code":"\n$( \"input\" ).change(function() {\n var $input = $( this );\n $( \"p\" ).html(\n \".attr( \\\"checked\\\" ): <b>\" + $input.attr( \"checked\" ) + \"</b><br>\" +\n \".prop( \\\"checked\\\" ): <b>\" + $input.prop( \"checked\" ) + \"</b><br>\" +\n \".is( \\\":checked\\\" ): <b>\" + $input.is( \":checked\" ) ) + \"</b>\";\n}).change();\n","css":"\n p {\n margin: 20px 0 0;\n }\n b {\n color: blue;\n }\n","html":"\n<input id=\"check1\" type=\"checkbox\" checked=\"checked\">\n<label for=\"check1\">Check me</label>\n<p></p>\n"},"desc":"Get the value of a property for the first element in the set of matched elements.","longdesc":""},{"return":"jQuery","signatures":[{"added":"1.6","argument":[{"desc":"The name of the property to set.","name":"propertyName","type":"String"},{"type":[{"name":"String"},{"name":"Number"},{"name":"Boolean"}],"desc":"A value to set for the property.","name":"value"}]},{"added":"1.6","argument":{"desc":"An object of property-value pairs to set.","name":"properties","type":"PlainObject"}},{"added":"1.6","argument":[{"desc":"The name of the property to set.","name":"propertyName","type":"String"},{"desc":"A function returning the value to set. Receives the index position of the element in the set and the old property value as arguments. Within the function, the keyword <code>this</code> refers to the current element.","name":"function(index, oldPropertyValue)","type":"Function"}]}],"examples":{"desc":"Disable all checkboxes on the page.","code":"\n$( \"input[type='checkbox']\" ).prop({\n disabled: true\n});\n","css":"\n img {\n padding: 10px;\n }\n div {\n color: red;\n font-size: 24px;\n }\n","html":"\n <input type=\"checkbox\" checked=\"checked\">\n <input type=\"checkbox\">\n <input type=\"checkbox\">\n <input type=\"checkbox\" checked=\"checked\">\n"},"desc":"Set one or more properties for the set of matched elements.","longdesc":"\n <p>The <code>.prop()</code> method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting <code>selectedIndex</code>, <code>tagName</code>, <code>nodeName</code>, <code>nodeType</code>, <code>ownerDocument</code>, <code>defaultChecked</code>, or <code>defaultSelected</code>. Since jQuery 1.6, these properties can no longer be set with the <code>.attr()</code> method. They do not have corresponding attributes and are only properties.</p>\n <p>Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the <code>value</code> property of input elements, the <code>disabled</code> property of inputs and buttons, or the <code>checked</code> property of a checkbox. The <code>.prop()</code> method should be used to set disabled and checked instead of the <code><a href=\"/attr/\">.attr()</a></code> method. The <code><a href=\"/val/\">.val()</a></code> method should be used for getting and setting value.</p>\n <pre><code>\n$( \"input\" ).prop( \"disabled\", false );\n$( \"input\" ).prop( \"checked\", true );\n$( \"input\" ).val( \"someValue\" );\n </code></pre>\n <p><strong>Important:</strong> the <code><a href=\"/removeProp/\">.removeProp()</a></code> method should not be used to set these properties to false. Once a native property is removed, it cannot be added again. See <code><a href=\"/removeProp/\">.removeProp()</a></code> for more information.</p>\n <h4 id=\"computed-prop-values\">Computed property values</h4>\n <p>By using a function to set properties, you can compute the value based on other properties of the element. For example, to toggle all checkboxes based off their individual values:</p>\n <pre><code>\n$( \"input[type='checkbox']\" ).prop( \"checked\", function( i, val ) {\n return !val;\n});\n </code></pre>\n <p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function( index, prop ){})</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>\n "}]} |