前端学习总结

本周工作集中在前台页面修改上，主要使用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().