选择器
基本选择器
基本选择器 |
描述 |
$(“元素名”) |
标签选择器 |
$("#id名") |
id选择器 |
$(".类名") |
类选择器 |
$(“选择器1,选择器2,…”) |
并集选择器 |
$( " * " ) |
通用选择器,选择所有元素 |
- 在CSS中使用的选择器,在jQuery中同样可以使用,而且不用做循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#div1").css("color", "blue");
$(".div").css("color", "green");
$("div").css("color", "red");
$("*").css("color", "orange");
})
</script>
</head>
<body>
<div id="div1">div1111</div>
<div class="div">div2222</div>
<div class="div">div3333</div>
<div>div4444</div>
<p>ppp11111</p>
<span>span11111</span>
</body>
</html>
ID选择器实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
window.onload = function(){
function $(str){
var ID = str.substring(1);
var obj = document.getElementById(ID);
obj.css = function(key, value){
this.style[key] = value;
}
return obj;
}
$("#div1").css("color", "blue");
$("#div1").css("fontSize", "30px");
}
</script>
</head>
<body>
<div id="div1">div1111</div>
</body>
</html>
多种选择器实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
window.onload = function(){
function $(str){
var fir = str.substring(0, 1);
var sec = str.substring(1);
if(fir == "#"){
var obj = [document.getElementById(sec)];
}else if(fir == "."){
var obj = document.getElementsByClassName(sec);
}else{
var obj = document.getElementsByTagName(str);
};
obj.css = function(key, value){
for (var i = 0; i < obj.length; i++){
this[i].style[key] = value;
}
}
return obj;
}
$("#div1").css("color", "blue");
$(".ddd").css("color", "red");
$("p").css("color", "orange");
$("*").css("color", "green");
}
</script>
</head>
<body>
<div id="div1">div1111</div>
<div class="ddd">div2222</div>
<p>ppp3333</p>
<span>span4444</span>
</body>
</html>
后代、并集、交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#div1 p").css("color", "red");
$("#div2 .ddd").css("color", "blue");
$("#div1 p, #div2 div").css("color", "green");
$("#div1 .ddd, #div2 p").css("color", "orange");
$("#div1 p.ddd").css("fontSize", "30px");
})
</script>
</head>
<body>
<div id="div1">
<div class="ddd">dddd1111</div>
<div class="ddd">dddd2222</div>