jQuery选择器示例
时间：2020-02-23 14:46:13 来源:igfitidea点击:
jquery选择器是jQuery重要组成部分。
它用于选择DOM元素并操纵它。
语法：它应该以$开头，然后是括号。
对于以下HTML，我们希望在点击按钮上隐藏文本。
所以您需要使用$（“#myButton”）选择id为“myButton”的button
使用$（“#helloWorldDiv”）选择id为helloWorldDiv的div
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
$("#myButton").click(function() { $("#helloWorldDiv").hide()
});
});
</script>
</head>
<body>
<button id="myButton">Hide text</button>
</br>
</br>
<div id="helloWorldDiv">Hello world</div>
</body>
</html>
各种选择器上的示例：
元素选择器：
如果只需使用$()编写元素名称，它将选择该类型的所有元素。
例如：如果使用$("div")，它将选择DOM中的所有div元素。
在此示例中，单击按钮，我们将更改DIM中存在的所有DIV的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
$("#myButton").click(function() { $("div").html("Hello theitroad")
});
});
</script>
</head>
<body>
<button id="myButton">Change all div text</button>
</br>
</br>
<div id="helloWorldDiv">Hello John</div>
<div id="helloWorldDiv">Hello Martin</div>
<div id="helloWorldDiv">Hello Smith</div>
</body>
</html>
#id选择器：
对于使用ID选择元素，我们需要使用$(#ID)。
示例：所以我们需要选择与$("#mybutton"为$("#mybutton")的按钮("#mybutton")和div with helloWorlddiv AS $("#HelloWorlddiv")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
$("#myButton").click(function() { $("#helloWorldDiv").hide()
});
});
</script>
</head>
<body>
<button id="myButton">Hide text</button>
</br>
</br>
<div id="helloWorldDiv">Hello world</div>
</body>
</html>
类选择器：
我们可以获得使用某些类CSS的所有元素。
我们需要使用$(。
类名)来选择使用该类的所有元素。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
$(".abc").css("background-color","orange");
});
</script>
</head>
<body>
<div id="helloWorldDiv" class ="abc">Hello John</div>
<div id="helloWorldDiv">Hello Martin</div>
<div id="helloWorldDiv" class ="abc">Hello Smith</div>
</body>
</html>
