第一章：认识JQuery

第一阶段：jQuery的基本操作

简介JQuery的由来，以及相类似的其他JavaScript框架（5分钟）

讲解需要的JavaScript包版本以及导入（2分钟）

讲解JQuery和原生态JavaScript代码的比较，同时讲解$()和val(),size(),html()的用法（10分钟）

讲解JQuery的选择器类型（id,.class,element）强调和CSS样式中的选择器相同

讲解JQuery对象和JavaScript对象的区别，一定要讲明白JQuery就是JavaScript的数组包装，讲解两者的转换方法

数组下标[index]和get(index)方法。

讲解each()方法的使用

第二阶段：操纵Form表单数据：本章通过向Form表单添加JSON数据和从Form表单中获取JSON数据来展示JQuery的选择器作用和属性操作。

案例一：将JSON数据放入到form元素中

var data={username:"kkk",pass:"123456",sex:["nv"],userid:"456789",hobby:["xiaochi","guangjie"],addr:"luoyang",intro:"java高级讲师"};

$(function(){

$("#btn").click(function(){

addFormData("myform",data);

});

});

function addFormData(formId,data){//参数formId是form表单的id，data是要传入的JSON数据

var nameArr=[];//用来装载form表单中所有元素名称的数组

$("#"+formId+" :input[name]").each(function(){//选择form表单中所有包含有name属性的元素

nameArr.push(this.name);//将所有元素的名称加入到nameArr数组中

});

for(var i=0;i<nameArr.length;i++){

$("#"+formId+" :input[name='"+nameArr[i]+"']").val(data[nameArr[i]]);

//循环名称数组的每一个名称，并将form表单中和当前循环的元素名称相同的元素的值设置成data数据中对应名称属性的值

}

}

1. 带着学生把各种类型的选择器过一遍，进行个别的简单讲解，要说明这些选择器需要学生课下自己去尝试，课上老师就不再一一列举，列举也没有意义；
2. 先讲解JSON数据结构，讲解获得JSON对象data的属性可以通过：data.属性名的方式，也可以通过数组类型的方式：data[属性值]；
3. 展示示例将JSON数据加入到Form表单对应的元素中；
4. 讲解怎么获得form表单中所有有name属性的元素，继而讲解怎么把这些名称放入到数组中；
5. 将form表单中name属性的值和JSON数据中属性名称相同的元素的value设置成对应的JSON中的值
6. 总结：使用的知识点：click事件，push()添加数组元素，:input[name],input[name=’值’],$(祖先选择器 后代选择器)，data[属性]方式访问JSON对象属性。

第三阶段：以JSON方式获取form表单中的数据

案例二：将form表单中的数据转化成JSON对象

function getFormData(formId){

var data=new Object();//创建JS对象

$("#"+formId+" :input[name]").each(function(){//遍历form下带name属性的元素

if(this.value!=null){

if(this.type=="checkbox"||this.type=="radio"){//如果是单选或多选元素

if($(this).prop("checked")){//如果是被选中的元素，讲解this的本质

data[this.name]=this.value;//将被选中元素的值赋给数据对象的相应属性

}

}else{

data[this.name]=this.value;

}

}

});

return data;

}

$(function(){

$("#btn").click(function(){//函数调用

var data=getFormData("myform");

alert(JSON.stringify(data));//将对象转换成JSON字符串

});

});

1. 先讲解怎么创建对象，对象属性及其赋值方法
2. 选择所有form表单下带有【name】属性的元素，并进行遍历
3. 如果是单选或是多选元素，要判断是否被选中，选中的将其值赋给对象的对应属性
4. 如果是非多选或单选的元素，则直接将其值赋给对象的对应属性
5. 总结：new Object()创建对象、prop()操作属性。

第二章：事件、属性、创建、添加、删除元素、样式操作、属性操作

第一阶段：主要讲解事件绑定、创建、添加、删除元素，样式操作等知识点

案例一：EditTable，可编辑表格，通过案例来让学生掌握选择器、操作样式、创建并添加元素、事件绑定、文本操作。

<table border="1" id="tab">

<tr>

<td>商品编号</td><td>商品名称</td><td>商品价格</td><td>商品数量</td>

</tr>

<tbody id="tb">

<tr>

<td>S001</td><td>冰箱</td><td>4000</td><td>25</td>

</tr>

<tr>

<td>S002</td><td>洗衣机</td><td>5500</td><td>21</td>

</tr>

<tr>

<td>S003</td><td>电视机</td><td>7800</td><td>12</td>

</tr>

</tbody>

</table>

$(function(){

editTable("tb");

});

