jquery:选择机制，选择器，筛选器，属性操作，class操作，css操作，标签插入内容操作，事件绑定与删除，委托，特殊事件绑定，循环，获取元素站位，获取元素坐标，浏览器滚动，节点操作，阻止默认行为，标准动画，折叠动画，渐隐渐现，自定义动画，动画结束，ajax请求，深浅拷贝，ajax全局钩子函数，多库并存
优点
  • 强大的选择器机制
  • 优质的隐私迭代
  • 链式编程

选择机制

选择器

  1. 标签名

    $('div')

  2. id

    $('#id')

  3. class

    $('.clname')

  4. 属性

    $('div:[name='66']')

  5. 后代第一个

    $('ul>li:first')

  6. 后代最后一个

    $('ul>li:last')

  7. css结构为类

    $('ul>li:nth-child(2)')

  8. css 结构为类奇数

    $(ul>li:nth-child(odd))

  9. 索引

    $('ul>li').eq(2)

  10. 偶数

    $('ul>li:even')

筛选器

名称 写法
第一个 $('ul>li').first()
最后一个 $('ul>li').last()
下标索引 $('ul>li').eq(num)
上一个兄弟 $('ul>li').eq(num).prev()
下一个兄弟 $('ul>li').eq(num).next()
之前所有 $('ul>li').eq(num).prevAll()
之后所有 $('ul>li').eq(num).nextAll()
所有兄弟 $('ul>li').silnlings()
父级 $('ul>li').parent()
所有父级 $('ul>li').parents()
当前索引下标 $('ul>li').eq(2).index()
查看符合条件的标签 $('ul>li').find('条件')

操作

属性操作

  1. bool类型： prop()
  2. 其他类型： attr()
操作 prop attr
删除 dom.removeProp('属性') dom.removeAttr('属性')
获取 dom.prop('属性') dom.attr('属性')
添加 dom.prop('属性','值') dom.attr('属性','值')

class操作

  1. 新增

    dom.addClass('name')

  2. 删除

    dom.removeClass('name')

  3. 切换(有或没有)

    dom.toggleClass('name')

  4. 是否存在

    dom.hasClass('name')

css操作

  • 获取 dom.css('属性')
  • 设置 dom.css('属性','值')
  • 设置 dom.css({属性:值, 属性:值})

标签插入内容操作

  • dom.html()
  • dom.text()

事件

事件绑定与删除

  • 相关代码

    dom.on(类型，函数)

    dom.on(类型，数据，函数)

    dom.off(类型，函数) -- 删除

    dom.on('click', {name:"张三",age:18}, e=>{})

委托

dom.on(类型，委托对象，函数)

dom.on('click', 'span', e=>{})

特殊事件绑定

  1. dom.click(函数)
  2. dom.hover(函数，函数)
    移入移除效果
  3. dom.one(函数)
    触发一次
  4. dom.trigger(事件名称)
    立即触发一次
  5. $(window).ready()
    • DOM加载完成后
    • 等待dom树加载完即可
    • 可以执行有多次

循环

dom.each((k,v)=>{})

节点操作

获取元素站位

名称 写法
内容宽/高 dom.width() / dom.height()
内容+padding dom.innerWidth() / dom.innerHeight()
内容+padding+border dom.outerWidth() / dom.outerHeight()
内容+padding+margin dom.outerWidth(true) / dom.outerHeight(true)

获取元素坐标

  • 距离窗口

    dom.offset()
    dom.offset({left:0px,top:0px})

  • 距离父物体

    dom.position()

浏览器滚动

$(window).scrollTop()

$(window).scrollLeft()

节点操作

  1. 创建

    $('内容')

  2. 写入

    • 父级最后

      fdom.append(dom)

      dom.appendTo(fdom)

    • 父级起始

      fdom.prepend(dom)

      dom.prependTo(fdom)

    • 标签之后

      dom.after(ndom)

      ndom.insertAfter(dom)

    • 标签之前

      dom.before(ndom)

      ndom.insertBefore(dom)

  3. 节点/标签替换

    dom.replaceWith(ndom)

    ndom.replaceAll(dom)

  4. 删除

    dom.empty

    dom.remove()

  5. 克隆

    dom.clone()

    • 参数1：默认false 子集事件默认也会克隆
    • 参数2：默认true
    • 参数1:true 参数2:false 只克隆本身不可隆子元素事件

