[Java1期] 【厦门JavaEE就业1期-每日总结】JQuery&BootStrap介绍

凉面要趁热吃 · 凉面要趁热吃

黄进安：

案例:

1. 下拉列表的左右选择

事件: click单击事件、dblclick双击事件

表单选择器：$("#selected的id option:selected")--->获取下拉列表中被选择的元素

昨天的全选复选框案例：$("input：checked")--->获取所有被选定的复选框

2. 使用JQuery完成表单校验

事件：blur失去焦点事件、keyup键盘弹起按钮、focus获取焦点事件

事件处理：trigger()对匹配到的所有元素进行操作

只触发jQuery对象集合中第一个元素的事件处理函数

查找：find("选择器"): 查找后代

parent(): 查找父标签

3. 使用BootStrap制作一个响应式页面

开发前提：引入BootStrap的CSS 和 JS

根据使用设备的宽度，调整缩放比例

栅格系统：行的设置：class = "row"设置一行

列的设置：通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数，总列数应该为12，不然会换行

COLDER · COLDER

本帖最后由 COLDER 于 2018-10-18 19:13 编辑

Day06

JQ的两个案例:
1.下拉列表的左右选择:如果要展示列表的所有内容,需要在<select>标签中添加multiple="multiple";
这个案例主要思路是运用页面加载事件(onload/$(function(){})),点击事件(click),双击事件(dblclick),
通过点击添加符号调用点击事件,然后把获得的列表元素对象添加(appendTo)到另一个列表中.

2.表单校验:这个案例的主要思路是首先运用遍历方法把*添加到input的父类td中,也就是添加在输入框的后面,
然后是使用失去焦点事件(blur)来进行信息的校验,最后是用提交事件来判断信息是否符合要求,符合要求则提交成功,
否则反之.
这个案例主要是要理解this,parent所代表的对象是谁,还有triggerHandler和trigger两者的使用区别,还有就是利用find来查找
属性进行移除操作.

BootStrap:HTML,CSS和JS的框架,作用:开发响应式页面,响应式的意思就是只要开发一次,就可以运用在不同终端设备上,不需要多次开发.
主要学习了如何使用BootStrap:要引入BootStrap的JS和CSS文件还有在<head>设定<meta>.
栅格系统:主要是以一行分为12列的思想进行设计.

Nevermo · Nevermo

许煜每日终结
JQuery总结
  multiple将下拉列表的选项显示全部显示出来
  toggle单击切换 toggle(fn1() {},fn2(){}.....);
过滤选择器
  find(“选择器”) parent()父选择器 child([属性])子选择器
trigger(“函数”)绑定所有指定函数  会触发浏览器默认同名行为
triggerhandler(“函数”)不会触发浏览器同名行为只对匹配到的第一个指定函数操作
表单检验
1创建HTML文件引入stylesheet和jq文件
2分析需求
3实现需求
01确定事件 02设置函数 03实现函数
今天唯一关键点链式编程思想 $(fn(){}).事件(fn(){}).....
Bootstrap响应式页面适应各种设备节约开发成本
Container(固定宽度) container-fluid(100%)宽度
栅格系统(将[屏幕分成最多12列的显示数据.超过则自动换行])
  分小屏中小屏中屏大屏
今天讲表单检验案例的时候实在太困了笔记断层了但是课后案例还是会了.还有就是总结发照片太麻烦了我选择打字.

林荣彬 · 林荣彬

林荣彬
   今天主要学习了JQuery下拉列表的左右选择案例和表单的校验案例,其中主要下拉列表的案例主要是使用了selected选择器和appendTo方法进行点击事件和双击事件的操作.表单校验的理解不透彻主要是对选择器和选择器的属性的使用和理解的程度还不够.
其他还学习了:
JQ的事件切换:
toggle(); --单击事件的切换
hover(); --鼠标悬停的切换

JQ的查找:
find();  parent()  childern()

