用jQuery来改变div盒子的大小

开发工具与关键技术： VS 2019    单词                      

作者：魏钦

撰写时间：2022/4/18

1. 首先打开我们的VS软件，CTRL+ N新建一个HTML文档，在body里面放一个script作为引入jQuery插件，再body标签里放一个script标签，作为写JS的区域，想用jQuery那就必须先引入jQuery，第一个就是引入jQuery的写法，第二个script里写js代码，写法如下。

<script src="./资料/jquery-1.12.2.js"></script>

    <script></script>

1. jQuery的写法个DOM的方法完全不一样，jQuery的代码比较简洁，主要的是代码少，开头放一个刀儿符号，刀儿符号就是你键盘小写的状态下按shift+26字母上面的4，然后括号匿名函数：function()花括号{}，把花括号这两个分开，里面写所要执行的代码。

$(function(){  

         }

1. 还是刀儿符号开头，括号，双引号，一个井号，然后放一个btn作为等下触发效果按钮的id，这四个是嵌套关系，括号里面放双引号，双引号里面放井号，井号后面放btn作为等下触发效果按钮的id,然后点.就是你右手遍0的旁边，然后click,这个代码是鼠标单击的意思，再一个括号，匿名函数：function（）花括号，写法如下。

$("#btn").click(function(){

            }

1. 刀儿开头符号开头，跟上面刀儿符号操作相同，不同的btn改为dv，然后在括号外放一个点，css括号双引号，双引号里面width（宽的意思），在双引号后面一个逗号再双引号这里写参数。然后换行以此类推只需要改变最后那个括号里的单词就行了，比如height（高度）backgroundColor（背景颜色）这个后面放的不是参数，放的是十六进制或者是颜色单词。

$("#dv").css("width","600px")

$("#dv").css("height","600px")

1. 在script标签外面，放一个input标签，里面的type双引号里面的改为button（按钮），在双引号后面空格value双引号里写文字，跟着上一个操作，双引号外面空格id=“btn”,

然后div，id为dv。

<input type="button" value="显示效果" id="btn">

    <div id="dv"></div>

1. 最后style（样式）。

<style>

        div{

            width: 200px;

            height: 100px;

            background-color: blueviolet;

        }

    </style>