jQuery操作、动画效果、bootstrap框架

今日学习内容总结

      上周五的主要学习内容为 DOM 操作与 jQuery 的简介与查找方式。整个一周下来，我们对前端的学习其实也差不多该告一段落了，而今天就是对前端知识学习的收尾。

上周作业#

      写前须知：如果是原生js代码查找出来的对象，那么只能调用原生js的对象方法。如果是jQuery查找出来的对象，那么只能调用jQuery对象方法。

      原生js对象与jQuery对象的关系

      可以将jQuery对象看成是数组包了标签对象，原生js对象就是标签对象。

      实际代码：

Copy
    // body
        <input type="text" id="d1">
        <button id="d2">开始</button>
        <button id="d3">停止</button>

    // script
        // let startBtn = $('#d2')[0];
        let startBtn = document.getElementById('d2')
        let stopEle = document.getElementById('d3')
        let inputEle = document.getElementById('d1')
        // 4.专门定义一个展示时间的函数
        function showTime(){
            // 2.获取当前时间对象
            let cTimeObj = new Date()
            // 3.添加到input标签value属性中
            inputEle.value = cTimeObj.toLocaleString()
        }

        // 6.定义一个存储定时器对象的全局变量(多个函数都要用)
        let timeObj = null;
        // 1.先给开始按钮绑定一个点击事件
        startBtn.onclick = function () {
            // 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建
            if(!timeObj){
                // 5.循环定时任务
                timeObj = setInterval(showTime, 1000)  // 如果起了多个任务 变量只能指向最后一个
            }
        }

        // 7.给停止按钮绑定一个取消定时器的点击事件
        stopEle.onclick = function () {
            clearInterval(timeObj)  // 移除任务 并不会清空变量的值
            // 清空变量的值
            timeObj = null
        }

      补充知识：原生js代码查找标签绑定的变量名推荐使用 xxxEle 。jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 。

jQuery操作#

jQuery操作标签#

      class操作

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。

      操作的使用：

Copy
    //添加指定的css类名
    $('元素选择器')addClass('类名');

    //移除指定的css类名
    removeClass();

    //判断样式存不存在
    hasClass();

    //切换css类名,有则删除,无则增加
    toggleClass();

      样式操作

Copy
    原生js代码:
        标签.style.属性 = '值';

    jQuery代码:
        单个css样式
        $('元素选择器').css('属性','值');
        设置多个css样式
        $('元素选择器').css({'属性':'值',属性2:值2})

    // 示例
    $divEle.css(‘border’,‘5px solid black’)

      位置操作

Copy
    // 获取匹配元素在当前窗口的相对偏移或设置元素位置
    offset()
    // 获取匹配元素相对父元素的偏移量
    position()
    // 获取匹配元素相对滚动条顶部的偏移量
    scrollTop()
    // 获取匹配元素相对滚动条左侧的偏移量
    scrollLeft()

    // 获取左侧滚动条距离顶端的位移量
    $(window).scrollTop()

文本值操作#

方法	描述
text()	不填参数为获取文本，填写为设置文本
html()	不填参数为获取html文档，填写为设置html文档
val()	不填参数为获取用户输入的内容，填写为设置用户输入的内容

      html

Copy
    html()是获取选中标签元素中所有的内容

    html(val)设置值：设置该元素的所有内容 会替换掉 标签中原来的内容

    $('ul').html('<a href="#">百度一下</a>')
        //可以使用函数来设置所有匹配元素的内容
    $('ul').html(function(){
        return '哈哈哈'
    }) 

      text

Copy
    text() 获取所有匹配元素包含的文本内容

    text(val) 设置该所有匹配元素的文本内容

    注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

      var

Copy
    // 用途：val()用于操作input的value值

    // 示范一：
    <input type="radio" name="sex" value="male">
    <input type="radio" name="sex" value="female">
    <input type="radio" name="sex" value="none">
    $('input[type=radio]').val(['male',])

    // 示范二：
    <input type="checkbox" name="hobbies" value="111">
    <input type="checkbox" name="hobbies" value="222">
    <input type="checkbox" name="hobbies" value="333">
    $('input[type=checkbox]').val(['111','222']) 

属性操作#

      用于ID等或自定义属性：

Copy
    $('div').attr('style')                       // 返回第一个匹配元素的属性值
    $('div').attr('class','c1')                  // 为所有匹配元素设置一个属性值
    $('div').attr({'name':'jason','pwd':123})    // 为所有匹配元素设置多个属性值
    $('div').removeAttr('class')                 // 从每一个匹配的元素中删除一个属性

      用于checkbox和radio:

Copy
    prop('value') // 获取value属性的值
    prop('checked',true); // 设置属性
    removeProp('value') // 移除value属性

      在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。

文档处理#

      内部

Copy
    $(A).appendTo(B)    // 把A追加到B内部的最后面
    $(A).prependTo(B)   // 把A前置到B内部的最前面

      外部

Copy
    $(A).insertAfter(B)    // 把A放到B外部的后面
    $(A).insertBefore(B)   // 把A放到B外部的前面

      移除和清空元素

Copy
    $('.p1').remove()  // 从DOM中删除所有匹配的元素。====>把元素本身删掉
    $('.p1').empty()   // 删除匹配的元素集合中所有的子节点====》把元素的子元素都删掉（包含文本内容）

事件操作#

      js绑定

Copy
    // 方式1
        标签对象.onclick = function(){}

    // 方式2
        标签对象.onchange = function(){}
        

      jQuery绑定

Copy
    // 方式1
        jQuery对象.click(function(){})

    // 方式2
        jQuery对象.change(function(){})
        

      克隆

Copy
    // clone方法不加参数true，克隆标签但不克隆标签带的事件
    // clone方法加参数true，克隆标签并且克隆标签带的事件

悬浮事件#

      悬浮事件在只设置一个事件时会触发俩次，鼠标刚悬浮以及鼠标离开时都会触发。

Copy
    标签对象.hover(
    	function () {
    			alert("悬浮触发")
    	},  # 悬浮触发
    	function () {
    		alert("移走触发")
    	}  # 移走触发
    )

监听事件#

      jQuery绑定事件有两种方式：

Copy
	$('#d1').click(function(){})
	$('#d1').on('click',function(){})

      有时候第一种绑定事件的方式无法生效，那么就使用第二种。

      持续对input标签进行监听只要用户输入就会触发事件：

Copy
    // body
        <input type="text" id="d1">

    //  script
        $('#d1').on('input',function () {
            console.log($(this).val())
        })

阻止后续事件#

      如果给已经有事件的标签绑定事件，那么会依次执行。如果想要取消后续时间的执行，可以使用两种方式阻止。

Copy
    // 方式1(推荐使用)
	$('#d1').click(function () {
         alert(123)
         return false  //  取消当前标签对象后续事件的执行
        })

    // 方式2(自带关键字)
	$('#d1').click(function (e) {
            alert(123)
            e.preventDefault()
        })

事件冒泡#

      当我们在某一个元素上去触发一个事件时，比如鼠标移动事件，该元素所绑定的事件也会影响到其子元素，或者是在某一元素上触发事件时，该元素绑定的事件也会影响到其父元素，甚至又可以能直接影响到顶级父元素，这种现象就叫做”事件冒泡“。之所以称之为事件冒泡是指事件的响应会像水泡一样上升至最顶级对象。

      事件冒泡的作用

      事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

      阻止事件冒泡

Copy
    方式1  使用stopPropagation()函数

    方式2  使用return false阻止冒泡

事件委托#

      原理

      事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。如果不用事件委托，将ul下每一个li都去添加click事件监听，非常麻烦，而且对于内存消耗是非常大的，效率上需要消耗很多性能；另外就是如果通过js动态创建的子节点，需要重新绑定事件。

      而利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件，让你避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

      jQuery中实现事件委托的三种方法：

      1. $.on: 基本用法:$('.parent').on('click', 'a', function () { console.log('click event on tag a'); })，它是 .parent 元素之下的 a 元素的事件代理到$('.parent')之上，只要在这个元素上有点击事件，就会自动寻找到.parent元素下的a元素，然后响应事件。

      $.delegate: 基本用法:$('.parent').delegate('a', 'click', function () { console.log('click event on tag a'); })，同上，并且还有相对应的$.delegate来删除代理的事件。

      $.live: 基本使用方法:$('a', $('.parent')).live('click', function () { console.log('click event on tag a'); })，同上，然而如果没有传入父层元素$(.parent)，那事件会默认委托到$(document)上。

      写法：