JQ的事件处理:trigger和triggerHandler

BootStrap:是前端响应式的框架.能够让一个网站兼容多个终端,既节约了成本又提高了效率.

使用步骤:
在<head>中添加<meta>标签:<meta name="viewport" content="width=device-width, initial-scale=1">
然后引入CSS和JS文件,

布局容器:
.container类用于固定宽度并支持响应式布局的容器.
.container 类用于100%宽度,占据全部视口的容器

栅格系统:
通过class= "row"来设置一行
定义列：.col-lg-n .col-md-n  .col-sm-n .col-xs-n

追风筝的人哇 · 追风筝的人哇

康元中
   今天学习jQuray 和BootStrap
学习两个案例
         一个是用jQuary完成下拉列表的左右选择
                  用到的文档中四个表单对象属性中的其中一 selected  被选中的下拉列表
         一个是用jQuary完成表单的校验

jQuery中的事件和js中的事件区别就在于js事件加了个on
**  1 有如下事件 ,常用的有click()点击事件 blur() 失去焦点事件 onfocus()获取焦点事件  change 下拉列表内容改变事件
                                                dbclick()双击事件
            其他不常用的事如  keydowm()键盘离开的事件  keydown()键盘按下的事件  keypress()键盘按下后并弹起
                                       mousedown()鼠标按下事件 ,mouseup()鼠标弹起事件    mouseover()鼠标移入事件
                                       mouseout()鼠标移开事件
                                       mouseover()鼠标悬停事件
