jQuery + Bootstrapt /sass

---

一、jQuery是什么？

jQuery是一个JavaScript库，它简化了客户端JavaScript编程的过程，特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。

二、jQuery 基本使用

1. 入口函数

  <!-- 引入 jQuery -->
  <script src="./jquery.min.js"></script>
  <script>
  // 入口函数
      //      等着页面加载完毕再执行里面的内容
      $(function(){
          $('div').hide()
      })
  </script>

2.jQuery的基本使用

// 隐式迭代：给匹配到的所有元素进行循环遍历，执行相应的方法
    $('div').css('background','pink') //给所有div设置背景颜色为粉色


  // parent() 查找亲父级
      $('.son').parent()
  // parents()查找所有的祖先元素
  	  $('.son').parents('.one') // 查找名为one的祖先元素

  // 查找子级 （亲子级）类似子代选择器
      $('.parent').children()
      $('.parent>.son')
      
  // 查找里面所有的孩子 类似后代选择器
      $('.parent').find('.son')
      $('.parent .son')

  // 兄弟元素 siblings 除了自身之外的所有兄弟元素
      $('ol .three').siblings().css('color','#096')
      
  // 第 n 个元素
      // (1) 可以利用选择方法选择（更推荐这种方法）
          $('ol li').eq(1).css('color','pink')
      // (2) 可以利用选择器的方式选择
          $('ol li:eq(1)').css('color','pink')

1.隐式迭代

// 隐式迭代 给所有button都添加了 点击事件
    $('button').click(function(){
        // 给当前点击的按钮加背景
        $(this).css('background','#096')
        // 其余的元素去掉背景 隐式迭代
        $(this).siblings('button').css('background','')
    })

2. 链式编程

	// 给当前点击的按钮加背景
    $(this).css('background','#096')
    // 其余的元素去掉背景 隐式迭代
    $(this).siblings('button').css('background','')

//链式编程
 $(this).css('background','#096').siblings('button').css('background','')

3. 操作样式之 CSS方法

// 属性名一定要加引号，属性与属性值之间用 逗号分隔
    $('div').css('width','200px')
    $('div').css('height',200) // 数值不加单位 会内部处理自动加上
    $('div').css('background','#096')

// 可以用 {} 设置多个属性
    $('div').css({
        width: 400,
        height: 400,
        backgroundColor: '#096' // 如果是符合属性必须采用驼峰命名法
    })

4.操作样式之 操作类

  // 1. 添加类 addClass()
      $('div').click(function(){
          $(this).addClass('active')
      })
  // 2. 删除类 removeClass()
      $('div').click(function(){
          $(this).removeClass('div1')
      })
  // 3. 切换类 toggleClass()
      $('div').click(function(){
          $(this).toggleClass('active')
      })

5.jQuery 的属性

 // 1. prop() 获取/修改元素固有的属性值
     console.log($('a').prop("href"));
     // 可修改固有的属性值
     $("a").prop("title","number")
         
 // 2. attr() 获取/修改自定义属性
     console.log($('div').attr('index'));
     $('div').attr('data-index',"5")

 // 3. data() 数据缓存，这个里面的数据是存放在元素的内存里面，DOM看不见，但可以取它的值
     $('span').data("uname","anna")
     console.log($('span').data("uname"));
     // 这个方法获取H5自定义属性 不用写data- ，并返回的是数字型
     console.log($("div").data("index"));

 // 4. 保留小数位数 toFixed()
	$("div").text(price).toFixed(2) // 保留两位小数

1. 补充复选框

$(“.ipt:checked”).length 判断被选中的复选框个数
$(“.ipt”).length 判断当前所有复选框的个数

6. jQuery 内容文本值

// 1. html() 获取设置元素的内容 --带标签和内容一起输出
    console.log($('div').html()); // <span>这是内容</span>
    $("div").html("123") // 修改div里面的值为 123

// 2. text() 获取设置元素文本内容 --只输出内容，不带标签
    console.log($('div').text()); // 这是内容
    $('div').text("123") // 修改div里面的值为 123


// 3. val() 获取设置表单值
    console.log($('input').val()); // 请输入内容
    $("input").val("123") // 修改input的value值为 123

7. jQuery 元素操作

1. 遍历元素 each()

// 1. each() 主要遍历Dom元素 
      // each(function(index,domEle){}) 有两个参数：索引和DOM元素对象(不是jQuery对象)
        $('div').each(function(index,domEle){
            // 回调函数第一个参数一定是索引
            console.log(index);
            // 回调函数第二个参数一定是DOM元素对象
            console.log(domEle);
        // 要转成jQuery对象才能使用jQuery方法
            $(domEle).css('color',"green") 
            sum += parseInt($(domEle).text())
            
        })
        console.log(sum);

