jQuery 02: 常用函数

2年前 (2022) 程序员胖胖胖虎阿
185 0 0

jQuery

常用函数

val

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

text

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

attr

  1. 作用:对val,text,之外的其他属性操作

  2. $(选择器).attr("属性名"),获取dom数组第一个对象的属性值

  3. $(选择器).attr("属性名","值"),将数组中所有dom对象的属性值设为新值

  4. 示例

    <!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

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

empty

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

append

  1. 作用:为所有dom对象添加子对象
  2. 语法:
        $(选择器).append("<div>新添加的div</div>")

html

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

  2. 语法

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

    <!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. 语法格式1:可以对数组,json,dom数组做循环处理。对每一个成员都会调用一次处理函数

    1. 语法:$.each(循环的内容,处理函数)
    2. .each(),相当于调用jQuery里的静态方法
    3. 处理函数 function(index,element),两个形参都是自定义的,index为循环的索引,element为数组成员
  2. 示例

    <!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>
    
  3. 语法格式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: 常用函数 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...