前端学习笔记——jQuery

一、jQuery简介

• 一个js的工具库，能够很方便的查询并存储出元素、操作元素。
• jquery中的变量名一般以$开头，如：$div、$var.
• 使用$()函数获取一个jquery对象：$('span')获取所有span元素
• 基础语法：$(selector).action()，首先获取jquery对象，然后执行操作

二、jquery常用API

• eq()
  读取对应索引位置的jquery对象。
  $('span').eq(2)，获取所有span，并找到第三个span（索引值从零开始），返回的是一个jquery对象。
• get()
  获取对应索引位置的dom对象。
  $('iuput').get(0)，获取所有input，并找到第一个，返回的是一个dom对象，等价于('input')[0]
• append()
  将参数jquery对象添加到调用append()的对象末尾
  $('div').append($('span'))，将${(}^{\prime }spa{n}^{\prime })添加到$(‘div’)里
• appendto()
  将调用appendto()的jquery对象添加到参数对象末尾
• prepend()
  将参数jquery对象添加到调用prepend()的对象开头
• prependto()
  将调用prependto()的jquery对象添加到参数对象开头
• before()
  将调用before()的对象添加到参数对象之前
• after()
  将调用after()的对象添加到参数对象之后
• 设置样式类
  css()获取或设置样式。
  addClass()添加类。
  hasClass()判断是否包含某个类。
  removeClass()移除类。
• 设置属性
  attr()获取或读取属性。
  removeAttr()移除属性。
• 绑定事件
  事件名()绑定事件；
  addEventListener()添加事件监听；
  on()绑定事件；
  one()绑定一次性事件；
  off()解除事件绑定；
• 设置内容
  text()设置文本内容，相当于innerText；
  html()设置内容，相当于innerHtnl；
• 遍历元素
  each()参数是一个回调函数，该回调函数可以获取两个参数，第一个表示当前遍历元素的索引，第二个参数表示当前遍历元素，该元素是一个dom对象而不是jquery对象！

三、jquery进阶

• jquery动画特效

方法	作用
show	显示元素
hide	隐藏元素
toggle	开关元素/原理是设置元素的display属性
animate	自定义动画
fadeIn	渐入
fadeOut	渐出
fadeTo	渐变到指定透明度
fadeToggle	开关渐变
slideUP	滑上
slideDown	滑下
slideToggle	滑动开关

• ready事件
  jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。然而，如果在页面渲染完成前调用jquery方法会无法生效，因为它找不到对应的dom对象，ready事件在界面加载完成后执行回调函数：
  $().ready(callback)等价于$(callback)
• 设置元素的位置与大小

方法	作用
position	只读，获取元素相对于其父元素的位置
offset	获取相对于视口的位置，可以对其赋值
width、height	获取元素宽高，可赋值
innerWidth，innerHeight	获取宽高（内容加内边距）
outerWidth，outerHeight	获取宽高（内容加内边距加边框）
scrollTop，scrollLeft	获取滚动条位置，可赋值