<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery第一个案例===a--1</title>
<style>
div{
width: 200px;
height: 100px;
float: left;
padding: 5px;
margin:6px ;
background-color: hotpink;
}
</style>
<script type="text/javascript" src="jquery-3.6.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
alert("成功引入JQuery文件")
alert("hellow word")
})
</script>
<script type="text/javascript">
alert("JavaScript好用还是JQuery");
</script>
<div id="text0">
<p>id=test0</p>
<p>选中</p>
</div>
<div id="text1">
<p>id=test1</p>
<p>Jquery选中</p>
</div>
<div id="text2">
<p>id=test1</p>
<p>未选中</p>
</div><br>
<hr>
<p class="c1">p--1</p>
<p class="c1" id="p2">p--2</p>
<p class="c2" id="p3">p--3</p>
<p class="c2">p--1</p>
<p class="c2" id="c2">p--4</p>
<p class="c7" id="c7">p--</p>
<h1>jquery的语法</h1>
<h2>$(selector).action $=jquery selector =查找的目标元素 JQuery action=执行者</h2>
<h1>$(".c1").css("border", "4px solid red");
$(".c2").css("border","44px solid green");</h1>
<!--<p>类选择器</p><br>-->
</body>
<script>
var div=document.getElementById('testo');
div.style.border="4px solid blue";
</script>
<script>
$("#test1").css("border","4px solid red");
</script>
<!--要背单词哦-->
<script>
$(".c1").css("border", "4px solid red");
$(".c2").css("border","44px solid green");
</script>
<!--标记选择器-->
<script>
$("p").css("border","23px solid red");
</script>
</html>
