第一章：认识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数据中对应名称属性的值
}
}
带着学生把各种类型的选择器过一遍，进行个别的简单讲解，要说明这些选择器需要学生课下自己去尝试，课上老师就不再一一列举，列举也没有意义；先讲解JSON数据结构，讲解获得JSON对象data的属性可以通过：data.属性名的方式，也可以通过数组类型的方式：data[属性值]；展示示例将JSON数据加入到Form表单对应的元素中；讲解怎么获得form表单中所有有name属性的元素，继而讲解怎么把这些名称放入到数组中；将form表单中name属性的值和JSON数据中属性名称相同的元素的value设置成对应的JSON中的值总结：使用的知识点：click事件，push()添加数组元素，:input[name],input[name=’值’],$(祖先选择器 后代选择器)，data[属性]方式访问JSON对象属性。案例二：将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字符串
});
});
先讲解怎么创建对象，对象属性及其赋值方法选择所有form表单下带有【name】属性的元素，并进行遍历如果是单选或是多选元素，要判断是否被选中，选中的将其值赋给对象的对应属性如果是非多选或单选的元素，则直接将其值赋给对象的对应属性总结：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);//将文本框中的值放入到单元格中
});
});
}
讲解过程中先不讲解关于样式的内容
先能实现添加文本框并把表格中的文本加入到文本框中失去焦点后将文本框中的内容放入到表格中并删除文本框；添加样式让文本框和表格的宽高一致（注意预先在样式中要先定义好td的宽和高），并去掉文本框的边框，让文本框和表格的边框看起来一致，就好像直接在单元格中编辑一样。如果连续点击不同的单元格则会出现连续两个或三个可编辑的单元格，解决这个问题需要确保新添加的文本框获得焦点总结本示例学过的知识点：$()选择器、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"]);
});
})
将数组数据拼接成每行的字符串通过$(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);
}
});
});
web前端学习内容
1、网页软件课： Photoshop html DIV
CSS JavaScript jQuery，vue等
（1）html：html标记语言
（2）css：css3语法规则，包括新增伪类、动画等。
（3）JavaScript：JavaScript语法，数组，对象，函数，DOM，BOM，事件机制、作用域，闭包、原型、this指针，ajax等。
（4）jQuery：jq选择器，jq动画，jq事件机制，jq处理css，jq处理标签属性，jq链式编程，jQuery的插件封装等.
（5）vue框架及实战。
2、网页理论课：网页格局设计规划 、 网页色彩原理与配色技巧 、 HTML的基本语法、CSS的基本语法、 代码的编写规范 、JavaScript案例实战，jQuery案例实战，vue案例实战。
3、网页实践课：个人网站设计（空间网页、微博主页）、网购型网站设计（店铺、商城） 企业网站设计、旅游网站设计、教育类网站设计等。
4、网页岗前强化：网站后台维护 、 网页浏览器兼容性解决方案、网页效果图设计制作。
●就业方向
web前端、网页设计、网站美工、网站策划、网站编辑、网站维护
网页短期班：Photoshop DIV+CSS JavaScript jQuery，vue。
网页就业班：全套学习内容。
相关问答
您好,去优就业培训web前端,一般都是5-6个月的时间,推荐给你web前端培训学习路线,希望可以帮到你。阶段1.前端核心基础HTML+_CSS核心、JavaScript基础语法、...
“过时”这个词多少有点贬义了,我觉得并不适合用来描述jQuery现在的地位,jQuery并没有过时,相信在一定的时期内也不会过时,只不过其定位发生了改变。随时vue...
前端培训课程,第一个阶段是属于基础阶段学习起来比较容易,上手比较快,第二和第三阶段相对来说难度比第一个阶段大一些,但是也是比较容易学习的,最后的几个...第...
Java未来的使用前景广阔,从历史来看,Java技能自1995年问世以来,在我国的使用和开发也得到了迅速遍及,总体来看,这些使用主要集中于企业使用开发。据有关单...
北京尚学堂大数据8.0课程大纲学习路线图想学习大数据的小伙伴注意了,培训主要有线上和线下结合的方式’,也就是网络直播课和线下班级授课这两种方式第一阶段-...
其实要成为优秀的开发人员,最主要最主要的是把基础代码学好,这样以后无论做什么,思路就很清晰,然后在实际中按照一个个知识点来学,比如你这段时间学servlet,...
阶段:《JavaScript语言精粹》和《高性能JavaScript》接下来两本书《JavaScript语言精粹》和《高性能JavaScript》算是JS高级教程的补充,里面有一些内容和J...
其实优就业web前端的学习主要包括以下几个阶段:第一阶段Html5+CSS3:主要学习HTML5基础、CSS基础、HTML5进阶、CSS3进阶、Less第二阶段JS交互设计:主要学习J...
不同Java培训机构的课程肯定是不一样的,可是正规的Java培训机构的课程一定都包括基础课程和进阶课程俩个部分内容。首先是Java技能的核心和基础JavaSE,这一阶...
[回答]院遥感所,林科院,中国电力科学研究所,北方发动机研究所,煤炭研究总院,钢铁研究总院,中国电信研究院,上海市环境科学研究院,原子能,禁核试...课程目...
