Web开发之js技术经验介绍

最新推荐文章于 2022-09-28 17:45:24 发布

云焰

最新推荐文章于 2022-09-28 17:45:24 发布

阅读量990

点赞数

分类专栏： Web开发文章标签： web开发 jquery function input button

本文链接：https://blog.csdn.net/yan_dk/article/details/7199031

版权

Web开发专栏收录该内容

65 篇文章 2 订阅

订阅专栏

1.基础js技术集合

1.1.js简单方法的调用范例集

运算类

//方法slice的用法，返回一个数组的一段。（仍为数组）

function testslice(){

var arrs = "aa;bb;cc;".split(";");
var arrs1 = arrs.splice(0,arrs.length-1);
alert(arrs1);//显示结果aa,bb,cc，去掉了最后一个元素;

}

//数组Array的使用,以及方法join的使用
function testArray(){
var testArr=Array();
testArr.push("aa");//数组的填值
testArr.push("bb");
testArr.push("cc");
alert(testArr[1]);//显示结果：bb

alert(testArr.length);//显示结果：3（数组长度为3）
var joinString1 = testArr.join();//将数组所有元素值连接起来，默认的连接符为,
alert(joinString1);//显示结果：aa,bb,cc
var joinString2 =testArr.join("-");//将数组所有元素值用-连接起来
alert(joinString2);//显示结果：aa-bb-cc
}

//方法indexOf的使用
function testIndexof(){
alert("aabbccdd".indexOf("b"));//显示结果:2 （b的位置为2）
alert("aabbccdd".indexOf("e"));//显示结果:-1 （e没有找到,返回-1）
}

//日期函数的用法

function testDate(){

var now = new Date();
var time = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" "+now.getHours()+":"+now.getMinutes();
alert(time);//显示结果2012-06-20 11:26

}

</script>

页面类

//页面跳转的用法-

window.location.href='http://www.sina.com'; //运行结果：页面将在本地转向新浪网址

//方法document.writeln的使用
document.write("write的使用:"+"<br>");//运行结果：输出write的使用，再换行
document.writeln("writeln的使用:");//运行结果：输出write的使用，再换行

</script>

2.jquery技术集合

2.1.jquery的简单方法调用实例集

...

</HEAD>

<BODY>

<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>

</BODY>
<script>
//siblings的用法，实例:查找每个p元素的所有类名为"selected" 的所有同胞元素
jQuery("p").siblings(".selected").css("background", "yellow");//显示结果为："Hello Again"文本变为黄色

//找到一个元素(此处为链接testhref)，给它绑定一个click事件

jQuery("a[name='testhref']").bind('click', function() {
alert("你被绑定了!")
});//显示结果：点击链接'test'后，提示"你被绑定了!"。

jQuery(".selected").click(function(){//hover
alert("我被点击了!") ;
})//显示结果：包含selected样式的元素点击时，会提示"我被点击了!"，其他还可加载许多事件如hover(鼠标移动经过时)

</script>

jquery的事件绑定与触发

事件绑定：

$('#listBtn').bind('click',function(event){
window.parent.frames['mainMidFrame'].$("#searchForm")[0].submit();
}) ;

事件触发：

$('#listBtn').click();

jquery实现弹出窗口保存信息后局部刷新父页面数据功能

实现思路是：在父页面中用一个window变量保存打开弹出窗口的引用，并绑定这个window变量的close关闭事件中，用jquery调用父页面中的相应数据区域的刷新(查询)方法，这样就实现了在父页面中的局部刷新。例子代码如下：

//发送-快捷菜单
jQuery("#smsGroupSend").bind('click', function() {

   //取得弹出窗口引用的句柄
    var window = new ZUI.WindowPanel({
        title: '发送短信',
        width: 685,
        height : 450,
        divId:'smsEntryGrid',
        url: '<%=path%>/smsEntry/showResendSms.do?sendSource=1'
    });//source短信来源：1客户关怀
    window.show();
    //绑定关闭时刷新父页面
    window.on("close",function(){
  jQuery.zuiGrid.load({
   id : 'smsEntryGrid', //列表dom结点id
   url : ZUI.PATH + '/smsEntry/searchSmsEntryList.do', //请求数据的url
   pageConfig : { //分页参数，pageSize默认为10
    hiddenName : 'page' //分页隐藏域的名称
   }
  });
})
})

jquery实现html表格table的操作

表格记录显示：

方法1：表格行标识查找插入记录(克隆行方式)

