JQuery入门

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文档介绍了JQuery的基本用法，包括如何获取和使用JQuery库，展示了通过标签、ID和类选择器选择元素的示例，并详细讲解了鼠标事件中的mousemove事件。此外，还演示了JQuery中改变元素内容、CSS样式、显示隐藏等常见操作。

一、JQuery

JQuery库，里面存在大量的JavaScript函数
在这里插入图片描述

二、获取JQuery

JQuery官网

三、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/JQuery3.6.0.js"></script>
</head>
<body>
<!--公式  ： $(selector).action() -->
<a href="" id="test-jquery">点我</a>

<script>
    $('#test-jquery').click(function () {
        alert("Hello JQuery");
    })
</script>
</body>
</html>

在这里插入图片描述

四、JQuery选择器

<script>
    //JQuery能够使用css中的所有选择器
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//class选择器
</script>

五、文档工具站

网址

六、事件

鼠标事件、键盘事件、其它事件

6.1、鼠标事件

在这里插入图片描述

6.2、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/JQuery3.6.0.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').text('x:' + e.pageX + 'y:' + e.pageY)
        })
    });
</script>
</body>
</html>

6.3、效果

在这里插入图片描述

七、JQuery常见操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/JQuery3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
<script>
    $('#test-ul li[name=python]').text();//获得值
    $('#test-ul li[name=python]').text("Massimo");//设置值
    $('#test-ul').html();//获取html格式的值
    //$('#test-ul').html("<span>js</span>");//设置为html格式的值

    //css的操作
    $('#test-ul li[name=python]').css({"color":"red"})

    //元素的显示和隐藏：本质display:none;
    //$('#test-ul li[name=python]').show();
    //$('#test-ul li[name=python]').hide();
    //$('#test-ul li[name=python]').toggle();显示和隐藏切换
</script>
</body>
</html>