JS Jquery

简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"> </script>
</head>
<body>
<a href="" id="test-query">点我</a>
<script>
    $('#test-query').click(function () {
        alert('hello jquery');
    })
</script>
</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"> </script>
</head>
<body>
<a href="" id="test-query">点我</a>
<script>
    //Jquery
    $('p').click();//标签选择器
    $('#id').click();//id选择器
    $('.class').click();//类选择器
</script>
</body>
</html>

更具体的可以查看文档
https://www.w3school.com.cn/jquery/index.asp

juqery 事件

可以大致分为:鼠标事件,键盘事件,其他事件
简单的鼠标事件代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"> </script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //规定这样的写法是加载完成后的函数
    $(function () {
        $('#divMove').mousemove(function (e) {
            //获得坐标写入mouseMove
            $('#mouseMove').text('x: '+e.pageX+'y: '+e.pageY);
        })
    });
</script>
</body>
</html>

效果:

操作DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"> </script>
</head>
<body>
<ul id="ul">
    <li id="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
<script>
    //无参就是获取值,带参数就是修改值
    $('#ul li[name=python]').text();
</script>
</body>
</html>

修改CSS

posted @ 2021-05-07 21:47  一个经常掉线的人  阅读(37)  评论(0)    收藏  举报