【实践】大三下项目学习笔记

框架


基于Bootstrap,ECharts,JQuery开发

夜深了,辛勤的人民代表大会多已经回到,在屋子里过着小小的幸福的生存。很久,很久,对门的小两口扭了几下钥匙,“嘭”地摔上房门,紧接着,展开铺天盖地的一场互骂。辉早就意识,两伤口忙得像狗一样,吃的比猪还差。那生活,老鼠尾巴长不了。

品类中遇见的难点


两口子,在辉热烈的陪战与祝福中,第三天上午决绝分手。大致同时,辉收受女对象的对讲机,她说,好久没见了,前天回复看看。

attr():

对于HTML元素我们和好自定义的DOM属性,在拍卖时,使用attr方法。

辉十分开心,他想象着和女对象,甜蜜、欢快的恋情以及和谐对女对象的各类慰藉。他们在一起只是呆了三日,女对象最后痛哭起来对辉说:“人都以要生活的,没钱一贯不行,分手啊!”

 

见上述github地址

 

辉烦透了那样干扰,调出足球节目,开大声音,为每多少个地道刹那间发狂地击掌,叫好。那边嘈杂声,不断传来,反复伴奏着,无聊的辉的情感化表演。

前后台接口表达


辉,一直孤独蜗居在出租汽车屋里,失去工作好多少个月了,情感相当暴跌。但做为年轻人,他领会,不可能没有生气,最起码要向邻居者注脚,本人还挺好活着。

简介


大三下软件体系结构课程项目-前端部分

主页效果查看

签到页效果查看

(或许加载比较缓慢)

应战持续升温,极快衍生和变化成,鬼哭狼嚎的殴打与嘶咬。

 ————————–20170321更新———————————

湖北卢氏      孙三观

时间


 发轫时间:20170308

第1回提交时间:20170310

其次次创新时间:20170321

对门逐步缓和下来,不时散发出五人,难受、感人的哭泣。辉关掉TV,思考片刻,忘情地哼起张学友(Jacky Cheung)的《吻别》。……小编和您吻别,在无人的街,让风痴笑作者不能够拒绝。小编和您吻别,在纷扰的夜,小编的心等着迎接伤悲。

1.jq中数组的遍历

标题讲述:

鉴于表单中复选框在传值形式是如此的:

<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="电影">电影
<input type="checkbox" name="hobby" value="音乐">音乐

 

当本人中选足球和音乐四个选拔,向后台传递的键值对串是如此的:hobby=足球&hobby=音乐

只是我们组的后台gg说,能否把具有的值放在三个字符串里传到后台呢?正是如此的机能:hobby=足球+音乐

于是乎自个儿就需求在付给表单前,获取具有的入选的checkbox的value值,再整到二个字符串里边,然后再赋值给二个用来传值的藏身的输入框传给后台。

一初叶笔者的代码是这么敲的

var checkbox_arr=$(".checkbox:checked");
var longstr='';
for(var i=0;i<checkbox_arr.length;i++){
    longstr=longstr+'+'+checkbox_arr[i].val();  
}

 

多么。。。正常的思绪,而且test了须臾间,数组的length是对的,然则,报错了:checkbox_arr[i].val
is not a function…

在网上查了很久,也看了累累技术博客和文书档案,依然没找出原因,但找到了另一种思路:

var val_realstr = "";
$('.showcheckbox:checked').each(function(i){
f(0==i){
    val_realstr = $(this).val();
}else{
    val_realstr += ("."+$(this).val());
}
});

 

那般做是直接通过jq的each()方法,直接对checkboxDOM对象实行操作,each()方法本身正是jq用来操作DOM对象的,那样做就幸免了中档出错。

至于上面包车型大巴措施为啥错,作者在segmentfault上发问了,等消除了再来填坑(天呐。。。作者怎么留下了那样多坑)

 

本次本着事先的第1个难点再立异一下,也是有关checkbox。

 

先是讲要高达的成效:

1表单中科室暗中同意是成套中选的;

2当用户撤销有个别复选框时,“不限”的按钮也要活动撤销;

3当用户选中“不限”复选框,全数科室都要被机关选中。

如图:

 图片 1

 

js代码的笔触:

 js代码思路很简短,

1页面加载后取得具有复选框dom节点然后把checked属性值设为true;

2添加“不限”复选框的点击事件,然后拿走其checked值是true依旧false,是true(此处注意若点击后是选中复选框,那么获取到的值正是true,获取到的不是点击前的值,是点击后的值,自信试验刹那间就领会了);

3.给持有科室复选框添加点击事件,那里跟上边不平等,为了达成效果最优方案应该是,获取被入选的复选框,判断个数,小于13(一共有12个科室)则将“不限”复选框值设为false。

 

遇上的标题:

1.如上述,点击事件函数中拿走checked属性,获取到的值是点击后的;

2.照旧关于复选框的checked属性。

上次翻新的prop和attr的界别没什么毛病,然而作者又发现了震惊的新题材:

在html中的复选框标签里面安装checked属性值,

任凭那样

<input type="checkbox" checked>

 

要么如此

<input type="checkbox" checked="true">

 

恐怕那样

<input type="checkbox" checked="false">

 

结果,这么些复选框,都 会 被 选 中!(经测试,在chrome,ff,safari,ie,edge中都以一律的结果)

本人在mdn查了弹指间checked这么些性子,是那样讲述的

When
the value of the type attribute is checkbox, the presence of this
attribute indicates that the control is selected by default. You can
specify this as checked="checked", or simply just checked.

 表达那一个脾气是从未有过false那一个值的,在今后编码的时候要幸免那一个坑。

 

上边附上源码:

 1 $(document).ready(function(){
 2 
 3     //默认选中所有复选框
 4     var showcheckbox=document.getElementsByClassName("showcheckbox");
 5     for(var i=0;i<showcheckbox.length;i++){
 6         showcheckbox[i].checked=true;
 7     }
 8     //默认选中"不限"复选框
 9     document.getElementById("allcheckbox").checked=true;
10 
11     //如果选中“不限”复选框,那么所有的都要选中
12     $("#allcheckbox").click(function(event) {
13         if($(this).prop('checked')==true){
14              var showcheckbox=document.getElementsByClassName("showcheckbox");
15             for(var i=0;i<showcheckbox.length;i++){
16                 showcheckbox[i].checked=true
17             }
18         }else{
19             
20         }
21     });
22 
23     //如果某个复选框没被选中,那么“不限”复选框就要取消
24     $(".showcheckbox").click(function(event) {
25         if($(".showcheckbox:checked").length<13){
26             document.getElementById("allcheckbox").checked=false;
27         }
28     });
29 }

 

2.jq中attr(),prop()的区别

难点讲述:

如出一辙发出在checkbox身上。。。由于自家把各个checkbox都放进了bootstrap的下拉列表组件里,它爸是li标签,由于a标签不像label标签一样有八个能跟input关联的for属性,所以笔者不可能不在li上此外添加点击事件,当点击li时,改变子成分(约等于所点击的li标签下的checkbox)的checked的值,要转移首先就要获取那1个值,于是难题就出现在那边,俺用了attr()方法赢得不对,然而当自身测试输出获取的成分的id值时,正确输出了,表达正是attr()方法有错,在本身查了文书档案和技艺博客之后才知晓,attr(),prop(),分别要在如何时候用:

作者


Nirvana-zsy

github地址

prop():

对此HTML成分本身就隐含的原来属性,在处理时,使用prop方法。

那也正是本身能用attr获取到checkbox成分id值,却赢得不到checked值的原由