function editTable(tbodyId){

$("#"+tbodyId+" td").on("click",function(){

var td=$(this);

var content=td.text();//获取元素的文本

var input=$("<input value='"+content+"'>");//创建元素

td.html("").css({"padding":0});//定义单个样式，

input.css({"padding":"0px","margin":"0px","text-align":'center',"border-width":0});

//定义多个样式，使用的是JSON对象格式，

input.width(td.width()).height(td.height());//设置输入框的宽度和表格一样，以上3句代码要等到第二步完善细节的时候再添加。

td.append(input);//添加子元素

input.trigger(“focus”).trigger(“select”);//让文本框获得焦点并选中，防止出现连续点击不同的单元格时，不能触发失去焦点事件。这句话也可以最后加

input.click(function(){return false;});//阻断在文本框中的事件传递

input.on("blur",function(){

var update=input.val();//获取文本框中的value

input.remove();//移除文本框

td.text(update);//将文本框中的值放入到单元格中

});

});

}

讲解过程中先不讲解关于样式的内容

1. 先能实现添加文本框
2. 并把表格中的文本加入到文本框中
3. 失去焦点后将文本框中的内容放入到表格中并删除文本框；
4. 添加样式让文本框和表格的宽高一致（注意预先在样式中要先定义好td的宽和高），并去掉文本框的边框，让文本框和表格的边框看起来一致，就好像直接在单元格中编辑一样。
5. 如果连续点击不同的单元格则会出现连续两个或三个可编辑的单元格，解决这个问题需要确保新添加的文本框获得焦点

总结本示例学过的知识点：$()选择器、on()事件绑定、$(“元素”)创建元素、css()改变样式、width()操作宽度、append()添加子元素、remove()删除本元素、text()。

第二阶段：将JSON数组数据加入到表格中

案例二：

<input type="button" value="加载数据" id="btn">

<table id="tab" border="1">

<tbody id="tb"></tbody>

</table>

function addTable(tid,data,titleArr){//tid:tbody的id；data：显示的数据对象数组；titleArr：数据对象属性（按出现的先后顺序排列）

for(var i=0;i<data.length;i++){

var tr="<tr>";

for(var j=0;j<titleArr.length;j++){

tr+="<td>"+data[i][titleArr[j]]+"</td>";//数据数组中第i个数据对象中的某个属性（[titleArr[j]:属性数组中第j个值]）的值

}

tr+="</tr>";

$("#"+tid).append($(tr));

}

}

$(function(){

var data=[{cid:1,cname:'郑州',cpCount:2000},{cid:2,cname:'洛阳',cpCount:1000},{cid:3,cname:'开封',cpCount:100},{cid:4,cname:'新乡',cpCount:200}];

$("#btn").on("click",function(){

addTable("tb",data,["cid","cname","cpCount"]);

});

})

1. 将数组数据拼接成每行的字符串
2. 通过$(str)将字符串转换为<tr>元素并添加到tbody中

案例三：将数据添加到下拉框中，和上面示例的原理相同

function addSelect(sid,data,val,txt){

for(var i=0;i<data.length;i++){

$("#"+sid).append($("<option value='"+data[i][val]+"'>"

+data[i][txt]+"</option>"));

}

}

$(function(){

var data=[{cid:1,cname:'郑州'},{cid:2,cname:'洛阳'},{cid:3,cname:'开封'},{cid:4,cname:'新乡'}];

addSelect("sele",data,"cid","cname");

})

第三章：

第一阶段：

案例：获取表格中指定列的数据

<input type="button" value="显示数据" id="btn">

<table border="1" id="tab">

<tr>

<td>商品编号</td><td>商品名称</td><td>商品图片</td><td>商品价格</td><td>商品数量</td>

</tr>

<tbody id="tb">

<tr>

<td>S0001</td><td>无线鼠标</td><td>img.jpg</td><td>85.6</td><td>5</td>

</tr>

<tr>

<td>S0002</td><td>无线键盘</td><td>jianpan.jpg</td><td>100</td><td>2</td>

</tr>

<tr>

<td>S0102</td><td>外接音箱</td><td>yinxiang.jpg</td><td>150</td><td>6</td>

</tr>

</tbody>

</table>

function getData(tbodyid,names,positions){//names:传输数据的参数名，position：表格中需要传输的数据在每行中的位置（位置从0开始计算）

var data=[];//装载数据的数组

var col=0;//遍历每一列的列标

$("#"+tbodyid+" tr").each(function(){//获得所有的tbody中的行

col=0;//将新一行的列数置为零

var obj=new Object();//每一行数据装入到一个对象中

$(this).children().each(function(){//遍历行中所有的列

for(var i=0;i<positions.length;i++){

if(positions[i]==col){//如果数据列的位置和当前列标相同

obj[names[i]]=$(this).text();//将数据对象的相应属性设置成

break;

}

}

col++;

});

data.push(obj);//将装载完毕的数据对象放入到数组中

});

return data;

}

$(function(){

var names=["sid","sprice","scount"];//指定JSON数据的属性

var positions=[0,3,4];//指定要获取表格数据所处的列索引（从0开始）

$("#btn").on("click",function(){

var da=getData("tb",names,positions);

for(var i=0;i<da.length;i++){

alert(da[i].sid+":"+da[i].sprice+":"+da[i].scount);

}

});

});