js、day3

1.jQuery简单认识

中文网址 英文jQuery

  • 是封装好的库

1.1jquery导入的两种方式

  • 方法1：下载到本地

    • 一种是去英文网址，找到image-20220419162802741

    • 然后右键点击保存为，就可以下载到本地了，然后在文件中创建lib文件夹，将该下载好的文件放入，该文件夹

  • 方法2：cdn

    • 需要网络

    • 直接找到cdn jquery

    • 点击赋值链接，然后创建script就可以了，但是没有网络的话这样就不行

    • image-20220419162951643

1.2jquery简单公式

  • 美元符号代表jquery

  • selector是选择器

  • action是函数

  • 公式为$(selector).action

1.3选择器

jQuery API 在线手册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <script>
        //原生js，选择器少，不好记
        document.getElementsByTagName();
        document.getElementById();
        document.getElementsByClassName();
​
        //css中的选择器他都能用，可以在官网中查看有哪些选择器
        $('p').click();//标签选择
        $('#id1').click();//id选择
        $('.class').click();//类选择
    </script>
</head>
<body>
​
</body>
</html>

1.4事件

鼠标事件，键盘事件，其他事件，之类的

  • 鼠标

    • mouse

  • 键盘事件

  • 简单写下鼠标移动显示网页坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标坐标</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #square{
            margin: 0;
            width: 500px;
            height: 500px;
            border: solid 1px black;
            border-radius: 5px;
        }
    </style>
    <script>
        //因为要获取元素，所以必须在文档加载后获取，有如下几种方法
        //方法1
        // window.onload = function (){}
​
        //方法2
        // $(document).ready(funcion(){})写成这样就是jquery的形式，在页面加载完全后进行，和方法一是一个意思
        // $(document).ready(function (){
        //     //将span里面的东西替换为文本
        //     $('#xy').text('这是什么东西');
        // })
​
​
        //方法3
        //是方法2的简化，其实是一个意思
        // $(function (){
        //     $('#xy').text("这是什西");
        // })
​
        // 显示坐标
       // $(function (){
       //         $('#square').bind('mousemove',function(e){
       //             $("#xy").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
       //         });
       //  });
​
       // 这里虽然提示输入的是onmousemove，但是还是输入 mouse
       window.onload = function (){
           $('#square').mousemove(function (e){
               $("#xy").text("x:"+e.pageX+" y:"+e.pageY);
           });
       }
    </script>
</head>
​
<body>
​
<span id="xy"></span>
<div id="square">
</div>
​
<button id="btn1">
    点击变成傻逼
</button>
</body>
​
</html>
posted @ 2022-05-02 21:51  newlive122  阅读(56)  评论(0)    收藏  举报