2 jQuary 中切换事件 **  toggele ()  有两个功能 :
                                          功能一是:  哪个对象触发这个切换事件就会对其  显示和隐藏  如表格 $('td).toggle();
                                          功能二是: toggle()切换事件  toggle(fn1,fn2) ;  点击一下执行fn1,在点击一下执行fn2
                                    注意这个toggele ()事件要用在  jQuary1.9版本之前
                           hover()事件: 相当于给一个对象或者说成是元素添加了一个mouseover和mouseout两个事件
                                             jq对象.hover(function(){},function(){});
jQuary 筛选事件 ------常用的find("选择器")查找所有的后代  parent()父标签 -----今天用在jq完成表单校验
                                    和children("选择器") 所有孩子
**** jQuary事件处理  trigger("选择器") 和triggerHandler("") 两者区别
                        trigger()对匹配到的所有元素进行操作,并这个函数也会导致浏览器同名的默认行为的执行
                        triggerHandler 只触发jQuery对象集合中第一个元素的事件处理函数
  BootStrap 是Html css 和js的框架
            作用是开发相应式的页面 , 就是一个网站能够在各种终端打开入电脑上 ipa  和手机上
                                    这样可以减少维护成本节约开发成本提高开发的效率
重点  : 在使用之前要引入BootStrap的CSS和js
      <link rel="stylesheet" href="../css/bootstrap.min.css" />
      <link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
      <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
      <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> 根据设备宽度调整缩放比例不能少
注意js文件引入的顺序 jquery的js 要在bootstrap的js 之前
栅格系统  行可以通过class="row" 来设置
                  列分为12列定义列：.col-lg-n .col-md-n  .col-sm-n .col-xs-n

finfin12 · finfin12

张育辉
今天一共学习了三个案例
案例一:使用JQuery完成下拉列表左右选择;
主要是涉及了两个知识点:1:任何东西都可以绑定事件,包过文字内容,前提是文字必要要标签包住,绑定id
2: selected 这是一个表单下拉列表属性,代表你选中的那个,跟checked(复选框)一样
案例二:使用JQuery完成表单验证;
1:可以用后代选择器先找到表单input标签,过滤到所有你要必填项,遍历数组,
可以用$(this).parent()拿到每一个input父类标签,在后面添加*号,
2:为必填项(可以用过滤筛选)绑定一个失去焦点事件,获取该父类标签.find("span").remove();(父类标签的后代为span清除掉)为了防止累加
3:判断当前引用是否是你想要的表单,可以用jQ的is方法
4:判断相对应的value值是否为空,来做相对应的描述
5:如果是的话,拿到父类标签.append("样式和文字描述用span标签");
6:为了防止必填项为空也提交表单的话,在表单添加一个submit事件(需要返回值)
点击后可以用trigger("blur")方法,触发必填项失去焦点,没填的话后面有输入错误的样式判断样式有没有,大于0的话,就返回false,不让提交
trigger 和triggerHandler的区别
trigger触达所有的同名事件函数
triggerHandler只触发第一个同名事件的函数
案例三:响应式开发BootStrap:
好处:前段只需要写一次,可以兼容手机端,平板,电脑等等,可以自动适应屏幕大小节约成本,提高开发效率
依赖jq框架,写入之前记得导包,顺序不能乱,还要导入他的css样式,调整缩放比例就是依赖他的css样式
栅格系统:通过class = "row"来设置一行,每一行分为12等分,一行列的分的宽度需要等于12,大于12自动换行;

郁闷客 · 郁闷客

林树德

      今天主要学习了如何使用JQ来完成下拉列表的左右选择,可以通过jq当中的表单选择器来实现效果:分为两种一种是checked针对的是单选框和复选框.selected针对的是下拉列表所选中的,

   JQ中的一些常用的事件及切换事件;

   BootStrap的作用节约开发成本,提高开发效率
响应式:就是一个网站能够兼容多个终端(电脑端,手机端,pad...)

李成林 · 李成林

jQ总结

今天重点事件:focus获得焦点事件;blur失去焦点事件
jq的元素查找

$(cc).parent().find(id[cc]);

<tb>

<input type="txt"id="cc">

<span>啦啦啦</span>

</tb>
jq的事件处理
$(选择器).trigget(事件);
$(选择器).triggetHandler(事件);

BootStrap
作用 : 开发响应式的页面
响应式:就是一个网站能够兼容多个终端(电脑端,手机端,pad...)
节约开发成本,提高开发效率
栅格系统:
<div class="col-md-3 col-sm-6 col-xs-12">:通过class确定显示规格
col-lg:大屏
col-md:中屏
col-sm:小屏
col-sx:小屏

hpb199567 · hpb199567

何平波
今天JQ的很多种方法和写法,我将今天的两个案例拿出来具体说明,加上自己的理解
第一个方法是后台的移除商品案例
具体代码详见案例代码实现
1.$(function(){})  函数的入口(每个函数都必须要有一个函数入口)
2.click():  点击事件(括号里也是一个函数执行function(){})  {}里是点击事件的函数方法代码
3.option:selected 列表里的选定的元素    option列表里的全部元素
4.$("#xx").appendTo() 获取指定的元素添加到指定的位置
5.dblclick: 双击事件(括号里也是一个函数执行function(){})  {}里是双击事件的函数方法代码

)
注意:需先设定好两个下拉列表(两个列表里的元素可以被互相调用),设定id,用来被函数调用,  设

定好4个"转移符",也分别设定好id,方便函数调用.
这里是让"转移符"来点击发生元素转移的事件的.所以是"$("#转移符").click()"
后台的一个商品移除效果要先定义好"转移符"(可以是一个按钮也可以是一个特殊的符号),然后分

好要将哪个列表里的元素通过什么效果移除到哪个列表就会比较容易理解.

第二个方法是使用JQ的高级效果来检测注册表的内容是否符合规范
具体代码详见案例代码实现由于此案例有规定的样式,所以要引入指定的.css文件
引入css的方式<link rel="stylesheet" herf="文件的路径.css">
1.注册表上要定义好id  和样式class="xxx"(id:被函数调用  class:用来创建效果)
2.$(function(){})  函数的入口(每个函数都必须要有一个函数入口)
3.$("form intput.xxx").each()  xxx指的是定义好样式class名,这段代码块的意思是
获得并遍历表单选择器的id为xxx的元素内容
4.$(this).parent().append("<b class='high'>*</b>");
$(this):强调值为本身  parent():父元素  append():添加  括号里是可以写入规定好的样式,加

上class="";
这段代码块的意思是获得它的父元素,然后添加设定好的样式
5.$("form input").blur(function(){
$("form input"):获得所有的input输入项,这里采用的是一个表单选择器
blur():失去焦点事件这里的效果是当事件触发时会发生什么效果
6.var $parent = $(this).parent();
$(this).parent();获得所有输入项的父元素 ,并定义好一个变量名来接收
7.$parent.find(".formtips").remove();
这段代码块的意思是找到find()元素选择器为formtips的元素内容并删除
如果不编写这段代码的话,显现的效果将会重复出现
8. if($(this).is("#username")){
//if($(this).is("#username")):判断这个(this)元素id是不是(is())"#username"
if(this.value == ""){
//如果是的话,那么再判断if(this.value这个元素)是否等于空集
$parent.append("<span class='formtips onError'>用户名不能为空</span>");
//如果不是的话就在这些元素内容外添加一些定义好(formtips onError)的样式和提醒
(formtips onError)这里为甚么会有空格呢?因为是一个后代选择器
}
else{ //否则的话,就是另外一种样式和提醒
$parent.append("<span class='formtips onSuccess'>用户名输入正确</span>");
}
}
9.密码的检测同样可以采用以上方法来进行检测,理论和效果也是一样的

铁木啊童臂 · 铁木啊童臂

汪志阳:
今早还是学习JQ的一些函数,使用JQ完成下拉列表左右选择的案例.在这个案例中
还是找到id调用函数的反复使用,选中左边信息框的调用click函数添加信息到右边
$("#selectLeft option:selected ").appendTo("#selectRight");利用id找到下拉菜单
列表信息,再":selected"选择选中的信息触发函数appendTo追加到另一侧的菜单栏.
下午学习了Bootstrap(Web前端CSS框架),通过Bootstrap可以设计出响应式页面,设计的页面
可以再手机,PAD,PC都可以访问,运用该框架可以排版出任何模板的页面,这样设计的页面更加
美观,实用性更强.
然后是今天的重点案例:表单校验,这个案例整体下来就是现在看的懂各部分的代码锁代表的逻辑
自己独立完成一半,需要明天运用自习在敲几遍,理解方面问题不是很大,就是formtips,trigger等
不常用的,有点模糊,用法不懂,还有就是$(this),this之间转换函数的调用有点乱手脚.

chenyelong · chenyelong

陈叶隆
今天学习了<select>的横向显示multiple属性.强化了对JQ选择器的知识.还初步接触了BootStrap的栅格系统.今天主要做了两个案例:
1,用JQuery做下拉列表的左右选择,主要用到的知识是click事件, 选择器的选择,appendTo的使用.
2,用JQuery完成表单校验,主要用到的知识是元素的遍历:each(function(){});向元素中添加数据:append();找父类:$(“”).parent();找子类:$(“”).find();删除元素:remove();this的使用:this.value; 对匹配到的所有元素进行操作并会导致浏览器同名的默认行为的执行:$(“”).trigger(“方法名”//不带括号); 只触发jQuery对象集合中第一个元素的事件处理函数而不会触发浏览器默认事件: triggerHandler.

丶犯二 · 丶犯二

任佳锋
今天学习了下拉列表的左右选择案例
且通过JQ学习改进了之前的表单效验案例
然后又温习了一遍常用事件:
focus 获得焦点
blur失去焦点
change下拉列表内容改变
click单击
dblclick双击

JQ元素筛选查找:
find("选择器")  查找后代
children(["选择器"])  所有孩子
parent()  父标签

然后了解了JQ的切换事件,额,只是了解并不是很懂..

再之后接触学习了这辈子的第一个框架BootStrap
用于开发响应式的页面,节约了开发成本,提高了开发效率
响应式:就是一个网站能够兼容多个终端(电脑端,手机端,平板等等...)
关于BootStrap的使用步骤
使用前得先要引入BootStrap的CSS 和 JS才行
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>

栅格系统
行  可以通过class = "row"来设置
列  最多只能将视口分为12列

磬辰 · 磬辰

林文辉:

.toggle():指定元素被点击时,在两个或个多个函数之间交换.默认情况是如果元素隐藏则
运行show(),如果可见就运行hide();

下拉列表的左右选择:

1.获取按钮的click事件

2.通过表单对象选择器:selected 来获取选中元素

3.通过appendTo向指定的<select>标签追加元素.

4.通过$("option:select",this)来dblclick()事件来实现在复选框中双击移动数据.

5.$("#rights").dblclick(function(){
$("option:selected").appendTo("#lefts");
}
实现双击全部移动

表单校验:

1.通过选择器和数组在指定的input标签里添加*

2.通过失去焦点事件对各个文本框进行判断,在父类元素使用append()追加提醒.

3.通过链式调用增加keyup()事件和focus事件,并使用triggerHandler()方法调用失去焦点事件.
这两个是用来优化的,比如一点击提示不能为空,键盘输入完就立即校验.

4.最后通过.submit()进行表单的提交,通过trigger()执行表单中的.blur事件,trigger()方法受版本
影响,不同的版本效果可能有差异

BootStrap:
1.来自Twitter,也是主流的前端框架.
2.BootStrap主要分为全局CSS样式,组件,JavaScript插件这3大部分.
3.响应式WEB:最强的地方就是不管你有多少个平台和设备,都能兼容,不需要每种平台都
重复设计同一个页面,极大的提高了效率.
4.栅格系统:BootStrap提供的响应式,并且以设备优先的框架,可以随意屏幕的大小而增加.
5.系统最多会自动分12列,如果超了就会被挤下去.
6.col-lg-n 大桌面显示器,col-md-n中等桌面显示器,col-sm-n小屏幕显示器,col-xs-n超小屏幕显示器
n代表占多少份.

最后关于trigger()和triggerHandler()的个人理解
1.对于浏览器默认的绑定事件,trigger()会全部执行,triggerHandler()只会执行其中的函数,
并不会去执行事件
2.对于其他事件,trigger()依然会全部执行,而triggerHandler()只会执行集合中的第一个

cxming · cxming

陈旭明
学习了下拉列表的左右选择,要记得使用multiple(使下拉列表的元素全部显示),第二个案例是完成表单的验证,知识点有点多,需要多敲几遍,最后学习了bootstrap,可以实现一次开发在多终端运行,页面布局更加灵活。

黄兴磊 · 黄兴磊

要注意的几个事项:
1  addend 是向前面一个元素的尾部添加
ADDEND 把所有匹配的元素追加到另一个指定的元素元素集合中

2 (triggerHandler)  只会影响第一个匹配的元素
trigger 被匹配上的元素都会被影响

3       parent() 是父标签一般后面加个 .addend 意思就是想父标签的尾部添加一段内容

376091692

凌辉:
今天继续学习了jq和bootStrap
使用jq完成了左右下拉列表选择案例
使用的是checked和selected等表单选择器来实现
完成了jq的表单校验案例,
还学习了bootStraop的栅格系统中
通过class = "row"来设置一行
最多存在12列,超过后会自动换行
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
•col-lg-n为大屏                      分辨率>=1200
•col-md-n为中屏                      992<=分辨率<1200
•col-sm-n为小屏                      768<=分辨率<992px
•col-xs-n为超小屏                      分辨率<768px

2902

张清才 jq
今天通过jq重新改造了昨天的三个案例,是代码更加简洁和面相对象;
左右选择下拉框的案例中想要展示下拉元素通过添加multiple="multiple"属性;这个案例中要用到在某个元素后添加文字等,
选择器上还有几个比较会弄混的,
在事件上是类似常用的单击双击,获得,失去焦点还有一些键盘鼠标对应状态的事件.
表单验证案例.这要用到append ,用这个方法要先得到其父类的对象,通过.parent()方法获得在.append()实现添加,这个案例中用于检查表格,给予提示;
BootStrap 用于响应式页面的开发,有助于公司降低开发成本,提高开发效率,这个主要了解我们怎么使用它,下载还BootStrap生产环境的文件后,解压将两个cs和两个js文件,注意导入的顺序,添加一个适屏的标签,<meta name="viewport" content="width=device-width, initial-scale=1">

张述明 · 张述明

张述明
今天的学习内容是jq完成复杂的表单校验使表单的校验更加的丰富更符合现实情况的需求
我们可以通过以下步骤来实现它第一就是给必填的文本框加标签然后通过标签触发函数在文本框后面添加提示词,这里用到parent() 然后是给所有的输入框添加blur, 确定点击的输入项,对元素进行判断, 为表单添加一个submit事件., 执行表单中blur事件., 获得错误信息的长度.,如果长度大于0,就返回false
另外还一就是boop Strap响应式页面的制作学习一个HTML CSS和JS的框架BootStrap 该框架
用于开发响应式页面响应式就是可以在各种设备上面加载兼容性极高功能极为强大
案例准备:设置<meta name="viewport" content="width=device-width, initial-scale=1"/>
根据设备设置缩放比例是完成响应式的重要配置.

seilye · seilye

叶身辉:
今天学习了使用JQ来完成校验表单的案例,parent()获取父类元素之后可以再添加内容
Find()获取子类,可以查找样式来对元素进行删除,
trigger可以选择某个事件将其全部执行一遍,
triggerHandler会选中某个事件,但是只会执行第一次
multiple:下拉列表元素全部显示 Selected:下拉列表被选中
Focus获取焦点事件 Blur是去焦点事件
Toggle可以切换函数执行1.9之后只能显示和隐藏
Hover鼠标移入和移除就会触发
还学习了bootstarp,bootstarp可以用来开发响应式的页面,也就是可以在移动端,PC端,PAD端可以实现相互转换,要使用必须导入官方提供的四个文件,以及添加一个<mate>属性,注意顺序不要打乱

李思贤126 · 李思贤126

李思贤:
首先我们早上学习了一个下拉列表的左右旋转:
主要就是对几个click;dblclick;事件的应用.
要展示列表的所有内容,需要在<select>标签中添加multiple="multiple";
注意append和appendTO的区别

1.JQ事件切换:  toggle(鼠标点击) 和  hover(鼠标悬停)
2.find(“选择器”) parent()父选择器 child([属性])子选择器
3.trigger(“函数”)绑定所有指定函数  会触发浏览器默认同名行为
4.triggerhandler(“函数”)不会触发浏览器同名行为只对匹配到的第一个指定函数操作
表单检验

还做了升级版的用JQ对表单的校验
重点是链式编程那块:以后这种方式估计会很多见
}).keyup(function() {
$(this).triggerHandler("blur");
}).focus(function() {
$(this).triggerHandler("blur");
})

BootStrap(HTML,css,js的框架) 开发响应式页面,响应式就是给多个终端使用(PC,iPad,手机端)
使用步骤:导入BootStrap的css和js,顺序一定不能错.错了可能会出现BUG.
还有<meta name="viewport" content="width=device-width, initial-scale=1">
BootStrap一行只能有12列,超过12列就会自动换行
行  可以通过class = "row"来设置
列的样式
col-lg-n 大屏
col-md-n 中屏
col-sm-n 小屏
col-xs-n 超小屏

帐号		自动登录	找回密码
密码			加入黑马