收获父成分,移出主旨blur等等

回去目录

03- 案例五:使用JQ落成下拉列表左右摘取:JQ形式贯彻

  • JQ中强有力的接纳器

// 添加左侧选中的元素到右侧
$("#addRight").click(function(){
    // 获得左侧被选中的option元素:
    $("#selectLeft option:selected").appendTo("#selectRight");
});
  • 使用到的接纳器:
    ID选择器:#selectLeft
    子孙选取器:#selectLeft option
    表单对象属性选用器::selected选择被选中的标签
  • 行使到的文书档案操作:JQ对象.appendTo(“”),追加到有些标签个中

$("#selectRight").dblclick(function(){
        //选中当前标签中被选中的option标签
        $("option:selected",this).appendTo("#selectLeft");
});

上一篇小说关键说的是JQ中怎么着去操作HTML标签的体裁,今日重庆大学来上学一下JQ几个相比较关键的轩然大波,如单击click,双击dblclick,鼠标移入mouseover,移出mouseout,主旨focus,移出主题blur等等

06- 案例一:使用JQ完结表单校验:步骤分析

  1. 给拥有的输入框添加blur事件
  2. 据说分化输入校验差异内容
  3. 情节失实不能够交付

单击

$("#test").click(function () {
            alert("单击事件")
        });

01- 案例五:使用JQ完毕下拉列表左右取舍:需要和页面设计

下拉列表显示多少个挑选:<select multiple="multiple">

双击

   $("#test").dblclick(function () {
            alert("双击事件")
        });

09- 案例二:使用BootStrap实现一个响应式页面:须要及BootStrap的概述

  1. 什么是BootStrap
    前端框架,基于HTML,CSS,JavaScript达成
  2. BootStrap作用
    安顿一套页面可以通用在不一致的装置上,在姐夫大,pad上,电脑上都足以浏览那些网页,而不影响平常呈现.(响应式页面)
  3. 何以是响应式?
    设计三个页面,能够适应在不相同的尺码的装备上仍是能够够呈现

JS中的匿名函数

JS中的函数(方法)有二种,实名函数与匿名函数,实名函数一般用来干一件独立的事,因为匿名函数一般对在某些实名函数里涌出,起到了回来全局变量的效果,如下代码:

        function zzl() {
             var res = function () {//匿名函数
                return {
                    msg: "OK"
                };
            };
            return res;
        }

         alert((zzl())().msg);

实质上,定义实名函数的第三种,即变量式函数也是利用了3个匿名函数的事物,呵呵,代码如下:

var log=function(msg){
  alert(msg);
}

有时,在函数中回到三个指标与重临1个函数总是让我们感觉头病,有时,只怕不知情怎么去调用三个如此的复杂性函数,看代码:

     var ReturnObject = function () {
            return { //返回一个对象
                msg: "返回一个对象"
            };
        }
        var ReturnFunction = function () {
            var fun = function () {
                return {
                    msg: "返回一个函数"
                };
            };
            return fun; //返回一个函数
        }

实则,调用的时候,你的脑子是不是清晰,假使清晰的活,还就没怎么难的了,重临是目的,直接便是ReturnObject().msg,重临的是函数,当然

你要加个()了,就像那样ReturnFunction()().msg),当然借使您不()(),那样的写法假若你认识可读性差,可以改为(ReturnFunction())().msg

看上去就清清楚楚一些了,呵呵!

出口一下吗:

  console.log(ReturnObject().msg);
 console.log(ReturnFunction()().msg);
  console.log((ReturnFunction())().msg);

结果如下:

亿万先生手机版: 1

 

恩,其实全体的事物都以相通的,只要你相信您自身,就必定能够成功!

谢谢您的翻阅!晚安!

感谢让本身找到了写手的痛感,呵呵!谢谢!

再次回到目录

 

11- 案例二:使用BootStrap完结1个响应式页面:BootStrap的大局CSS的容器和栅格

  1. 布局容器
    class="container"
    class="container-fluid"
  2. 栅格系统
    Bootstrap 提供了一套响应式、移动装备优先的流式栅格系统
    计算分为12列
    使用.row体制定义栅格的行.
    定义列:.col-lg-n .col-md-n .col-sm-n .col-xs-n
  3. 栅格流程:
    1. 概念容器 .container
    2. 定义行 .row
    3. 概念模块 (总计每五个模块占用的列数,总共12列)
    4. 完毕响应式布局,设置
      定义列:.col-lg-n 超屏 .col-md-n 中型
      .col-sm-n 小型显示屏(平板) .col-xs-n 超小型(手机)

鼠标移入与移出

$("#msg").mouseover(function(){$(this).addClass("selected");});
$("#msg").mouseout(function(){$(this).removeClass("selected");});焦点与移出焦点

对于JQ事件,大家能够应用连接串的写法,即将八个事件写在一行中,JQ对象只在首先个事件前出现即可,如下代码:

