使用jquery获取标签的id属性

最新推荐文章于 2023-05-24 17:57:48 发布

就爱酸辣土豆丝

最新推荐文章于 2023-05-24 17:57:48 发布

阅读量2.3k

点赞数 1

分类专栏： html+css+js

本文链接：https://blog.csdn.net/m0_50913689/article/details/109020479

版权

html+css+js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery获取HTML标签的id属性，并与原生JavaScript的window.onload方法进行对比。jQuery简化了代码编写，提高了开发效率，而$.ready()方法相比window.onload执行更快。

摘要由CSDN通过智能技术生成

jQuery其实本质就是JavaScript ,是对js的封装，极大地简化程序的编写，使代码更少，功能更加完善，兼容了主流浏览器，不用再单独做版本适配，大大增加程序开发效率
script当中可以写原生js代码，也可以写jQuery代码，使用jQuery代码需要重新开一个script标签
window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，包括资源数据加载完成，才会立刻执行某个方法
语法
window.onload = funcRef;
需求
获取div标签的id，并用弹窗显示
原生js完成：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery练习</title>
    <!-- jquery引入，导入对应的js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery代码需要重新开一个script标签 -->
    <script>
        // 当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
        window.onload = function(){
            var dDiv = document.getElementById("div1");
            alert(dDiv);
        }
    </script>
</head>
<body>
    <div id="div1">新的一天又开始啦</div>
</body>
</html>

使用jQuery完成
$是jQuery的象征,本质上就是一个函数，只不过函数名字特殊
ready ：只需要等待页面标签加载完成，就执行ready事件，不会等待资源数据加载完成，比原生js中的window.onload函数运行速度要快
语法：
$(document).ready(function)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery练习</title>
    <!-- jquery引入，导入对应的js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery代码需要重新开一个script标签 -->
    <script>
        $(document).ready(function(){
            // 获取标签和css样式匹配标签的规则一致，使用jquery时，变量名都要以$符号开头
            // #div1:类似于id选择器
            var $div = $("#div1");
            alert($div);
        });
    </script>
</head>
<body>
    <div id="div1">新的一天又开始啦</div>
</body>
</html>