使用jQuery操作样式、内容、文档

南枫知我意～

已于 2023-11-16 16:18:25 修改

阅读量60

点赞数 1

文章标签： jquery 前端 javascript

于 2023-09-20 11:34:48 首次发布

本文链接：https://blog.csdn.net/LOVEcao_YU/article/details/133065824

版权

jQuery样式操作

css("样式名","样式值");或 css({"样式名1":"样式值1","样式名2":"样式值3",...,"样式名n":"样式值n"});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式操作</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
    <script>
        $(function (){
            $("#css").click(function (){
                $("#div").css({"width":"400px","height":"400px","background-color":"blue"});
            });
        });
    </script>
</head>
<body>
    <div id="div"></div>
    <input type="button" value="测试" id="css">
</body>
</html>

jQuery内容操作

html()：设置或返回所选元素的内容（包括HTML标记），相当于JS的innerHTML。

test()：设置或返回所选元素的文本内容，相当于JS的innerText。

val()：设置或返回表单域的值，相当于JS的value。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容操作</title>
    <script src="js/jquery-3.7.1.js"></script>
    <script>
        $(function (){
            $("#html").click(function (){
                console.log($("#div").html());//获取
                $("#div").html("<h1>hello!</h1>");//设置
            });
            $("#text").click(function (){
                console.log($("#div").text());//获取
                $("#div").text("<h1>hello!</h1>");//设置
            });
            $("#val").click(function (){
                console.log($("#username").val());//获取
                $("#username").val("知我意");//设置
            });
        });
    </script>
</head>
<body>
    <div id="div">
        <h1>div</h1>
    </div>
    <input type="text" id="username" value="南枫"><br>
    <input type="button" value="html" id="html">
    <input type="button" value="text" id="text">
    <input type="button" value="val" id="val">
</body>
</html>

jQuery文档操作

$()：创建标签。

append()：在指定的标签中后面添加。

prepend()：在指定的标签中前面添加。

after()：在指定标签的后面添加。

befor()：在指定标签的前面添加。

remove()：删除指定标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
    <script src="js/jquery-3.7.1.js"></script>
    <script>
        $(function (){
            $("#bt").click(function (){
                //创建一个能跳转到淘宝的超链接
                var tb=$("<a href='http://www.taobao.com'>淘宝</a>");
                //将新建的标签放到id为div的标签中的最后
                //$("#div").append(tb);
                //将新建的标签放到id为div的标签中的最前面
                //$("#div").prepend(tb);
                //将新建的标签放到id为div的标签的前面
                //$("#div").before(tb);
                //将新建的标签放到id为div的标签的最后
                $("#div").after(tb);
                //将id为div的标签删除
                // $("#div").remove();
            });
        });
    </script>
</head>
<body>
    <div id="div" style="background-color: aqua">
        <h1>DIV</h1>
    </div>
    <input type="button" value="测试" id="bt">
</body>
</html>

案例测试：省市联动

分析：

1.使用一维数组存放省份信息，使用二维数组存放城市信息，位置对应

2.页面加载完成，将省份信息读取出来形成<option>标签放到省份的下拉列表中

3.省份发生改变时，，读取该省份的城市信息形成<option>标签放到城市的下拉列表中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动测试</title>
    <script src="js/jquery-3.7.1.js"></script>
    <script>
        $(function (){
            var pros=["四川","云南","贵州","重庆"];
            var citys=[
                ["成都","宜宾","绵阳"],
                ["昆明","丽江","大理"],
                ["贵阳","毕节","遵义"],
                ["江北","渝中","万州"]
            ];

            //页面加载完成，读取省份信息，每一个省份信息对应一个option标签,放入下拉列表
            for(var i=0;i<pros.length;i++){
                var op=$("<option>"+pros[i]+"</option>");
                $("#pro").append(op);
            }
            //用户选择了省份，读取该省份的城市信息，每一个城市信息对应一个option标签,放入下拉列表
            $("#pro").change(function (){//  change() 发生改变
                //将之前加载的城市信息清除
                $("#city option").remove();
                //获取用户选择的省份
                var proV=$("#pro").val();
                //获取用户选择的省份在数组中的索引
                var j=-1;
                for(var i=0;i<pros.length;i++){
                    if(pros[i]==proV){
                        j=i;
                        break;
                    }
                }
                //获取省份对应的城市数组
                var city=citys[j];
                //每一个城市信息对应一个option标签,放入下拉列表
                for(var i=0;i<city.length;i++){
                    var op=$("<option>"+city[i]+"</option>");
                    $("#city").append(op);
                }
            });
        });
    </script>
</head>
<body>
    <select id="pro">
        <option>...请选择...</option>
    </select>省
    <select id="city">
        <option>...请选择...</option>
    </select>市
</body>
</html>

jQuery循环遍历

each();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环遍历</title>
    <script src="js/jquery-3.7.1.js"></script>
    <script>
        $(function (){
            var i=["1","2","3"]
            //方式一
            $.each(i,function (index,content){
                console.log(content);//控制台查看
            });
            //方式二
            $(i).each(function (index,content){
                console.log(content);//控制台查看
            });
        });
    </script>
</head>
<body>

</body>
</html>

jQuery动画

显示与隐藏

show(time,,function); 显示

hide(time,function); 隐藏

toggle(time,function); 在显示与隐藏之间相互切换

time：显示与隐藏的时间，单位毫秒。注：1秒=1000毫秒。

function：回调函数。显示与隐藏完毕后自动调用的函数。

两个参数都是可选参数。可不写，可只写一个！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="js/jquery-3.7.1.js"></script>
    <script>
        $(function (){
            $("#show").click(function (){
                //$("#img").show();//无参数时直接显示或隐藏
                //$("#img").show(1000);
                $("#img").show(1000,function (){
                    alert("显示完毕了");
                });//显示
            });

            $("#hide").click(function (){
                $("#img").hide(1000,function (){
                    alert("隐藏起来了");
                });//隐藏
            });

            $("#toggle").click(function (){
                $("#img").toggle(1000,function (){
                    alert("切换了");
                });//
            });
        });
    </script>
</head>
<body>
    <input type="button" value="show" id="show">
    <input type="button" value="hide" id="hide">
    <input type="button" value="toggle" id="toggle">
    <img src="img/zq.jpeg" width="500" id="img">
</body>
</html>

#学无止境#