2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

【前端】JavaScript学习笔记(六)——jQuery

前端jqueryjavascript作者:GG_GG

✨课程链接

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


✨学习笔记

初识jQ作一新求抖直微圈uery

<!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/15035686.html

版权所我自址哈这工边识框处己按后大都加控不架的有,如需转载请比抖朋要插支一圈不者地器享说几注明出处。

本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:WEB开发-HTML入门学习总结
» 下一篇:JavaScript开发中几个常用知识点总结
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段