极客教程当ID包含一个点字符时，如何在jQuery中使用ID选择html元素
任务是当ID本身包含一个DOT(‘. ‘)时，使用jQuery选择一个HTML元素/节点。不仅是点(.)，还有许多其他的元字符，如
!" # $ % & ' ( ) * + , ./ : ;< = >?@ [ \ ] ^ \` { | }~
可以通过这个程序来选择。
语法:
$('#ID_PREFIX\\.ID_SUFFIX')
方法：为了通过ID选择一个HTML元素，我们只需要用双斜线（’\‘）来转义它。
例子1：在这个例子中，我们将使用jQuery改变标题元素的颜色。
<!DOCTYPE html>
<html>
<head>
<title>
How to select html element using ID in
jQuery when ID contains a dot character ?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
</head>
<body style="text-align:center;">
<!-- Heading with ID containing a DOT that
will be selected later -->
<h1 id="Geeks.Head" style="color: green;">
GeeksforGeeks
</h1>
<b>
A Computer Science
portal for Geeks
</b>
<br>
Select html nodes by ID with jQuery
when the id contains a dot
<button style="color: green;">
Click!
<script type="text/javascript">
('button').click(function() {
// Selecting ID containing a
// DOT by escaping using '\\'
('#Geeks\\.Head').css({
'color': 'black'
});
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击按钮后。
例子2：在这个例子中，我们将选择一个包含多个点的ID的元素，并将其背景颜色也与标题一起改变。
<!DOCTYPE html>
<html>
<head>
<title>
How to select html element using ID in
jQuery when ID contains a dot character ?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
</head>
<!-- id contains dot(.) -->
<body id="Main..Body">
<center>
<!-- id contains dot(.) -->
<h1 id="Geeks.Head" style="color: green;">
GeeksforGeeks
</h1>
<b>
A Computer Science
portal for Geeks
</b>
<br>
Select html nodes by ID with jQuery
when the id contains a dot
<button style="color: green;">
Click!
</center>
<script type="text/javascript">
('button').click(function() {
// Selecting ID containing a
// DOT by escaping using '\\'
('#Geeks\\.Head').css({
'color': 'purple'
});
// Selecting ID containing
// multiple DOTs
$('#Main\\.\\.Body').css({
'background-color': 'Yellow'
});
});
</script>
</body>
</html>
输出 2:
- 在点击按钮之前。
- 点击按钮后。
