点击按钮创建一个表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 600px;height: 450px;border: 1px solid red;}</style><script src="jquery-1.12.1.js"></script><script>// 案例:点击按钮在div中创建一个表格// 表格数据的数组var arr = [{"name":"传智播客","href":""},{"name":"百度","href":""},{"name":"腾讯","href":""},{"name":"阿里","href":""},{"name":"淘宝","href":""},{"name":"京东","href":""}];// 页面加载$(function(){// 点击按钮$("#btn").click(function(){// 创建表格var table = $("<table style='cursor:pointer' border='1' cellpadding='0' cellspacing='0'></table>");// 把表格加入到div中$("#dv").append(table);// 循环遍历数组,创建行for(var i=0;i<arr.length;i++){// 每个数组元素,都是对象var dt = arr[i];// 创建行,并加入到table中var tr = $("<tr></tr>");table.append(tr);// 在列中显示内容,列在行中// 创建td,并加入到行中var td1 = $("<td>"+dt.name+"</td>");// 第一列加入到tr中tr.append(td1);var td2 = $("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>");// 第二列加入到tr中tr.append(td2);// 鼠标进入到每一行的时候,该行有高亮显示的效果tr.mouseenter(function(){ // 鼠标进入$(this).css("backgroundColor","green");}).mouseleave(function(){ //鼠标离开$(this).css("backgroundColor","");});}});});</script></head><body><input type="button" value="创建一个表格" id="btn"><div id="dv"></div></body></html>
点击按钮创建一个表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 600px;height: 450px;border: 1px solid red;}</style><script src="jquery-1.12.1.js"></script><script>// 案例:点击按钮在div中创建一个表格// 表格数据的数组var arr = [{"name":"传智播客","href":""},{"name":"百度","href":""},{"name":"腾讯","href":""},{"name":"阿里","href":""},{"name":"淘宝","href":""},{"name":"京东","href":""}];// 页面加载$(function(){// 点击按钮创建表格$("#btn").click(function(){// 创建表格var table = $("<table style='cursor:pointer' border='1' cellpadding='0' cellspacing='0'></table>");// 把表格加入到div中$("#dv").append(table);// 循环遍历数组,创建行for(var i=0;i<arr.length;i++){// 每个数组元素,都是对象var dt = arr[i];// 创建行,并加入到table中var tr = $("<tr></tr>");table.append(tr);// 在列中显示内容,列在行中// 创建td,并加入到行中var td1 = $("<td>"+dt.name+"</td>");// 第一列加入到tr中tr.append(td1);var td2 = $("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>");// 第二列加入到tr中tr.append(td2);// 鼠标进入到每一行的时候,该行有高亮显示的效果tr.mouseenter(function(){ // 鼠标进入$(this).css("backgroundColor","green");}).mouseleave(function(){ //鼠标离开$(this).css("backgroundColor","");});}});// 点击按钮移除表格$("#btn2").click(function(){// 当前这个按钮的下一个兄弟元素,清空里面的子元素// $(this).next().empty();// $("#dv").empty();// 所有的div中的第一个div$("#dv").children("table").remove();});// 点击按钮,在table中添加一行$("#btn4").click(function(){// 创建一行var tr = $("<tr><td>腾讯</td><td><a href=''>腾讯</a></td></tr>");// 把这一行加入到table中$("#dv").children("table").append(tr);});});</script></head><body><input type="button" value="创建一个表格" id="btn"><input type="button" value="移除表格" id="btn2"><input type="button" value="添加一行" id="btn4"><div id="dv"></div></body></html>
权限选择
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 第三个按钮,把左边所有的移动到右边$("#toAllRight").click(function(){$("#se1>option").appendTo($("#se2"));});// 第四个按钮,把右边所有的移动到左边$("#toAllLeft").click(function(){$("#se2>option").appendTo($("#se1"));});// 第一个按钮,把左边选中的移动到右边$("#toRight").click(function(){$("#se1>option:selected").appendTo($("#se2"));});// 第二个按钮,把右边选中的移动到左边$("#toLeft").click(function(){$("#se2>option:selected").appendTo($("#se1"));});});</script></head><body><div><select multiple="multiple" id="se1"><option value="">添加</option><option value="">删除</option><option value="">修改</option><option value="">查询</option><option value="">打印</option></select> <div><input id="toRight" type="button" value=">" /><input id="toLeft" type="button" value="<" /><input id="toAllRight" type="button" value=">>" /><input id="toAllLeft" type="button" value="<<" /> </div><select id="se2" multiple="multiple"></select></div></body></html>
元素的value属性操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){// 点击按钮,获取文本框的value属性和设置// console.log($("#txt").val());// $("#txt").val('今天天气一点也不好');// 点击按钮设置单选框的value属性// $("#r2").val('哦天啊');// $("#ck2").val('改了');// 获取文本域中的value值// console.log($("#tt2").val());// console.log($("#tt2").text());// 设置文本域中的文本内容----可以设置// $("#tt2").val('小苏好猥琐哦');// 推荐使用下面的方式----jQuery的写法// $("#tt2").text('好神奇哦');// 为select标签中value属性是5的这个option标签选中// 选中的意思$("#s1").val(5);});});</script></head><body><input type="button" value="显示效果" id="btn"><input type="text" value="今天天气真好" id="txt"><input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2" id="r2">女<input type="radio" name="sex" value="3">保密<br><input type="checkbox" value="1" id="">吃饭<input type="checkbox" value="2" id="">睡觉<input type="checkbox" value="3" id="ck2">打豆豆<input type="checkbox" value="4" id="">打铅球<br><textarea name="tt" id="tt2" cols="30" rows="10">普天之下 莫非王土</textarea><select id="s1"><option value="1">妲己</option><option value="2">王昭君</option><option value="3">西施</option><option value="4">貂蝉</option><option value="5">小乔</option><option value="5">武则天</option></select></body></html>
