极客教程如何用jQuery改变鼠标进入和离开时段落的字体样式
jQuery是一个强大的JavaScript库，它有许多强大的方法，使用选择器使DOM的操作更加简单。
在这篇文章中，让我们看看如何用jQuery改变鼠标进入和离开时段落的字体重量和颜色的不同方法。
方法：使用jQuery我们可以在DOM事件中添加许多功能。我们可以使用jQuery添加CSS动画，如隐藏，显示和许多其他效果。
我们可以在mouseenter事件中使用addClass()方法添加一个包含CSS的类，并在mouseleave事件中通过选择器选择p标签，使用removeClass()删除该类。
方法1：在mouseenter和mouseleave事件上添加单独的函数。
语法:
$('selector').eventname(function())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
/* Changes the div's background
color to red */
.adder {
color: #006600;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
When compared with C++, Java codes are
generally more maintainable because Java
does not allow many things which may
lead bad/inefficient programming if used
incorrectly. For example, non-primitives
are always references in Java. So we
cannot pass large objects(like we can do
in C++) to functions, we always pass
references in Java. One more example,
since there are no pointers, bad memory
access is also not possible.
</p>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest
Python 3) is being used in web development,
Machine Learning applications, along with
all cutting edge technology in Software
Industry. Python Programming Language is
very well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
<script>
(document).ready(function () {
("p").mouseenter(function () {
("p").addClass("adder");
});
("p").mouseleave(function () {
$("p").removeClass("adder");
});
});
</script>
</body>
</html>
输出:
方法2：使用on()方法，有多个事件。
语法:
$('selector').on({
event1:function () {
// Code
},
event2:function () {
// Code
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
/* Changes the div's background
color to red */
.adder {
color: #006600;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
When compared with C++, Java codes are
generally more maintainable because Java
does not allow many things which may
lead bad/inefficient programming if used
incorrectly. For example, non-primitives
are always references in Java. So we
cannot pass large objects(like we can do
in C++) to functions, we always pass
references in Java. One more example,
since there are no pointers, bad memory
access is also not possible.
</p>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest
Python 3) is being used in web development,
Machine Learning applications, along with
all cutting edge technology in Software
Industry. Python Programming Language is
very well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
<script>
(document).ready(function () {
("p").on({
mouseenter: function () {
("p").addClass("adder");
},
mouseleave: function () {
("p").removeClass("adder");
},
});
});
</script>
</body>
</html>
输出:
方法3：在所选元素的mouseenter和mouseleave事件上应用CSS方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
/* Changes the div's background
color to red */
.adder {
color: #006600;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
When compared with C++, Java codes are
generally more maintainable because Java
does not allow many things which may
lead bad/inefficient programming if used
incorrectly. For example, non-primitives
are always references in Java. So we
cannot pass large objects(like we can do
in C++) to functions, we always pass
references in Java. One more example,
since there are no pointers, bad memory
access is also not possible.
</p>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest
Python 3) is being used in web development,
Machine Learning applications, along with
all cutting edge technology in Software
Industry. Python Programming Language is
very well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
<script>
(document).ready(function () {
("p").on({
mouseenter: function () {
// Changing css on mouseenter event
("p").css({
color: "#006600",
"font-weight": "bold"
});
},
mouseleave: function () {
// Changing css on mouseleave event
("p").css({
color: "black",
"font-weight": "normal"
});
},
});
});
</script>
</body>
</html>
输出:
