优点

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

选择机制

选择器

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：true 深拷贝
   • false 浅拷贝

ajax全局钩子函数

• 作用：监听函数执行，当执行到某个状态，执行钩子函数对应的程序
• ajax的基本步骤:
  声明定义一个ajax对象
  1. 定义 open()
  2. 定义 send()
  3. 接收响应体内容
• 写法
  $(window).ajaxStart()阶段：ajax开始前
  1. 次数：有多个ajax,也只触发一次
  2. 注意：如果一个作用域下,有多个人ajax,只会在第一个 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(\'所有请求都结束了\')})