首页 > 其他分享> 文章详细

jQuery 02: 常用函数第二部分

2022-07-23 11:01:01 阅读：125 来源： 互联网

标签：jQuery 02 函数 index function element html 图层 click

jQuery

remove

语法：$(选择器).remove()：将数组中所有dom对象及其子对象一并删除

empty

语法：$(选择器).empty()：将数组中所有dom对象的子对象删除

append

作用：为所有dom对象添加子对象
语法：$(选择器).append("新添加的div")

html

作用：设置或返回被选元素的内容(innerHtml)

语法

$(选择器).html()，无参调用，获取dom数组第一个元素的内容
$(选择器).html(值)，有参调用，用于设置dom数组中所有元素的内容

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>remove, empty, append, html 函数的简单应用</title>
        <meta charset="UTF-8">
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            div{
                width: 300px;
                background-color: gray;
            }
            
		    body{
                background-color: bisque;
            }

        </style>
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //删除图层0,及其子图层
            $("#btn1").click(function(){
                $("#div1").remove()
            })
        
            //删除图层3的子图层
            $("#btn2").click(function(){
                $("#div4").empty()
            })

            //为图层3添加子对象，可以验证看上去图层3和其子层一起被删除了，但是图层3其实还是留着的
            $("#btn3").click(function(){
                $("#div4").append("<div id='div7'>图层3,新增的图层6</div>")
            })

            //为图层0添加子对象
            $("#btn4").click(function(){
                $("#div1").append("<div id='div8'>图层0,新增的图层7</div>")
            })

            //首先作一个比较
            $("#btn5").click(function(){
                if($("#div1").html() == $("#div1").text()){
                    alert("yes")
                }else{
                    alert("no")
                }
            })

            //获取图层0的html值(保留了css样式)
            $("#btn6").click(function(){
                alert("图层0的html值: " + $("#div1").html())
            })
            
            //获取图层0的text值
            $("#btn7").click(function(){
                alert("图层0的text值: " + $("#div1").text())
            })

            //设置图层0的html值
            $("#btn8").click(function(){
                $("#div1").html("<div style='background-color: purple'>图层0的新html</div>")
                //把原先的html值给覆盖了
            })
        })
    </script>
    <div id="div1">图层0
        <div id="div2">图层1</div>
        <div id="div3">图层2</div>
    </div>
    <div id="div4">图层3
        <div id="div5">图层4</div>
        <div id="div6">图层5</div>
    </div><br>
    <input type="button" id="btn1" value="删除图层0,及其子图层"><br>
    <input type="button" id="btn2" value="删除图层3的子图层"><br>
    <input type="button" id="btn3" value="为图层3添加子对象"><br>
    <input type="button" id="btn4" value="为图层0添加子对象"><br>
    <input type="button" id="btn5" value="比较html和text"><br>
    <input type="button" id="btn6" value="获取图层0的html值"><br>
    <input type="button" id="btn7" value="获取图层0的text值"><br>
    <input type="button" id="btn8" value="设置图层0的html值">
    </body>
</html>

效果:

html() 与 text() 获取到的值的区别

empty() 和 remove()的区别:empty还可再给父图层添加新的子图层，而remove已经把父图层和子图层一起给删除了，无法给父图层再添加子图层

ecah

语法格式1：可以对数组，json，dom数组做循环处理。对每一个成员都会调用一次处理函数
1. 语法：$.each(循环的内容，处理函数)
2. .each()，相当于调用jQuery里的静态方法
3. 处理函数 function(index，element)，两个形参都是自定义的，index为循环的索引，element为数组成员

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jQuery中each的第一种语法, 循环数组,json,dom数组</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //遍历普通数组
            $("#btn1").click(function(){
                var commonArray = ["just", "a", "joker", true, 1.1]
                $.each(commonArray, function(index, element){
                    alert("下标: " + index + " 元素值: " + element)
                })
            })

            //遍历json
            $("#btn2").click(function(){
                var jsonArray = {"name" : "xun", "age" : 21, "address" : "芜湖"}
                $.each(jsonArray, function(index, element){
                    alert("下标: " + index + " 元素值: " + element)
                })
            })

            //遍历dom数组
            $("#btn3").click(function(){
                $.each($(":text"), function(index, element){
                    alert("下标: " + index + " 元素值: " + element.value)
                })
            })
        })
    </script>
    <input type="text" value="dom1"><br>
    <input type="text" value="dom2"><br>
    <input type="text" value="dom3"><br>
    <input type="button" id="btn1" value="遍历普通数组"><br>
    <input type="button" id="btn2" value="遍历json"><br>
    <input type="button" id="btn3" value="遍历dom数组"><br>
    </body>
</html>

语法格式2

jQuery对象.each(function(index, element){

})

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jQuery中each的第二种语法, 循环dom数组</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //遍历dom数组
            $("#btn3").click(function(){
                $(":text").each(function(index, element){
                    alert("下标: " + index + " 属性值: " + element.value)
                })
            })
        })
    </script>
    <input type="text" value="dom1"><br>
    <input type="text" value="dom2"><br>
    <input type="text" value="dom3"><br>
    <input type="button" id="btn3" value="遍历dom数组"><br>
    </body>
</html>

标签：jQuery,02,函数,index,function,element,html,图层,click
来源： https://www.cnblogs.com/nefu-wangxun/p/16511146.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。