欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery元素操作

程序员文章站 2023-11-28 09:28:34
jQuery中创建元素及追加元素 DOM中可以动态创建元素:document.createElement(“标签的名字”); jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直接调用方法进行使用 1.append 方法用来在元素的末尾追加元素(最后一个子节点)。增加元素末尾 ......

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。

 

 

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