第一点：引入JQuery的文件

第二点：语法结构

$(selector).action()

<script? type="text/javascript">
??? $("div[name='p1']").css("border","1px groove red");
</script>

JQuery的案例

<!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>