//2. $.each() 主要用于数据处理：数组、对象 
        var arr = ["green","red","pink"]
        $.each(arr,function(index,ele){ // 回调函数参数：索引号和对应的值
            console.log(index); // 索引
            console.log(ele); // 对应值
        })
        $.each({name:"anna",age:19},function(i,ele){
            console.log(i); // 属性
            console.log(ele); // 属性值
        })

2. 创建、添加、删除元素

// 1. 创建元素 
        var li = $("<li>Now的li</li>")
        var div2 = $("<div>2</div>")

// 2. 添加元素 
    // (1)内部添加
        $("ul").append(li) // 在元素内部添加元素并放在最后面
        $("ul").prepend(li) // 在元素内部添加元素并放在最前面
    // (2)外部添加
        $("div").after(div2) // 在元素外部添加元素并放在最后面
        $("div").before(div2) // 在元素外部添加元素并放在最前面

// 3. 删除元素
        $("ul").remove() // 把自己删除 包括内部所有的元素
        $("ul").empty() // 只会删除当前元素内部的子节点 孩子
        $("ul").html("") // 只会删除当前元素内部的子节点 孩子 (和empty()作用一致)

8. jQuery 尺寸、位置操作

1. 尺寸

// 1. 取得匹配元素宽度和高度值 只算盒子本身的width/height
    $("div").width()
    $("div").height()

// 2. 取得匹配元素宽度和高度值 包含padding
    $("div").innerWidth()
    $("div").innerHeight()

// 3. 取得匹配元素宽度和高度值 包含padding 、border
    $("div").outerWidth()
    $("div").outerHeight()
    console.log($("div").outerWidth(true),$("div").outerHeight(true));

// 4. 取得匹配元素宽度和高度值 包含所有：padding 、border、margin
    $("div").outerWidth(true)
    $("div").outerHeight(true)

2. 位置

// 1. 获取设置距离文档的位置（偏移）offset()
    console.log($(".box").offset()); // 拿到一个对象
    console.log($(".box").offset().top);
    $(".box").offset({ // 可以修改它的偏移值
        top: 120,
        left: 130
    })

// 2.  获取设置距离带有定位父级的位置 position（如果没有带有定位的父级，则以文档为准）
    // 注意：这个方法只能获取值不能修改
    console.log($(".box").position());
    console.log($(".box").position().left);


// 3. 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
		$(document).scrollTop(100) // 可以直接设置值，文档加载直接跳到设置的位置
	// 页面滚动事件
		$(window).scroll(function(){
		    console.log($(document).scrollTop()); // 文档被卷去的像素
		})

三、jQuery 的动画效果

1. 显示、隐藏、切换

// show([时间],[速度],[回调函数]) 一般情况下不加参数，直接显示隐藏就行

// 1. 显示
  	$('.div1').show('slow','linear')
// 2. 隐藏
  	$('.div1').hide(1000,function(){
        alert('over')
    })
// 切换
    $('.div1').toggle()

2. 滑动效果

// 1. 显示
    $('div').slideDown()
    
// 2. 隐藏
    $('div').slideUp(500)

// 3. 切换
    $('div').slideToggle()

1. hover 鼠标经过事件

// hover 鼠标经过事件
  // $('div').hover(function(){},function(){}) --鼠标经过和离开分别触发的事件
      $('button').hover(function(){
          $('div').slideDown() // 鼠标经过
      },function(){
          $('div').slideUp() // 鼠标离开
      })
  
  // 简写：$('div').hover(function(){}) --鼠标经过和离开同时触发的事件
      $('button').hover(function(){
          $('div').slideToggle()
      })

2. stop() 停止动画排队

// stop() 方法必须写在动画的前面
    $('div').stop().slideToggle()

3. 淡入淡出效果

// 1.淡出 fadeOut()
    $('div').stop().fadeOut()
// 2.淡入 fadeIn()
    $('div').stop().fadeIn()
// 3.淡入淡出切换 fadeToggle()
    $('div').stop().fadeToggle()
// 4.修改透明度 fadeTo()
   // 速度、透明度必须要写
    $('div').stop().fadeTo(1000,.5)

4. 自定义动画 animate

// animate(属性,时间,回调函数)
//	注意动画只能是给元素做动画，不能是document(文档)等
	$('.warp').animate({
       left: 200,
       top: 200,
       opacity: .5
    },500)

四、jQuery 的事件导读

之前只能执行单个事件的触发，例：click()、mouseenter()、hover()等…
现在所有的触发都可以用 on() 事件

on() 事件

// on() 可以绑定多个触发事件,里面用对象来绑定
        $("div").on({
            click: function(){
                $(this).css("background","pink")
            },
            mouseenter: function(){
                $(this).css("background","skyblue")
            },
            mouseleave: function(){
                $(this).css("background","#096")
            }
        })


    // 如果需同时触发同一个事件(事件之间用 空格 隔开)
        $("div").on("mouseenter mouseleave",function(){
            $(this).toggleClass("active")
        })

1. 事件的委派 on()

绑定给父元素，触发在里面的子元素

     // click绑定在ul身上，但触发对象是ul里面的小li
     $("ul").on("click","li",function(){
         $(this).css("color","pink")
     })

 // on可以给未来动态创建的元素添加绑定事件，之前的事件做不到
     $("ul").on("click","li",function(){
         $(this).css("color","pink")
     })
     var li = $("<li>后来添加的li</li>")
     $("ul").append(li)

 })

2. 解绑事件 off()

// 1. 解绑ul身上所有的事件
    $("ul").off()

// 2. 解绑ul身上的点击 click事件
    $("ul").off("click")

// 3. 解除事件委托
    $("ul").off("click","li") // 解除ul里面li的点击事件

// 4. one() 它只能触发事件一次,就解除
    $("ul").one("click",function(){
        alert(11) // 只执行一次,就不会再执行
    })

3. 自动触发事件

// 1. 元素.事件()
    $("div").click() // 会触发元素的默认行为

// 2. 元素.trigger("事件")
    // $("input").trigger("focus") // 会触发元素的默认行为

// 与上面的区别就是不会触发元素的默认行为  
// 3. 元素.triggerHandler("事件") 不会触发元素的默认行为  
    $("div").triggerHandler("click")

    $("input").on("focus",function(){
        $(this).val("HELLO")
    })
    $("input").triggerHandler("focus")

4. 事件对象 event

e.stopPropagation() 阻止冒泡
e.preventDefault() 或 return false 阻止默认行为

    $(document).on("click",function(){
        console.log("点击了 document");
    })

    $("div").on("click",function(e){
        console.log("点击了 div"); // 点击div 会事件冒泡触发到document事件
        e.stopPropagation() // 阻止冒泡
        e.preventDefault() // 阻止默认行为
    })

五、jQuery 对象拷贝

$.extend([deep],target,obj)

    var objOld = {
        name: "nana",
        age: 20,
        msg: { // 复杂数据
            id: 99
        }
    }

    var objNew = {
        msg: {
            address:"beijing",
        }
    }

// 1. 浅拷贝 （拷贝地址，指向的还是同一个对象）
    // 浅拷贝只会把对象里的复杂数据类型的 地址 拷贝给目标对象
    // 如果目标拷贝对象存在冲突属性，对象会覆盖掉原来的属性
    $.extend(objNew,objOld)
    objNew.msg.id = 19 // 如果新拷贝里数据发生改变，原来对象内的数据也会跟着改变
    console.log(objNew); // 19
    console.log(objOld); // 19

// 2. 深拷贝 （拷贝对象而不是地址）
    // 如果里面有不冲突的属性会合并到一起
    $.extend(true,objNew,objOld)
    objNew.msg.id = 20
    console.log(objNew); // 20
    console.log(objOld); // 99

六、jQuery 多库共存

jQuery 使用 $ 作为标识符，随着jQuery的流行，其他js库也会使用这个符号作为标识符，这样一起搭配使用时会引起冲突
为了让 jQuery 和 js库不存在冲突，可以同时存在，这叫多库共存

    // 用$符号声明的函数
    function $(ele){ 
        return document.querySelector(ele)
    }
    console.log($("div"));

// 1. 如果 $ 符号冲突，我们就使用 jQuery
    // $.each() // 冲突报错
    jQuery.each()

// 2. noConflict() 让jQuery 释放对 $ 的控制使用，让用户自己定义一个符号
    var miss = jQuery.noConflict()
    console.log(miss("span"));
    miss.each()

七、jQuery 插件的使用

两个常用的插件下载网址：
jQuery之家(推荐使用)：http://www.htmleaf.com/
jQuery插件库：https://www.jq22.com/

使用步骤：

1. 引入相关文件（jQuery文件 和 插件文件）
2. 复制相关 html、css、js（调用插件）

常用插件有：瀑布流、懒加载、页面滚动…等

fullpage插件是一个基于jquery的全屏滚动插件
全屏滚动插件网址：
github 官网： https://github.com/alvarotrigo/fullPage.js
中文演示地址： http://www.dowebok.com/demo/2014/77/

八、Bootstrap 的使用

bootstrap的网址： https://v3.bootcss.com/
bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，必须引用jQuery文件
bootstrap用于开发响应式布局、移动端设备等的优选

bootstrap需要引用的文件：

1. bootstrap.css
2. jQuery.js
3. bootstrap.js

1. 布局容器

1. .container 类用于固定宽度并支持响应式布局的容器(内容在正中间)
2. .container-fluid 类用于100%宽度,占据全部视口的容器(内容顶头显示)

2. 栅格网格

1. 列组合: col-md-数值
   一行会把格子均分为12份,列总数不能超过12,超过12列会自动换到下一行
2. 列偏移: col-md-offset-数值
   不想两个相邻的格子挨着,可以使格子之间有空隙

  <!-- 布局容器 -->
  <div class="container">
    <!-- 行元素 -->
    <div class="row">
      <!-- 列元素 col-xs-数值/col-sm-数值/col-md-数值/col-lg-数值 -->
      <div class="col-md-4 col-lg-8" style="background-color: brown;">g</div>
      <div class="col-md-8 col-md-offset-3" style="background-color: chocolate;">k</div>
    </div>
  </div>

九、sass

浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。可以下载相关插件：Easy sass等等

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。

/* @import ""; --引入外部样式*/
	@import "./_不被编译的scss.scss";


/* 1. 变量，用$开头创建变量,支持字符串，数字，颜色值，布尔值等
   a. 在样式最外层声明的是全局变量 */
	$greenColor: green; /* 声明green颜色的变量*/
	$f18: 18px;
	div {
	    /* b. 局部变量，在样式层级里面声明，只能在当前层级使用。*/
	    font-size: $f18;
	    color: $greenColor;
	}

1.Sass 嵌套规则和属性

ul {
    >li {
        background-color: blue;
        &:hover {
            background-color: greenyellow;
        }
    }
}
/* 属性嵌套 相同属性前缀的样式使用。如：font-，background-等 */
.warp {
    font: {
        size: 20px;
        weight: 800
    }
    text: {
        align: center;
        overflow: hidden;
    }
}

2. 样式

1. mixin 与 include

混入(不会被渲染出来) --可以传参

	@mixin transititor($a,$b:2s) { /*混入的参数也可以定义默认值*/
	    transition: $a $b;
	    -webkit-transition: $a $b;
	    -moz-transition: $a $b;
	}
	@mixin border {
	    border: 1px solid #ccc;
	}
	.box {
	    @include transititor(all,1s);
	    @include border;
	}

/*  #{} 自定义设置样式属性名称变量*/
	@mixin text($key,$value){
	    font-#{$key}: $value;
	}
	.text-1 {
	    @include text(size,20px);
	    @include text(weight,700);
	}

2. @extend 与 继承

继承(会被渲染出来) --无法传参

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

	.base {
	    width: 100px;
	    height: 100px;
	    outline: none;
	}
	.box1 {
	    @extend .base;
	    background-color: azure;
	}
	.box2 {
	    @extend .base;
	    background-color: cadetblue
	}

3. 控制指令

1. @if @else if @else 表达式

    $size: 16;
    @if ($size < 16){
        color: red;
        span {
            font-weight: 700;
        }
    } @else if($size < 20){
        color: fuchsia;
    } @else {
        color: gray;
        span {
            font-weight: 400;
        }
    }

2. @for

/* from 1 to 5 --> 1 2 3 4 */
	@for $item from 1 to 5 {
	    li:nth-child(#{$item}) {
	        position: absolute;
	        left: ($item - 1) *100px;
	        top: ($item - 1) *100px;
	    }
	}
/* from 1 through 5 --> 1 2 3 4 5 */
	@for $i from 1 through 5 {
	    .col-#{$i} {
	        width: 100 / 5 * $i + "%";
	    }
	    
	    li:nth-child(#{$i}) {
	        position: absolute;
	        left: ($i - 1) *100px;
	        top: ($i - 1) *100px;
	    }
	}

3. @each

/* @each 遍历一组值 */
    $pos: left,center,right;
    @each $item in $pos {
        .text-#{$item} {
            text-align: $item;
        }
    }
/* @each 遍历多组值 */
    @each $name,$color,$size in (a1,#096,18px),(a2,#ccc,24px) {
        .bg-#{$name} {
            background-color: $color;
            font-size: $size;
        }
    }

4. @function 自定义函数

@function gap($value){
    @return 3 * $value;
}
.side {
    width: gap(5px);
}