javascript学习心得

原创 2016年08月29日 14:05:11

1.缓存,参考http://www.cnblogs.com/wuchangming/p/5068459.html

1)使用开源组件https://github.com/WQTeam/web-storage-cache

2)使用jquery.ajax.cache配置将同一接口的数据缓存

3)使用jquery.cache,$.data将数据缓存到js对象中

4)使用简单的localStorage或者cookie,注意cookie缓存的数据会在请求的时候同时提交给服务器


2.通用方法

单选框选中值,进行相应的隐藏和显示操作,如果选中了val值我希望显示id为spanId的span

function toggleSpanWithRadio(radioName, spanId, val) {
    if($("input[name='"+radioName+"']:checked").val() != val){
        $("#"+spanId).hide();
    }
    $("input[name='"+radioName+"']").on("change", function () {
        if($("input[name='"+radioName+"']:checked").val() != val){
            $("#"+spanId).hide();
        }else {
            $("#"+spanId).show();
        }
    })
}

复选框选中值,显示和隐藏相对应的span,valArray是一个json对象,比如{"1":"div1","2":"div2"},则说明复选框中value=1选中时显示div1,value=2选中时显示div2

singleVal的用法:假设checkboxes中有一个值为以上全无,在被选中的时候需要将其它的选中值全部清空

另外还有一个要改进的地方就是,在span被隐藏的时候应该要把里面的内容清空

function toggleSpanWithCheckBox(checkBoxName, valArray,singleVal) {
    $("input[name='"+checkBoxName+"']:checked").each(function(){
        if(valArray[$(this).val()]){
            $("#"+valArray[$(this).val()]).show();
        }
    });
    $("input[name='"+checkBoxName+"']").on("change", function () {
        if($(this).is(":checked")) {
            if (singleVal&&$(this).val() == singleVal) {//"1"==1 "1"!==1
                $("input[name='" + checkBoxName + "']").not($(this)).removeAttr("checked");
                for(v in valArray){
                    $("#"+valArray[v]).hide();
                }
            }else{
                $("input[name='" + checkBoxName + "'][value='"+singleVal+"']").removeAttr("checked");
                if(valArray[$(this).val()]){
                    $("#"+valArray[$(this).val()]).show();
                }
            }
        }else{
            if(valArray[$(this).val()]){
                $("#"+valArray[$(this).val()]).hide();
            }
        }
    });
}




版权声明:本文为博主原创文章,未经博主允许不得转载。

javascript学习心得

不论你是想学各种前端框架还是nodejs,都需要深入理解javascript的工作原理以及特性,只有这样才能以不变应万变。最近看了一些js的教学视频与NC的《JS的高级程序设计》这本书,在这里总结一下...
  • freestyle4568
  • freestyle4568
  • 2017年04月24日 22:18
  • 591

浅谈学习JS和JQuery中的几点收获

刚学习完了JQurey的视频,觉得这段时间下来,收获甚是少,想总结一下,由此引来了这篇博客。 一、学习中的那点事         估计每个人都会遇到不想学习的时候,我看完了JS,看css+di...
  • tr1912
  • tr1912
  • 2016年06月19日 21:18
  • 1826

关于javascript事件总结和自己的心得体会

传统事件 1、表单事件 Form元素:submit、reset 按钮类表单元素:click 输入、选择框等元素:change 更换焦点:focus、blur,这两个事件不会冒泡,focusi...
  • fandongyuan521
  • fandongyuan521
  • 2017年04月20日 16:06
  • 363

Javascript学习心得

JavaScript入门例子示例  使用JavaScript在网页中输入文字: document.write("www.dreamdu.com"); document.write...
  • Guido_GT
  • Guido_GT
  • 2013年04月26日 18:02
  • 442

JavaScript学习心得

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示...
  • sd116600
  • sd116600
  • 2007年04月29日 15:57
  • 494

javascript学习心得

一、前言 在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证、浮动广告等,所以那时候JavaScript并没有受到重视。自从AJAX开始流行后,人们发现利用JavaScript...
  • xiaobenxiaohai
  • xiaobenxiaohai
  • 2014年12月30日 23:44
  • 176

javaScript 学习心得

1,document.getElementById方法只能获取到一个对象,即使有多个同名的对象,也只取第一个具有该名称的对象,例如在一个form(名称为myform)中,有三个id="mycheckb...
  • xiaolang85
  • xiaolang85
  • 2008年09月11日 10:50
  • 1727

HTML CSS JavaScript学习心得

一个门外汉对刚开始接触这个行业的认识
  • Medran
  • Medran
  • 2017年10月17日 20:14
  • 331

JavaScript高级程序设计(读书笔记)(一)

JavaScript高级程序设计(JS部分知识汇总)本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考。第一章 JavaScript简介JavaScript发...
  • hc1025808587
  • hc1025808587
  • 2016年05月23日 22:43
  • 9009

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 457
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript学习心得
举报原因:
原因补充:

(最多只允许输入30个字)