前一段时间录了一套关于jQuery的视频分享给大家，可以在下载区下载到，本来想配合文字一起的，后面发现视频+帮助文档也是非常好的学习方法
1、javascript对象与each
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript">
var err={
data:[
{id:1,name:"张国荣",sex:"男"},
{id:2,name:"张国立",sex:"女"},
{id:3,name:"张国良",sex:"男"}
],
start:function(){
$.each(err.data,function(index,obj){
console.log(obj.id+","+obj.name+","+obj.sex);
//console.log(obj)
});
}
};
err.start();
</script>
</body>
</html>
结果：
2、DOM-用户管理
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2> DOM-用户管理</h2> <table border="1" id="tabUsers" width="100%"> <tr> <th>编号</th> <th>姓名</th> <th>城市</th> <th>操作</th> </tr> </table> <fieldset> <legend>用户信息</legend> <p><label>姓名</label><input type="text" name="name" id="name" placeholder="请输入姓名" /></p> <p><label>城市</label><input type="text" name="city" id="city" placeholder="请输入城市" /></p> <p><button type="button" id="btnSave">保存</button> <button type="button" id="btnSave">更新</button></p> </fieldset> <script type="text/javascript" src="js/jquery-1.11.3.js" ></script> <script type="text/javascript"> var err={ data:[ {id:1,name:"张国荣",city:"中国北京"}, {id:2,name:"张国立",city:"中国上海"}, {id:3,name:"张国良",city:"中国香港"} ], bind:function(){ //将表格中第一行以外的数组清空 $("#tabUsers tr:gt(0)").remove(); $.each(err.data,function(i,obj){ var tr=$("<tr></tr>"); $("<td></td>").html(obj.id).appendTo(tr); $("<td></td>").html(obj.name).appendTo(tr); $("<td></td>").html(obj.city).appendTo(tr); $("<td></td>").html("<a>删除</a>").appendTo(tr); //在#tabUsers元素中追加子元素tr $("#tabUsers").append(tr); }); }, save:function(){ //新增 var user={ id:1, name:$("#name").val(), city:$("#city").val(), }; if(err.data.length>0){ //如果数据中有数据 user.id=err.data[err.data.length-1].id+1; }; err.data.push(user); //将user对象添加到数组的末尾 err.bind(); }, start:function(){ //绑定事件 $("#btnSave").click(err.save); err.bind(); } }; err.start(); </script> </body> </html>
结果：
3、左右列表框元素移动
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>上机阶段二</h2> <div> <select id="leftSelect" multiple="multiple" style="height: 200px; 200px;"> <option value="0">电影0</option> <option value="1">电影1</option> <option value="2">电影2</option> <option value="3">电影3</option> <option value="4">电影4</option> <option value="5">电影5</option> </select> <input type="button" id="right" value=">" /> <input type="button" id="rightAll" value=">>>" /> <input type="button" id="left" value="<" /> <input type="button" id="leftAll" value="<<<" /> <select id="rightSelect" multiple="multiple" style="height: 200px; 200px;"> <option value="6">电影6</option> <option value="7">电影7</option> <option value="8">电影8</option> <option value="9">电影9</option> </select> </div> <script type="text/javascript" src="../js/jquery-1.11.3.js" ></script> <script type="text/javascript"> $(document).ready(function(){ //将左边数据移动到右边 $("#right").click(function(){ //将左边option中选中的值赋给vSelect变量 var vSelect=$("#leftSelect option:selected"); //将数据添加到rightSelect中 vSelect.clone().appendTo("#rightSelect"); //同时删除leftSelect中的数据 vSelect.remove(); }); //将右边数据移动到左边 $("#left").click(function(){ var vSelect=$("#rightSelect option:selected"); //将右边的数据追加到左边列表中 vSelect.clone().appendTo("#leftSelect"); vSelect.remove(); }); //将左边全部数据移到右边 $("#rightAll").click(function(){ $("#rightSelect").append($("#leftSelect>option")); $("#leftSelect>option").remove(); }); //将右边数据全部移到左边 $("#leftAll").click(function(){ $("#leftSelect").append($("#rightSelect>option")); //找到#leftSelect 将右边#rightSelect的所有option子元素添加到#leftSelect $("#rightSelect>option").remove(); //添加完清空#rightSelect里所有的子元素 }); }); </script> </body> </html>
结果：
