首页
前端开发

分类

当前位置: 云海天教程网 > 技术新闻 > 前端开发 >正文

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

更新时间:2021-07-21  作者:佚名   来源: 网络转载

【前端】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/15035686.html

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

posted @ 2021-07-20 16:38  双份浓缩馥芮白  阅读(9)  评论(0)  编辑  收藏  举报
刷新评论刷新页面返回顶部

原文链接:https://www.cnblogs.com/Flat-White/archive/2021/07/20/15035686.html

上一篇:第 30 题:如何理解基数排序? 下一篇:WEB开发-HTML入门学习总结
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

陕ICP备14013131号-3

返回顶部