1.基本选择器
1.元素选择器
$("标签名")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$(function() {
$("p").css("color", "red");
})
</script>
</head>
<body>
<p>hhhhhhhhhhhhhh</p>
<p>ppppppppppppppppppp</p>
<p>sdasdasdasdasdasdasdas</p>
</body>
</html>
2.id选择器
$("#id值")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#test_btn").css("color","pink");
})
})
</script>
</head>
<body>
<button id="test_btn">测试按钮</button>
<button id="btn">按钮</button>
</body>
</html>
3.类选择器
$(".class值")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function()){
$(".b").click(function(){
$(this).css("color","red");
})
}
</script>
</head>
<body>
<a href="" class="t">百度</a>
<br />
<a href="" class="t">腾讯</a>
<br />
<a href="" class="t">按钮</a>
</body>
</html>
4.分组(并集)选择器
$("选择器1,选择器2........)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$("#btn").dblclick(function(){
$("#p,a,.d").html("666");
})
</script>
</head>
<body>
<p id="p"> hjasssssssssssssssssshduasbhvffffffffffffffffffffffa</p>
<a href="">叮咚</a>
<a href="">京东</a>
<div class="d">DIV</div>
<span class="d">SPAN</span>
<hr />
<button id="btn">按钮</button>
</body>
</html>
5.通配符选择器
$("*")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$("#btn").click(function(){
$("*").css("border","blue");
});
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>