jquery-210811-04—jquery基本选择器
jquery基本选择器介绍
选择器: 就是定位条件;通知 jquery 函数定位满足条件的 DOM 对象
常用选择器:
1. id选择器,语法: ---> $("#dom对象的id值")
通过dom对象的id定位dom对象的。通过id找对象,id在页面中的值是唯一的。
2. class选择器(样式选择器),语法: ---> $(".class样式名")
class表示css中的样式,使用样式的名称定位dom对象。
3. 标签选择器,语法: ---> $("标签名称")
通过标签名称定位dom对象。
其他的选择器:
1. 所有选择器
语法:$("*") 选取页面中所有 DOM 对象。
2. 组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合 id,class,标签名等。
语法:$(“#id,.class,标签名”)
jquery基本选择器演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>联系常用选择器</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style type="text/css">
div{
background: darkgrey;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function btnIdClick(){
var div01_obj = $("#div01");
div01_obj.css("background","red");
}
function btnClassClick(){
var div02_obj = $(".div02");
div02_obj.css("background","yellow");
}
function btnLableClick(){
var div_obj = $("div");
div_obj.css("background","green");
}
function btnAllClick(){
var all_obj = $("*");
all_obj.css("background","pink");
}
function btnCombinationClick(){
var combination_obj = $("#div01,span");
combination_obj.css("background","blue");
}
</script>
</head>
<body>
<span>练习使用选择器</span><br/>
<div id="div01">
<span>div01</span>
</div>
<br/>
<div class="div02">
<span>div02</span>
</div>
<br/>
<div id="div03">
<span>div03</span>
</div>
<br/>
<input type="button" value="jquery使用id选择器改变div01背景颜色" onclick="btnIdClick()"/>
<br/>
<input type="button" value="jquery使用class选择器改变div02背景颜色" onclick="btnClassClick()"/>
<br/>
<input type="button" value="jquery使用标签选择器改变div标签的背景颜色" onclick="btnLableClick()"/>
<br/>
<input type="button" value="jquery使用所有选择器改变所有背景颜色" onclick="btnAllClick()"/>
<br/>
<input type="button" value="jquery使用组合选择器改变div01背景颜色和span标签背景颜色" onclick="btnCombinationClick()"/>
</body>
</html>
演示结果