A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

同学们,以下是今日任务,以案例为主。今日重点是掌握JQuery案例并了解BootStrap使用要求每位同学可以完成以下案例,然后以口语化的方式在评论区提交你的每日总结,谈谈你对今日重点知识的理解!

  • 使用JQuery完成下拉列表左右选择
  • 使用JQuery完成表单校验
  • 使用BootStrap制作一个响应式页面

54 个回复

倒序浏览
王刘锁
今天通过三个案例来学习了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">&gt;&gt;</p> 点击向右边添加选中的商品
<p id="addAll">&gt;&gt;&gt;</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 超小屏        (手机)               
回复 使用道具 举报
何平波
今天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的下拉列表左右选择,常用事件,切换事件,还有一个BootStrap.
下拉列表中学习了表单选择器,分为两种checked针对的是单选框和复选框.select下拉选
主要是学习了常用的事件,最经常用的有:
focus 获取焦点  change 下拉列表内容改变  click 单击  dblclick 双击
用jq完成表单的校验分为筛选查找和事件处理.查找有find(选择器):查找所有的后代
children(选择器):查找所有的孩子   parent():父类标签   
事件处理有trigger 对匹配到的所有元素进行操作.另外一个是triggerHandler是对匹配到的
元素进行处理只执行一次.两个单词的区别差在这里.
BootStrap今天主要是学习对这个软件的使用.怎么下载安装导入.他的作用是开发响应式的
页面,可以手机 平板 电脑上都可以浏览并且不会产生布局的错乱.比较重要的是栅格系统,栅格系统最多可以分为12列
,如果超过了十二列的话,他会自动调整为下一列
回复 使用道具 举报
游荣辉
总结
        今天运用了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                超小屏
回复 使用道具 举报
郑雪平

今天学习两部分内容:一.使用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>且对导入顺序有要求,顺序错误有可能会导致无法正常使用.
回复 使用道具 举报
杜石苇
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:20
7#
颜琳琳
   一.今日通过学习下拉列表案例学习了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
回复 使用道具 举报
张裕
今天练习使用JQ做到下拉列表的左右选择
JQ的事件切换
toggle() 单击事件的切换  鼠标点击 轮流执行括号内的函数
hover()  鼠标悬停的切换  鼠标悬停 轮流执行括号内的函数
表单校验 方法太多需要看案例 不熟练 视频太多 练习太少 没有作业来锻炼思考能力 每天感觉都在死记硬背 学习效率差

BootStrap
开发响应式页面 实现了一个网站兼容多个平台 节约了开发成本 提高了开发效率
回复 使用道具 举报
郭明杰
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
回复 使用道具 举报
郑阳阳
今天继续学习了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:48
11#
苏海斌
今天主要讲了JQuery的常用事件
通过JQuery事件可更方便的完成一些操作,使代码更简洁

今天的一些重点:
表单选择器
:checked
:selected

常用事件:
focus 获得焦点事件
blur失去焦点事件
change下拉列表内容改变
click单击
dblclick双击

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

JQ事件处理:
trigger:
对匹配到的所有元素进行操作
会导致浏览器默认行为执行
triggerHandler:
不会触发浏览器默认事件
只触发JQuery对象集合中第一个元素的事件处理函数
返回事件处理函数的返回值(不是具有可连接的JQuery对象)

BootStrap作为框架用于开发响应式页面,节约开发成本,提高开发效率
所谓响应式就是一个网站能够兼容多个终端
重点是使用步骤:
1.引入BootStrap的CSS和JS
2.根据设备宽度调整缩放比例

以及栅格系统
回复 使用道具 举报
吴利君
今天继续学习了JQuery的一些方法,有两个案例,第一个是表单效验,这个案例挺不错了,可以练习很多的事件,首先是blur这个事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的,因此我们可以通过这个事件对用户输入进行跟踪判断,然后是后面的提示框,有很多方法,一起的方法也可以,就是在input后面加一个span标签,然后可以对其css样式进行修改,成功的话使用成功的图片,颜色,然后对他的属性也进行修改。当然案例里面的这种直接添加的会比较简单。
这个案例还有一个知识要注意,就是triggerHandler和trigger这个两个事件处理。要注意的是triggerHandler与trigger有三种,首先是他不会触发浏览器默认事件。其次是只触发jQuery对象集合中第一个元素的事件处理函数,最后是这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined。因此,我们需要分场合使用这两个事件,还有就是版本的问题,1.9以下的才可以用。
   然后是BootStrap这个是轻量级的一个前端框架,是响应式的,可以一次开发多平台使用,很不错,也很多网站使用,不过就是调试麻烦,对于没有天赋的很难受。

回复 使用道具 举报
李志勇:
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"
回复 使用道具 举报
陈世彪:
今天学习了JQuery和BootStrap
使用JQuery完成下拉列表左右选择
要先使用click事件给&gt&gt做一个动作,使点击&gt&gt时可以触发向左或向右添加
使用双击向左或向右添加时,要使用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
回复 使用道具 举报
詹源
今天学习了使用表单选择器完成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框架;开发一次可以在多个终端上使用网站.省去多次编写.
回复 使用道具 举报
陈强
JQ and BootStrap的一天
今天关于JQ的案例改进,其实新的内容并不难,而为什么有时候总觉得思路没有跟上,其实根本原因还是在于对于选择器的使用,和选择器之间的组合使用不够熟悉,然后就是一些新的内容的使用时一些注意事项:
1 , 案例下拉列表选择中,需要对select进行处理------multiple---将下拉列表的所有信息显示出来;
2 , 案例表单校验中,有一个新的方法is( )---用于判断两个对象是否匹配
3 , BootStrap是前端响应式框架,其前期的准备工作主要有两部分,其一是引入文件,其二是添加<meta>标签,有一个注意事项是,不论在哪一种前端平台上,列数相加都必须是12.
BootStrap的使用,相较于前期使用表格和DIV进行页面布局,更加方便使用.

回复 使用道具 举报
谢洪彬:
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>标签   调整缩放比例   响应式的根本
布局方式:分为占满和不占满
回复 使用道具 举报
侯玉林

今天主要学习了两个jq的案例,和讲了bootstrap的一个简单介绍和基本的使用.
回复 使用道具 举报
郑学馨
什么是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的用法:就近原则,
回复 使用道具 举报
刘文峰

两个下拉列表之间的数据相互转移案例:
将一个下拉列表中要转移的数据选中($(“下拉列表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列会自动换行.
回复 使用道具 举报 1 0
123下一页
您需要登录后才可以回帖 登录 | 加入黑马