【JavaScript：jquery】-优快云博客

本文介绍了jQuery库的使用，包括通过CDN或本地下载引入jQuery，详细阐述了jQuery的选择器如标签、ID和类选择器，并展示了如何绑定点击事件。此外，还讲解了鼠标事件、DOM操作如文本和CSS属性的修改，以及元素的显示与隐藏。文章提供了丰富的示例代码，是初学者理解jQuery的实用教程。

文章目录

- 10. jQuery

10. jQuery

JavaScript

jQuery库，里面存在大量的JavaScript函数

获取jQuery

CDN引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- cdn引入 -->
    <scrip src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></scrip>
</head>

<body>

</body>

</html>

下载后引入

<!-- 下载后引入 -->
<script src="lib/jquery-3.6.0.js"></script>

公式： $(selector).action()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- cdn引入 -->
    <!-- <scrip src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></scrip> -->

    <!-- 下载后引入 -->
    <script src="lib/jquery-3.6.0.js"></script>
</head>

<body>
    <a href="" id="test-jquery">点我</a>

    <script>
        //选择器就是css的选择器
        $('#test-jquery').click(function () {
            alert('hello jQuery');
        });
    </script>
</body>

</html>

选择器

//原生的js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery css中的选择器全部都能用
//标签选择器
$('p').click();
//id选择器
$('#id').click();
//类选择器
$('.class').click();

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件，表单事件，文档/窗口事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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>

动画.gif

操作Dom

节点文本操作

$('#test-ul li[name="python"]').text();//获得值
$('#test-ul li[name="python"]').text('设置值');//设置值
$('#test-ul').html(''); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值

css的操作

$('#test-ul li[name="python"]').css('color', 'red');//单个值操作
$('#test-ul li[name="python"]').css({ 'color': 'red', 'font-size': '100px' });//多个值操作

元素的显示与隐藏：本质 display：none

$('#test-ul li[name="python"]').hide();
$('#test-ul li[name="python"]').show();
$('#test-ul li[name="python"]').toggle();//切换：显示变隐藏，隐藏变显示

…

未来Ajax();

$('#from').ajax()

$ajax({url:"test.htm1",context:document.body,success:function (){
    $(this).addclass("done");
}});