jQuery元素操作

时间：2021-02-14 10:08:26

jQuery中创建元素及追加元素

DOM中可以动态创建元素:document.createElement(“标签的名字”);

jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直接调用方法
进行使用

1.append 方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾

2.prepend ，在元素的开始添加元素（第一个子节点）。增加元素开始

3.after ，在元素之后添加元素（添加兄弟）增加元素后面

4.before ：在元素之前添加元素（添加兄弟）增加元素前面

案例：

权限选择

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="jquery-1.12.2.js"></script>

    <script>

        $(function () {

            //第一个按钮:获取按钮添加点击事件,获取第一个下拉框中被选中的option添加到第二个下拉框

            $("#toRight").click(function () {

                $("#se2").append($("#se1>option:selected"));

            });

            //第二个按钮

            $("#toLeft").click(function () {

                $("#se1").append($("#se2>option:selected"));

            });

            //第三个按钮

            $("#toAllRight").click(function () {

                $("#se2").append($("#se1>option"));

            });

            //第四个按钮

            $("#toAllLeft").click(function () {

                $("#se1").append($("#se2>option"));

            });

        });

    </script>

</head>

<body>

<div style="margin-left: 500px; margin-top: 20px; background-color: #999999">

    <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1">

        <option>添加</option>

        <option>删除</option>

        <option>修改</option>

        <option>查询</option>

        <option>打印</option>

    </select>

    <div style="width: 50px; float: left;">

        <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />

        <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />

        <input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" />

        <input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" />

    </div>

    <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2">

    </select>

</div>

</body>

</html>

创建元素的方式:

1.html方法设置内容,返回的是当前的对象,如果不传入参数,获取的是标签中的内容
2.html 方法可以创建元素

3.$(“html 标签”) 可以创建元素

案例：点击按钮动态创建表格

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            margin-left: 300px;

            margin-top: 100px;

        }

        table {

            border-collapse: collapse;

            border-spacing: 0;

            border: 1px solid #c0c0c0;

        }

        th,

        td {

            border: 1px solid #d0d0d0;

            color: #404060;

            padding: 10px;

        }

        th {

            background-color: #09c;

            font: bold 16px "微软雅黑";

            color: #fff;

        }

        td {

            font: 14px "微软雅黑";

        }

        tbody tr {

            background-color: #f0f0f0;

        }

        tbody tr:hover {

            cursor: pointer;

            background-color: #fafafa;

        }

    </style>

    <script src="jquery-1.12.2.js"></script>

    <script>

        // 模拟从后台拿到的数据

        var datas = [

            {

                name: "传智播客",

                url: "http://www.itcast.cn",

                type: "IT最强培训机构"

            },

            {

                name: "黑马程序员",

                url: "http://www.itheima.com",

                type: "大学生IT培训机构"

            },

            {

                name: "传智前端学院",

                url: "http://web.itcast.cn",

                type: "前端的黄埔军校"

            }];

        $(function () {

            $("#btnCreate").click(function () {

                var arr=[];

                //遍历数组

                for(var i=0;i<datas.length;i++){

                    var obj=datas[i];//数组中的每一个对象

                    //创建行和列,加入到tbody中

                    arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>      <td>"+obj.type+"</td></tr>");

                }

                $("#tbd").html(arr);

            });

        });

    </script>

</head>

<body>

<input type="button" value="获取数据" id="btnCreate"/>

<div>

    <table>

        <thead>

        <tr>

            <th>名称</th>

            <th>说明</th>

        </tr>

        </thead>

        <tbody id="tbd">

        </tbody>

    </table>

</div>

</body>

</html>

设置和获取表单的value

input标签:文本框,radio,select,textarea(文本域),checkbox….常见的表单标签都可以通过val方法获取和设置value值

例如：

$("#txt1").val("admin");

$("#txt2").val("123456");

$("#txt3").val(" 这是一个条款");

$("#s1").val(2);// 设置 value 为 2 的选中

案例:设置和获取系统属性值或者自定义属性

$("#btn1").click(function () {

    $("a").attr("title"," 传智播客")

    $("a").attr("href","http://www.itcast.cn");

});

$("#btn2").click(function () {

    // 获取属性值

    console.log($("a").attr("title"));

});

attr()方法:可以设置属性值,两个参数:1.属性名字,2,属性值
attr()方法:可以获取属性值,一个参数:1.属性名字

案例:全选和反选案例

设置复选框选中:(attr设置checkbox的选中有问题)prop
prop用法和attr一样

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.12.2.js"></script>

    <script>

        //两个按钮:1按钮全选,2全不选

        $(function () {

            //获取第一个按钮,点击---全选

            $("#btnAll").click(function () {

                $("#dv :checkbox").prop("checked",true);

            });

            //获取第二个按钮,点击---全不选

            $("#btnNoAll").click(function () {

                $("#dv :checkbox").prop("checked",false);

            });

        });

    </script>

</head>

<body>

<input type="button" value="全选" id="btnAll"/>

<input type="button" value="全不选" id="btnNoAll"/>

<div id="dv">

    <input type="checkbox" value="1"/>吃饭

    <input type="checkbox" value="2"/>睡觉

    <input type="checkbox" value="3"/>打豆豆

    <input type="checkbox" value="4"/>打篮球

    <input type="checkbox" value="5"/>打足球

    <input type="checkbox" value="6"/>打铅球

    <input type="checkbox" value="7"/>打桌球

</div>

</body>

</html>

设置和获取元素的宽和高

通过.css()方法写一个属性可以获取宽或者高,是字符串类型如果获取后重新设置需要转换,麻烦

1.width()方法获取宽度

2.height()方法获取高度

获取的时候直接就是数字类型

例如：

console.log($("div").width());

console.log($("div").height());

位置操作

Offset()方法返回的是对象,并且,对象中有一个left和一个top,并且值是数字类型，设置的时候也可以没有px，设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative，如果设置前有脱离文档流,那么设置的时候直接改变位置

例如：

// 获取的是对象 , 并且没有 px

console.log($("div").offset());

console.log($("div").offset().left);

console.log($("div").offset().top);

注意:如果层和层中的标签同时定位,并且,标签距离左上角50px.通过按钮设置层距离左上角100px,那么标签此时距离左上角为150px。

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢

相关文章