jQuery选择器(一)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery第四节课</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// jQuery选择器
// jQuery 中所有选择器都以美元符号开头：$(),它基于已经存在的 CSS 选择器;
//元素选择器、#id选择器、.class类选择器 类型、属性、属性值;
$(function(){
//元素选择器
$('body').css('background','pink')
//#id选择器
$('#box').css('background','#fff')
//.class类选择器
$('.box').css('background','#ccc')
//匹配到页面中多个选择器
$('#box,.box').css('border','1px solid red')
//类型
$('li.int').css('background','blue')
//属性
$('[href]').css('color','#fff')
//属性值
$("a[target='_blank']").css('color','blue')
})
</script>
<style type="text/css">
ul li{height: 40px;list-style:none;text-align: center;background: red;margin-top: 20px;}
</style>
</head>
<body>
<div id="box" style="height: 100px;"></div>
<div class="box" style="height: 100px;"></div>
<ul>
<li><a href="" target="_blank">1</a> </li>
<li class="int"><a href="">2</a></li>
<li><a href="">3</a></li>
<li class="int"><a href="">4</a></li>
</ul>
</body>
</html>
