【前端】JavaScript学习笔记（六）——jQuery

✨课程链接

【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili


✨学习笔记

初识jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

<!--    cdn引入 https://www.bootcdn.cn/jquery/-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
    <script src="lib/jquery-3.6.0.min.js"></script>
    <title>Title</title>
</head>
<body>

<!--公式 $(selector).action()-->

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

<script>
    document.getElementById('id');
    // selector 就是CSS的选择器
    $('#test-jquery').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.6.0.min.js"></script>

</head>
<body>

<a href="https://jquery.cuishifeng.cn/index.html">jQuery API 中文文档</a>

<script>
    // 原生JS
    // 标签选择器
    document.getElementsByTagName();
    // id选择器
    document.getElementById();
    // 类选择器
    document.getElementsByClassName();

    // jQuery
    // 标签选择器
    $('p').click();
    // id选择器
    $('#id1').click();
    // 类选择器
    $('.class1').click();
</script>


</body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="lib/jquery-3.6.0.min.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>
    // 当网页元素加载完毕后 响应事件
    // $(document).ready(function () {
    //    
    // });
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#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.6.0.min.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("Java");
    $('#test-ul').html();

    // CSS操作
    $('#test-ul li[name=python]').css('color','red');

    // 元素的显示和隐藏
    $('#test-ul li[name=python]').show();
    $('#test-ul li[name=python]').hide(); // display:none

    // 其他
    $(window).width();
    $(window).height();
    $(document).height();
    $('#test-ul li[name=python]').toggle();

    // ajax();

</script>

</body>
</html>

⭐转载请注明出处

本文作者：双份浓缩馥芮白

原文链接：https://www.cnblogs.com/Flat-White/p/15039231.html

版权所有，如需转载请注明出处。

posted @ 2021-07-21 14:11  双份浓缩馥芮白  阅读(231)  评论(0)  编辑  收藏  举报