You辉编程-BootStrap+jQuery快速上手

最新推荐文章于 2023-08-29 23:10:40 发布

You辉编程分享

最新推荐文章于 2023-08-29 23:10:40 发布

阅读量867

点赞数

文章标签： bootstrap jquery 前端

本文链接：https://blog.csdn.net/weixin_53781798/article/details/126888834

版权

一、BootStrap篇

1.入手声明
-直接到其官网上下载并引入bootstrap即可使用，这里主要介绍该怎么用。
2.一、BootStrap 按钮 button
-class="btn"
-颜色：class=btn-default,btn-primary,.btn-success,btn-warning,btn-danger
-大小：class=btn-lg,btn-sm,btn-block
示例代码：

<button class="btn btn-default">按钮</button>

3.BootStrap网格的使用
-需要在.container选择器里面使用，eg:class="col-md-*"来均分，总共有12个格子；
-eg:class="col-md-3" 表示在12个格子中占了3份；
示例代码：

<div class="container" style="100%">
  <div class="row"><!--表示网格按行从左边往右排列-->
      <div class="col-md-3" style="background-color:blue;">我占了3个格子</div>
      <div class="col-md-6" style="background-color:blue;">我占了6个格子</div>
      <div class="col-md-3" style="background-color:blue;">我占了3个格子</div>
  </div>
  <div class="row">
      <div class="col-md-3" style="background-color:blue;">我占了3个格子</div>
      <div class="col-md-6" style="background-color:blue;">我占了6个格子</div>
      <div class="col-md-3" style="background-color:blue;">我占了3个格子</div>
  </div>
  <!--此时就形成了网格-->
</div>

4.BootStrap面板的使用Panel
-panel用户页面按块组合
class="panel"
panel-heading
panel-body
panel-footer
颜色样式：panel-default,panel-primary,panel-success,panel-info,panel-waring等

示例代码：

<div class="panel panel-default">
  <div class="panel-heading">我是标题</div>
  <div class="panel-body">我是内容区</div>
  <div class="panel-footer">我是注脚</div>
</div>

5.BootStrap表格Table
-class="table"
加边框：table-bordered
鼠标移入效果：table-hover
单元样式：class=active,.success,.warning,.danger,.info

示例代码：

<div class="table table-hover table-bordered">
      <thead class="active">
        <tr>
          <th>用户</th>
          <th>年龄</th>
          <th>住址</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>张三</td>
          <td>22</td>
          <td>Kunming</td>
        </tr>
      </tbody>
</div>

6.BootStrap Form表单
-role="from" 加强语法
-class="form-horizontal" 水平排列
-class="form-group" 表示一组
-class="control-label" label标签的样式
-class="form-control" form表单的元素
-颜色：class=has-warning,has-error,has-success

示例代码：

<form role="form" class="form-horizontal">
      <!--这是一组form元素-->
      <div class="form-group">
        <label class="control-label">用户名</label>
        <div class="col-md-8">
          <input class="form-control" type="text">
        </div>
      </div>
      <!--这是一组form元素-->
      <div class="form-group">
        <label class="control-label">密码</label>
        <div class="col-md-8">
          <input class="form-control" type="text">
        </div>
      </div>
</form>

7.BootStrap 分页Pagination
-class=pagination,disbled,active(当前页码)
示例代码：

<ul class="pagination">
      <li><a href="#">上一页</a></li>
      <li><a href="#">1</a></li>
      <li  class="active"><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">下一页</a></li>
</ul>

8.BootStrap 轮播Carousel
-class="carousel slide" 可以滑动
-class="carousel-inner" 图片区域
-class="carousel-indicators" 点区域
-class="carousel-control" 左右滑动的按钮区域

-结合合jQuery
$('.carousel').carousel({
interval:1000 //1秒轮播一次
})

示例代码：

<div id="banner" class="carousel slide">
      <!--轮播点区-->
      <ol class="carousel-indicators">
        <li data-target="#banner" data-slide-to="0" class="active"></li>
        <li data-target="#banner" data-slide-to="1"></li>
        <li data-target="#banner" data-slide-to="2"></li>
      </ol>
      <!--轮播图片区-->
      <div class="carousel-inner">
        <div class="item active">
          <img src="图片地址" alt="" style="width:100%">
        </div>
        <div class="item">
          <img src="图片地址" alt="" style="width:100%">
        </div>
        <div class="item">
          <img src="图片地址" alt="" style="width:100%">
        </div>
      </div>
      <!--轮播左右按钮区-->
      <a class="left carousel-control" href="#banner" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      </a>
      <a class="right carousel-control" href="#banner" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      </a>
</div>

<script>
  $('.carousel').carousel({
      interval:1000 //1秒轮播一次
  })
</script>

.BootStrap模态框 Modal
-class=modal,modal-dialog" 表示创建一个模态框，需要所在盒子是id
-class=modal-content,modal-header,modal-body,modal-footer

