Home > Web Front-end > JS Tutorial > body text

jquery gets custom attributes (attr and prop) examples introduction_jquery

WBOY
Release: 2016-05-16 17:36:03
Original
1680 people have browsed it

$("form").attr("check"); $("form").prop("check"); Both are acceptable, but the new version of jquery recommends the second one. Both are good in other aspects. Almost the same, the only difference I found is that when using the checkbox, you need to use prop, otherwise the IE browser will be incompatible

Copy code The code is as follows:









777777777778888888888455rrrrrrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttttttttttttttttttttttttttttttt777777777777777777777777777777777788888888888888">



< ;script>
// var J = $("div[lang]").get();
// alert($("[data-url]:eq(2)").attr( "data-url"));
$("[data-url]").each(function () {
alert($(this).attr("data-url")); }) ;
// $("[data-url]").each(function () {
// alert($(this).prop("data-url")); // });


Attachment: jquery attr() method
The attr() method is used in jquery to get and set element attributes. attr is the abbreviation of attribute. attr() is often used in jQuery DOM operations. attr() has 4 expressions.

1.

attr(Attribute name) //Get the value of the attribute (get the attribute value of the first matching element. This method can easily start from the first matching element Get the value of an attribute in an element. If the element does not have a corresponding attribute, undefined is returned)

2.

attr(Attribute name, attribute value) //Set the value of the attribute (Set an attribute value for all matching elements.)

3.

attr(Attribute name,Function value) //Set the function value of the attribute (Set a calculated attribute value for all matching elements . Instead of providing a value, a function is provided, and the value calculated by this function is used as the attribute value).

4.

attr(properties) //Set multiple attribute values ​​for the specified element, that is: {Attribute name one: "Attribute value one", Attribute name two: " Attribute value two”, … … }. (This is the best way to set many attributes in batches across all matching elements. Note that if you want to set the class attribute of an object, you must use 'className' as the attribute name. Or you can directly use 'class' or ' id'. )

Sample code:

Copy code The code is as follows:

< ;html xmlns="http://www.w3.org/1999/xhtml">


attr() method in jquery



< ;body>

What is your favorite fruit?



<script> <br>... <br></script>




1.attr(name)//Get the value of the attribute

1.1 Use attr(name) to get the title value:

Copy code The code is as follows:
<script> <br>alert($(" ul li:eq(1)").attr("title")); <br></script>


Result:
jquery gets custom attributes (attr and prop) examples introduction_jquery

1.2 Use attr(name) to get the alt value:

Copy code The code is as follows:

<script> <br>alert($("ul li:eq(1)").attr("alt")); <br></script>

Result:
jquery gets custom attributes (attr and prop) examples introduction_jquery

2. attr(name,value) //Set the value of the attribute


2.1 Use attr(name,value) to modify the title value to: Don’t eat Orange
Copy code The code is as follows:

<script> <br>$ ("ul li:eq(1)").attr("title","Don't eat oranges"); <br>alert($("ul li:eq(1)").attr("title")) ; <br></script>

Result:
jquery gets custom attributes (attr and prop) examples introduction_jquery

3. attr(name,fn) //Set the function value of the attribute

3.1 Set the value of the alt attribute to the value of the title attribute.
Copy code The code is as follows:

<script> <br>$( "ul li:eq(1)").attr("title",function(){ return this.alt}); <br>alert($("ul li:eq(1)").attr("title ")); <br></script>

Result:
jquery gets custom attributes (attr and prop) examples introduction_jquery

4.attr(properties) //Set an object in the form of "name/value" as the attributes of all matching elements


4.1 Get
Related labels:
source:php.cn
Previous article:Bug in JQuery operating Select's Options (IE8 compatibility view mode)_jquery Next article:Jquery submit() cannot submit the problem_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template