前端 jQuery与Bootstrap

jQuery查找标签

// 1.基本选择器
    $('#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="tom"]')    查找含有username属性名且值等于tom的标签
    $('input[username="tom"]')

// 5.基本筛选器
    :first                    // 第一个
    :last                     // 最后一个
    :eq(index)                // 索引等于index的那个元素
    :even                     // 匹配所有索引值为偶数的元素，从 0 开始计数
    :odd                      // 匹配所有索引值为奇数的元素，从 0 开始计数
    :gt(index)                // 匹配所有大于给定索引值的元素
    :lt(index)                // 匹配所有小于给定索引值的元素
    :not(元素选择器)            // 移除所有满足not条件的标签
    :has(元素选择器)            // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
     
    使用：
    $('li:first')   $('li').first()   // 查找到第一个li标签

// 6.表单筛选器
    $(':text')              // 找到所有的text
    $(':password')          // 找到所有的password
    $(':checked')           // 找到所有的checked与selected
    $(':selected')          // 找到所有的selected

// 7.筛选器方法
      // 下一个元素：
    $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
      // 上一个元素
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
      // 父元素
    $("#id").parent()
    $("#id").parents()        // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil()   // 查找当前元素的所有的父辈元素，直至匹配到那个元素为止。
      // 子元素与兄弟元素
    $("#id").children();   // 儿子们
    $("#id").siblings();   // 兄弟们
    """
    $("div").find("p")      # 查找div元素的后代p
    $("div").filter(".c1")  # 从结果集中过滤出有c1样式类的
    """

jQuery操作标签

// 1.class操作(样式类)
   addClass();      // 添加指定的CSS类名。
   removeClass();   // 移除指定的CSS类名。
   hasClass();      // 判断样式存不存在
   toggleClass();   // 切换CSS类名，如果有就移除，如果没有就添加。
   
  * 使用：
    classList.add()
    classList.remove()
    classList.contains()
    classList.toggle()

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

  * 使用：
    $(window).scrollTop()

// 3.文本操作
     // HTML代码：
   html()            // 取得第一个匹配元素的html内容
   html(val)         // 设置所有匹配元素的html内容
     // 文本值：
   text()            // 取得所有匹配元素的内容
   text(val)         // 设置所有匹配元素的内容
     // 值：
   val()             // 取得第一个匹配元素的当前值
   val(val)          // 设置所有匹配元素的值
   val([val1, val2]) // 设置多选的checkbox、多选select的值

// 4.创建标签
   document.createElement()   $('<a>')
 
// 5.属性操作
     // 用于ID等或自定义属性：
         """attr针对动态变化的属性获取会失真"""
   attr(attrName)            // 返回第一个匹配元素的属性值
   attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
   attr({k1: v1, k2:v2})     // 为所有匹配元素设置多个属性值
   removeAttr()              // 从每一个匹配的元素中删除一个属性
     // 用于checkbox和radio
   prop()                    // 获取属性
   removeProp()              // 移除属性
     // attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性
   $("#i1").attr("checked")  // undefined
   $("#i1").prop("checked")  // false

// 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事件

// 1. JS绑定事件
     标签对象.on事件名 = function(){}

// 2.jQuery事件绑定
     方式1：  jQuery对象.事件名(function(){})
     方式2：  jQuery对象.on('事件名称'，function(){})
     ps: 默认使用方式1，不行再用方式2

// 3.clone属性
    clone(true)    默认不克隆事件，                                              

jQuery相关补充

// 1.取消后续事件
       事件函数最后直接return false

// 2.阻止事件冒泡
       事件函数最后直接return false

// 3.等待页面加载完毕再执行代码
       $(function(){})                   //  缩略写法
       $(document).ready(function(){})   //  完整写法

// 4.事件委托
       主要针对动态创建的标签也可以使用绑定的事件
       
// 5.$('body').on('click','button',function(){})
       将body内所有的单机事件委托给button标签执行

// 6.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页面框架

// 1.Bootstrap地址
   https://www.bootcdn.cn/twitter-bootstrap/

// 2.font awesome地址
   https://fontawesome.com.cn/
     ps：font awesome是完全兼容Bootstrap的

// 3.版本使用v3即可
// 4.bootstrap.css/ bootstrap.jsjs
           部分需要依赖于jQuery

// 5.导入方式(链接或本地)
    <link 
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>

// 6.使用bootstrap来操作标签样式类
      // 布局容器
    class = "container"              有留白
    class = "container-fluid"        没有留白
      // 栅格系统
    class = "row"                    一行均分12份
    class = "col-md-8"               划分一行的12份
      // 屏幕参数
    col-md-6 col-xs-2 col-sm-3 col-lg-3
      // 栅格偏移
    col-md-offset-3

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

// 8.bootstrap组件
      // 1.图标
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      // 2.导航条
    class="navbar navbar-inverse"
      // 3.其他