$("#msg").mouseout(function(){$(this).removeClass("selected");})
         .mouseover(function(){$(this).addClass("selected");})

12- 案例二:使用BootStrap完毕贰个响应式页面:BootStrap的栅格的案例

前言

事件一词,咱们应该不会素不相识,作者觉得能够这么定义事件,当有个别或某多少个操作之后,会引入二个要么多少个结果的产生,而以此结果我们叫它事件,即伊芙nt,JS世界中的事件与历史观高级语言中的事件很类似,如对鼠标的单击,双击,键盘的按下,抬起等等,而在JQ的包装下,我们得以为JQ对象(一般是以$发轫的变量,当然$只是JQ的规范写法,你能够自个儿去重新定义它)很不难的增进事件,格式一般为:

Jq对象.事件(function () {... });

代码书写方式很谈得来,其中还动用JS中的匿名格局(函数),稍候小编会继续介绍匿超级模特式。

10- 案例二:使用BootStrap达成四个响应式页面:BootStrap的备选干活

  1. 导入BootStrap目录(3个)
    CSS目录
    fonts目录
    js目录
  2. HTML中引入BootStrap的体制与JS代码(陆个文件,一个设置)

    <!—应用于移动的:根据设备宽度,调整显示缩放比例initial-scale取值1-5 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    视口
    <!-- 引入BootStrap的CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
    <!-- 引入JS-->
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
    
  • 前言

  • 单击

  • 双击

  • 鼠标移入与移出

  • 关键与移出大旨

  • JS中的匿名函数

