目录
1、选择器
选择器：是一个字符串，就是定位条件；通知jquery函数定位满足条件的DOM对象。定位了dom对象可以通过jquery函数来操作dom对象。
基本选择器：根据id，class属性，标签类型定位元素。
1.1 id选择器
语法规则：${“#dom对象的id值”}
通过dom对象的id定位dom对象，通过id找对象，id在当前页面是唯一的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
/*选择器的使用*/
/*id选择器*/
function fun1(){
$(function () {
alert($("#txt1").val())
})
}
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="button" value="按钮1" onclick="fun1()">
</body>
</html>1.2 class选择器
语法规则：${“.class类名”}
使用标签的类名定位dom对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
/*class选择器*/
function fun1() {
$(function (){
alert($(".txt1").val())
})
}
</script>
</head>
<body>
<input type="text" id="txt1" class="txt1">
<input type="button" value="按钮1" onclick="fun1()">
</body>
</html>1.3 标签选择器
语法规则：${“标签名称”}
使用标签名定位dom对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
/*使用标签类型获取dom*/
function fun1() {
$(function (){
var jobj = $("div");
alert(jobj)
jobj.css("background","blue");
})
}
</script>
</head>
<body>
<div>
我是div标签
</div>
<br>
<input type="button" value="test" onclick="fun1()">
</body>
</html>1.4 组合选择器
组合选择器是多个被选对象之间使用逗号隔开后形成的选择器，可以组合id、class、标签名等等。
语法：$("#id,class,标签名")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
/*组合选择器*/
function fun6() {
$(document).ready(function () {
var jobj = $("#txt1,div");
jobj.css("background","red");
})
}
</script>
</head>
<body>
<input type="text" id="txt1">
<div>
123
</div>
<button onclick="fun6()" >按钮1</button>
</body>
</html>版权声明：本文为qq_45899370原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。