`
阅读更多
1,复制内容并给id重新命名
var $marquee_li_0 = $marquee_scroll.find('li').eq(0);
var $marquee_li_new = $marquee_li_0.clone(true).appendTo('.clone');
$marquee_li_0.after($marquee_li_new);
var $marquee_li_0_id=$marquee_li_0.find("span").attr("id");
var $marquee_li_new_id = $marquee_li_0_id+'_clone';
$marquee_li_new.find("span").attr("id",$marquee_li_new_id);
2,找出id以Marquee_x0开头的div下的所有以ratySpan为class的span集合
①js代码
$("div[id^='Marquee_x0'] span.ratySpan").each(function(index){
  var score = $(this).prev().html();//找出该span前面的元素
  $(this).raty({
    hints:['','','','',''],
    readOnly:true,
    halfShow:true,
    number:5,
    score:score
  });
});
②html代码
<div id="Marquee_x01">
 <ul>
  <li>
   <div class="ratyDiv" style="display:none;">11</div>
   <span class="ratySpan"></span>
  </li>
  <li>
   <div class="ratyDiv" style="display:none;">22</div>
   <span class="ratySpan"></span>
  </li>
 </ul>
</div>
<div id="Marquee_x02">
 <ul>
  <li>
   <div class="ratyDiv" style="display:none;">211</div>
   <span class="ratySpan"></span>
  </li>
  <li>
   <div class="ratyDiv" style="display:none;">222</div>
   <span class="ratySpan"></span>
  </li>
 </ul>
</div>
3,很好的清空功能 readonly属性的则不清空
$(':input','#formId')
       .not(':button,:submit,:reset,:hidden,[readonly]')
       .val('')
    .removeAttr('selected')
       .removeAttr('checked');
4,当键盘输出时触发其他
$(document).ready(function(){
 $("#a").change(function(){
   $("#b").val('test1');
 });
 $("#a").keyup(function(){
   $("#b").val('test1');
 });
});
5,截取字符串长度
function doSubStr(str,index){
     var resultStr;
     if(str!=''&&str!=null){
      var size = str.length;
      if(index<size){
       resultStr = str.substring(0,index);
      }
     }
     return resultStr;
}
6,checkbox与radio
①js代码
//在新增时,页面默认选择第一种规则[radio],并勾选第一种规则所需的数量[checkbox]
$("#formId input[name='rewardSwitchRule']").first().attr("checked",true);
fillFormRsr();
fillFormCk();
//当点击某规则时[radio],自动勾选匹配数量[checkbox]
$("#formId input[name='rewardSwitchRule']").click(function(){
 fillFormRsr();
 fillFormCk();
});
//当所有子复选框勾选后,自动勾选全选
var $ckId = $("input[name='ckId']");
$ckId.click(function(){
  $("#ckList").attr("checked",$ckId.length == $("input[name='ckId']:checked").length ? true : false);
  fillFormCk();
});

function fillFormRsr(){
 var rewardSwitchRule =$("#formId input[name='rewardSwitchRule']:checked").val();
 var rewardSwitch1 = $("#rewardSwitch1_"+rewardSwitchRule).val();
 //根据switch1数量选中个数
 $("#formId input[type='checkbox']").each(function(index){
  if(index<=rewardSwitch1){
   this.checked = true;
  }else{
   $("#ckList").attr("checked",false);
   this.checked = false;
  }
 });
}

function fillFormCk(){
  //选择的单数
 var ck_length = $("#formId input[name=ckId]:checked").length;
 $("#a").text(ck_length);
 //选择的金额
 var ck_fee=0;
 $("#formId input[name=ckId]:checked").each(function(index){
   var ckId = this.value;
   var ckFeeObj = $("#ckFee_"+ckId);
   if(ckFeeObj!=null){
    if(ckFeeObj.text()!=null && ckFeeObj.text()!=''){
     if(!isNaN(ckFeeObj.text())){
      ck_fee = ck_fee + parseInt(ckFeeObj.text());
     }
    }
      }
 });
 $("#b").text(ck_fee);
}

//表单全选
function tableCheckAll(formId){
  var checkbox = document.getElementById('ckList');
  if(checkbox.checked){
   $("#"+formId+" input[type='checkbox']").each(function(index){
    //遍历所有的checkBox,改变勾选状态,true表示勾上,false表示不勾
    this.checked = true;
   }); 
  } else {
   $("#"+formId+" input[type='checkbox']").each(function(index){
    this.checked = false;
   });  
  }
}
//校验form
function checkForm(){
 var ck_length=$("#a").text();
 var ck_fee=$("#b").text();
 var rewardSwitchRule=$("#formId input[name='rewardSwitchRule']:checked").val();
 var rewardSwitch1 = $("#rewardSwitch1_"+rewardSwitchRule).val();
 var rewardSwitch2 = $("#rewardSwitch2_"+rewardSwitchRule).val();
 $("#xx").val(ck_length);
 $("#yy").val(ck_fee);
 //判断是否符合范围
 if((parseFloat(ck_length)>=parseFloat(rewardSwitch1)) && (parseFloat(ck_fee)>=parseFloat(rewardSwitch2))){
  return true;
 }else{
  return false;
 }
}
//提交form
function submitForm(){
 var flag = checkForm();
 if(flag){
  $("#formId").submit();
 }
}
②html代码
<form id="formId" method="post">
 奖励规则: 
 <input id="rewardSwitchRule_9754" name="rewardSwitchRule"  value="1" type="radio"/>
 <input id="rewardSwitch1_1" name="rewardSwitch1"  value="100" type="hidden"/>
 <input id="rewardSwitch2_1" name="rewardSwitch2"  value="300000" type="hidden"/>
    100单×300000元
 <input id="rewardSwitchRule_9762" name="rewardSwitchRule"  value="2" type="radio"/>
 <input id="rewardSwitch1_2" name="rewardSwitch1"  value="10" type="hidden"/>
 <input id="rewardSwitch2_2" name="rewardSwitch2"  value="800000" type="hidden"/>
    10单×800000元
 <input id="rewardSwitchRule_9764" name="rewardSwitchRule"  value="3" type="radio"/>
 <input id="rewardSwitch1_3" name="rewardSwitch1"  value="5" type="hidden"/>
 <input id="rewardSwitch2_3" name="rewardSwitch2"  value="500000" type="hidden"/>
    5单×500000元
 <table class="table">
  <tr>
   <th ><input type='checkbox' id='ckList' name='ckList'  onclick='tableCheckAll("formId")'></th>
   <th>No.</th>
   <th>名称</th>
  </tr>
  <tr>
   <td class="center"><input id="ckId_9695" name="ckId" type="checkbox" value="9695"/></td>
   <td class="center">1</td>
   <td>aaaaa</td>
  </tr>
  <tr>
   <td class="center"><input id="ckId_9634" name="ckId" type="checkbox" value="9634"/></td>
   <td class="center">2</td>
   <td>bbbbb</td>
  </tr>
 </table>
 单数:<span id="a">0</span> 金额总额:<span id="b">0</span>
 <input type="hidden" id="xx" name="xx" value="0"/>
 <input type="hidden" id="yy" name="yy" value="0"/>
    <button onclick="submitForm();" class="btn" type="button">保存</button>
</form>
7,日期格式化
function formartDate(time) {
    var str=time+"";
    str=str.substring(0, str.indexOf(" 00"));
    return str;
}

 

分享到:
评论

相关推荐

    JS-Ajax-jQuery笔记1

    JS-Ajax-jQuery笔记,学习笔记,JavaScript,JS-Ajax-jQuery笔记,学习笔记,JavaScript,

    jQuery笔记1

    本笔记主要探讨 jQuery 的基本选择器和层次选择器,这些是 jQuery 中最基础也是最常用的功能。 ### 一、基本选择器 1. **ID 选择器**:通过元素的 `id` 属性来定位特定的元素。使用 `$("#id")` 的形式,例如 `$("#...

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    jQuery笔记

    1. **简化JavaScript代码**:jQuery 提供了一套丰富的API,使得操作DOM、添加事件监听器、创建动画变得异常简单。 2. **CSS式的元素选择**:类似于CSS的选择器,jQuery可以轻松地选取页面上的特定元素,如通过类名、...

    jQuery基础教程笔记jQuery基础教程笔记

    jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记

    我的JQuery笔记.doc

    《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...

    韩顺平jquery学习笔记及练习

    首先,我们来看看"韩顺平AJAX和jQuery笔记整理.doc"。AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,而jQuery对AJAX提供了出色的封装,使得异步数据交换变得更加简单。在这个文档中,你将了解...

    jquery笔记总结

    完整Jquery笔记总结,xmind思维导图文档,可以下载查看。

    JQuery笔记JQuery笔记

    从给定的文件信息中,我们可以提炼出关于jQuery的一些核心知识点和使用技巧,这将帮助初学者和进阶用户更好地理解和应用jQuery库。 ### jQuery简介与安装 jQuery是一款流行的JavaScript库,它简化了HTML文档遍历、...

    jquery笔记

    ### jQuery核心知识点详解 #### 一、jQuery简介与优势 **定义**: - **框架**:框架是指一种软件设计模式,提供了一套解决方案的基础结构。简单来说,就是使用最基本的编程语言,封装了一系列常用功能(方法),...

Global site tag (gtag.js) - Google Analytics