优点

• 强大的选择器机制
• 优质的隐私迭代
• 链式编程

选择机制

选择器

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‘)

筛选器

操作

属性操作

1. bool类型： prop()
2. 其他类型： 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.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)

jquery基本使用详解