前端之jQuery及Bootstrap框架

jQuery相关

三级菜单展示

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')

直接操作css属性

// 两个参数设置属性
$('#p1').css('font-size','24px')
// 一个参数获取属性
$('#p1').css('font-size')

// 一次设置多个属性
$('#p1').css({"border":"1px solid black","color":"blue"})

位置操作

// 不加参数获取位置参数
$(".c3").offset()
// 加参数设置位置参数
$(".c3").offset({top:284,left:400})

// position只能获取值，不能设置值

// scrollTop获取当前滚动条偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 设置滚动条偏移量

尺寸

// 盒子模型测试下列参数
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
// 加参数标签设置值

文本操作

// text() html() 不加参数获取值，加参数设置值
// val() 不加参数获取值，加参数设置值

自定义登陆校验

<form action="">
  <div>
    <label for="input-name">用户名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密码</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) {
      $("#input-name").siblings(".error").text("用户名不能为空");
    }
    if (password.length === 0) {
      $("#input-password").siblings(".error").text("密码不能为空");
    }
  })
</script>

<!--js代码取消默认事件的方式-->
return false

属性操作

// 获取文本属性
$('#d1').attr('s1')  // 获取属性值
$('#d1').attr('s1','haha')  // 设置属性值
$('#d1').attr({'num':50,'taidi':'gay'})  // 设置多个属性
$('#d1').removeAttr('taidi')  // 删除一个属性

// 获取check与radio标签的checked属性
$('#i1').prop('checked')
$('#i1').prop('checked',true)

文档处理

// 标签内部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))

// 标签内部头部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))

// 标签外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 标签外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 替换标签
replaceWith()  // 什么被什么替换
replaceAll()  // 拿什么替换什么

// 克隆事例
<button id="b2">屠龙宝刀，点击就送</button>
// clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true参数
  });

事件

// click事件以上面的克隆案例为参考

// hover事件
$('p').hover(  // 写两个函数一个表示鼠标移进去，另一个标示鼠标移出来
  function () {
    alert('来啦，老弟')
  },
  function () {
    alert('慢走哦～')
  }
)
// input实时监听
    $('#i1').on('input',function () {
        console.log($(this).val())
    });

// focus/blur 其他同理js事件

// 取消标签默认的事件
return false

$('input').click(function (e) {
        alert(123);
        // return false
        e.preventDefault();
    });


// 事件冒泡
div>p>span  // 三者均绑定点击事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });

// 事件委托
<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>

文档加载

$(document).ready(function(){
// 在这里写你的JS代码...
})

$(function(){
// 你在这里写你的代码
})

jQuery自带的动画效果

// 标签记得设置高和宽

$('img').hide(5000)
$('img').show(5000)

$('img').slideDown(5000)
$('img').slideUp(5000)

$('img').fadeIn(5000)
$('img').fadeOut(5000)
$('img').fadeTo(5000,0.4)

each()

$.each(array,function(index){
  console.log(array[index])
})

$.each(array,function(){
  console.log(this);
})

// 支持简写
$divEles.each(function(){
  console.log(this)  // 标签对象
})

data()

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
$("div").data("k");//返回第一个div标签中保存的"k"的值
$("div").removeData("k");  //移除元素上存放k对应的数据

Bootstrap框架

生产环境下载

CDN简介(内容分发网络)

bootstrap文件划分

• js

  只需要留一个bootstrap.min.js即可

• css

  只需要一个bootstrap.min.css即可

• fonts

  都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

注意

bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery

实例精选

实际网站示例

Normalize.css(不同浏览器样式一致性)

布局容器

• container与container-fluid

栅格系统

• row(行)
• col(列)

<style>
        .red {
            background-color: red;
            border: 3px solid green;
            height: 100px;
        }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>
        <div class="col-md-6 red"></div>
    </div>
</div>
<!--
        6，6
        2，10
        1～12
        再次理解class里面写的属性值到底是干啥的
-->
<!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->

媒体查询

<style>
                .c1 {
            background-color: red;
        }
        @media screen and (max-width: 600px){
            .c1 {
                background-color: green;
            }
        }
</style>                
<div class="col-md-6 red c1"></div>

响应式列重置

<style>
                .c2 {
            background-color: red;
        }
        .c3 {
            height: 60px;
        }
</style>
<div class="container">
    <div class="row">
  <div class="col-xs-6 col-sm-3 c3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
</div>
</div>

列偏移

<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="lead">...</p>
<mark>highlight</mark>
<!--两者效果一样，但是语义不一样-->
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>


<!--列表组-->
<ul class="list-unstyled">
  <li>...</li>
</ul>

<ul class="list-inline">
  <li>...</li>
</ul>

表格标签

<table class="table table-bordered table-hover table-striped"></table>
<tr class="active">...</tr>

表单

• 登陆示例

• input框提示信息显影

按钮

<button class='btn-success/btn-info/btn-primary/btn-danger/btn-warning'>
  按钮
</button>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

组件

<!--字体图标 意味着操作它跟操作普通文本一样   爱心图标举例-->
<!--图标大小可以通过调span标签所在的父标签调节-->

Font-Awesome简介

• css
• fonts

标签页

• 实际应用场景 >>> 购物网站物品各类信息(JS插件标签页)

JS插件

模态框

• data参数绑定

  <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

• 自定义代码

$('#myModal').modal('show/hide')

sweetalert插件

https://lipis.github.io/bootstrap-sweetalert/

下载只需要用dist文件夹

swal('标题')
swal('标题','文本')
swal('标题','文本'，'success')
swal('标题','文本','warning')
swal('标题','文本','info')
swal('标题','文本','error')