Directly on the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery样式操作</title>
<script type="text/javascript"src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="box">
<I love the motherland>= "a1" class = "Demo"the above mentioned idthe p-</ The p- >
< the p- the above mentioned id = "a2" > I love the hometown </ the p- >
< the p- > I do not love school !! </ the p- >
</ div >
< style >
.Red {
Color : Red ;
}
</ style >
< Script >
/ * *
*-style operation and usage of keywords
* keywords: four addClass, removeClass, toggleClass, hasClass
* meaning: to add a class,To delete a class, class replacement, if it exists, replaced, there is added, the existence of XX class name
* Usage: will be tested there
* /
//Requirements: so that the mouse can move to become the next div id = p a1 red label
// use addClass
/ * 1, manufactured event
2, the definition of a class style red
3, add a class to achieve (add a pattern)
* * /
// grammar: the four grammar are similar
// $ (tag objects) style operations (class name);.
// test addClass begin
// like addClass ----- $ (tag objects) .addClass (class name) ;
$ ( function () {
$ ( " # A1 " ) .hover ( function () {
$ ( " # A1 " ) .addClass ( " Red " );
})
})
// test addClass end
</script>
</body>
</html>
Test Results:
------------------------------RemoveClass----------------------
The results are:
So unsightly found, then use the delete back removeClass
The results are:
----------------------------------toggleClass----------------------------------
result:
------------------------hasClass-------------------
result:
result:
