python之路44 jQuery语法应用 与Bootstrap框架

写的略粗糙

咨询

https://www.cnblogs.com/Dominic-Ji/p/10490669.html

作业讲解

页面简陋定时器:
<input type="text" id="d1">
<button id="startBtn">开始</button>
<button id="stopBtn">结束</button>
<script>
   // 先写最简单的起步>>>:点击开始按钮 将那一刻的时间展示到input框中即可
   // 想让展示时间的代码能够根据时间的变化反复的执行>>>:循环定时任务
   //  再创建结束按钮点击即终止循环定时任务的执行>>>:结束定时任务
    let startBthEle = document.getElementById('startBtn');
    let inputEle = document.getElementById('d1');
    let stopBtnEle = document.getElementById('stopBtn');

    function showTime(){
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }
    // 全局定义一个存储计时器的变量名
   let t;
    startBthEle.onclick = function (){
        if(!t){
            t = setInterval(showTime,1000)
        }
    }
    stopBtnEle.onclick = function (){
       clearInterval(t)
        t=null;
    }
</script>

jQuery查找标签

1.基本选择器
基于jQuery导入的基础
$('#d1')       id选择器
$('.c1')       class选择器
$('div')       标签选择器
2.组合选择器
$('div#d1')        查找id是d1的div标签
$('span.c1')       查找含有c1样式类的span标签
$('div,span,p')    查找div或者span或者p标签
$('#d1,.c1,span')  查找id是d1的或者class含有c1的或者span标签
3.层级选择器
$('div p')          查找div里面所有的后代p标签
$('div>p')          查找div里面的儿子p标签
$('div+p')          查找div同级别下面紧挨着的p标签
$('div~p')          查找div同级别下面所有的p标签
4.属性选择器
$('[username]')     查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')  精准查询带 input框的含有username属性名并且值等于jason的标签
5.基本筛选器
:first   // 第一个
:last    //  最后一个
:eq(index) // 索引等于index的那个元素
:even      // 匹配索引索引值为偶数的元素 从0开始计数
:odd        //匹配所有索引为奇数的元素 从0开始计数
:gt(index)    //匹配所有大于给定索引值的元素
:lt(index)    //匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器)  // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
 $('li:first')   优化  $('li').first()

6.表单筛选器
$(':text')
$(':password')
$(':checked')     checked与selected都会找到
$(':selected')    只能找到selected
7.筛选器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntill("i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntill("i2")
$("#id").parent()
$("#id").parents()   //查找当前元素的索引的父辈元素
$("#id").parentsUntill("#i2")  //查找当前元素的所有父辈元素 知道遇到匹配的填写的元素为止
$("#id").children(); //儿子们
$("#id").siblings();  //兄弟们

操作标签

1.class操作
   addClass()
classList.add()     增加
   removeClass()
classList.remove()  移除操作
   hasClass()
classList.contains()  判断
   toggleClass()
classList.toggle()    有就删除 没有就添加
2.位置操作
   $(window).scrollTop()  调转到顶部
3.文本操作
   text()       innerText
   html()       innerHTML
   val()        value
   jQuery对象[0].files    files[0]
4.创建标签
    document.createElement()    $('<a>')
5.属性操作
    attr()/removeAttr()   xxxAttribute()
    attr针对动态变化的属性获取会失真
      prop('checked') prop('selected')
6.文档处理
   $(A).append(B)  //把B追加到A
   $(A).appendTo(B) //把A追加到B
   $(A).prepend(B)   // 把B前置到A
   $(A).prependTo(B)  //把A前置到B

$(A).after(B) //把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
$(A).before(B)  //把B放到A的前面
$(A).insertBefore(B) // 把A放到B的前面

remove() //从DOM中删除所有匹配的元素
  empty() 删除匹配的元素集合中所有的子节点

jQuery事件

JS绑定事件
   标签对象.on事件名  = function(){}
jQuery事件绑定
   方式1:
        jQuery对象.事件名(function(){})
   方式2:
        jQuery对象.on('事件名称',function(){})
  ps:默认就用方式1 不行了再用方式2

补充:
    clone属性  克隆
       clone(true)  默认不可隆事件 加true就可以

事件相关补充

1.取消后续事件
   事件函数的最后return false即可
2.组织事件冒泡
   事件函数的最后return false即可
3.等待页面加载完毕再执行代码
   $(function(){})     缩略 写法
   $(document).ready(function(){})  完整写法
4.事件委托
    主要针对动态创建的标签也可以使用绑定的事件
    $('body').on('click','button',function(){})
    将body内所有的单击事件委托给button标签执行

jQuery动画效果(了解)

// 基本
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页面框架

这个引入和下载 需要提前做好准备 jQuery的引入也要提前做好 如果不想做 在head内沾上这个：

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

版本有很多   使用V3即可

文本结构
    bootstrap.css
    bootstrap.js
    ps:js部分是需要依赖于jQuery

CDN
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    pycharm自动提示问题
         最好本地导入几次

核心部分讲解(重点) 主要是布局方面

使用bootstrap其实只需要操作标签样式类即可

布局容器
   class = 'container'   有留白
   class = "container-fluid"  没有留白
栅格系统
   class = "row"    一行均分12份
屏幕参数
   cpl-md-6分布  col-xs-2贼小 col-sm-3小 col-lg-略小
栅格偏移
   col-md-offset-3

重要样式

可以自己试着用框架进行调整页面

https://v3.bootcss.com/components/

1.表格样式
  <table class = "table table-hover table-striped">
   颜色
    <tr class = "success">
2.表单标签
     class= "form-control"
3.按钮组
     class = "btn btn-primary btn-block"

组件

1.图标
  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
   https://fontawesome.com.cn/
2.导航条
  class = "navbar navbar-inverse"
3.其他