jQuery元素操作
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。
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
