How jquery changes the style of html tags (two implementation methods)_jquery

As for how to modify html tags, for js, you can set the attributes of the tag through setAttribute and get the attributes of the tag through getAttribute. Of course, similar functions can also be achieved in jq. The method is definitely much simpler than js. .
Change its style by modifying the label attributes
js sets and gets the attributes of the label

Copy code The code is as follows:

　

jq sets and gets the attributes of the tag

Copy code The code is as follows:

It is worth noting that the content of JS’s window.onload method block is executed after JQ’s $(function(){}) method block After that, execute again.
Two change the style of the label by modifying its css style
Look at the basic syntax:

Copy code The code is as follows:

$("#attr").addClass("banner");//Add style
$("#attr").removeClass( "banner");//Remove style
　　　　　　　　　//JQ supports joint writing, because the return result of removeClass is also a Jq object, so all methods and events of the Jq object can be used
$("#attr ").removeClass("banner").addClass("bannerOver");

The following is an example of highlighting the current dd block when clicking on the dd label

Copy code The code is as follows:

<script> <BR>$(function () { <BR>$('#menu_title').find('dd').click(function () { <BR>$('#menu_title').find('dd').removeClass('cur'); <BR>$(this).addClass('cur'); <BR>}) <BR>}) <BR></script>

Human

A kind of advanced animal

Dog

Man’s friend dd>

Cat

Ancestor of felines

The following is the interlaced color change effect for the table

Copy the code The code is as follows:

.odd { background: #808080; }
.even { background: #ffd800; }
.selected { background: #0094ff; color: #fff; }　 .hover { background: #808080; }

Copy code The code is as follows:

var $trs = $("# menu_title>dd"); //Select all rows $trs.filter(":odd").addClass("odd"); //Add odd style to odd rows $trs.filter(":even").addClass( "even"); //Add odd style to even-numbered rows

After clicking the row, let the current row be highlighted

Copy code The code is as follows:

//Click on the row to add a color change style
$trs.click(function(e) {
$(this). addClass("selected")
　　　.siblings()　　　　.removeClass("selected");
})

Add mouse move-in and move-out events

Copy code The code is as follows:

　　　 // Mouse Moving in and out
$("#menu_title>dd").hover(
function () {
$(this).addClass("hover");
},
function ( ) {
$(this).removeClass("hover");
}
);

Well, let’s talk about the style control of tags. Here it goes, thank you for reading!