jquery gets the implementation code of custom attributes (attr and prop)_jquery

1. attr (attribute name) //Get the value of the attribute (get the attribute value of the first matching element. This method can easily get the value of an attribute from the first matching element. If the element does not have a corresponding attribute, then Return undefined )

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, namely: {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: >

What is your favorite fruit?

• Apple


• 
  
• Pineapple

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




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

1.1 Use attr(name) gets the title value:

Copy code The code is as follows: <script> </div>alert($("ul li:eq(1)").attr("title")); <div class="codebody" id="code93096"></script>


Result:

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

Copy code The code is as follows: <script> </div>alert($("ul li:eq(1)").attr("alt")); <div class="codebody" id="code71069"></script>


Result :

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 oranges

Copy code The code is as follows: <script> </div>$("ul li:eq(1)") .attr("title","Don't eat oranges"); <div class="codebody" id="code10590">alert($("ul li:eq(1)").attr("title")); <br></script>


Result:

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> </div>$("ul li :eq(1)").attr("title",function(){ return this.alt}); <div class="codebody" id="code92027">alert($("ul li:eq(1)").attr("title")) ; <br></script>


Result:

4.attr(properties) //Set an object in the form of "name/value" to all Attributes of matching elements
4.1 Get the second

in

and set the title and alt attributes.



Copy code The code is as follows:

<script> <br>$("ul li:eq(1)").attr({title:"Don’t drink orange juice",alt:"Not 123"}); <br> alert($("ul li:eq(1)").attr("title")); <br>alert($("ul li:eq(1)").attr("alt")); <br></script>


Result:

4.2 Get the second
setting class in
.

Copy code The code is as follows:

<script> <br>$("ul li :eq(1)").attr({className:"lili"}); <br></script>


Result:

4.3 Get the setting id of the second
• in
  .
  <script><br>$("ul li:eq(1)").attr({id:"lili"});<br></script>
  
  Result:
  
  4.4 Get the second
  • setting style in
    .
    <script><br>$("ul li:eq(1)").attr({style:"color:red"});<br></script>
    
    Result:
    
    It is wrong to add alt in li. It can only be used in img, area and input elements (including applet elements). For input elements, the alt attribute is intended to replace the submit button image. In order to explain the attr() method in detail here, there is no suitable attribute, so alt is used as an example. It is only for learning and reference of the attr() method usage.
    
    Here is the difference between alt and tite.
    
    alt: This is the text used to describe the graphics. When the picture cannot be displayed, these texts will be displayed instead of the picture. The text will also be displayed when the mouse is moved over the image.
    Title: It is the text that will be displayed after the mouse is placed on it.
    
    So how to delete attributes?
    
    The keyword to delete attributes in jquery is: removeAttr. Note that A is capitalized. See how to use it:
    
    The same is the first usage In the html code, I want to delete the title attribute of li, so it goes like this:
    
    Copy the code The code is as follows:
    
    <script> <br>$("ul li:eq(1)").removeAttr ("title"); <br></script>
    
    
    It's that simple, attr is actually a simplified implementation of getAttribute in native js, and removeAttr is the abbreviation of removeAttribute.
    
    So is there an attribute similar to attr()?
    Val() in jquery is similar,
    $(this).val(); gets the value of an element node, which is equivalent to $(this).attr("value");
    $(this).val(value); Set the value of an element node, equivalent to $(this).attr("value",value);