黑马程序员技术交流社区
标题: 【厦门JavaEE就业1期-每日总结】JQuery&BootStrap介绍 [打印本页]
作者: 厦门校区 时间: 2018-5-21 21:12
标题: 【厦门JavaEE就业1期-每日总结】JQuery&BootStrap介绍
同学们，以下是今日任务，以案例为主。今日重点是掌握JQuery案例并了解BootStrap使用，要求每位同学可以完成以下案例，然后以口语化的方式在评论区提交你的每日总结，谈谈你对今日重点知识的理解!
- 使用JQuery完成下拉列表左右选择
- 使用JQuery完成表单校验
- 使用BootStrap制作一个响应式页面
作者: 渣.. 时间: 2018-5-21 21:26
柯威龙
今天学习了jq的下拉列表左右选择,常用事件,切换事件,还有一个BootStrap.
下拉列表中学习了表单选择器,分为两种checked针对的是单选框和复选框.select下拉选
主要是学习了常用的事件,最经常用的有:
focus 获取焦点 change 下拉列表内容改变 click 单击 dblclick 双击
用jq完成表单的校验分为筛选查找和事件处理.查找有find(选择器):查找所有的后代
children(选择器):查找所有的孩子 parent():父类标签
事件处理有trigger 对匹配到的所有元素进行操作.另外一个是triggerHandler是对匹配到的
元素进行处理只执行一次.两个单词的区别差在这里.
BootStrap今天主要是学习对这个软件的使用.怎么下载安装导入.他的作用是开发响应式的
页面,可以手机 平板 电脑上都可以浏览并且不会产生布局的错乱.比较重要的是栅格系统,栅格系统最多可以分为12列
,如果超过了十二列的话,他会自动调整为下一列
作者: 5119 时间: 2018-5-21 21:44
游荣辉
总结
今天运用了JQ以前的属性,函数做了做了一个下拉列表的左右选择案例
还有表单选择器 :checked :selected ....
还加强了我对事件的印象
了解了一下切换事件事件 roggle 的效果 和 hover 的效果
还完成JQ对表单的校验(升级版)
还学习了BootStrap
他是HTML,css,js的框架
可以开发响应式页面,响应式就是一个网站可以给多个终端使用
使用步骤: 导入BootStrap的css和js 再加上<meta name="viewport" content="width=device-width, initial-scale=1">
BootStrap可以有很多行但是一行只能有12列,超过12列就跳转到下一行
列的样式
col-lg-n 大屏
col-md-n 中屏
col-sm-n 小屏
col-xs-n 超小屏
作者: 13163997058 时间: 2018-5-21 21:47
王刘锁
今天通过三个案例来学习了JQ的一些功能和事件还学习了BootStrap
第一个是下拉列表的左右选择案例学习了JQ的一些常用事件这个案例主要是 在后台管理页面中的商品管理上面做的一些修改操作!首先想要完全展示列表中的内容需要给列表加上multiple="multiple"属性,在完成这个案例的效果时我们需要用到JQ中的表单选择器1:checked查找被选中的复选框和单选框
2:selected查找下拉列表中被选中的option元素!
一些常用的事件:focus 获取焦点 blur 失去焦点 change 下拉列表改变
click 单击事件 dblclick 双击事件 keydown 键盘按下 keyup 键盘抬起 keypress键盘按下并抬起
mousedown鼠标按下mouseup鼠标抬起 mousemove鼠标移入 mouseout鼠标移除 mouseover鼠标悬停
案例一,下拉列表的左右选择 首先需要先把JQ的.js文件导入
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
第一步:使用<p></p>标签定义添加的按钮并给<p>标签设定id,
<p id="addRight">>></p> 点击向右边添加选中的商品
<p id="addAll">>>></p>
点击向右边添加全部的商品 右边往左边添加是同样的原理
第二步:通过id获取<p>标签并给其设定点击事件,执行内容是把所有的选中的
下拉列表中的子元素添加到右侧 右侧向左侧添加同样的原理 元素
1.appendTo元素2 把元素1添加到元素2中的最后面
$("#addRight").click(function() {
$("#selectLeft option:checked").appendTo("#selectRight");
});
第三步:点击添加全部的元素 获取添加全部元素的<p>标签 给其设定点击click事件 在执行函数内获取全部的下拉列表子元素并添加到右侧
$("#addAll").click(function() {
$("#selectLeft option").appendTo("#selectRight");
});
第四步:双击添加选中的元素:获取下拉列表并设定双击事件dbclick 执行函数内获取选中的列表子元素option并添加
$("#selectLeft").dblclick(function() {
$("#selectLeft option:checked").appendTo("#selectRight");
});
案例二:表单的校验:主要用到JQ的事件处理功能
1,trigger("事件")在所有匹配到的元素上触发事件 并执行浏览器的默认行为(光标)
triggerHandler("事件")匹配到的所有元素但是只有第一个元素触发事件 不会执行浏览器的默认行为
案例实现:第一步
引入js文件和设定好的css文件:
<link rel="stylesheet" href="css/style2.css" />
<link rel="stylesheet" href="css/main.css" />
<scripttype="text/javascript"src="js/jquery1.11.3.min.js"></script>
第二步:给所有的必填项添加class="require"属性
同过class属性获取全部的必填项,找到并向其父标签中添加红色的*号
$("form input.require").each(function() {
$(this).parent().append("<b class='high'> *</b>");
});
这里的this是js中的所以要转成JQ中的才能使用append class="high" high属性是已经在css文件中定义好的
第三步:给必填添加blur事件 上面已经获取必填项,只需给其设定blur事件
执行函数中的内容是判断对应的值是不是为空 为空就给出错误提示 不为空给出正确提示 //[这里的class属性都是css中设定好的]
//获取输入项 添加blur事件
$("form input.require").blur(function() {
//获取父元素
var $parent = $(this).parent();
//清除提示信息
$parent.find(".formtips").remove();
if (this.value=="") {
$parent.append("<span class='formtips onError'>"+this.name+"不能为
空!"+"</span>")
}else{
$parent.append("<span class='formtips onSuccess'>"+this.name+"输入
正确"+"</span>")
};
})
第四步:给列表设定提交属性submit执行函数中获取错误提示的长度 长度大于0返回false取消提交 先执行一遍blur避免没有错误提示也没有填写信息就
提交的bug 然后获取所有的错误提示 返回一个数组 判断数组的长度如果大于0说明有错误就return false 取消表单的提交
/为表单元素添加一个submit事件.
$("form").submit(function() {
$("form input").trigger("blur");
if (($(".onError").length)>0) {+
return false;
}
})
案例三:响应式页面的制作 学习一个HTML CSS和JS的框架BootStrap 该框架
用于开发响应式页面 响应式就是可以在各种设备上面加载 兼容性极高 功能极为强大
案例准备:设置<meta name="viewport" content="width=device-width, initial-scale=1"/>
根据设备设置缩放比例 是完成响应式的重要配置
引入相关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 可以通过class属性设置每一格占的列数只要
最后的列数和为12即可
class设置格式:n是每格占的列数
•col-lg-n 大屏
•col-md-n 中屏(电脑)
•col-sm-n 小屏 (ipad)
•col-xs-n 超小屏 (手机)
作者: 厦门黑马王子 时间: 2018-5-21 21:51
郑雪平
今天学习两部分内容:一.使用JQ实现表单的校验;二.使用BootStrap实现响应式网页的功能.要使用JQ实现表单的校验功能需做准备工作:1.引入之前写好的注册页面;2.引入JQ的.JS文件,3.为必填项添加一个*号;4.为输入项添加BLUR事件等.
第二部分内容是使用BootStrap开发一个响应式页面,BootStrap是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>且对导入顺序有要求,顺序错误有可能会导致无法正常使用.
作者: rkko 时间: 2018-5-21 21:52
杜石苇
HTMLday6 总结
JQ继续加强学习, 并了解了BS的使用
bs是什么? 即前端页面搭建的标准化框架工具，已经写好了css.js样式，只需要拿来用即可。
怎么用bs呢？主要是通过使用不同的类增加效果，每一种类，对应的功能不同。
bs好处：增加了开发效率，页面设计更加美观,支持响应式开发。
使用JQuery完成下拉列表左右选择
思路是设置左右选中下拉框的ID 如果下拉框的选项被选中就 利用appedto()追加到左侧或者右侧
全选就是下拉框的所有选项都追加到左侧或者右侧.不用设置selected才append()
还有配合几个事件 比如双击选中的移动到左右侧就是 dblclick()事件 设置双击事件
$("option:selected",this).appendTo("#selectLeft")
使用JQuery完成表单校验
思路就是以前的JS是inner.html 现在JQ可以利用选择器还有blur追加返回信息到页面内 比如 输入正确或者错误
可以用筛选父标签 parent() 在同一个TD下面 appen信息
首选是 获取所有所有的输入项的blur焦离事件
然后判断是哪个元素 比如username 或者password 然后在判断输入项内容是否正确 比如是否为空
如果为空就在父标签父标签 parent() 下append 一个span 写入正确或者错误
优化的话也可以用链式编程 后面.keyup().focous() 里面用triggerHandler 文档处理方法检测表单内容
表单提交的话就用 submit里面写入方法 用trigger 来检测错误长度 有错误就返回fasle
使用BootStrap制作一个响应式页面
这个官方都有学习文档 看看就好
首先表头的几个格式引入要正确
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！确保支持响应式布局 -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!-- 设置栅栏式布局-->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container"><!--或者container-fluid-->
<div class="row"> -- col-xs-4 : 指小于768px的小设备
<div class="col-xs-4">11</div> -- col-sm-4 ：指>=768px的设备
<div class="col-xs-4">22</div> -- col-md-4 ：指>=992px设备
<div class="col-xs-4">33</div> -- col-lg-4 ：值1200px设备
</div>
<div class="row">
<div class="col-md-4">11</div>
<div class="col-md-4">22</div>
<div class="col-md-4">33</div>
</div>
<div class="row">
<div class="col-sm-4">11</div>
<div class="col-sm-4">22</div>
<div class="col-sm-4">33</div>
</div>
<div class="row">
<div class="col-lg-4">11</div>
<div class="col-lg-4">22</div>
<div class="col-lg-4">33</div>
</div>
</div>
作者: Yanmo_ 时间: 2018-5-21 21:55
颜琳琳
一.今日通过学习下拉列表案例学习了JQuery的<select></select>在在展示内容时候需要使用到multiple=”multiple”属性,该属性使下拉列表中的内容有多行.实现的效果用到了表单对象选择器1. :checked 选中的(用于当选和复选) 2. :selected 选中的(下拉列表).
二.学习了JQuery的切换事件:1. toggle(function(){},function(){})给元素添加一个单击事件,轮流执行多个函数(注:toggle只适用JQuery1.9版本之前) 2. hover(function(){},function(){})和toggle用法相同,但是hover是用于鼠标悬停和鼠标移开执行,
三.学习了JQuery的查找:1.find(“选择器”) 查找后代; 2. children([“选择器”]) 查找所有孩子; 3.parent() 父标签; 还有JQuery事件的处理trigger和triggerHander的区别在于,trigger在执行事件是执行全部,而triggerHander在执行事件时只执行第一个元素处理函数.
BootStrap主要学会引入的方法:
<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>
注意:导入的顺序不能改变,否则就会可能出错.
使用BootStrap还需要导入:
<meta name="viewport" content="width=device-width, initial-scale=1">
栅格系统:(使用该系统可以使页面在不同使用端都可以看到,不会改变其格式之类的)
通过class = "row"来设置一行
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数(注意:列最多将视口分为12列)
•col-lg-n 大屏 分辨率>=1200
•col-md-n 中屏 992<=分辨率<1200
•col-sm-n 小屏 768<=分辨率<992px
•col-xs-n 超小屏 分辨率<768px
作者: 六道的骸6 时间: 2018-5-21 21:55
张裕
今天练习使用JQ做到下拉列表的左右选择
JQ的事件切换
toggle() 单击事件的切换 鼠标点击 轮流执行括号内的函数
hover() 鼠标悬停的切换 鼠标悬停 轮流执行括号内的函数
表单校验 方法太多需要看案例 不熟练 视频太多 练习太少 没有作业来锻炼思考能力 每天感觉都在死记硬背 学习效率差
BootStrap
开发响应式页面 实现了一个网站兼容多个平台 节约了开发成本 提高了开发效率
作者: 偏离X 时间: 2018-5-21 21:58
郭明杰
multiple="multiple" 可以让下拉列表全部显示
selected 下拉列表的选中项
checked 复选按钮的选中
[使用JQ完成表单校验]
[JQ的查找]
find("选择器") 查找后代
chidren("[选择器]") 所有孩子
parent() 父标签
[JQ的事件处理]
*trigger 跟 triggerHandler的区别
[BootStrap]
是JS CSS JQ的框架,实现在不同的设备上访问一个页面
[BootStrap的全局CSS]
*布局容器
.container 固定宽度
.container-fluid 100%宽度
*栅格系统
使用.row样式定义栅格的行
定义列:col-lg-n(992px-1200px) ,col-md-n (>=992) ,col-sm-n (>=768) ,col-xs-n(<768)
**n最后相加必须等于12
作者: Eclipse启动 时间: 2018-5-21 22:00
郑阳阳
今天继续学习了JQ.
下拉列表的左右选择案例,<select>全部显示下拉框需要加上multiple属性.
表单选择器checked被选中的单选框或复选框,selected被选中下拉列表
表单校验案例,查找:find("选择器")查找后代 children(["选择器"])所有后代 parent()父标签
事件处理trigger() 触发所有事件,浏览器的同名事件也会一起执行
triggerHandler 不会触发浏览器事件,只触发第一个事件
BootStrap 是HTML,CSS和JS的框架 是用于开发响应式页面,就是能兼容多种终端,能够节约成本提高效率.
使用前需要导入的
<meta name="viewport" content="width=device-width, initial-scale=1">根据设备宽度调整比例
<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>
BootStrap的栅栏系统就是响应式页面的关键
通过class来设置行与列,行通过class="row"来设置一行
列最多设置12列,超出会自动换行.
大屏col-lg-n 中屏(电脑端)col-md-n 小屏(pad端)col-sm-n 超小屏(手机端)col-xs-n
作者: sts 时间: 2018-5-21 22:00
苏海斌
今天主要讲了JQuery的常用事件
通过JQuery事件可更方便的完成一些操作,使代码更简洁
今天的一些重点:
表单选择器
:checked
:selected
常用事件:
focus 获得焦点事件
blur失去焦点事件
change下拉列表内容改变
click单击
dblclick双击
JQ筛选查找:
find("选择器") 查找后代
children(["选择器"]) 所有孩子
parent() 父标签
JQ事件处理:
trigger:
对匹配到的所有元素进行操作
会导致浏览器默认行为执行
triggerHandler:
不会触发浏览器默认事件
只触发JQuery对象集合中第一个元素的事件处理函数
返回事件处理函数的返回值(不是具有可连接的JQuery对象)
BootStrap作为框架用于开发响应式页面,节约开发成本,提高开发效率
所谓响应式就是一个网站能够兼容多个终端
重点是使用步骤:
1.引入BootStrap的CSS和JS
2.根据设备宽度调整缩放比例
以及栅格系统
作者: w849027724 时间: 2018-5-21 22:00
吴利君
今天继续学习了JQuery的一些方法，有两个案例，第一个是表单效验，这个案例挺不错了，可以练习很多的事件，首先是blur这个事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的，因此我们可以通过这个事件对用户输入进行跟踪判断，然后是后面的提示框，有很多方法，一起的方法也可以，就是在input后面加一个span标签，然后可以对其css样式进行修改，成功的话使用成功的图片，颜色，然后对他的属性也进行修改。当然案例里面的这种直接添加的会比较简单。
这个案例还有一个知识要注意，就是triggerHandler和trigger这个两个事件处理。要注意的是triggerHandler与trigger有三种，首先是他不会触发浏览器默认事件。其次是只触发jQuery对象集合中第一个元素的事件处理函数，最后是这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined。因此，我们需要分场合使用这两个事件，还有就是版本的问题，1.9以下的才可以用。
然后是BootStrap这个是轻量级的一个前端框架，是响应式的，可以一次开发多平台使用，很不错，也很多网站使用，不过就是调试麻烦，对于没有天赋的很难受。
作者: 李志勇 时间: 2018-5-21 22:01
李志勇:
jquery:
<select>中表单选择器:checked后又学:selected
通过这个做了两个下拉列表的互相移动; 其中还有一个属性multiple="multiple" 可以把下拉列表的元素展现出来;
进一步学习了jQuery中的常见事件
切换事件 toggle()点击事件(适用在1.9版本以前的版本)不填参数实现隐藏和显示,填参数可以设置函数;
hover ()把鼠标移到 移出来触发函数 参数可以添加函数(实际是添加mouseover和mouseout这两个事件);
在着就是表单进一步的优化 对用户名 密码等进行进一步的改进 对代码进一步的精简;
通过 $().each(function(){})对获取的对象数组遍历 统一append添加文本;
在通过blur事件$(this).is("")判断来对不同的对象进行不用条件的修改 $(子类对象).parent().append("...");
表单的事件 通过学习的trigger()来对所有有blur事件的触发来判断条件表单是否符合提交要求;
bootstrap来开发响应式的网页
个人感觉就是学了 引用bootstrap的css和js中的bootstrap.min.css bootstrap-theme.min.css
jquery-1.11.3.min.js bootstrap.min.js这两个css文件两个js文件 顺序不要错 有可能出问题;
在就是这个表
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
?col-lg-n 大屏 分辨率>=1200
?col-md-n 中屏 992<=分辨率<1200
?col-sm-n 小屏 768<=分辨率<992px
?col-xs-n 超小屏 分辨率<768px
格式class="col-lg-n"
作者: 一梦 时间: 2018-5-21 22:02
陈世彪:
今天学习了JQuery和BootStrap
使用JQuery完成下拉列表左右选择
要先使用click事件给>>做一个动作,使点击>>时可以触发向左或向右添加
使用双击向左或向右添加时,要使用dblclick双击触发事件.
全部添加时,直接使用,不用再筛选
使用JQuery完成表单校验
要先获取父标签才能外表格同一行后面添加东西
再通过父标签查找到添加的css样式,使用remove()将其删除
再获取this.value来判断文本框是否为空,不为空时添加正确,否在添加错误
还可以添加.keyup键盘弹起和.focus获得焦点来完善.
最后,使用submit的方法再提交时先进行判断,没有错误时才能提交
使用BootStrap制作一个响应式页面时
要先引入css和js,顺序不能乱,因为bootstrap里的功能很多依赖于jquery
<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列,超过后会自动换行
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
•col-lg-n为大屏 分辨率>=1200
•col-md-n为中屏 992<=分辨率<1200
•col-sm-n为小屏 768<=分辨率<992px
•col-xs-n为超小屏 分辨率<768px
作者: 沅瞻 时间: 2018-5-21 22:02
詹源
今天学习了使用表单选择器完成JQ的下拉列表的左右选择,JQ的一些常用事件,JQ的切换事件,使用JQ完成表单校验,
以及BootStrap开发响应式页面的一些原理.
下拉列表左右选择,通过表单选择器checked和selected来实现,checked针对单选和复选框
selected针对下拉选项
常用事件:click 单击
dblclick双击
focus 获得焦点事件
blur 获得焦点事件
change 下拉列表内容该表
mousemove 鼠标移入
mouseout 鼠标移除
mouseover 鼠标悬停
切换事件 toggle:
JQ对象.toggle(function(){
//点击第一下
),function(){
//点击第二下
)...);
hover:
JQ对象.hover(function(){
//第一个函数相当于mouseover
),function(){
//第二个函数相当于mouseout
)};
BootStrap:HTML,CSS,JS框架;开发一次可以在多个终端上使用网站.省去多次编写.
作者: 厦门陈强 时间: 2018-5-21 22:04
陈强
JQ and BootStrap的一天
今天关于JQ的案例改进,其实新的内容并不难,而为什么有时候总觉得思路没有跟上,其实根本原因还是在于对于选择器的使用,和选择器之间的组合使用不够熟悉,然后就是一些新的内容的使用时一些注意事项:
1 , 案例下拉列表选择中,需要对select进行处理------multiple---将下拉列表的所有信息显示出来;
2 , 案例表单校验中,有一个新的方法is( )---用于判断两个对象是否匹配
3 , BootStrap是前端响应式框架,其前期的准备工作主要有两部分,其一是引入文件,其二是添加<meta>标签,有一个注意事项是,不论在哪一种前端平台上,列数相加都必须是12.
BootStrap的使用,相较于前期使用表格和DIV进行页面布局,更加方便使用.
作者: 小故事 时间: 2018-5-21 22:06
谢洪彬:
jQuery高级
今天学习了jQuery和BootStrap ,并使用jQuery完成了注册页面数据的校验
案例数据校验注意事项:
1.要为某元素后面添加元素,必须先获取某元素的父元素在进行添加.
jQuery父元素的方法: Parent()
jQuery添加的元素(举例: A, B ):
1.$(“ A”) append(“B”) 可以理解为把B添加到A下面
2.$( “A”)appendTo(“B”) 可以理解为把A添加到B下面
$(this)和this的区别
Val() 和valur的区别
使用Find() 查找对应的样式进行删除
Trigger和triggerhandler执行事件的区别:
trigger:全部执行
triggerhandler:只执行一次
表单元素:
multiple:下拉列表元素全部显示
Selected:下拉列表被选中
链式编程:可以在时间的后面在进行时间的添加
BootStrap(响应式开发) :可以让所有设备兼容(例:手机,ipd,pc)
导入文件 :注意添加顺序
添加<meta>标签 调整缩放比例 响应式的根本
布局方式:分为占满和不占满
作者: 光宇 时间: 2018-5-21 22:46
侯玉林
今天主要学习了两个jq的案例,和讲了bootstrap的一个简单介绍和基本的使用.
作者: 郑学馨 时间: 2018-5-21 22:47
郑学馨
什么是bootstrap:bootstrap是一种框架
bootstarp有什么作用:用来开发响应式页面(
的)(就是在不同平台上都能兼容使用的页面,例如pc端的页面,转
移到移动端也能正常使用)
multiple是什么意思?有什么作用?
multiple是HTML中<select>标签的属性,它的作用是:
multiple="multiple";表示该下拉列表可以实现多选功能!
表单选择器(常用):
表示选中的情况: selected:表示下拉选项被选中的
checked:表示单选框或者复选框被选中的
trigger是什么?用来干什么?
JQ对象.trigger("触发事件"):将JQ对象触发某个事件,注
意:trigger触发的是JQ对象里面所有符合要求的元素对象!
triggerHandler是什么?用来干什么?
JQ对象.triggerHandler("触发事件"):将JQ对象触发某个事件,
注意:triggerhandler触发的是JQ对象里面符合要求的第一个元
素对象.
this的用法:就近原则,
作者: 名字被人注册了 时间: 2018-5-21 23:13
刘文峰
两个下拉列表之间的数据相互转移案例:
将一个下拉列表中要转移的数据选中($(“下拉列表1 option:select”)),通过事件触发(例如单机或双击)就可以将数据转移至另一个下拉列表中,一次性全部转移则只要把数据全部选中(“option:select”)就可以了
依次执行多个函数
toggle()函数内写入其他多个函数,各个函数之间以逗号分隔,就可以轮流执行多个函数了
hover()函数内写入两个函数,以逗号分隔,第一个相当于鼠标悬停时的事件,第二个相当于鼠标移开的事件
复杂的表单校验
先为必选按钮后面添加记号:获得父标签在往里面添加元素
给所有input标签添加失去焦点事件:
将文本框后面的内容清除:父标签.find(“要删除的元素”).remove
判断当前对象是哪个文本框,判断文本框里的内容添加相应的提示
在上传表单前触发失去焦点事件
Boodstrap是html,css,js的一个框架,可以制作响应式页面,即可以同时给电脑,手机,pad等终端使用而不会降低浏览效果的页面.使用boodstrap前要先将boodstrap的一些文件先导入到html文件中,
<meta name="viewport" content="width=device-width, initial-scale=1">可以根据设备的屏幕宽度,调整缩放比例
<link rel="stylesheet" href="../css/bootstrap.min.css" />(boodstrap的css文件)
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<script type="text/javascript"src="../js/jquery-1.11.3.min.js" ></script>
(jq文件需在js文件之前导入)
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
Boodstrap有lg md sm xs四种类型可以适应各种尺寸的屏幕
Class=row可用于设置行 ;class=col-屏幕类型-n设置列;每一行最多有12列,超过12列会自动换行.
作者: 凉面要趁热吃 时间: 2018-5-21 23:23
黄进安：
案例:
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 时间: 2018-5-21 23:26
本帖最后由 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 时间: 2018-5-21 23:29
许煜 每日终结
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列的显示数据.超过则自动换行])
分小屏 中小屏 中屏 大屏
今天讲表单检验案例的时候实在太困了 笔记断层了 但是课后案例还是会了.还有就是总结发照片太麻烦了 我选择打字.
作者: 林荣彬 时间: 2018-5-21 23:36
林荣彬
今天主要学习了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
作者: 追风筝的人哇 时间: 2018-5-21 23:37
康元中
今天学习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 时间: 2018-5-21 23:46
张育辉
今天一共学习了三个案例
案例一:使用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自动换行;
作者: 郁闷客 时间: 2018-5-21 23:52
林树德
今天主要学习了如何使用JQ来完成下拉列表的左右选择,可以通过jq当中的表单选择器来实现效果:分为两种一种是checked针对的是单选框和复选框.selected针对的是下拉列表所选中的,
JQ中的一些常用的事件及切换事件;
BootStrap的作用节约开发成本,提高开发效率
响应式:就是一个网站能够兼容多个终端(电脑端,手机端,pad...)
作者: 李成林 时间: 2018-5-21 23:55
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 时间: 2018-5-21 23:56
何平波
今天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.密码的检测同样可以采用以上方法来进行检测,理论和效果也是一样的
作者: 铁木啊童臂 时间: 2018-5-22 00:04
汪志阳:
今早还是学习JQ的一些函数,使用JQ完成下拉列表左右选择的案例.在这个案例中
还是找到id调用函数的反复使用,选中左边信息框的调用click函数添加信息到右边
$("#selectLeft option:selected ").appendTo("#selectRight");利用id找到下拉菜单
列表信息,再":selected"选择选中的信息触发函数appendTo追加到另一侧的菜单栏.
下午学习了Bootstrap(Web前端CSS框架),通过Bootstrap可以设计出响应式页面,设计的页面
可以再手机,PAD,PC都可以访问,运用该框架可以排版出任何模板的页面,这样设计的页面更加
美观,实用性更强.
然后是今天的重点案例:表单校验,这个案例整体下来就是现在看的懂各部分的代码锁代表的逻辑
自己独立完成一半,需要明天运用自习在敲几遍,理解方面问题不是很大,就是formtips,trigger等
不常用的,有点模糊,用法不懂,还有就是$(this),this之间转换函数的调用有点乱手脚.
作者: chenyelong 时间: 2018-5-22 00:19
陈叶隆
今天学习了<select>的横向显示multiple属性.强化了对JQ选择器的知识.还初步接触了BootStrap的栅格系统.今天主要做了两个案例:
1,用JQuery做下拉列表的左右选择,主要用到的知识是click事件, 选择器的选择,appendTo的使用.
2,用JQuery完成表单校验,主要用到的知识是元素的遍历:each(function(){});向元素中添加数据:append();找父类:$(“”).parent();找子类:$(“”).find();删除元素:remove();this的使用:this.value; 对匹配到的所有元素进行操作并会导致浏览器同名的默认行为的执行:$(“”).trigger(“方法名”//不带括号); 只触发jQuery对象集合中第一个元素的事件处理函数而不会触发浏览器默认事件: triggerHandler.
作者: 丶犯二 时间: 2018-5-22 00:35
任佳锋
今天学习了下拉列表的左右选择案例
且通过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列
作者: 磬辰 时间: 2018-5-22 08:49
林文辉:
.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 时间: 2018-5-22 09:08
陈旭明
学习了下拉列表的左右选择,要记得使用multiple(使下拉列表的元素全部显示),第二个案例是完成表单的验证,知识点有点多,需要多敲几遍,最后学习了bootstrap,可以实现一次开发在多终端运行,页面布局更加灵活。
作者: 黄兴磊 时间: 2018-5-22 09:11
要注意的几个事项:
1 addend 是向前面一个元素的尾部添加
ADDEND 把所有匹配的元素追加到另一个指定的元素元素集合中
2 (triggerHandler) 只会影响第一个匹配的元素
trigger 被匹配上的元素都会被影响
3 parent() 是父标签 一般后面加个 .addend 意思就是想父标签的尾部添加一段内容
作者: 376091692 时间: 2018-5-22 09:13
凌辉:
今天继续学习了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 时间: 2018-5-22 09:15
张清才 jq
今天通过jq重新改造了昨天的三个案例,是代码更加简洁和面相对象;
左右选择下拉框的案例中想要展示下拉元素 通过添加multiple="multiple"属性;这个案例中要用到在某个元素后添加文字等,
选择器上还有几个比较会弄混的,
在事件上是类似 常用的 单击 双击,获得,失去焦点 还有一些键盘 鼠标对应状态的事件.
表单验证案例.这要用到append ,用这个方法要先得到其父类的对象,通过.parent()方法获得 在.append()实现添加,这个案例中用于检查表格,给予提示;
BootStrap 用于响应式页面的开发,有助于公司降低开发成本,提高开发效率,这个主要了解我们怎么使用它,下载还BootStrap生产环境的文件后,解压将两个cs和两个js文件,注意导入的顺序,添加一个适屏的标签,<meta name="viewport" content="width=device-width, initial-scale=1">
作者: 张述明 时间: 2018-5-22 09:15
张述明
今天的学习内容是jq完成复杂的表单校验 使表单的校验更加的丰富更符合现实情况的需求
我们可以通过以下步骤来实现它 第一就是给必填的文本框加标签然后通过标签触发函数在文本框后面添加提示词,这里用到parent() 然后是给所有的输入框添加blur, 确定点击的输入项,对元素进行判断, 为表单添加一个submit事件., 执行表单中blur事件., 获得错误信息的长度.,如果长度大于0,就返回false
另外还一就是boop Strap响应式页面的制作 学习一个HTML CSS和JS的框架BootStrap 该框架
用于开发响应式页面 响应式就是可以在各种设备上面加载 兼容性极高 功能极为强大
案例准备:设置<meta name="viewport" content="width=device-width, initial-scale=1"/>
根据设备设置缩放比例 是完成响应式的重要配置.
作者: seilye 时间: 2018-5-22 09:19
叶身辉:
今天学习了使用JQ来完成校验表单的案例,parent()获取父类元素之后可以再添加内容
Find()获取子类,可以查找样式来对元素进行删除,
trigger可以选择某个事件将其全部执行一遍,
triggerHandler会选中某个事件,但是只会执行第一次
multiple:下拉列表元素全部显示 Selected:下拉列表被选中
Focus获取焦点事件 Blur是去焦点事件
Toggle可以切换函数执行1.9之后只能显示和隐藏
Hover鼠标移入和移除就会触发
还学习了bootstarp,bootstarp可以用来开发响应式的页面,也就是可以在移动端,PC端,PAD端可以实现相互转换,要使用必须导入官方提供的四个文件,以及添加一个<mate>属性,注意顺序不要打乱
作者: 李思贤126 时间: 2018-5-22 09:26
李思贤:
首先我们早上学习了一个下拉列表的左右旋转:
主要就是对几个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 超小屏
作者: 柯建程 时间: 2018-5-22 09:28
柯建程
下拉列表的左右选择
下拉列表全显示:multiple="multiple"
首先定义左下拉列表,左移一个,全左移的ID,和右下拉列表,右移一个,全右移的id
页面加载,触发点击左移 全左移,右移全右移的事件,利用appendTo进行移动
在触发双击下拉列表事件,同样利用appendTo移动
使用JQ完成表单校验
设置必填框,必填定义一个class变量,在页面加载中,获得必填元素进行遍历,然后进行失去焦点的校验,失去焦点提示是否符合要求,判断一次要清空一次要求,$(this).parent().find().remove(;)
作者: it小白001 时间: 2018-5-22 10:24
吴俊斌
使用JQuery完成下拉列表左右选择
首先导入jq路径,在创建script标签,在标签中先定义一个页面加载事件.
1,先创建两个开关.
开关一(一次用移动一个) ,找到开关对象给他加个鼠标点击事件(click),方法里,通过选择器确定鼠标选择的对象.在使用appendTo的方法将文件添加到对应的位置.
开关二.同理,不过这次不是确定鼠标选择的对象是把所有的当前列表的所有对象选中,在添加
2,双击文件能实现左右移动
一样先找到当前对象所在的列表对象加上一个双击事件,在方法里找到当前对象的选择属性.在使用appendTo添加奥对应的位置
使用JQuery完成表单校验
首先导入jq路径,在创建script标签,在标签中先定义一个页面加载事件.
1,先在必填选择框后加上*标识
先用选择器找到所有的必选框的父类parent(),直接用append的方法添加标识(不懂为啥视频要一个一个遍历,直接添加就行了)
2.进行表单效验并且给出提示
同样要找到所有要效验的文本框加上一个失去焦点事件(blur), 进来先清空提示文本框的内容,接着判断当前是哪个文本框(用选择器找到所有的必选框用is()判断是哪个),再校验就可以了.错误的添加一个样式 正确的另一个样式.在最后还可以通过链式编程在后面添加键盘抬起等等事件,方法里在调用一遍表单效验就行了(可以使用triggerHandler)
3,提交表格效验
可以通过判断错误样式的长度是否大于0来判断是否有错误,考虑到一个也没添加也可以提交,我们在刚开始要使用trigger()把效验的方法全都实现一遍,提高健壮性
作者: wahahaha 时间: 2018-5-22 10:28
林恒山
JQuery下拉框展示列表内容加属性multiple="multiple".JQuery中常用的事件有获得焦点focus,是去焦点blur,下拉列表内容改变change,点击click,双击dblclick,键盘按下keydown,键盘弹起keyup,键盘按下并弹起keypress,鼠标按下mousedown,鼠标弹起mouseup,鼠标移入mouseover,鼠标移出mouseout,鼠标悬停mouseover.
还有两个事件切换:
1.JQuery对象.toggle(function(){//第一次点击},function(){//第二次点击}),toggle只能使用jquery1.9之前的版本,之后的会出问题.
2.hover,相当于mouseover和mouseout两个事件.
案例表单校验用到的筛选选择器有:find("选择器")查找后代,所有孩子的children(["选择器"]),得到父标签parent();两个事件处理:
1.trigger执行所有触发trigger触发的事件,并且包括浏览器默认的同名事件
2.triggerHandler不会触发浏览器默认的同名事件,并且只触发第一个触发事件的Jquery对象调用的事件.不能进行链式编程.
bootstrap是开发为了响应式页面的.响应式就是一个网站可以兼容多个终端(手机/电脑/pad..).使用步骤是县引入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>
注意:要先引入jquery,再引入bootstrap的js.调整设备宽度缩放比例:<meta name="viewport" content="width=device-width, initial-scale=1">.
还有bootstrap的重点栅格系统:通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
?col-lg-n 大屏 分辨率>=1200
?col-md-n 中屏 992<=分辨率<1200
?col-sm-n 小屏 768<=分辨率<992px
?col-xs-n 超小屏 分辨率<768px
作者: conan75 时间: 2018-5-22 10:41
陈昆明:
今天进一步学习了JQ的相关内容,使用JQ完成下拉列表的左右移动案例就可以充分体会到JQ功能的强大,这主要归功于其强大的选择器,因为如果是普通的js对象,其选择功能局限性太大
在表单检验的案例中需要注意的是trigger方法与triggerHandler的区别,trigger方法在执行自身定义的所有事件后还会默认执行浏览器中具有同名的事件(这也就是说trigger方法后面
其实是可以跟上非浏览器的默认事件方法的),而triggerHandler则是只会执行自身定义的第一个事件(第一个是指代码从上至下的顺序),而且执行完之后是不会执行浏览器默认的事件的,
而且需要注意的是,不是所有的元素调用trigger方法后都会执行trigger方法内的事件A的,调用的这个元素必须要有关于事件A的方法,否则调用是错误的,另外不同于其他的事件,submit事件
只有form元素才能调用
接下来还初步学习了Bootstrap的入门知识,它的存在是为了让不同的用户终端能使用相同的页面,这主要归功于它强大的栅格系统
通过class = "row"来设置一行
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数(注意:列最多将视口分为12列)
•col-lg-n 大屏
•col-md-n 中屏
•col-sm-n 小屏
•col-xs-n 超小屏
作者: 许大炮 时间: 2018-5-22 10:42
许剑鸿 webDay06
进一步学了JQuery的使用,主要通过两个案例的解析与实现对知识进行学习
案例1:下拉列表的左右选择:<select> 展示列表的内容 需要加属性 multiple="multiple" , 事件:click dblclick appendTo的使用
案例2:使用JQuery完成表单校验: find()查找后代 parent()获得父标签
trigger/triggerHandler区别: 前者触发所有函数及浏览器事件 后者只执行第一个函数并且不会执行浏览器事件
初步接触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">
栅格:行 : 通过设置class属性为"row"设置为一行
列 : 通过设置class属性为"col-(lg/md/sm/xs)-n"(0< n <=12)设置为一列 一行最多为12列 超过则换行
可以在栅格中嵌套栅格
作者: LittleSky 时间: 2018-5-22 10:43
常小天
今天学习的是JQuery的进阶内容和BootStrap的入门内容。
JQuery进阶内容部分通过两个案例来进行学习。第一个案例是下拉列表的左右选择。这一案例的知识点和核心内容其实就是一个表单选择器——“:selected”，它是指下拉列表中的选中元素。除此之外的id选择器，层级选择器，appendTo方法都是昨天的学习内容，回顾一下即可。第二个案例是使用JQuery完成表达校验，这是今天的重难点。这里边需要注意的点有：
一、添加提示信息以及*号的操作，还有删除旧提示信息的操作都需要调用“.parent()”方法获取其父标签，才能调用“.append()”方法。因为这些操作虽然修改的是自身层级的内容，却都是在父标签的层次上进行的。
二、与之前不同的一点是，今天的学习中我们能够给一个标签添加多个class内容，它们之间用空格隔开。这里就要再引出另一个注意的点。就是在不同的需求中通过不同的class内容来获取对象。本例中清除旧的提示信息时需要清空整个提示内容，所以使用描述标签整体属性的“formtips”类名作为选择器，而统计表单错误信息时需要的是提示内容所表达的信息，所以使用具有标识功能的“onError”类名作为选择器。这个点的掌握需要在实际的应用中进行锻炼。
三、trigger和triggerHandler的功能和区别。这两者的功能大体上类似，它们都能对匹配的元素实施所绑定的触发事件所调用的方法。它们的区别有三点，但目前我们能够掌握的只有两点。一是前者在实现功能的时候会将属于浏览器默认事件的触发事件一并执行，而后者不会执行属于浏览器默认事件的触发事件，而只执行触发事件调用的方法。二是前者会执行所有匹配元素的触发事件并调用方法，而后者只触发jQuery对象集合中第一个元素执行方法。
作者: lnongge 时间: 2018-5-22 10:48
16weisong
今天主要学习了jq事件,切换函数,2个案例和bootstrap入门,jq部分只需掌握表单注册案例即可掌握相关知识点,bootstrap是一个制作响应式页面的框架,只要自己用boostrap搭建下前几天学的网站首页即可入门
作者: 1748341437 时间: 2018-5-22 10:59
林玮
5/21JQ总结
今天是接着昨天继续学习JQ的常用事件,可能是因为比较多所以分两天来学.
首先是学了下拉列表的左右选择案例:
(注:需要注意<select>里要加,multiple属性),要想达到这个效果有两种方法:
第一种:是使用JS(仅了解一下即可,毕竟出了一个比JS书写更为简便的JQ,但是如果有要用到JS方法的还是要转回去的.)
第二种:是使用JQ方式;(具体如何操作我就不说了,太简单了)
至于事件就讲一个比较特殊的toggle它的作用是轮流执行多个函数,只有一个函数的时候效果就是显示和隐藏;
重点是后面的那个案例:表单效验案例;
只要能把它独立打出来,这两天的JQ你就差不多掌握了,反正我是还没打完.
因为它里面用到的事件比较全面,如:
.each:遍历事件
.blur:失去焦点事件
.remove:删除元素事件
.append:添加元素事件
(虽然说也不算多,但是只你能打下来,基本上怎么用是个什么意思差不多都懂了,因为JQ的事件使用都差不多然后去看API也能看得懂,而不是说遇到一个不会的去查API查到了,咦这个要怎么用啊...这就尴尬了)
它里面还用到了两个经典选择器:
find:后代选择器
parent:父标签选择器
(还有一个没用到的)
chidren:子标签选择器
后来又学了一个BootStrap框架,对它的了解我其实就几句话,它的主要作用是让网站达到一个响应式开发开发的效果,它的主要核心是栅格系统.它可以给页面设计一个框架,并且能在分辨率不同的设备中运行,反正总而言之一句话:这是一个非常强大的一个框架.
作者: zzx835387607 时间: 2018-5-22 11:02
郑志祥Day06(java-Quare和BootStrap)
今天学习了(下拉列表的左右选择案例)JQuery的<select></select>在此案例中有使用到
知识点一;multiple=”multiple”(单词意思,并联,多重的)效果是能将下拉列表里的所有的内容全部显示出来.<select id="selectLeft" multiple="multiple" >.
知识点二 $("#addRight").click(function(){
// 获得左侧被选中的option元素:
$("#selectLeft option:selected").appendTo("#selectRight");
});
设置>>click(鼠标单击事件)来触动函数
"#selectLeft option:selected"获取到左边的所有的元素:被选中的.添加到右边的下拉列表
知识点三 $("#addAll").click(function(){
// 获得左侧被选中的option元素:
$("#selectLeft option").appendTo("#selectRight");
});
设置>>>click(鼠标单击事件)来触动函数
"#selectLeft option"获取到左边的所有的元素:被选中的.添加到右边的下拉列表
知识点四// 双击左侧的的某个元素，移动到右侧:
$("#selectRight").dblclick(function(){
$("option:selected",this).appendTo("#selectLeft");
});
$(右边的下拉列表).dblclick(双击触动函数)
$("option:selected",this)这里面的this可以去掉,(1,2)1和2同一个意思
注意;记得引入js文件
<script src="../js/jquery-1.11.3.min.js"></script>
案例二( 使用JQ完成表单校验)
<script>
// 表单校验的操作
$(function(){
// 步骤一：为必填项添加一个 *.(通过后代选择器获取到下面的所有的input 里面的 required 并遍历)
$("form input.required").each(function(){ //用户名 密码 确认密码
// 获得他的父元素：([调用父类方法只有jq能调用]将js转换为jq在调用jq的父类,添加*红色字体与加粗)
$(this).parent().append("<b class='high'> *</b>");
});
// 步骤二：获得所有的输入项,为输入项添加一个blur失去焦点就执行函数事件.
$("form input").blur(function(){
// 获得该元素的父元素：
var $parent = $(this).parent();
// 将原有的信息清除掉.(find("选择器"):查找后代 清除长宽,釜底抽薪)
$parent.find(".formtips").remove();
// 确定点击的输入项是谁? is是匹配功能
if($(this).is("#username")){
// 判断用户名输入的值是否为空:通过.value获取
if(this.value == ""){
// 向文本框后添加一个错误提示. formtips长宽样式 onError图片加背景 (查看style2)
$parent.append("<span class='formtips onError'>用户名不能为空</span>");
}else{
// 向文本框后添加一个正确提示.
$parent.append("<span class='formtips onSuccess'>用户名输入正确</span>");
}
}
if($(this).is("#password")){
// 判断用户名是否为空:
if(this.value == ""){
// 向文本框后添加一个错误提示.
$parent.append("<span class='formtips onError'>密码不能为空</span>");
}else{
// 向文本框后添加一个正确提示.
$parent.append("<span class='formtips onSuccess'>密码输入正确</span>");
}
}
//此处使用链式编程,键盘抬起执行函数,
}).keyup(function(){
//将js转换为jq 调用triggerhandler方法,
事件处理有trigger 对匹配到的所有元素进行操作.另外一个是triggerHandler是对匹配到的元素进行处理只执行一次.两个单词的区别差在这里.
$(this).triggerHandler("blur");
//集中焦点
}).focus(function(){
$(this).triggerHandler("blur");
});
// 为表单添加一个submit提交事件.
$("form").submit(function(){
// 执行表单中blur事件. trigger将所有的元素检查一遍,也会导致浏览器的默认行为的执行
$("form :input").trigger("blur");
// 获得错误信息的长度.
var errorLength = $("onError").length;
if(errorLength > 0){
return false;
}
});
});
</script>
还学习了BootStrap, 他是HTML,css,js的框架可以开发响应式页面,响应式就是一个网站可以给多个终端使用
BootStrap主要学会引入的方法:
<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>
注意:导入的顺序不能改变,下面的bootstrap.min.js有用到上面的jq,所以排在jq的后面.
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
使用BootStrap还需要导入:
<meta name="viewport" content="width=device-width, initial-scale=1">
栅格系统:(使用该系统可以使页面在不同使用端都可以看到,不会改变其格式之类的)
就是只需开发一个终端就可以在其他三种终端上使用(电脑,平板,手机)上使用,节约开发资源,提高效率.
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
•col-lg-n 大屏 分辨率>=1200 large
•col-md-n 中屏 992<=分辨率<1200 mid
•col-sm-n 小屏 768<=分辨率<992px small
•col-xs-n 超小屏 分辨率<768px extra(特别的 ,非常的) small
作者: 望蜀 时间: 2018-5-22 11:36
邵倩
案例:下拉列表的左右选择
1.要显示列表里的内容需要给<select>添加一个属性 multiple="multiple"
2.表单选择器:checked(被勾中的) selected(被选中的)
3.a.append(b) 在a中添加b A.appendTo(B)把A添加进B 都需要先拿到元素的父标签 再对父标签进行添加
4.事件 click和dbclick
案例:复杂点的表单校验的案例
1.JQ的查找: 查找后代.find("选择器"); 查找所有子标签.children("选择器"); 得到父标签.parent();
2.JQ的事件处理: .trigger() 操作匹配到的所有元素,并且也会执行浏览器同名的默认行为
.triggerHandler()只操作JQ对象集合中第一个元素
JQ的事件切换
1.toggle(); 点击第一下执行第一个函数,点击第二下执行第二个函数 1.9之后版本不支持
2.hover(); 鼠标悬停的时候执行第一个函数,鼠标移开执行第二个函数
BootStrap 是目前很受欢迎的前端框架,它基于HTML,CSS,JavaScript
响应式页面:只需设计一套页面 就能使其在手机/pad/电脑都能被正常浏览
使设计和维护都省时省力,节约成本
使用BootStrap前需要先下载,再在HTML中引入两个css文件和两个js文件 顺序不能乱
BootStrap中的栅格系统:
行:通过class="row"来设置一行
列:.col-lg-n .col-md-n .col-sm-n .col-xs-n 也就是col-屏幕尺寸的相对大小-列占比值
可以在ibootstrap.cn通过可视化布局系统来设计页面(傻瓜式操作 无脑拖就完事了 像QQ空间模块排版一样哈哈哈哈哈哈哈哈哈嗝),大致设计完后可以得到(<body>部分)代码 然后粘进你的HTML里自行修改一下部分内容就ok了
作者: doudou0606 时间: 2018-5-22 11:51
day06
施炎生
1.案例一: 下拉列表的左右选择
checked 选中的(针对的是单选框和复选框)
selected 选中的(下拉选)
2.toggle:给一个元素添加了单击事件,轮流执行多个函数
hover:相当于给一个元素添加了mouseover和mouseout两个事件
3.案例二 : 使用JQuery完成表单校验
a.find("选择器"): 查找后代
parent(): 父标签
b.triggerHandler() 方法与 trigger()的区别：两个方法类似。不同的是triggerHandler()不会触发事件（比如选中文本）的默认行为，就可以直接执行事件内所写的方法，而且只影响第一个匹配元素。
4.BootStrap的使用步骤：
a.引入BootStrap的CSS 和 JS
b.根据设备宽度，调整缩放比例
作者: q55w66 时间: 2018-5-22 15:51
王清松
JQurey：
在动作触发事件，事件调用方法，方法执行相对应操作的逻辑上，学习到了一些方法以及属性的使用。
BootStrap：
作用：开发响应式页面。理解为适应性页面，看窗口分辨率的情况去调整页面布局，达到美观高可视化的目的
栅格系统：学习了栅格系统，用于布局页面
作者: AsusCoder 时间: 2018-5-22 17:47
曾耀峰
今天总结的内容分为两部分:
一、总结JS课程案例
二、初步学习BootStrap
一、课程案例:
今天的课程案例比较少，JQ有两个案例，
1.案例一:使用JQuery完成下拉列表的左右选择
有以下两个知识点:
1).表单对象的选择器过滤功能: 常见的有:enabled(标签能用)、disabled(标签组件不能用)、checked(多选框被选中)、selected(下拉列表项被选中)等四个属性。使用格式:$("#selectLeft option:selected") 表示:选择框左边的被选中的选项
2).append()方法和appendTo()方法的理解:
a.append(b);将b元素添加到a元素里面(或者说a标签添加子标签b)
a.appendTo(b):把a元素添加到b元素里面(或者说b标签添加子标签a)
3).理解完上面的两个知识点,试着将案例需求描述出来:
(1).案例需求:
在一个手机分类栏里面，有左侧"已有商品"和右侧"未有商品"两个多选框:现在有如下需求:
[1].双击左侧"已有商品"多选框的选项，能将被双击的选项添加到右侧"未有商品"多选框
[2].单击">>"或者"<<"能将选中的商品项移动到另外一个多选框
[3].单击">>>"或者"<<<"能够将多选框的所有选项移动到另外一个多选框中
(2).技术实现:
1.处理添加到右侧">>"的单击事件:设置id为"#addRight"
[1].获取该标签并绑定单击事件:$("addRight").click(function(){});
[2].在绑定的单击触发函数里，获取被选中的选项，添加到另外一个选择框;
function()
{$("#selectLeft option:selected").appendTo("#selectRight")}
2.处理添加所有选项到右侧选择框的标签">>>" 的单击事件:设置id为"#addAllToRight":
[1].获取该标签并绑定单击事件:$("#addAllToRight").click(function()){}
[2].获取左侧选择框的所有选项<option>:添加到另外一个选择框
function()
{$("#selectLeft options").appendTo("#selectRight")}
3.双击左侧选择框的某个元素，添加到右侧选择框中:
$("#selectLeft").dblClick(function(){});
function(){
$("option:selected",this).appendTo("#slelected");//this表示的是触发单击的主体#selectLeft选择框。
}
右侧的处理同样如上。不再描述。这个案例重点在于对append()和appendTo()两个方法的理解
案例2:表单即时验证JQ版本:
1.使用JQ版做表单验证，除了有比较精致的提示效果以外，还运用了输入一个字母就验证的即时验证。这个效果是给输入信息的选项框绑定keyUp和focus事件。在keyUp绑定的触发函数里，执行triggerHandler("blur");这个的意思是当用户输入一个字母以后，手从按键抬起的时候，就执行一次该这个输入框绑定的失去焦点事件blur。记住，只执行一次
2.$("form :input").trigger("blur"):执行整个输入框的所有失去焦点的事件
$("form :input").triggerHandler("blur"):只执行第一个输入框的失去焦点事件。其他的不执行
3.案例步骤:
[1].获取所有必填项的输入框，绑定失去焦点事件:$("form input.required").blur();
对这个事件做以下处理:
(1).获取父结点:var $parent=$(this).parent();
（2).预先对原来存在的提示信息作清除（要先找到信息提示):$parent.find("formTips").remove;
(3).判断是哪个输入框:if($(this).is("#username"))
(4).根据验证规则的判断条件:验证正确时:$parent().append("<span>提示信息</span>");
按照以上步骤可以判定所有输入框事件
[2].处理提交注册表单的细节问题:
1.当一开始什么都没有输入，直接点击注册按钮，表单会直接被提交。
2.当所有信息填完后，要判断没有错误信息才能提交
针对上面两点，都发生在表达被提交的时候，所以
(1).给表单添加一个提交的事件:$("form").submit(function(){});
(2).表单的触发函数里面，预先执行一次所有输入框的失焦事件:$("form:input").trangger("blur");解决第1点问题
(3).获取每个表单错误信息长度:$(".onError")
(4).根据信息判断是否提交
二、BootStrap
来自Twitter的前端框架，主要解决不同设备的屏幕适配网站问题。解决了传统针对不同设备，因为显示屏幕的不同而制作了多个版本的网站，
以下步骤是使用BootStrap解决屏幕问题的步骤
1.使用BootStrap:
[1]引入BootStrap的核心css文件:bootstrap.min.css
[2]引入BootStrap的主题css文件:bootstrap.theme.css
[3]引入js库(注意，js库要放在bootstraps的js文件的前面):jquery.js
[4]引入BootStrap的js库:bootstrap.js
2.加入一个meta文件设置最小屏幕宽度:
<meta name="viewport" content="width=device-width,initial-scale=1">
3.容器选择:
在想布局之前，先依据需求选择一个套在最外层的布局class。有如下两个:
1). .container:用于固定宽度并支持响应式布局
<div class ="container">
</div>
2). .containter-fluid:100%宽度，占据所有视口
<div class ="container-fluid">
</div>
4.理解栅格系统:
BS的栅格系统目前学了两方面的知识:
比如:col-lg-n:
lg表示大屏幕
n表示分成几块，所有的n加上要等于12
[1]屏幕类型有四种:
lg:large 巨大的(>1170px):大于1170px的屏幕尺寸:电脑端
md:middle 中等的(970~1170px):中等电脑端
sm:small 小的(750~970px):平板电脑
xm:x-samll 超小的(0~750px):手机客户端
作者: ...ylq 时间: 2018-5-23 00:37
叶凌青
今天主要对上次的jq的补充
学了JQ筛选-查找
主要学习了
find("选择器"):查找后代
parent():父标签
还学习了2个jq处理事件
trigger
triggerHandler
然后学习了新的知识
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>
根据设备宽度，调整缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1">
最重要的是栅格系统
通过class = "row"来设置一行
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
•col-lg-n 大屏 分辨率>=1200
•col-md-n 中屏 992<=分辨率<1200
•col-sm-n 小屏 768<=分辨率<992px
•col-xs-n 超小屏 分辨率<768px
作者: wpwing 时间: 2018-5-23 02:19
吴鹏
总结:
关于更多的一些jQuery事件和方法的补充,以及对前面案例的完善:
------------------------------------------------------------
jq中的常用的事件:
focus :当调用方法的对象取得焦点时,执行内部定义的函数;
blur :当调用方法的对象失去焦点时,执行内部定义的函数;
change :此方法与<select></select>配合使用,当select里的option发生改变时,执行方法内部定义的函数;
click :点击事件,用了很多次了,无需再说;
dblclick :双击事件,用了很多次了,无需再说;
keydown :键盘按键按下时触发;
keyup :键盘按键弹起时触发;
keypress :键盘按键按下并弹起时触发;
mousedown :鼠标按下时触发;
mouseup :鼠标按下后弹起时触发;
mousemove :鼠标移进调用对象时触发;
mouseout :鼠标移出调用对象时触发;
mouseover :鼠标停发放在调用对象上时触发;
这里特别的提两个切换事件,目前用来了解,因为用的机会不多,
一个是toggle(),一个是hover();
jq对象.toggle(fn1,fn2,...),比较容易理解的格式如下:
jq对象.toggle(function() {
函数体1;
},function() {
函数体2;
},...)
当jq对象第一次触发toggle时,执行函数体1,第二次触发执行函数体2,...直至循环,
要注意的是,toggle()在1.9版本以后不支持;
jq对象.hover(fn1,fn2),这个相当于mouseover()和mouseout的结合;
jq对hover(function() {
函数体1;
},function() {
函数体2;
},...)
当鼠标悬停在jq对象时执行函数体1,移开jq对象时执行函数体2;
jq对象.find("选择器") :查找jq对象后代中与"选择器"匹配的元素,
这个方法是用来遍历元素,
jq对象.children(),选择出jq对象的所有的子代元素,不包含jq对象子代以后的次次级元素;
jq对象.parnet(),筛选出jq对象的父类元素,
jq对象的处理:
jq对象.trigger(type,[data]):
type:一个事件对象或者要触发的事件类型;data:传递给事件处理函数的附加参数;
在每一个匹配的元素上触发某类事件;
jq对象.triggerHander(type,[data]):
1 不会触发浏览器默认事件,默认事件比如点击,右键弹出菜单等,因此即使括号里面放入的是("click"),
它执行的只是click事件里定义的函数体内容;
2 只触发jQuery对象集合中第一个元素的事件处理函数,
3 这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
举个例子:
<body>
<input type="button" id="tr" value="这个是trigger()方法">
<input type="button" id="trh" value="这个是triggerHander()方法">
<br/>
<input type="text">
<input type="text">
<script>
$("#tr").click(function() {
$("input [type='button']").trigger("focus");
});
$("#trh").click(function() {
$("input [type='button']").triggerhandler("focus");
});
$("input [type='text']").focus(function() {
$("body").append("<p>这个是focus事件触发后要执行的函数体</p>");
});
</script>
</body>
上面的代码,定义了两个按钮,分别会执行trigger方法和triggerhandler方法,
当点击trigger按钮时,因trigger事件的对象"input"有两个,会执行两此focus事件,焦点会在第二个文本框中;
当点击triggerhandler后,虽然事件对象有两个,但是只会对第一个对象执行,并且只执行事件的函数体,并不会
触发focus事件,所以文本框不会取得焦点;
-------------------------------------------------------
bootstrap的初步介绍:
用来开发响应式页面;
响应式页面意思是说根据设备的不同,网页页面内容可以"有选择"的展示原本的内容,此框架主要是针对移动端;
和自适应页面不同,响应式网页是根据像素值来"活动"展示页面,自适应内容是不会更改的;
响应式页面可以节约开发成本,开发一套后,不论是pc端还是移动端都能很好的支持;
创建响应式页面时,要线引入css样式和bootstrap的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>
在head的meta标签里声明:
<meta name="viewport" content="width=device-width, initial-scale=1">
栅格系统:
将页面的每一行都分成十二个列,
行的定义:通过class = "row"来设置一行,如果在父级标签中定义class=container-fluid则是占据页面宽度的100%;
列的设置:每个行都可以视为一个视口,通过class属性值来设置,总列数必须为12行;
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
•col-lg-n 大屏 分辨率>=1200
•col-md-n 中屏 992<=分辨率<1200
•col-sm-n 小屏 768<=分辨率<992px
•col-xs-n 超小屏 分辨率<768px
----------------------------------------------------------
案例:下拉列表的左右选择:
分析,首先要有两个下拉的菜单,两个菜单分别都有一些内容;在下拉菜单的厦门有两个按钮,当选中某个具体的内容
时,点击按钮就可以实现该内容的转移;左边的下拉列表id值为selectLeft,右边下拉列表的id值为selectRight,分别在
两者的下面创建两个按钮,两个按钮分别为移动选定的目标到另外一列和移动全部的目标到另外一列,左边按钮可用
id名为selectLTR和selectAllLTR,右边的按钮可用id名为selectRTL和selectAllRTL;然后定义按钮触发点击事件时要
执行的函数内容;下列代码即为实现的代码内容:
左边列表的id值:selectLeft;右边列表的id值:selectRight;左边单个转移按钮的id值:selectLTR,全部转移id值selectAllLTR;
右边单个转移按钮的id值:selectRTL,全部转移id值selectAllRTL;
<script>
$(function() {
$("#selectLTR").click(function(){
//左边单个转移按钮点击后;
$("#selectLeft option:selected").appendTo("#selectRight");
//获得左边列表中被选中的内容,添加到右边列表中;
});
$("#addAllLTR").click(function(){
$("#selectLeft option").appendTo("#selectRight");
});
$("#addRTL").click(function(){
$("#selectRight option:selected").appendTo("#selectLeft");
});
$("#addAllRTL").click(function(){
$("#selectRight option").appendTo("#selectLeft");
});
$("#selectLeft option").dblclick(function(){
$("option:selected").appendTo("#selectRight");
});
$("#selectRight option").dblclick(function(){
$("option:selected").appendTo("#selectLeft");
});
});
</script>
--------------------------------------------------------------------------------
使用BootStrap制作一个响应式页面
代码如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
//假设css文件和js文件都在如上路径下;
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h1>111</h1>
<p>111-1</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h1>222</h1>
<p>222-2</p>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<h1>333</h1>
<p>333-3</p>
</div>
</div>
<div>
</body>
在上面代码中,<div class="container-fluid">为当前视口占据屏幕像素的100%;
<div class="row">为创建一行,
<div class="col-md-4 col-sm-6 col-xs-12">,
<div class="col-md-4 col-sm-6 col-xs-12">,
<div class="col-md-4 col-sm-12 col-xs-12">,
以上三个语句联系起来看,即为:中等像素下三个<div>在一行显示;小像素下前两个
<div>同一行显示,第三个<div>一行显示;极小像素下,三个分别在一行显示;
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |