如何用jQuery检查一个选择器是否符合某些内容
为了知道jQuery选择器是否选择了任何元素,这里讨论了2种方法,这些是最常用的方法。
例子-1:在这个例子中,选择器搜索<p>
元素。这个例子使用长度属性来检查是否有东西被选中。在这种情况下,找到了<p>
元素。
<!DOCTYPE html>
<html>
<head>
<title>
JQuery |
check if a selector matches something.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
A computer science portal for geeks.
</p>
<button onclick="gfg_Run()">
check
</button>
<p id="GFG_DOWN"
style="color:green;
font-size: 20px;">
</p>
<script>
var el_down =
document.getElementById("GFG_DOWN");
var str = '';
function gfg_Run() {
if ($("p").length) {
str = "Something Selected";
} else {
str = "Nothing Selected";
}
el_down.innerHTML = str;
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子-2:在这个例子中,选择器搜索<a>
元素。这个例子也使用了length属性来检查,是否有东西被选中。在这个例子中,<a>
元素没有被发现。
<!DOCTYPE html>
<html>
<head>
<title>
JQuery |
check if a selector matches something.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
A computer science portal for geeks.
</p>
<button onclick="gfg_Run()">
check
</button>
<p id="GFG_DOWN"
style="color:green;
font-size: 20px;">
</p>
<script>
var el_down =
document.getElementById("GFG_DOWN");
var str = '';
function gfg_Run() {
if ($("a").length) {
str = "Something Selected";
} else {
str = "Nothing Selected";
}
el_down.innerHTML = str;
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子-3:在这个例子中,选择器搜索<button>
元素。这个例子使用exists函数来检查,是否有东西被选中。在这个例子中,<button>
元素被找到了。
<!DOCTYPE html>
<html>
<head>
<title>
JQuery |
check if a selector matches something.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
A computer science portal for geeks.
</p>
<button onclick="gfg_Run()">
check
</button>
<p id="GFG_DOWN"
style="color:green;
font-size: 20px;">
</p>
<script>
var el_down =
document.getElementById("GFG_DOWN");
var str = '';
jQuery.fn.exists = function() {
return this.length > 0;
}
function gfg_Run() {
if ($("button").exists()) {
str = "Something Selected";
} else {
str = "Nothing Selected";
}
el_down.innerHTML = str;
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。