阻止默认行为

  • 冒泡： stoppropagation（）
  • 捕获： preventDefult（）
  • 所有： return false

动画

标准动画

  • 消失

    dom.hide(时间, 方式, 函数)

  • 显示

    dom.show(时间, 方式, 函数)

  • 切换

    dom.toggle(时间, 方式, 函数)

 // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').toggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })

折叠动画

  • 消失

    dom.slideUp()

  • 显示

    dom.slideDown()

  • 切换

    dom.slideToggle()

渐隐渐现

  • 消失

    dom.fadeOut()

  • 显示

    dom.fadeIn()

  • 切换

    dom.fadeToggle()

自定义动画

dom.animate({属性;值, ...}, 时间, 方式, 函数)

动画结束

  • 从当前运动为止

    dom.stop()

  • 从上个一个运动结束

    dom.finish()

扩展

ajax请求

 $.ajax({
        //请求方式
        type : "POST",
        //请求的媒体类型
        contentType: "application/json;charset=UTF-8",
        //请求地址
        url : "http://127.0.0.1/admin/list/",
        //数据，json字符串
        data : JSON.stringify(list),
        //请求成功
        success : function(result) {
            console.log(result);
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    });

深浅拷贝

  1. 浅拷贝：拷贝复制引用类型的内存地址
  2. 深拷贝：拷贝复制，引用类型的数据，两个变量之间没有相互联系

    $.extend(参数1, 参数2, 参数3)

    • 参数1：
      1. true 深拷贝
      2. false 浅拷贝
    • 参数2: 新变量
    • 参数3: 原始变量

ajax全局钩子函数

  • 作用：监听函数执行，当执行到某个状态，执行钩子函数对应的程序
  • ajax的基本步骤:
    1. 声明定义一个ajax对象
    2. 定义 open()
    3. 定义 send()
    4. 接收响应体内容
  • 写法
    1. $(window).ajaxStart()
      • 阶段：ajax开始前
      • 次数：有多个ajax,也只触发一次
      • 注意：如果一个作用域下,有多个人ajax,只会在第一个 ajax 请求之前触发
    2. $(window).ajaxSend()
      • 阶段：ajax发送前
      • 次数：有几个send，触发几次
    3. $(window).ajaxSuccess()
      • 阶段：ajax请求成功
      • 次数：成功几次，触发几次
    4. $(window).ajaxError()
      • 阶段：ajax失败
      • 次数：失败几次，触发几次
    5. $(window).ajaxComplete()
      • 阶段：ajax请求完成
      • 次数：完成几次，触发几次
    6. $(window).ajaxStop()
      • 阶段：ajax所有请求完成
      • 次数：多次请求结束，只有最后一次会触发
    // 在请求,开始时会触发
    // 多个请求,只会触发一次
    $(window).ajaxStart(()=>{
        console.log('第一个请求就要开始了');
    })

    // 在发送请求时会触发
    // 多个请求,会触发多次
    $(window).ajaxSend( function(){
        console.log('发送了一个请求');
    } )

    // 在请求成功时,会触发
    // 多个请求成功,会触发多次
    $(window).ajaxSuccess(()=>{
        console.log('有一个请求成功了')
    })

    // 在请求失败时,会触发
    // 多个请求成功,会触发多次
    $(window).ajaxError(()=>{
        console.log('有一个失败成功了')
    })

    // 在请求结束时,会触发
    // 多个请求结束,会触发多次
    $(window).ajaxComplete(()=>{
        console.log('有一个请求结束了')
    })

    // 在所有请求结束时,会触发
    // 只会触发一次
    $(window).ajaxStop(()=>{
        console.log('所有请求都结束了')
    })

多库并存

  • 问题

    1. 当其他封装的插件或框架 操作方法与jQuery操作方法发生冲突
    2. 使用的也是 $/jQuery 语法来调用
    3. 操作语法就会发生冲突，需要调用jquery的调用方法

  • 写法

    1. $.noconflict() $符号不能用
    2. $.noconflict（true） $ 和 jQuery都不能用

    let abc = $.noconflict(true)

    abc(‘div’).css(color,red)