catalogue

1, Operation properties

1. attr(): method

2. prop(): method

2, css properties

1. Set css attribute

2. Get css attribute

3. Add, delete, alternate add delete styles

3, Sets / gets the width and height attributes of the element

1. Obtain width

2. Set width

4, Set get element content

1. Gets / sets the HTML code of the element content body

2. Gets / sets the element content body plain text

1, Operation properties

1. attr(): method

You can operate standard attributes or user-defined attributes, and only write the attribute name. The returned value is not true/false

• Single attribute: jQuery object attr('attribute name ',' attribute value ')
• Multiple attributes: jQuery object attr({attribute name: attribute value}) note that the parameter is an object
• Get property: jQuery object attr('attribute name '), did not return undefined
• Remove attribute: jQuery object removeAttr('attribute name '), do nothing without passing it
   

2. prop(): method

Only standard attributes can be operated. Only attributes with attribute names are written. The returned value is true/false

• prop() method: operate boolean value type attributes such as checked, selected and disable. User defined attributes cannot be operated
• Set a single property: jQuery object prop('attribute name ',' attribute value ')
• Set multiple properties: jQuery object prop({attribute name: attribute value})
• Get property: jQuery object prop('attribute name '), return true /false
   

 <a href="https://www.baidu. Com "> Baidu</a>
   <input type="checkbox" name="" id="" checked>male
   <div index='1'>attr </div>
   <span>1234</span>
//jQuery section
    <script>
        $(function(){
            console.log($('a').prop('href'));   //Get element intrinsic attribute value
            $('a').prop("title","use Baidu Search")
            $('input').change(function(){
                console.log($(this).prop('checked'));
            })

            //Element custom attribute attr() get
            console.log($('div').attr("index"));
            $("div").attr("index",4);

            //The data cache is stored in element memory
            $("span").data('unmae','pink')
        })
    </script>

2, css properties

1. Set css attribute

• Set a single css attribute: $(selector) css("attribute name", "attribute value")
• Set multiple css properties: $(selector) css({attribute name: "attribute value", attribute name: "attribute value"...}) the quotation marks of the attribute name here can be added or not

2. Get css attribute

• $(selector) css("property name")

3. Add, delete, alternate add delete styles

• $(selector) addClass("style name")
• $(selector) removeClass("style name")
• $(selector) toggleClass(class attribute)

<div></div>
$(function(){
             //1. Add class addClass
             $('div').click(function(){
                $(this).addClass('current')
             })
             //2. Delete class removeClass
             $('div').click(function(){
                 $(this).removeClass('current')
             })
             //3. Toggle class toggleClass
             $('div').click(function(){
                 $(this).toggleClass('current')
             })
        })

3, Sets / gets the width and height attributes of the element

1. Obtain width

• $(selector) width()

2. Set width

• $(selector) width(val)    

width property	explain
innerWidth()	The innerWidth() method is used to obtain the element width including the padding,
outerWidth()	The outerWidth() method is used to obtain the element width including the padding and border,
outerWidth(true)	If the parameter of the outerWidth() method is true, the outer boundary will also be included, that is, the element width including the outer border, padding and border will be obtained.

Similarly, innerHeight method and outerHeight method use the same method to calculate the corresponding height.
Therefore, for the same element, it should be: width() < = innerwidth() < = outerwidth() < = outerwidth (true);

$(function(){
            //1. Get element width height
            console.log($('div').width());
            //2. Include padding
            console.log($('div').innerWidth());
            //3. Include border
            console.log($('div').outerWidth());
            //4. Include margin
            console.log($('div').outerWidth(true));
        })

4, Set get element content

1. Gets / sets the HTML code of the element content body

Attribute name	Attribute description
jQuery object html()	Get the html code of the content body. If there is a tag code, get it together.
jQuery object html("HTML code")	Set the html code. If there is a tag, it will be parsed.

2. Gets / sets the element content body plain text

Attribute name	Attribute description
JQ object text()	Gets the text. If there is a label, ignore it.
JQ object text("plain text")	Set the text. If it contains HTML tags, it will not be parsed. Output as is.

text() only displays all the text in the element, not the label symbol; html() displays all html elements in the element;  

$(function() {
    //1. Get set element content
    $('div').html('I am div')
    //2. Gets or sets the element text content. Text gets only text, not labels
    $('div').text('zxcvbnm')
    //3. Get setting form val
    console.log($('input').val());
    $('input').val('Please enter')
})