欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

入门前端开发：HTML、JS和CSS的基础知识

最编程 2024-02-04 16:29:15
...

  • jQuery 是一个 JavaScript 函数库，一个轻量级的"写的少，做的多"的 JavaScript 库，jQuery 库包含以下功能：

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效和动画
    • HTML DOM 遍历和修改
    • AJAX
    • Utilities
      • 提示：除此之外，jQuery 还提供了大量的插件

  • 下载引用，或者引用公共的

    • 从 jquery.com 下载 jQuery 库

      • <script src="/js/jquery.js" ></script>

    • 从 CDN （内容分发网络）中载入 jQuery, 如从 Google 中加载 jQuery

      • <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
      • 百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery

    • 可浏览器查看当前用的版本

      image-20230909135239993

  • 基础语法： $(selector).action()

  • 所有 jQuery 函数位于一个 document ready 函数中：

    • 文档就绪事件：$(document).ready(function(){

      });

  • 注意！！id 的话一定要加上#，标签的话什么都不用加，class 的就是点 .

  • jQuery 实现：

    <script>
    $(document).ready(function(){
        $("#btn").click(function(){
            alert("不加参数显示值：" + $("#mes").text());
            $("#mes").text("加参数就是修改参数(方法重载) - 非文本框用text");
            $("#mes").css("margin-bottom","50px")

            $("#wenben").val("文本框用val");	
            // alert($("#img1").attr("src")); // 显图片路径
            $("#img1").attr("src", "img/bg2.gif"); // 换图片

        });
        $("#btn_more").click(function(){
            $("div").text("baga~");
        })
    });
</script>
</head>
<body>
    <img src="img/bg1.gif" id="img1" />
    <input id="wenben" />
    <p id="mes">雅鹿~</p>
    <button id="btn">改单值、换图片、加文本下内边距</button>

    <div id="fanyi">八嘎</div>
    <div id="fanyi">八嘎</div>
    <div id="fanyi">八嘎</div>
    <button id="btn_more">多个值改变</button>
</body>

  • 拓展功能：

    • 鼠标指向、导航栏获取焦点时变色

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <title>test01练习</title>
        <style>
            #menu{
                /* 消去无序列表前面的黑点 */
                list-style: none; 
            }

            /* 组合选择器，可能会含有多个，如：#menu li .xx div ......
            menu 中的li标签统一修饰 */
            #menu li{
                /* 横向排列设置浮动 */
                float: left;
                /* 作为背景的话，就是以文字为主体，图片会不全 */
                background: url(img/bg1.gif);
                /* 可以选择查看图片本身的大小 */
                width: 103px;
                height: 33px;
                /* 加一点间隔 */
                margin-left: 2px;
                /* 文本居中 */
                text-align: center;
                line-height: 33px; /* 行高和背景图一致就是垂直居中 */
                color: #fff; /* 白f, 黑0 */
                /* font-weight: bold; */
                font-size: 14px;
            }
            #menu .selected{ /* 虽然 .select 就可以，但为了对象选中时有正确的显示，就提高此选择器权重大小，从而提高其内属性的优先级 */
                background: url(img/bg2.gif);
                color: yellow;
                font-weight: bold;
            }
        </style>

        <script>
            $(document).ready(function(){
                $("#menu li").mouseover(function(){
                    // // 光标移入
                    // // $("#menu li").css("background", "url(img/bg2.gif)"); // 表示所有的对象了
                    // 
                    // $(this).css("background", "url(img/bg2.gif)"); // 用this表示当前事件作用的对象
                    // $(this).css("color", "yellow"); //字体颜色也改变
                    // $(this).css("font-weight", "bold"); //字体加粗
                    $(this).addClass("selected"); // 给选中对象增加class,就像是动态在标签后写了class="selected"一样
                })
                $("#menu li").mouseout(function(){
                    $(this).removeClass("selected");
                })
            });
            // 简便方式 —— 单纯变色:
            // $("#img1").mouseover(function(){
            // 	$(this).attr("src","img/bg2.gif")
            // })
            // $("#img1").mouseout(function(){
            // 	$(this).attr("src","img/bg1.gif")
            // })
        </script>
    </head>
    <body>		
        <ul id="menu">
            <li>阿威十八式</li>
            <li>老汉推车</li>
            <li>x出</li>
        </ul>
    </body>
</html>

      • 页面右击检查，在其中，在指向一个对象时，浏览器就会加以解释前端代码，渲染出效果：

        image-20230909154819243

      • 权重：id 为 100；class 为 10；标签为 1。在组合选择器与其他选择器的重合部分，就是相加看权重大小，大的属性覆盖小的

    • 上一篇： 搞定Java数据结构和算法题——LeetCode第378题：有序矩阵中的第K小元素

    下一篇： 推荐大创项目：行人和车辆流量计数的行人检测技术

    推荐阅读