Copy
    $(‘body’).on(‘事件类型’,‘选择器’,function(){})

动画效果#

      js的一些动态效果

Copy
    s: 规定显示效果的速度(时间)
    e: 规定在动画的不同点上元素的速度,默认值为 “swing”
    fn: 动态效果方法执行完之后，要执行的函数
    // 基本
        show([s,[e],[fn]])
        hide([s,[e],[fn]])
        toggle([s],[e],[fn])
    // 滑动
        slideDown([s],[e],[fn])
        slideUp([s,[e],[fn]])
        slideToggle([s],[e],[fn])
    // 淡入淡出
        fadeIn([s],[e],[fn])
        fadeOut([s],[e],[fn])
        fadeTo([[s],o,[e],[fn]])
        fadeToggle([s,[e],[fn]])
    // 自定义（了解即可）
        animate(p,[s],[e],[fn])

bootstrap框架#

基本介绍#

      什么是Bootstrap

      Bootstrap 是twitter公司推出的，专门用于开发响应式布局、移动设备优先的 WEB 框架。

      Bootstrap当前最新的版本的Bootstrap4, 但当下企业使用最多的是Bootstrap3

      Bootstrap3和4的区别

Copy
    1. CSS预处理器不同, Bootstrap3采用Less, Bootstrap4采用SASS

    2. 格栅种类不同, Bootstrap3提供4种格栅, Bootstrap4提供5种格栅

    3. 使用单位不同, Bootstrap3使用px作为单位, Bootstrap4使用rem作为单位

    4. 内部布局方式不同, Bootstrap3使用float布局, Bootstrap4使用flexbox布局

      Bootstrap兼容性

      Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。

      IE8以上都能完美使用, IE8以下需要通过一些额外的配置来保证其完整性

      基本使用

Copy
    必须先用script标签导入后使用
       1. 本地导入
       2. cdn导入
    bootstrap需要使用jQuery来实现动态效果

      文件组成

Copy
    bootstrap需要导入两个文件
    一个是css文件
    一个是js文件

布局容器#

Copy
    class = ‘container’ 两边有留白
    class = ‘container-fluid’ 没有留白

栅格系统#

Copy
    class = ‘row’ 默认开设一行均分12份
    class = ‘col-md-n’ 指定需要n份(切割浏览器界面)

表格样式#

      表格样式

Copy
    class=“table table-hover table-striped table-bordered”

      单元格颜色

Copy
    class=“active”
    class=“success”
    class=“warning”
    class=“danger”
    class=“info”

表单样式#

Copy
    .pull-left 左浮
    .pull-right 右浮

    class=‘form-control’
    针对radio和checkbox不能加

按钮#

Copy
    # 按钮样式
    class = 'btn'
    # 按钮颜色
    <a href="" class="btn btn-info">言多必失</a>
    <a href="" class="btn btn-danger">言多必失</a>
    <a href="" class="btn btn-warning">言多必失</a>
    <a href="" class="btn btn-primary">言多必失</a>
    <a href="" class="btn btn-success">言多必失</a>
    # 按钮尺寸
    <a href="" class="btn btn-success btn-sm">言多必失</a>
    <a href="" class="btn btn-success btn-lg">言多必失</a>
    <a href="" class="btn btn-success btn-block">言多必失</a>

图标样式#

Copy
    <span class=“glyphicon glyphicon-user”>

    // 更多样式去   http://www.fontawesome.com.cn/  查看

使用总结#

      上面的方法与使用其实只是很少的一部分，，bootstrap框架将前端样式的设计简化了，主需要引入css和js就能轻松完成样式设计，最具体的使用需要去bootstrap官方网站查看， 几乎都是直接看官网拷贝样式即可。