How does jquery change the html Tag style (two methods)

For js, you can use setAttribute to set tag attributes and getAttribute to get tag attributes. in jq, you can also implement similar functions, the method must be much simpler than js.
1. Modify the label attribute to change its style.
Set and retrieve tag attributes in js
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Window. onload = function (){
Var attr = document. getElementById ("attr ");
Attr. setAttribute ("style", "font-weight: bold ;")
Alert (attr. getAttribute ("style "));
}
</Script>

Jq sets and obtains tag attributes
Copy codeThe Code is as follows:
<Script src = "http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Attr"). attr ("style", "color: # ff0000"); // set a single attribute
$ ("# Avatar"). attr ({"class": "banner", "alt": "Avatar", "src": "http://pic.cnblogs.com/avatar/a118538.jpg? Id = 11133319 "}); // set multiple attributes
Alert ($ ("# Avatar"). attr ("src"); // get the attributes of the specified tag
});
</Script>

It is worth noting that the content of the window. onload method block of JS is executed after the $ (function () {}) method block of JQ is executed.
2. Modify the css style of a tag to change its style.
Let's look at the basic syntax:
Copy codeThe Code is as follows:
$ ("# Attr"). addClass ("banner"); // Add a style
$ ("# Attr"). removeClass ("banner"); // remove a style
// JQ supports joint writing. Because the returned result of removeClass is also a Jq object, it can be used for all methods and events of the Jq object.
$ ("# Attr"). removeClass ("banner"). addClass ("bannerOver ");

The following is an example. When you click the dd label, the current dd block is highlighted.
Copy codeThe Code is as follows:
<Style>
. Banner {background: # 0094ff ;}
. BannerOver {background: #808080 ;}
. Cur {background: # ff6a00 ;}
</Style>
<Script>
$ (Function (){
$ ('# Menu_title'). find ('dd'). click (function (){
$ ('# Menu_title'). find ('dd'). removeClass ('cur ');
$ (This). addClass ('cur ');
})
})
</Script>
<Dl id = "menu_title">
<Dt> Persons </dt>
<Dd> an advanced animal </dd>
<Dt> dog </dt>
<Dd> human friends </dd>
<Dt> CAT </dt>
<Dd> CAT's ancestor </dd>
</Dl>

The following figure shows the row-Changing Effect of the table.
Copy codeThe Code is as follows:
. Odd {background: #808080 ;}
. Even {background: # ffd800 ;}
. Selected {background: # 0094ff; color: # fff ;}. hover {background: #808080 ;}

Copy codeThe Code is as follows:
Var $ trs = $ ("# menu_title> dd"); // select all rows $ trs. filter (": odd "). addClass ("odd"); // Add an odd style to an odd number of rows $ trs. filter (": even "). addClass ("even"); // Add an odd style to an even row

Click a row to highlight the current row.
Copy codeThe Code is as follows:
// Click a row to add a color-changing style
$ Trs. click (function (e ){
$ (This). addClass ("selected ")
. Siblings (). removeClass ("selected ");
})

Add mouse move-in and move-out events
Copy codeThe Code is as follows:
// Move the mouse in and out
$ ("# Menu_title> dd"). hover (
Function (){
$ (This). addClass ("hover ");
},
Function (){
$ (This). removeClass ("hover ");
}
);

Well, let's talk about how to control the label style. Thank you for reading this article!