示例代码：

<button onclick="showModal()"></button>
    <div id="myModal" class="modal" role="dialog" data-backdrop="static">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h3>modal-title</h3>
          </div>
          <div class="modal-body">
            这是内容区域
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal">关闭</button>
            <button class="btn btn-primary" onclick="hidModal()">提交</button>
          </div>
        </div>
      </div>
    </div>
  
  <script>
    function showModal(){
      $('#myModal').modal();
    }
    function hidModal(){
      $('#myModal').modal('hide');
    }
  </script>

二、jquery篇

1.入手声明
-直接到其官网上下载并引入jquery即可使用，这里主要介绍该怎么用。

2.jQuery主要选择器
-$('#myID') ID选择器
-$('div') 元素选择器
-$('.classname') 类选择器
-$('.classname1,.classname2,#id1') 组合选择器

示例代码：

<div id="myID"></div>
<button onclick="doClick()">点我</button>

<script>
    function doClick(){
      $('#myID').html('我是ID选择器');
    }
</script>

3.jquery的过滤选择器
-$('li:first') 去li的第一个、$('li:even') 取li的偶数个
-$("a[href='start.html']")
-$("a[href^='/jqury']")
-for表单选择器
$(':input')
$(':text')

示例代码：

<ul>
      <li>js</li>
      <li>java</li>
      <li>python</li>
      <li>c++</li>
      <li>go</li>
</ul>
<button onclick="doClick()">点击获取</button>

<script>
    function doClick(){
      alert($('li:first').html());
      $.each($('li:even'),function(){
        alert($(this).html());
      })
    }
</script>

4.jquery常用事件
-ready() 页面加载完成时执行这个函数
-click() 元素点击事件
-focus() 获取焦点事件
-blur() 失去焦点事件
-change() 内容修改事件

示例代码：

$(document).ready(function(){
  alert('页面已经加载完成');
})

.jquery常用函数
-html() 获取html的内容包含标签
-html("值") 设置html的内容
-text() 获取文本内容不包含标签
-text("值") 设置文本内容
-val() 获取值
-val(value) 设置值
-attr() 获取属性值或设置属性
-css() style中设置样式

示例代码：

<form id="myForm">
    <div>name:<input id="name" type="text" value="name"/></div>
</form>

<script>
    function doClick(){
      alert($('#myForm').text());
    }
</script>

5.jquery操作HTML元素
-remove() 删除元素
-empty() 清空元素
-append() 在被选元素的结尾插入元素内容
-prepend() 在被选元素的开头插入元素内容
-after() 在被选元素之后插入内容
-before() 在被选元素之前插入元素内容

示例代码：

l id="myUL">
      <li>js</li>
      <li>java</li>
      <li>python</li>
      <li>c++</li>
      <li>go</li>
</ul>
<button onclick="doClick()">点我删除</button>
<script>
    function doClick(){
      $('#myUL').remove();
    }
</script>

6.jquery的ajax请求
-ajax() 发起请求
-get() 发起get请求
-post() 发起post请求
-load() 从服务器加载数据，并把返回的数据放置到指定元素中

示例代码：

div id="myDIV" onclick="doClick()">hello</div>
<button id="myBtn">点我</button>

function doClick(){
      $.ajax({
        url:'http://localhos:xxx/xxx',
        success:function(data){
          console.log(data);
        }
      })

      $.get('http://localhos:xxx/xxx',function(data,status){
        console.log(data,status);
      })
      
      $.post('http://localhos:xxx/xxx',function(data,status){
        console.log(data,status);
      })

      $.('#myDIV').load('http://localhos:xxx/xxx');
}

7.jquery动态效果
-addClass 添加样式
-removeClass 删除样式

示例代码：

style>
      .active{
        background-color: blue;
      }
</style>

<ul id="myUL">
      <li><a href="javascript:void(0)">1</a></li>
      <li><a class="active" href="javascript:void(0)">2</a></li>
      <li><a href="javascript:void(0)">3</a></li>
      <li><a href="javascript:void(0)">4</a></li>
      <li><a href="javascript:void(0)">5</a></li>
</ul>

<script>
    $('document').ready(function(){
      let aArr = $('#myUL > ul >a');
      console.log(aArr.length)
      aArr.click(function(){
        $.each(aArr,function(){
          $(this).remove('active');
        })
        $(this).addClass('active');
      })
    })
</script>

8.jQuery异步加载更多内容

<ul id="myUL">
      <li><a href="javascript:void(0)">1</a></li>
      <li><a class="active" href="javascript:void(0)">2</a></li>
      <li><a href="javascript:void(0)">3</a></li>
      <li><a href="javascript:void(0)">4</a></li>
      <li><a href="javascript:void(0)">5</a></li>
</ul>
<div id="more"></div>
<button onclick="handleClickMore()">加载更多</button>

function handleClickMore(){
      $('#more').load('http://xxxxx/xxxx')
}