jquery元素操作-36

简介: jquery元素操作-36

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            var arr = ["red", "green", "pink"];
            var sum = 0;
            $("div").each(function(index, domEle) {
                //第一个索引号
                console.log(index);
                console.log(domEle);
                $(domEle).css("color", arr[index]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
        })
    </script>
</body>
</html>

image.png

相关文章
|
2月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
46 10
|
7月前
|
缓存 JavaScript
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
23 2
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
28 6
|
4月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
4月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
22 1
|
4月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
33 0
|
4月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
44 0
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
37 0