楼主是一名java后台开发，但是偶尔也客串下前端的工作，前端虽然不是那么擅长吧，但是偶尔一些不太复杂的交互，也能写写，目标是全栈工程师，貌似有点困难，但是程序媛（猿）天生就是挑战困难的，就像特种兵，鸵鸟常说，伞兵天生就是被包围的。偶尔担任些前端的工作，也是因为现在企业都习惯前后端分离来开发项目，但是呢，前后端的人力，不是大家想的那样是一比一的，大说多都是一比三四，甚至更多，前端是一哦，我是很理解前端同仁的辛苦，而且我也比较喜欢想他们请教，技多不压身，haha
-- jquery相关知识点
1、jquery的选择器
1）元素选择器
$("p") 选取<p>元素
$("p.intro") 选取所有class="intro"的<p>元素
$("p#demo") 选取id="demo"的<p>元素
2）属性选择器
$("[href]") 选取所有带有 href 属性的元素
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素
$("[href$='jpg']") 选取所有 href 值以 ".jpg" 结尾的元素
3）CSS选择器
$("p").css("background-color","red");
2、jquery事件
$("button").click(function() {..some code... } )
-- input radio框取值
$(".change").click(function(){
var aa = $('input[name="items"]:checked').val();
if (aa == 1){
$("p").show();
}else{
$("p").hide();
}
});
-- input checkbox取值
<!--获取选中复选框的值-->
$(".change").click(function(){
var arr = new Array();
$('input[name="checkbox_name"]:checked').each(function(i){
arr[i] = $(this).val();
});
var vals = arr.join(",");
alert(vals);
});
-- input selector取值
$("#change").change(function(){
var checkText=$("#change").find("option:selected");
alert("text:" + checkText.text() + " value:" + checkText.val());
});
-- jquery遍历
<div class="descendants" style="500px;">
div (当前元素)
<p class="1">p (子)
<span>span (孙)</span>
</p>
<p class="2">p (zi)
<span>span (孙)</span>
</p>
</div>
$("div").children().css({"color":"red","border":"2px solid red"});
$("div").children("p.1").css({"color":"yellow","border":"2px solid yellow"});
$("div").children().next().children().css({"color":"green","border":"2px solid green"});
$("div").children("p.1").children().css({"color":"blue","border":"2px solid blue"});
});
------ 买A送A,新增页面及js遇到的问题及解决方法：
1、分页查询列表，其中若有字段需要进行拼接处理，或者是逻辑判断处理，formatter函数可以做到，如下：
{
name: 'status',
index: 'ca.status',
330,
formatter: function (cellvalue, options, rowObject) {
var edit = "<button class='edit-btn btn btn-primary btn-xs'>编辑</button>";
var publish = "<button class='publish-btn btn btn-primary btn-xs'>发布</button>";
var del = "<button class='del-btn btn btn-primary btn-xs'>删除</button>";
var stop = "<button class='stop-btn btn btn-primary btn-xs'>停止</button>";
var detail = "<button class='detail-btn btn btn-primary btn-xs'>查看</button>";
if (cellvalue == 0) {
return edit + publish + del;
} else if (cellvalue == 1) {
return edit + stop;
} else {
return detail;
}
}
}，其中cellvalue是此单元格name: 'status'的值，rowObjec为此行数据对象，切记按钮操作不要后端返回
2、接口模块加载AM.init(["agileManager"], function (list) {}),其中初始化多个的话，如下：AM.init(["agileManager","equityManager"], function (list) {})
3、对于时间控件dateEvent的,
pluginModule.ChangeTimeValidation({
"obj": "#queryForm",
"type": "interval",
"timeList": ["createTime"]
});
其中obj为哪个页面的控件，createTime为时间控件name属性的前缀，createTimeStart为起始时间，createTimeEnd为结束时间
4、动态获取下拉框查询
getCampaignsStatus:function(){
API.ajax({
id: 'S_Buy_A_Present_A_GetCampaignsStatus',
async: false,
data: {
productName: ''
},
success: function (res) {
if (res.success) {
var packageObject = res.data, selectStatus = ['<option value="">' + '请选择' + '</option>'];
$.each(packageObject, function (i, item) {
selectStatus.push('<option value="' + item.KEY + '">' + item.VALUE + '</option>')
});
$(".status").empty().html(selectStatus.join(''))
} else {
bootbox.alert(res.message);
}
}
});
}
5、编辑页面的数据，是直接从列表页以json的形式获取到，所以是可以对其进行渲染的
// 编辑
if (type === 'edit' || type == 'detail') {
$("#pop_equity").json2Form(rowInfo);
// 设置24小时制时间
var startTime = rowInfo.beginTime.substr(11, 8);
var stopTime = rowInfo.endTime.substr(11, 8);
var statDateStart = rowInfo.beginTime.substr(0, 10);
var statDateEnd = rowInfo.endTime.substr(0, 10);
$(".startTime").val(startTime);
$(".stopTime").val(stopTime);
$(".statDateStart").val(statDateStart);
$(".statDateEnd").val(statDateEnd);
}
如果需要对列表页的时间，进行拆分，一定是在$("#pop_equity").json2Form(rowInfo)之后
6、对于编辑页面，可以从列表获取，利用隐藏传值的方式，传给js的做逻辑处理，此处需要注意的是：页面name属性一定不能为空，且字段与后台返回的字段一致
7、对于列表页，点击某一列的时候，鼠标总聚焦在最后一列，原因是第一列不是纯数字，需要把纯数字的一列挪动到第一列
8、编辑页面，对于产品模糊下拉控件，总是弹产品不存在，一般是因为列表的数据不存在于下拉控件中
9、radio框反显
if (serviceProduct.confirmType == '2') {
$("input[name=smsConcrete]").each(function () {
if (this.value == serviceProduct.isSmsConfirm) {
this.checked = true;
return;
}
});
$("#smsConcrete").show();
} else {
$("#smsConcrete").hide();
}
10、select框反显
if (serviceProduct.businessAttr === "1") {
self.getPackage('.operServiceProduct_pop #packageSelect');
if (!!serviceProduct.packageId) {
$('.operServiceProduct_pop #packageSelect').val(serviceProduct.packageId);
$('.operServiceProduct_pop #packageSelect').find('option[value=' + serviceProduct.packageId + ']').attr("selected", "selected");
}
} else {
$('.packageService').hide();
}
11. 只有列表初始化，后续明细页的数据，才能从列表页传递到明细页
$.each(xhr.rows, function (i, e) {
$(grid_selector).find("tr").eq(i + 1).data("rowInfo", xhr.rows[i]);
});
$(this).closest("tr").data("rowInfo")