前端学习总结
2019-02-28 本文已影响0人
mjinglong
本周工作集中在前台页面修改上，主要使用jquery，对他不太熟悉，记录一些自己使用经验，方便以后查看。
一.简单语句
1.获取后台传来对象的值：
var typeCde = "${midlPo.acctNbrPrvlChgTypeCde}";
2.对象转换为 json
var MessageList=JSON.stringify(a);
3.声明全局变量：
方法外写 var a= "11"; 或者在方法外直接写 a="11";
方法内 window.a="111";
4.判断取值为空
if (!exp && typeof(exp)!="undefined" && exp!=0)
{
alert("is null");
}
二.方法块
1.页面加载后执行的方法
1.在整个页面加载后执行，可能因为某些资源加载没完成造成影响
window.onload = function() {
$("table tr:nth-child(even)").addClass("even"); //这个是jquery代码
};
2.在DOM结构加载完后执行，包括在加载外部文件和图片之前。
window.onload = function() {
$("table tr:nth-child(even)").addClass("even"); //这个是jquery代码
};
简写：
$(function() {
$("table tr:nth-child(even)").addClass("even"); // 任何需要执行的js特效
});
但是在使用过程中，发现附件加载失败会造成自动执行方法不触发，估计是DOM结构没有加载完。后续需要好好了解一下。
3.jstl选择。
<c:if>没有<c:else>可以用<c:choose>来取代结构：
2. <c:choose>
3.
4. <c:when test=""> 如果
5. </c:when>
6.
7. <c:otherwise> 否则
8. </c:otherwise>
9. </c:choose>
4.radio.checkbox 的操作：
1. radio 操作
<input type="radio" name="radiogroup1_${pu[0]}" value="1"/>集成厂商
<input type="radio" name="radiogroup1_${pu[0]}" value="2"/>网建部普工
<input type="radio" name="radiogroup1_${pu[0]}" value="3"/>网建项目经理
<input type="radio" name="radiogroup1_${pu[0]}" value="4"/>运维部普工
<input type="radio" name="radiogroup1_${pu[0]}" value="5"/>运维项目经理
a. 实现传递value值，选中对应的radio选项。
//id为${pu[0]} 值，value 为 radio 的value值
function editUserRole(id,value){
$("input:[name=radiogroup1_"+id+"]").each(function(){
if($(this).val()==value){
$(this).attr('checked','true');
}
});
}
b. 获取radio的value值
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
c.设置第一个Radio为选中值：
$('input:radio:first').attr('checked', 'checked');或者$('input:radio:first').attr('checked', 'true');
注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
3.设置最后一个Radio为选中值：
$('input:radio:last').attr('checked', 'checked');或者$('input:radio:last').attr('checked', 'true');
4.根据索引值设置任意一个radio为选中值：
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....或者$('input:radio').slice(1,2).attr('checked', 'true');
5.根据Value值设置Radio为选中值
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');或者$("input[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');
6.删除Value值为rd2的Radio
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();
8.遍历Radio
$('input:radio').each(function(){
//写入代码
});
遍历指定radio 组的值
$("input:[name=radiogroup1_"+id+"]").each(function(){
if($(this).val()==value){
$(this).attr('checked','true');
}
});
2. select 选中值操作
1. 获取选中项：
获取选中项的Value值： $('select#sel option:selected').val(); 或者 $('select#sel').find('option:selected').val();
获取选中项的Text值： $('select#seloption:selected').text(); 或 $('select#sel').find('option:selected').text();
2. 获取当前选中项的索引值：
$('select#sel').get(0).selectedIndex;
3. 获取当前option的最大索引值：
$('select#sel option:last').attr("index")
4. 获取DropdownList的长度：$('select#sel')[0].options.length;或者$('select#sel').get(0).options.length;
5. 设置第一个option为选中值：$('select#sel option:first').attr('selected','true')或者$('select#sel')[0].selectedIndex = 0
jQuery获取Select选择的Text和Value:
语法解释：
1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
或者 $("#select1 option:selected").text();
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery设置Select选择的Text和Value:
语法解释：
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
2. $("#select_id ").val(4); //设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项：
点击一次，Select将追加一个Option
点击将在Select第一个位置插入一个Option
点击将删除Select中索引值最大Option(最后一个)
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾
jQuery(function () {
jQuery("#selectAllcbx").click(function(){
if(jQuery("#selectAllcbx").attr("checked")==true){
jQuery("[name='cbx']").attr("checked",'true');//全选
jQuery("#delSelectBtn").css("display","");
} else {
jQuery("[name='cbx']").removeAttr("checked");//取消全选
jQuery("#delSelectBtn").css("display","none");
}
});
});
---------------------
作者：shangzhiliang_2008
来源：CSDN
原文：https://blog.csdn.net/shangzhiliang_2008/article/details/29868611
版权声明：本文为博主原创文章，转载请附上博文链接！
三.问题解决
1.页面上按钮无法点击，鼠标不能变成小手的样子
<div class="page-header" id="divid" style="margin-top:50px;">
<h4>设备信息</h4>
</div>
<div style="text-align:right;margin:-55px 10px 0px 0px;z-index:1000;">
<a href="javascript:void(0);" class="btn btn-primary btn-sm" onclick="choosePer(this)" style="text-align:right">选择变更人2</a>
</div>
问题分析：
1、可能是上面的内容把下面挡住了，无法触发，使用z-index无效；最后把按钮放在下一行了。
2、主要原因有几点：
1、首先确保这函数的js被引入到了页面；Are you certain you added the script to the page？
2、在调用该方法时，确保该方法已经被加载了。在浏览器控制台输入该方法，能正常运行。 Are you certain it has loaded before you try to call search(); ?
3、使用onclick绑定函数事件时，必须确保href写成 href="javascript:void(0);" 或者 href="javascript:;" 这样，第1种形式中的void表达式中的0不能少。如果少些了0，会报“Uncaught SyntaxError: Unexpected token )”的错误。
4、函数名不能和页面的某个标签的id名相同。一些浏览器可以通过在js代码中指定ID访问节点元素，然后定义的函数就会被DOM中的元素覆盖了。您需要重命名函数名称或元素ID。
https://stackoverflow.com/questions/12816400/javascript-typeerror-xxx-is-not-a-function
2.单选/多选按钮的回显：选项从数据字典中来，并且根据不同选项显示出不同的内容
1.给显示的页面添加ID
2.保留数据字典那一行不变
3.document.ready添加监听的事件：选中不同结果切换页面，并且将其他的置空
$('input[type=radio][name=hireTypeCde]').change(function() {
var hireTypeCde = $("input[name='hireTypeCde']:checked").val();
if(! hireTypeCde){
}else if(hireTypeCde == "RYJDBH"){
$("#bianhao").show();
$("#fujian").hide();
$("#fujian").find("input").val("");
}else{
$("#fujian").show();
$("#bianhao").hide();
$("#signNbr").find("input").val("");
}
});
4.修改页面：显示切换的功能同上；打开时显示页面使用js获取checked之前选中的值，修改隐藏页面为显示
$(function(){
$("input:radio[value='${prsnFrmMeetMatrPO.appAcdnToCde}']").attr("checked","true");
if($("prsnFrmMeetMatrPO.appAcdnToCde") == "1"){
$("#fujian").show();
$("#bianhao").hide();
}else{
$("#bianhao").show();
$("#fujian").hide();
}
});
3.调用js方法返回值为undefined
产生原因：是Jquery的ajax是异步的，所以大多时候没执行完AJAX就return htmlcontent了，所以会一直返回undefined,
解决方式：添加async: false,即修改此方法为同步
4.在使用removeAttr()移除了radio的checked属性后，使用attr()重新增加不起作用:
("input:radio").prop('checked','true');
即使用prop()可重新配置上该属性；
注意：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr().
