jQuery4操作表单+属性+样式
一、动态添加表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>动态生成表格</title> </head> <body> <button>生成表格</button> <div> <table> <thead> <tr> <th>名字</th> <th>描述</th> </tr> </thead> <tbody></tbody> </table> </div> <!--引入jQuery--> <script src="jQuery1-12-4.js"></script> <script> $(function(){ //模拟后台数据 var datas = [{name:"西瓜",desc:"甜润美味，清凉可口"}, {name:"黄瓜",desc:"清润香甜，齿间留香"}]; $("button").click(function () { //方式1： // for (var i = 0; i < datas.length; i++) { // $("tbody").append($("<tr><td>"+datas[i].name+"</td><td>"+datas[i].desc+"</td></tr>")); // } //方式2：由于方式1是每次都会生成一个jQuery对象，添加到对应的地方，对内存影响大，所以出现了需要拼接完，再去添加的额情况 // var str = ""; // for (var i = 0; i < datas.length; i++) { // str += "<tr><td>"+datas[i].name+"</td><td>"+datas[i].desc+"</td></tr>"; // } // $("tbody").append($(str)); //方式3：使用数组进行拼接 var arr = []; for (var i = 0; i < datas.length; i++) { arr.push("<tr><td>"+datas[i].name+"</td><td>"+datas[i].desc+"</td></tr>"); } $("tbody").html(arr); }); }); </script> </body> </html>
二、删除和复制元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>删除和复制元素</title> <style> div{ width: 200px; height: 500px; background-color: pink; } </style> </head> <body> <p>我是原始的p元素</p> <div></div> <section> <h1>h1</h1> </section> <script src="jQuery1-12-4.js"></script> <script> //把p元素复制到div中 $("div").append($("p").clone());//默认不带有事件的复制，而true是带有事件的复制 //把section删除 // $("section").remove();//自杀式删除，断子绝孙型 // $("section").html("");//清空内部 $("section").empty();//清空内部 </script> </body> </html>
三、操作表单
$("this").val();这样获取的是文本框、密码框、单选框、复选框、按钮、文本域的值
可以获取，同样可以设置$("this").val("123");
注意：$(this).text();也是同样可以设置可以获取，但设置和获取的是两个标签中间的文本值
四、操作属性
1、添加属性
$(this).attr("属性名","属性值"); //<a 属性名=属性值>我是a标签</a>
2、读取属性值
$(this).attr("属性名");
3、删除属性
$(this).removeAttr();//删除所有属性
$(this).removeAttr("属性名");//删除特定属性
五、复选框的操作
获取某个值是否是选中状态 $(this).prop("checked");//true选中false未选中
设置某个值是选中状态 $(this).prop("checked",true);
例：全选和反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全选反选</title> <style> body{ font-size:18px; } </style> </head> <body> <div id="act"> <label><input type="checkbox" name="" id="all">全选</label> <label><input type="checkbox" name="" id="noAll">反选</label> </div> <div id="content"> <label><input type="checkbox" name="" id="">西瓜</label> <label><input type="checkbox" name="" id="">香蕉</label> <label><input type="checkbox" name="" id="">苹果</label> <label><input type="checkbox" name="" id="">橙子</label> <label><input type="checkbox" name="" id="">葡萄</label> </div> <script src="jQuery1-12-4.js"></script> <script> var datas = $("#content label input"); //点击全选，全部选中 $("#all").click(function () { for (var i = 0; i < datas.length; i++) { $(datas[i]).prop("checked", $(this).prop("checked")); } }); //点击每一个元素时，判断是否应该勾选全选按钮 for (var i = 0; i < datas.length; i++) { $(datas[i]).click(function () { //所有都选中才选中 for (var j = 0; j < datas.length; j++) { if (!$(datas[j]).prop("checked")) { $("#all").prop("checked", false); return; } } $("#all").prop("checked", true); }); } //点击反选按钮们进行反向选择 $("#noAll").click(function () { for (var i = 0; i < datas.length; i++) { $(datas[i]).prop("checked") ? $(datas[i]).prop("checked", false) : $(datas[i]).prop("checked", true); } //判断全选 for (var j = 0; j < datas.length; j++) { if (!$(datas[j]).prop("checked")) { $("#all").prop("checked", false); return; } } $("#all").prop("checked", true); }); </script> </body> </html>
六、样式的操作
1、获取元素的宽高
$(this).css("height") $(this).css("width") //都是带单位的
$(this).height(); $(this).width(); //不带单位的
2、获取定位元素相对于父级的位置
$(this).offset().top $(this).offset().left //无单位
3、窗口滚动的距离
$(this).scrollTop();//无单位
