jQuery 02: 常用函数

1年前 (2022) 程序员胖胖胖虎阿

127 0 0

jQuery

常用函数

val

$(选择器).val()，无参调用，读取数组中第一个dom对象的value属性值
$(选择器).val(值)，有参调用，对数组中所有dom对象的value属性值进行统一赋值

text

$(选择器).text()，无参调用，读取数组中所有dom对象的文字显示内容，将得到的内容拼接为一个字符串返回
$(选择器).text(值)，有参方式，对数组中所有dom对象的文字显示内容进行统一赋值

attr

作用：对val，text，之外的其他属性操作
$(选择器).attr("属性名")，获取dom数组第一个对象的属性值
$(选择器).attr("属性名"，"值")，将数组中所有dom对象的属性值设为新值

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>val, text, attr函数的简单应用</title>
        <meta charset="UTF-8">
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                margin-top: 10px;
                margin-left: 10px;
                background-color: bisque;
            }

            div{
                width: 182px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>

    <script>
        $(function(){
            //获取第一个文本框的值
            $("#btn1").click(function(){
                alert("第一个文本框的值: " + $("#txt1").val())
                //将第一个文本框的值设为新值
                $("#txt1").val("第一个文本框的新值")
            })

            //将所有文本框的值设为新值
            $("#btn2").click(function(){
                $(":text").val("所有文本框的新值")
            })
            //获取图层的文本信息
            $("#btn3").click(function(){
                alert("图层的文本信息: " + $("#the-div").text())
            })

            //将图层的文本信息设为新值
            $("#btn4").click(function(){
                $("#the-div").text("图层新的文本信息")
            })

            //查看图层背景
            $("#btn5").click(function(){
                alert("图层背景色: " + $("#the-div").attr("style"))
            })
            
            //修改图层背景
            $("#btn6").click(function(){
                $("#the-div").attr("style", "background-color: purple")
            })
        })
    </script>

    <input type="text" id="txt1" value="text1"><br>
    <input type="text" id="txt2" value="text2"><br>
    <input type="text" id="txt3" value="text3"><br>
    <input type="text" id="txt4" value="text4"><br>
    <div id="the-div" style="background-color: gray">这是一个div图层</div>
    <input type="button" id="btn1" value="获取第一个文本框的值"><br>
    <input type="button" id="btn2" value="将所有文本框的值设为新值"><br>
    <input type="button" id="btn3" value="获取图层的文本信息"><br>
    <input type="button" id="btn4" value="将图层的文本信息设为新值"><br>
    <input type="button" id="btn5" value="查看图层背景色"><br>
    <input type="button" id="btn6" value="修改图层背景色"><br>

    </body>
</html>

效果:

jQuery 02: 常用函数

remove

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

empty

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

append

作用：为所有dom对象添加子对象
语法：

        $(选择器).append("<div>新添加的div</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() 获取到的值的区别

jQuery 02: 常用函数

jQuery 02: 常用函数

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

jQuery 02: 常用函数

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>

版权声明：程序员胖胖胖虎阿发表于 2022年11月24日上午8:00。
转载请注明：jQuery 02: 常用函数 | 胖虎的工具箱-编程导航

相关文章

面试官：说一说 Spring Boot 自动配置原理吧，我懵逼了...

程序员胖胖胖虎阿

328

Java中常见的设计模式

程序员胖胖胖虎阿

117

Tapdata 与麒麟软件完成兼容性互认证，国产化生态布局再跃

程序员胖胖胖虎阿

205

IDEA安装及破解码(idea的2020激活码,全年更新)

程序员胖胖胖虎阿

298

windows/mac idea最新永久破解码(windows/mac idea2020激活码激活教程,全年更新)

程序员胖胖胖虎阿

356

Intellij IDEA正版激活码(IntelliJ IDEA专业版免费激活码,成功激活)

程序员胖胖胖虎阿

209

暂无评论

暂无评论...

致力于称为最好的程序员导航网站

友链申请免责声明关于我们

Copyright © 2022 胖虎的工具箱-编程导航 陇ICP备2022001249号