jQuery总结四、append 与appendTo、after、before、wrap、unwrap、replaceWith、empty()、remove；detach、is、hasclass

最新推荐文章于 2025-05-07 13:51:01 发布

菜到不会下载软件

最新推荐文章于 2025-05-07 13:51:01 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery ajax

本文链接：https://blog.csdn.net/m0_57446284/article/details/120531731

本文详细介绍了jQuery中的DOM操作，包括append、appendTo、prepend、prependTo、after、before、wrap、unwrap、replaceWith、empty等方法的使用，以及如何添加、删除和修改元素样式。同时，讲解了is、hasClass、$.inArray、$.parseJSON和$.trim等实用函数，并通过实例展示了它们的功能和用法。此外，文章还探讨了remove和detach的区别，强调了数据绑定在DOM操作中的重要性。

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

一、append 与appendTo

1.1.1 append

append向每个匹配的元素内部追加目标

content：欲追加的内容String、Element、jQuery

fn：function（index，html）

index：对象在集合数组中的索引

html：对象源html内容

示例：

$('#f0').append("<br>") //增加一份br标签

1.1.2 appendTo

追加当前对象到指定的元素中去

content：欲追加的内容String，Element，jQuery

1.2.1 prepend(content|fn);prependTo(content)

prepend 向每个匹配的元素内部前置内容

prependTo：将当前对象前置到指定的元素中去

实例应用：

   <form action="">
        <input type="text" value="jkkjk"><br>
        <input type="password" value="123456"><br> 爱好
        <br><input type="checkbox" value="maj">篮球
        <input type="checkbox" checked>足球
        <input type="checkbox" checked>羽毛球
    </form>
    <div>
        <p>1234￥</p>
        <p>2345￥</p>
        <p>4859￥</p>
    </div>
    <script>
        // 文档准备好后将goodsArr中的元素依次前置到div中3个段落
        var goodsArr = ["苹果13", "小米12", "华为p14"]
        $(function() {
            var divNum = $('div p')
            divNum.each(function(i) {
                $(this).prepend(goodsArr[i] + ":  ")
            })
        })
        // 为form元素在最后添加一个提交按钮
        $(function() {
            var btn = $('<br><input type="button" value="提交">')
            $('form').append(btn)
        })
    </script>

二、after和before

after：向每个匹配的元素之后插入内容

content：欲插入的内容String，Element，jQuery

fn：function（index，html）此函数返回String，Element，jQuery

index：对象在集合数组中索引

html：对象源html内容

示例：

$('#f input:first').after('<br>')

before: 向每个匹配的元素之前插入内容

示例：

$('用户名:').before('form input:first')

实例：使用before和after添加元素

    <div id="si">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
        <p>第四行</p>
    </div>
    <div>
        水煮鱼:<label>88</label><br> 鱼香肉丝:
        <label>28</label><br> 红烧肉:
        <label>188</label><br>
    </div>
    <button onclick="getBtn()">核算用餐总费用</button>
    <script>
        $(function() {
            var a = $('<h2>子健诗</h2>')
            $('#si').before(a)
        })

        function getBtn() {
            var sum = 0
            var monArr = $('div:last label')
            monArr.each(function(i) {
                sum += parseInt(this.innerText)
            })
            $('div:last br:last').after("总费用" + sum)
        }
    </script>

三、wrap函数与unwrap函数

wrap把所有匹配的元素用其他元素结构化标记包裹起来

ele：元素

fn：生成包围结构的函数返回父结构包围对象

示例：

$('p').wrap('<div></div>') //代表的意义是将所有的p元素都包含在div元素中去

unwrap（）取消包围

$('p').unwrap() //取消对p元素的包围

    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <button onclick="wap()">点击包围所有p标签</button>
    <button onclick="cancelW()">取消包围</button>
    <script>
        function wap() {
            var divW = $('<div style="color:red;font-size:20px"></div>')
            $('p').wrap(divW)
        }

        function cancelW() {
            $('div p').unwrap()
        }
    </script>

四、replaceWith（content|fn）empty()函数

4.1 replaceWith（content|fn）

将所有匹配的元素替换成指定的HTML或DOM元素

fn：返回替换内容的函数

示例：

$('p').replaceWith('<B></B>')

4.2 empty函数

删除匹配的元素集合中所有的子节点，保留此元素

示例：

$('div').empty()

empty与replaceWith的综合运用：

  <form action="" id="f1">
        姓名:<input type="text"><br> 年龄:
        <input type="text"><br> 性别:
        <input type="text"><br>
    </form>

    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <button onclick="repla()">替换p段落并保持原内容</button>
    <button onclick="empt()">清空第一个form中的元素</button>
    <script>
        //将段落内容替换，偶数为红色，奇数为绿色
        function repla() {
            var arr = $('p')
            arr.each(function(i) {
                if (i % 2 == 0) {
                    $(this).replaceWith("<strong style='color:red'>" + this.innerHTML + "</strong><br>")
                } else
                    $(this).replaceWith("<strong style='color:green'>" + this.innerHTML + "</strong><br>")
            })
        }

        //清空第一个form中的子元素
        function empt() {
            var ar = $('form:first')
            ar.empty()
        }
    </script>

五、remove函数；detach函数

remove函数从DOM中删除所有匹配的元素以及其绑定的事件和数据，保留jQuery对象本身

