jQuery元素操作

来源：cnblogs　　作者：bignewbie　　时间：2019/3/25 9:15:12　　对本文有异议

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。

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

原文链接：http://www.cnblogs.com/CGWTQ/p/10588055.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章