jQuery元素操作

m0_63400611

已于 2022-05-18 16:10:21 修改

阅读量37

点赞数

分类专栏： js 文章标签： jquery javascript 前端

于 2022-03-10 21:28:03 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123406938

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

主要是遍历,创建,添加,删除元素操作

遍历元素

jQuery隐式迭代是对同意元素做了同样的操作,如果想要给同一类元素做不同操作就需要遍历

语法1:

$('div').each(function(index, domEle) {xxx;})

each()方法遍历匹配的每一个元素,主要用DOM处理,each每一个
里面的回调函数有2个参数:index是每个元素的索引号,domEle是每个DOM元素对象,不是jQuery对象
如果想使用jQuery方法,需要给这个DOM元素转换为jQuery对象$(domEle)

示例代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script src="../js/jQuery.js"></script>
    <script>
        $(function () {
            //声明存储参数用的数组
            var arr = ['red', 'green', 'blue'];
            //声明存储总和值的变量sum
            var sum = 0;
            //each()方法遍历元素
            $('div').each(function (index, domEle) {
                //回调函数第一个参数一定是索引号 可以自己指定索引号名称index
                console.log(index);
                //回调函数第二个参数一定是dom元素对象 不能使用jQuery方法
                console.log(domEle);
                //转换为jQuery对象 利用数组存储样式的参数 并使用index索引号
                $(domEle).css('color', arr[index]);
                //text()返回的是字符型的结果 需要用parseInt()转换
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
        })
    </script>
</body>

</html>

语法2:

$.each(Object, function(index, element) {xxx;})

$.each()方法可用于遍历任何对象,主要用于数据处理,比如数组,对象
里面的函数有2个参数:index是每个元素的索引号;element遍历内容

示例代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script src="../js/jQuery.js"></script>
    <script>
        $(function () {
            //声明存储参数用的数组
            var arr = ['red', 'green', 'blue'];
            
            //$.each()方法遍历元素 主要用于遍历数据 处理数据
            $.each($('div'), function(i, ele) {
                console.log(i);
                console.log(ele);
            })
            $.each(arr, function(i, ele) {
                console.log(i);
                console.log(ele);
            })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i);     //输出的是 name age 属性名
                console.log(ele);   //输出的是 andy 18 属性值
            })
        })
    </script>
</body>

</html>

创建元素

语法:

$("<li></li>");

动态的创建标签

添加元素

内部添加

内部添加元素生成之后,它们是父子关系

element.append("内容")

把内容放入匹配元素内部最后面,类似原生appendChild

element.prepend("内容")

把内容放入匹配元素内部最前面

外部添加

外部添加元素生成之后,它们是兄弟关系

element.after("内容")//把内容放入目标元素后面

element.before("内容")//把内容放入目标元素前面

删除元素

element.remove()//删除匹配的元素(本身)

element.empty()//删除匹配的元素集合中所有的子节点

element.html("")//清空匹配的元素内容

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录