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

作者


Nirvana-zsy

github地址

对门逐步缓和下来,不时散发出四人,悲伤、感人的哭泣。辉关掉TV,思考片刻,忘情地哼起张学友(英文名:zhāng xué yǒu)的《吻别》。……笔者和你吻别,在无人的街,让风痴笑我不能够拒绝。小编和你吻别,在纷繁的夜,小编的心等着迎接伤悲。

prop():

对于HTML成分本人就隐含的本来面目属性,在处理时,使用prop方法。

那约等于本人能用attr获取到checkbox成分id值,却赢得不到checked值的原由

辉,平素孤独蜗居在出租汽车屋里,失去工作好多少个月了,心绪十分跌落。但做为年轻人,他知道,不可能没有生气,最起码要向邻居者表明,本身还挺好活着。

花色中相遇的题材


两创口,在辉热烈的陪战与祝福中,第①天清晨决绝分手。大约同时,辉收受女对象的对讲机,她说,好久没见了,明天重操旧业看看。

简介


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

主页效果查看

报到页效果查看

(大概加载比较缓慢)

辉烦透了那般骚扰,调出足球节目,开大声音,为每3个名特别减价弹指间疯狂地击掌,叫好。那边嘈杂声,不断传出,反复伴奏着,无聊的辉的情感化表演。

前后台接口表达


甘肃范县      孙三观

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

题材讲述:

同一产生在checkbox身上。。。由于笔者把各种checkbox都放进了bootstrap的下拉列表组件里,它爸是li标签,由于a标签不像label标签一样有1个能跟input关联的for属性,所以本人不能不在li上其它添加点击事件,当点击li时,改变子成分(也便是所点击的li标签下的checkbox)的checked的值,要改变首先就要获取那一个值,于是难点就涌出在那边,笔者用了attr()方法得到不对,可是当笔者测试输出获取的因素的id值时,正确输出了,表达就是attr()方法有错,在作者查了文书档案和技能博客之后才理解,attr(),prop(),分别要在哪些时候用:

辉异常的快乐,他想象着和女对象,甜蜜、开心的恋情以及本人对女对象的各种慰藉。他们在联合只是呆了13日,女对象最终痛哭起来对辉说:“人都是要生存的,没钱一贯不行,分手呢!”

 

见上述github地址

 

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

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值,再整到贰个字符串里边,然后再赋值给1个用来传值的藏身的输入框传给后台。

一初阶自身的代码是这么敲的

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上发问了,等消除了再来填坑(天呐。。。小编怎么留下了那般多坑)

 

战斗持续升温,相当的慢衍生和变化成,鬼哭狼嚎的动武与嘶咬。

attr():

对此HTML成分大家协调自定义的DOM属性,在拍卖时,使用attr方法。

框架


基于Bootstrap,ECharts,JQuery开发

此次本着事先的第一个难题再立异一下,也是关于checkbox。

 

先是讲要达到的职能:

1表单中国科高校室暗中同意是一切中选的;

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

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

如图:

 足球 1

 

js代码的思绪:

 js代码思路非常的粗略,

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

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

3.给拥有科室复选框添加点击事件,那里跟上边不平等,为了实现效果最优方案应该是,获取被选中的复选框,判断个数,小于13(一共有十一个科室)则将“不限”复选框值设为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 }

 

时间


 开头时间:20170308

首先次提交时间:20170310

其次次创新时间:20170321

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