java 学web——day06【Jquery与BootStrap日常学习心得】

今天总结的内容分为两部分:


   一、总结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):手机客户端