jQuery

认识jQuery

JQ是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API，在开发时，以最少代码实现最多的功能

学习文档

中文文档：https://www.jquery123.com/

JQ功能

• 控制页面样式

• 访问和操作DOM

• 事件处理

• 提供大量的插件

• Ajax技术的封装

• 提供大量的动画处理

• ........

JQ引入

• 本地引用

  <script src="./jquery-3.3.1.min.js"></script>

• CDN引用

注意：JQ必修先引入，然后才能调用它的API，可以在head标签中引入，也可以在最后引入，一般在最后引入

选择器

• 基本选择器

  id: #id

  class: .class

  element: .element

  *选择所有标签（项目开发时，不要用，因为它要匹配完所有的标签，性能差）

  ， 选择多个DOM

• 层次选择器

  选择器1 选择器2：选择选择器1的所有的后代元素（选择器2）

  选择器1>选择器2：只选择选择器1的子元素

  选择器1+选择器2：选择紧挨着选择器1的相邻元素（兄弟元素）

  选择器1~选择器2：选择选择器1的所有兄弟元素

• 过滤选择器

  1. 简单过滤选择器 :

  2. 内容过滤选择器 :

  3. 可见性过滤器 :

  4. 属性过滤器 [ attr ]

• 表单选择器

  1. : input

  2. :button

  3. :submit

  4. :text

  5. :password

DOM操作

• 属性操作

  1. 获取属性值 attr（属性名）

  2. 设置属性 attr（属性名，属性值）

  3. 删除属性 removeAttr（属性名）

• 文本内容操作

  1. 获取文本及表单组件内容

     html() 可以操作标签

     text() 只能操作文本内容，不操作标签

     val() 只能操作表单组件

  2. 设置（修改）文本及表单组件内容

     html(内容)

     text(内容)

     val(内容)

  3. 删除文本及表单组件内容

     html("")

     text("")

     val("")

• 元素样式操作

  1. 设置样式 css（"属性名"，"属性值"） 设置一个样式

     css（{"属性名1":"属性值1","属性名2":"属性值2",...})

  2. 操作类

     添加类：addClass（"类名"） 或addClass（"类名1 类名2 ..."）

     删除类：removeClass（"类名"） 或 removeClass（"类名1 类名2..."）

• 页面元素操作

  1. 创建DOM节点

     $(dom节点内容)

  2. 在内部添加节点

     append()

     appendTo()

     prepend()

     prependTo

  3. 在外部添加节点

     before()

     insertBefore()

     after()

     insertAfter()

  4. 复制节点

     clone()

     clone(true)

  5. 删除节点

     remove()

     remove(dom节点)

     empty（）

遍历DOM

$(dom).each(function(index,dom){  //index为下标，dom为遍历的每一个dom元素
​
})

事件

• click() #鼠标单击

• mouseover() #鼠标进入（进入子元素也触发）

• mouseout() #鼠标离开（离开子元素也触发）

• mouseenter() #鼠标进入（进入子元素不触发）

• mouseleave() #鼠标离开（离开子元素不触发）

• blur() #元素失去焦点

• focus() #元素获得焦点

• hover() #同时为mouseenter和mouseleave事件指定处理函数

• ready() #DOM加载完成

• resize() #浏览器窗口的大小发生改变

• scroll() #滚动条的位置发送改变

• submit() #用户递交表单

动画

• 显示/隐藏/切换

  show()

  hide()

  toggle()

• 上下滑动

  slideDown()

  slideUp()

• 淡入/淡出

  fadeIn()

  fadeOut()

  fadeTo() #淡入到指定的不透明度

• 动画

  animate() 方法