JQuery魔力(一）$(“tagName”)-优快云博客

本文通过实例展示了如何使用JQuery简化DOM操作，包括设置元素样式、动态添加元素及遍历DOM元素。代码示例中，对页面上的所有div元素进行样式修改，动态添加span元素到body，并遍历所有div元素获取其内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM 中的 getElementsByTagName()方法在JQuery中的表现就是$(“tagName”)这么简单！

匿名函数来解决 window.onload 事件

对页面上的所有“div”标记下手，定义统一的外观

对“body”标记定义外观

动态添加一个“span”标记将其放置在“body”里

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery 测试</title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript">
    </script>
    <script type='text/javascript'>
        $(function () {
            $("div").width(100)
            .css("color", "red")
            .css("margin", "20px")
            .css("border", "dotted 1px green");
            $(document.body).css("background-color", "#cccccc");
            $("<span>Four</span>").appendTo("body");
        });
    </script>
    <script type="text/javascript">
        $(function () {
            var v = $("div");
            alert(v.length);
            for (var i = 0; i < v.length; i++) {
                alert(v[i].innerHTML);
            } 
        });
    </script>
</head>
<body>
    <div>
        第一个div</div>
    <div>
        第二个div</div>
    <div>
        第三个div</div>
</body>
</html>

转载于:https://www.cnblogs.com/ponyblog/archive/2012/02/29/2371374.html