代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul {
list-style: none;
overflow: hidden;
}
li {
background-color: skyblue;
float: left;
border-radius: 50%;
width: 40px;
line-height: 40px;
text-align: center;
margin: 10px;
box-shadow: 4px 4px 4px #ccc;
font-weight: 600;
color: #fff;
}
</style>
<!-- $(document).ready() 标准方式-->
<script type="text/javascript" src="/180402/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('button').click(function(){
$('p').html('php')
})
})
</script>
<!-- $(document).ready() 简写方式
<script type="text/javascript">
$(function(){
$('button').click(function(){
$('p').html('php')
})
})
</script> -->
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<hr>
<h2> this is a heading</h2>
<p>this is a paragraph</p>
<p>this is anther paragraph</p>
<button type="button">请点击这里</button>
</body>
<!-- 第一种方式引入jQuery
<script type="text/javascript" src="/180402/js/jquery-3.3.1.js"></script> -->
<!-- 第二种方式引入jQuery -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
$('li:nth-child(4)~*').css('background-color','green')
</script>
</html>