jQuery.ajax({
      type: "GET",
      contentType: "application/json; charset=utf-8",
      url: "<%=path%>/cluster/search?action="+actionArg,
      dataType : "json",
      success: function(results) {
          var msgs=results[0].msg;//取得结果集
          $.each(msgs, function(i, n){//循环取记录数据
              //alert(n.createTime);
              var row = $("#tr_cluster").clone();//表格行标识的复制
              row.find("#cluster_idc").html(msgs[i].idc);
              row.find("#cluster_code").html(msgs[i].code);
              row.appendTo("#table_listCluster");//添加到表标识模板的容器中
          })
       },
      error: function(errmsg){//请求出错处理
            alert("出现错误:"+errmsg);
      }

...

评价：这种方式性能不是很高有比较多的dom查找，消耗性能。

方法2：使用行模板拼接html字符串插入表格

//增加归属行记录
function addOwnerRow(){
//alert("add")
rowCount++;
var rowTemplate ="<tr class=tr_"+rowCount+">"+
    "<td>归属<INPUT TYPE='text' name='owner' ><input type='button' value='+' οnclick='addOwnerRow()'><input type='button' value='-' οnclick='delOwnerRow()'></td>"+
    "</tr>";
jQuery("#tbl_owners tbody").append(rowTemplate);
}
//删除归属行记录
function delOwnerRow(){
//alert("del")
jQuery("#tbl_owners .tr_"+rowCount).remove();
rowCount--;
}

...

<TABLE>
<TR>
<TD>许可号<INPUT TYPE="text" id="licenseId"></TD>
<TD>许可内容参数名<INPUT TYPE="text" id="contentKey" value="maxOwners">
<INPUT TYPE="button" id="queryLicense" value="查询"><INPUT TYPE="button" id="resetForm" value="重置">
</TD>
</TR>
<TR>
<TD>归属<input type='button' value='+' οnclick='addOwnerRow()'></TD>
<TD></TD>
</TR>
</TABLE>

表格行点击变色

方法1：用removeClass方法
需要先增加css样式
.detailinfo_list tbody tr.hilight{background: #99CCFF;}
然后再定义事件监听方法
$(".detailinfo_list tbody tr").live("click",function(evt){
$(".detailinfo_list tbody tr").removeClass('hilight');
$(this).addClass("hilight");
});
方法2：用css方法
$(".detailinfo_list tbody tr").live("click",function(evt){
$(".detailinfo_list tbody tr").css("background","");
$(this).css("background","#99CCFF");
});
这样就可以了，比较简便

表格行记录的上移、下移：

//上移、下移排序
function sort(sortType){
var check_employeeId = document.getElementsByName("employeeId");//这里是一个行记录的选中标识对应的字段
var icount=0;
var data_tr;//移动目标

for(var i=0;i<check_employeeId.length;i++){//循环行记录
    if(check_employeeId[i].checked){
      data_tr=jQuery(check_employeeId[i]).parent().parent();//移动目标赋值，取得选中字段项的父对象（tr行标识）
      icount++;//统计选中的行记录
    }
}
if(icount==0){
    alert("请选择记录!");
    return;
}else if(icount>1){
    alert("一次只能操作一条记录!");
    return;
}

if(sortType=='moveUp'){//上移
    if(jQuery(data_tr).prev().html()==null){ //获取tr的前一个相同等级的元素是否为空
         alert("已经是最顶部了!");
         return;
    }
    jQuery(data_tr).insertBefore(jQuery(data_tr).prev()); //将本身插入到目标tr的前面
}else if(sortType=='moveDown'){//下移
    if(jQuery(data_tr).next().html()==null){
         alert("已经是最低部了!");
         return;
    }
    jQuery(data_tr).insertAfter(jQuery(data_tr).next()); //将本身插入到目标tr的后面
}
//排序后重新取得employeeId值，传递给后端更新排序
var employeeAllIds="";//表格中所有的id组合串
check_employeeId = document.getElementsByName("employeeId");
for(var i=0;i<check_employeeId.length;i++){
    employeeAllIds += check_employeeId[i].value+',';//组装employeeIds
}
employeeAllIds =employeeAllIds.substring(0,employeeAllIds.length -1);
// alert(employeeAllIds); return ;
var orgId='<%=request.getParameter("orgId")%>';
//alert(orgId);return;
if(orgId==null||orgId==''){
    alert("当前机构不能为空！");
    return;
}

   jQuery(function(){
      var options = {
        url: "<%=path%>/emp/sortEmployeeInfo.do",
        dataType : "json",
        data: {employeeAllIds:employeeAllIds,orgId:orgId},
        success: function(responseText, statusText, xhr, $form) {
          //alert("数据成功！");
        },
        error: function(){
          alert("出现错误,无满足条件的记录!");    //请求出错处理
        }
      };
      var form = jQuery('#listForm');
      form.ajaxSubmit(options);
    })//end jquery-function
}

列表框控件的使用

//列表多选
function allChoose(){
var ckA = document.getElementById("allcheckbox");
var ck =document.getElementsByName("employeeId");
if(ckA.checked==true){
  for(var i=0; i<ck.length;i++){
           ck[i].checked=true;
     }
}else{
  for(var i=0; i<ck.length;i++){
         ck[i].checked=false;
     }
}
}
function choose(){
      var ckA = document.getElementById("allcheckbox");
      var ck =document.getElementsByName("employeeId");
      for(var i=0;i<ck.length;i++){
          if(ck[i].checked==false){
             ckA.checked=false;
             break;
          }
      }
}