后台使用前端页面的一些常用js命令等整理

1，frame框架，获取当前页面的顶层页面id是dis_frame的frame中页面id是ceshiId标签的html标签元素
top.frames["dis_frame"].contentDocument.getElementById("ceshiId")

2，jquery循环      i是索引，e是循环的元素
jquery对象.each(function(i,e){})；

3，js测试代码消耗时间
//启动计时器
console.time("testTime");
//停止计时。输出时间
console.timeEnd("testTime");

4，jsp中用jstl表达式遍历数组   accountNumber需要遍历的数组    i.index角标    num数组中的值
<c:forEach var="num" items="${accountNumber}" varStatus="i">
    <td>${i.index}==>${num }</td>
</c:forEach>

5，$(document).ready(function(){
  // Dom加载完成时运行的代码
});
上面方法可简写成jQuery(function(){ });

6，js数组型字符串转换为数组
var abc = "[123,123,322]";
var str1 = eval ("(" + abc+ ")");
alert(str1[0]);

7，js获取复选框选中的值     获取input标签name属性是irfis  type属性是checkbox checked属性是checked选中的标签遍历，此处type 和checked可以省略，所以如下
$("input[name='irfis']:checkbox:checked").each(function(){
            //获得选中的checkbox
            var str=$(this).val();
            //分割数据信息
            var getVal=str.split(",");
            //追加
            alert(getVal[0]);
 });

8，jquery的一些基本语法
$("#lbdm").html(obj.vatCode);              给标签添加文本内容
$("#gfmc").attr("title",obj.taxName);     添加title属性并赋值
$("#id").val(obj.id);      设置value的值
$("#yincang").hide();   隐藏此标签
$("#xianshi").show();   显示此标签
//获取class为fptkys的输入框内容角标为获取的数组拿索引
var fpdm = $(".fptkys")[0].value;                   对象的value获取标签value值，，对象需要是js对象而不是jquery对象
var fphm = $(".fptkys")[1].value;
$("#xiayibu").removeAttr("disabled"); //删除属性disabled属性    disabled属性为置灰不可编辑，有此属性不管值为什么都是置灰，除false外
$(".fptkys").blur(function () {}  blur为鼠标离开时间（应该是光标离开时触发此事件）
keypress //键盘点击事件，按下抬起为一次事件
change //内容改变事件，当input表单中的内容发生改变时触发
var flag = $(obj).is(':checked');    判断复选框是否被选中，返回boolean类型
$("input[name='aaa']")  //获取所有input标签name属性为aaa的标签对象

9，js中 || 以及&&的作用     
 //a && b :如果执行a后返回true，则执行b并返回b的值；如果执行a后返回false，则整个表达式返回a的值，b不执行；
 //     a || b :如果执行a后返回true，则整个表达式返回a的值，b不执行；如果执行a后返回false，则执行b并返回b的值；
 // && 优先级高于 ||;
var a = false;
        var b = null;
        var c = a || b;  //a true返回 a的值，a false 返回b的值
        var d = a && b;  //a true 返回b的值，a false 返回a的值
        alert(c);  //null
        alert(d);  //false
此上方法中null相当于false,,,  所以|| 可以作为判空的方法，，，如何为空的话，得到不空的结果

10，jsp  list集合嵌套map  前台页面拿数据   rateList   list集合名字
<select style="width:152px" id="taxRate" name="taxRate">--%>
        <option value="">请选择</option>
    <s:iterator value="rateList" id="rate" status="ss">
        <option value="<s:property value="map的key"/>"><s:property value="map的key"/>%</option>
    </s:iterator>
</select>

11，s标签中拿request域中的值  request.setAttribute("userType",1)

%{#request.userType==1||#request.userType==2}

12，日期数字类型转换
ognl表达式<s:date name='#obj.synchroDate' format='yyyy-MM-dd hh:mm:ss'/>    #obj.synchroDate在值栈中获取日期
<td><fmt:formatNumber value="${obj.数字}" pattern="#0.#####"/></td>   数字格式转换前台页面显示
jstl表达式对日期进行转换
<fmt:formatDate value="${obj.bDate}" pattern="yyyy-MM-dd HH:mm:ss"/>

13，<button class="btn cancel" οnclick="javascript:window.history.back();">取消</button> 返回上一页按钮
14，jquery的  test() 方法用于检测一个字符串是否匹配某个模式.
RegExpObject.test(string)      RegExpObject正则表达式
例子
var telephone=/^[1]{1}[0-9]{10}/;   正则表达式不要加双引号，否则会被当成字符串
telephone.test(电话号码)

15，//验证单选按钮
    var gender = $('input[name="sex"]:checked').val();
    if(gender == undefined){
        alert("请选择性别");
        return false;
    }

16，siblings()作用
返回带有类名 "start" 的每个 <li> 元素的所有同级元素：
$("li.start").siblings().css({"color":"red","border":"2px solid red"});

17，<input type="file" id="bannerMainImage" name="sheets" class="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG" οnclick="bannerMainImageShow()"/>设置成可以添加多张图片
<input type="file" id="bannerMainImage" name="sheets" accept="image/png,image/jpg,image/gif,image/JPEG" οnclick="bannerMainImageShow()"/>设置成只能添加一张图片

18，

var int = self.setInterval("clock()",1000);定时器1秒调用一次回调函数clock()
window.clearInterval(int);清除定时器

var a = $("#aaa")[0].style.width;js获得css属性
var temp=a.split("%");js对字符串进行切分
var c = parseInt(b);把字符串转换为整数

19，eq()的用法：
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>  改变此项纪录背景色
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
我们可以把该方法应用到这个列表项目集：
$('li').eq(2).css('background-color', 'red');   eq中为负数从后面开始算

 

 

 

常用页面样式css调试

1，.xxx {
        overflow: hidden;  //设置滚动框为隐藏
}

visible    默认值。内容不会被修剪，会呈现在元素框之外。
hidden    内容会被修剪，并且其余内容是不可见的。
scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。

2，绘制table表格的一些属性
<table border="1"  style="width: 90%;margin: auto">
margin:auto  table表格居中,有4个属性可以调整上下左右边距0px 0px 0px 0px          border=1 显示表格边框       width:90% 宽度占据90%
<td rowspan="2"  style="line-height: 20px">销<br>售<br>方</td>
<br>表示换行     line-height:20px  调整字体在tb单元格中的上下位置       rowspan='2' 纵向合并两个单元格
<td style="border:0;"></td>
border:0   去掉tb单元格的边框
<td style="padding: 0px 21px 133px 0px;">
padding: 0px 21px 133px 0px; 调整单元格中内容的上下左右边距
<table border="1px" style="border-left-width: 0">
border-left-width: 0  设置table的左边框宽度为0（也就是隐藏边框），上下左右均可设置
用jquery代码设置样式
$("div[class=dialogContent]").attr("style","display:block;overflow:hidden;padding:5px 5px 1px 5px;border-style:solid;border-width:0 1px;height:491px");

3，table表格横纵向合并
横向合并2行
<td colspan="2">姓名和年龄</td>
纵向合并两行
<td rowspan="2">601班</td>

4，table下单元格内容过长省略成省略号，鼠标悬停显示全部
css     
table属性     table-layout: fixed
table下td属性    width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
td标签   <td  title="eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
title是显示的全部内容

5，&nbsp   html中空格的符号
文本缩进  text-indent: 2em;
p {
                text-indent: 2em;
                /*em是相对单位，2em即现在一个字大小的两倍*/
 }   

6，以滑动方式隐藏所有的 <p> 元素：
$("button").click(function(){
$("p").slideUp();
});