内容回看

  1. jQuery的书写步骤

    • 引入JQ的包(xxx.js)
    • 书写JQ代码

      $(function(){
          JQ代码
      })
      
  2. JS与JQ的互相转换

    • 将JS转换成JQ对象
      $(js对象)
    • 将JQ对象转换来JS对象
      JQ对象.get(0)/JQ对象[0]
  3. ==JQ选择器==

    • ==基本采取器==
      • ID选择器 $(“#ID”)
      • CLASS选择器 $(“.class”)
      • 要素采纳器 $(“元素名称”)
      • 通配符选用器 $(“*”)
      • 并称接纳器 $(“selector1,selector2……”)
    • ==层级选用器==
      • 弟兄选取器 $(“selector + selector”) 选拔同辈的下一个要素
      • 选料同辈中现在拥有的因素:$(“selector ~ selector”)
      • 子成分选用器:$(父选择器 > 子选择器)
      • 后人选取器:$(父选择器 子选择器)
    • 主导过滤选拔器
      • :first 选择第②个
      • :last 选拔最终二个
      • :eq(index) 选取下标为index的因素
      • :odd/:even 注意:下标从0开始
    • 质量选用器
      $(“input[属性名=’属性值’]”)
    • 表单选拔器(理解)
      :input
      :text/:password/:radio/:checkbox……
  4. JQ对文书档案的操作(DOM的crud)
    JQ.append() 追比索素
    JQ.appendTo(父元素) 将成分追加到父成分
    JQ.remove() 删除成分

  5. 要素循环遍历

    // 方式一
    $.each(数组,function(i,n){
        i表示下标
        n表示数组元素
    });
    // 方式二
    $(数组).each(function(i,n){
        i表示下标
        n表示数组元素
    });
    

07- 案例一:使用JQ达成表单校验:准备干活

JQ函数:
find(选择器) 查找匹配的要素
parent() 获得父成分
is(选择器) 判断是或不是为某些成分
trigger()/triggerHandler() 事件处理

08- 案例一:使用JQ完结表单校验:代码实现

  1. 步骤一:为必填项添加1个 *.
    $("form input.required").each(function(){}
  2. 手续二:获得全部的输入项,为输入项添加三个blur事件.
    $("form input").blur(function(){}
  3. 规定点击的输入项是哪个人?
    if($(this).is("#username")){}
  4. 为表单添加3个submit事件.

$("form").submit(function(){
        // 执行表单中blur事件.
        $("form :input").trigger("blur");
        // 获得错误信息的长度.
        var errorLength = $(".onError").length;
        if(errorLength > 0){
            return false;
        }
    });

后天计算:

  1. ==JQ的事件切换==
    JQ.hover(function1,function2) 鼠标移入移出执行不一的操作
    了解toggle(function1,function2) 点击隐藏和出示 1.9版本后删除

  2. ==JQ的摸索和事件处理==
    jQuery查找
    JQ.find(选择器) 选用协作的因素
    JQ.parent() 得到元素的父成分
    JQ.is(选择器) 表示判断成分是还是不是等于
    jQuery事件处理
    on("click",fun()) 绑定事件到jQuery对象中的成分
    bind("事件",fun()) 可绑定四个事件到jQuery对象
    trigger("事件",fun()) 绑定事件会接触浏览器暗中认可事件
    triggerHandler("事件",fun()) 绑定事件不会触发浏览器暗中同意事件

  3. BootStrap 概述
    是二个前端的框架,可以落到实处响应式页面设计

  4. 引入BootStrap (4个文件,1个设置)
    两个CSS,两个JS
    <meta name="viewport" content="width=device-width, initial-scale=1">
    bootstrap.min.css
    bootstrap-theme.min.css
    jquery-1.11.3.min.js
    bootstrap.min.js

  5. 全局CSS样式
    透过安装全局 CSS 样式;基本的 HTML 成分均能够由此 class
    设置样式并获得升高功用;还有先进的栅格系统。

    • 栅格系统
    • 排版
    • 表格
    • 亿万先生手机版:,表单
    • 按钮
    • 图片
  6. 落实栅格系统布局

    • 概念容器<div class=”container”>
    • 在容器中实现行反革命<div class=”row” >
    • 在每一行中划分列 总共分为12列
      col-lg-n 大分辨率
      col-md-n 中型分辨率(PC)
      col-sm-n 小型分辨率(平板)
      col-xs-n 超小型(手机)

04- 案例五:使用JQ达成下拉列表左右精选:JQ的风浪切换

$(document).ready(function(){….})职能相近与$(function(){…..});

  • 事件切换函数
    toggle() 点击时切换函数(1.9本子 .toggle() 方法删除)
    hover() 鼠标悬停的切换

JS与jQuery总结

  1. JS与JQ程序的入口
    相似JS是经过事件触发函数/window.onload()

    $(function(){
    })
    

    事件下结论:
    onload 页面加载
    onclick 点击
    ondblclick 双击
    onsubmit 表单提交 ,接受再次来到值
    onchange 下拉列表改变
    onmouseover 鼠标移入
    onmouseout 鼠标移出
    onmousemove 鼠标移动
    onfocus 得到主旨
    onblur 失去主题

  2. 操作CSS样式
    JQ:JQ.css(,)/JQ.addClass(“”)/JQ.removeClass()
    JS: JS.style.样式属性 = “”;

  3. 操作标签的内容
    JQ:JQ.html(“”)
    JS:JS.innerHTML = “”;

  4. 操作标签的质量
    JQ:JQ.prop(“属性名称”,“属性值”);
    JS:JS.属性名 = 属性值

  5. 操作DOM(CRUD)
    寻找成分
    JQ:选取器(基本选项器几个,层级选拔器4,属性选取器,内容过滤选取器)
    JS:document.getElementById()/document.getElementsByName()/….byTagName()

    创办成分
    JQ:JQ.append(“标签元素”)
    JS:document.createElemant(“”)/document.createTextNode(“”)

    剔除元素
    JQ:选择器.remove() 删除选中的成分
    JS:父元素.removeChild(子元素)

    添新币素
    JQ:append()/appendTo()/insertBefore()
    JS: appendChild(子元素)

  6. 事件绑定
    JS:
    一种在标签中定义事件监听属性
    JS.onxx = function(){}
    JQ:
    JQ.事件 $(“div”).click(function(){});
    JQ.bind(事件名称,function(){})

  7. 循环遍历
    JS:for循环
    JQ:$.each(数组,function…)/$(数组).each(function…..)

  8. JS与JQ的切换
    js转换成JQ:$(JS对象)
    JQ转换成JS:$(“”).get(0)/$(“”)[0]

  9. 展现与隐藏
    JS: 直接操作CSS .style.display = “none”/”block”
    JQ: 使用函数 show()/hide() slideDown()/sideUp() fadeIn()/fadeOut()

05- 案例一:使用JQ达成表单校验:必要和JQ的摸索及事件处理

  • JQ查找
    find();
    parent();
  • JQ事件处理
    trigger 那么些函数也会导致浏览器同名的暗中同意行为的执行
    triggerHandler

    • 第三,他不会触发浏览器暗中认可事件。
    • 其次,只触发jQuery自定义的事件处理函数。

02- 案例五:使用JQ实现下拉列表左右挑选:古板方法代码完结

  • 绑定监听事件 onclick
    document.getElementById("addRight").onclick = function(){}
  • 获得上手选中的选项并添加到左边

for(var i = selectLeft.options.length - 1;i>=0;i--){
    // 判断该元素是否被选中
    if(selectLeft.options[i].selected == true){
        //添加到右侧
        document.getElementById("selectRight").appendChild(selectLeft.options[i]);
    }
}
  • 总体当选则for循环当中不必要看清是不是选中

// 遍历左侧列表中的所有的option元素.
for(var i = selectLeft.options.length - 1;i>=0;i--){
    document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}

前天根本:

  1. Jquery查找和事件处理
  2. Bootstrap引入(4个文件,1个设置)
  3. Bootstrap的容器(.container)
  4. Bootstrap的栅格系统

相关文章

网站地图xml地图