示例：

$('input').remove() //意味着删除所有input

detach函数从DOM中删除所有匹配的元素保留其绑定的事件及数据，保留jQuery对象本身

remove和detach的最大区别在于是否会保留当前的数据；remove删除之后，数据全部删除，但是detach会有所保留

来一个实例区别一下：

    <p id="fir">变形金刚</p>
    <p>金刚狼</p>
    <p>暴风女</p>
    <button onclick="removeP()">使用remove删除指定的p段落</button>
    <button onclick="detachP()">使用detach删除指定的p段落</button>
    <button onclick="showP()">显示数据</button>
    <script>
        var all
        $(function() {
            $('#fir').data('name', '国王')
        })

        function removeP() {
            all = $('p').remove('[id="fir"]')
        }

        function detachP() {
            all = $('p').detach('[id="fir"]')
        }

        function showP() {
            var a = all.data('name')
            alert(a)
        }
    </script>

结果截图：点击使用detach出现的结果

点击使用remove出现的结果：

六、css选择器

获取或设置匹配元素的样式

name：键值对象

val：设置给属性的值

fn：返回为属性设置值的函数

示例：

$('#s').css('background-color','red') //表示为设置id为s的背景颜色样式为红色

有关于css运用的实例：

    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <div>
        <p>div中的第一行</p>
        <p>div中的第二行</p>
        <p>div中的第三行</p>
        <p>div中的第四行</p>
    </div>
    <button onclick="doCss()">为第一个段落添加css</button>
    <button onclick="doCss2()">为最后一个div中的段落添加背景色</button>
    <script>
        //为第一个段落添加css，设置字体颜色为红色，大小25像素
        function doCss() {
            $('p:first').css({
                'font-size': '25px',
                'color': 'red'
            })
        }

        //为最后一个div中的段落添加背景颜色，奇数行为lime色，否则为pink
        function doCss2() {
            $('div:last p').css('background-color', function(i) {
                if (i % 2 == 0)
                    return 'pink'
                else
                    return 'lime'
            })
        }
    </script>

七、is(expr | obj |ele |fn)函数与hasClass(class)函数

7.1 is函数

根据选择器，DOM元素或jQuery对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

示例：

html代码：

jquery代码：

$("input[type ='checkbox']").parent().if("form") //这个主要的意思就是有input且type为CheckBox的元素他的父元素是否是form，如果是就返回true，否则返回false

7.2 hasClass函数

根据选择器，DOM元素或jQuery对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式，则返回true

示例：

html代码：

jQuery代码：

$('div').hasClass("pre") //意思就是是否有一个类的名称叫做pre，如果有返回true

所以这个结果是true

八、$.inArray(value,array,[index])函数

确定第一个参数在数组中的位置，从0开始计数（如果没有找到则返回-1）

value:用于在数组中查找是否存在

array：待处理数组

index：用来搜索数组队列，默认值为0

示例：

var a=[ 4,"ppte" ,5,"luck"]

jQuery.inArray("ppte",a) //输出结果为1

jQuery.inArray("ppe",a) //输出结果为-1

九、$.parseJSON(jsonStr)函数

接受一个JSON字符串，返回解析后的对象

参数：jsonStr 要解析的JSON字符串

示例：

var person =jQuery.parseJSON(‘{"name":"张无忌"}’)

alert("person.name") //输出是张无忌

关于parseJSON字符串的引用：

    <form action="" id="f1">
        <input type="text" name="name" id="userName"><br>
        <input type="password" name="pwd" id="password"><br>
        <input type="radio" name="sex" id="sexM" value="1">男
        <input type="radio" name="sex" id="sexW" value="0">女
    </form>
    <script>
        var userJsonStr = '{"name":"东方不败","sex":"女","pwd":"11111"}'
            //将userJsonStr转换为一个对象
            //访问此对象属性添加到对应的form元素中
        $(function() {
                var use = $.parseJSON(userJsonStr)
                $('#userName', $('#f1')).val(use.name)
                $('#password', $('#f1')).val(use.pwd)
                if (use.sex === '女')
                    $('#sexW').attr('checked', true)
                else
                    $('#sexM').attr('checked', true)
            })

注意：parseJSON定义的字符串必须是‘{ 内容 }’ 内容需要使用双引号调用

十、$.trim(str)函数

去掉字符串起始和结尾的空格，返回去掉空格字符串的新副本

参数： str：待处理字符串

示例： var name=“ 张三丰 ” name.length //长度为8 $.trim(name).length //长度为3

   <script>
        var leng = "  混元太极门   "
        document.write("原先字符串的长度为：" + leng.length + "<br>")
        document.write("去掉空格后的字符串长度为：" + $.trim(leng).length)
    </script>

运行结果截图：

十一、一些其他函数类型的运用

判断是否是数组：

$.isArray(参数)

        var array = [1, 2, 3]
        alert($.isArray(array))

运行结果：true

判断是否是函数

$.isFunction(参数)

        var f = function() {}
        alert($.isFunction(f))

结果是true

判断是否是数字

$.isNumeric(参数)

        var n = 1234
        alert($.isNumeric(n))

结果为true

判断是否是个空对象

$.isEmptyObject(参数)

        var nullA = null
        alert($.isEmptyObject(nullA))

结果为true