jQuery基础知识

jQuery

jQuery能实现的效果，js都能实现；js能实现的效果，jQuery未必能实现

jQuery大体分为

事件

1. 常用的基本事件

• 鼠标事件
  • click
  • dblclick
  • mouseover
  • mouseenter
  • mouseout
  • mouseleave
  • mousewheel
    • 安装滚动插件：bootCDN查找，jQuery-mousewheel
    • 判断滚轮方向：e.origiEvent.wheelDelta
• 键盘事件
  • keyup
  • keydown
  • keypress
• 表单事件
  • focus
  • blur
  • change
• 系统事件
  • unload
  • load
  • resize
  • scroll

2. 事件绑定

• 绑定
  • on / one
• 解除绑定
  • off

3. 事件的主动触发

• trigger
  • 已经给某个元素绑定了某个行为
  • 通过 trigger 来满足天剑主动触发某个行为

4. 事件的详细信息

• 事件对象：e
• 事件类型：e.type
• 事件源：e.target
• 鼠标坐标
  • 针对当前可视区：e.clientX / e.clientY
  • 针对整个页面：e.pageX / e.pageY
• 阻止默认事件：e.prependDefault()
• 阻止冒泡：e.stopPropagation()
• 关联元素，原生中的，jQuery木有

dom操作

1. 节点关系

• 父节点
  • parent();
  • parents();
• 子节点
  • children()：只能找到儿子级别的
  • find()：可以找到子子孙孙
• 上一个哥哥元素
  • prev()
• 下一个弟弟元素
  • next()
• 所有的哥哥元素
  • prevAll()
• 所有的弟弟元素
  • nextAll()
• 所有的兄弟元素
  • siblings()
• 索引
  • $(this).index()
• 第一个子元素
  • $(xxx).first()
• 最后一个子元素
  • $(xxx).last()

2. dom的动态操作

• 创建元素
  • $('
    ')
• 克隆元素
  • clone() 如果参数为true，就是让当前克隆出来的对象具有被克隆对象的功能
• 插入到容器的末尾
  • append()
  • appendTo()
• 插入到容器的开头
  • prepend()
  • prependTo()
• 插入到指定元素的后面
  • insertAfter()
• 插入到指定元素的前面
  • insertBefore()
• 删除指定的元素
  • remove()

3. dom的属性操作

• 获取
  • attr(一个参数)
• 设置
  • attr(attr,value)
• 移除属性
  • removeAttr(attr)

数据交互

1. url: 请求地址
2. type: 请求方式

• get
• post
• jsonp
  • 可以实现跨域请求数据
  • 浏览器同源策略
    • 协议
      • http / https
    • 域名
      • www.baidu.com
    • 端口号
      • http -> 80
      • https -> 443

3. data: 请求参数
4. async: 是否异步
5. cache: 是否缓存
6. jsonp: 如果请求的json地址中，全局函数名字不是callBack，通过设置jsonp重新设置
7. dataType: 返回的数据类型

• json
• jsonp

8. success: function(data){}: 请求成功
9. error ： 请求失败

选择器

1. 基本选择器

• id
• tagName
• element

2. 筛选

• 层级选择器
  • :first -> .first()
  • :last -> .last()
  • :eq() -> .ep()
  • :lt -> :gt
  • :odd :even
  • :parent
• 属性选择器
  • $('div[class^="box"])
• 表单选择器
  • $(:text').val()

运动

1. show() / hide() -> toggle()
2. fadeIn() / fadeOut() -> fadeToggle()
3. slideDown() / slideUp() -> slideToggle
4. animate()

扩展插件

1. 实例方法：$().xxx()
   • $('.wrap').trigger('click')
     • $.extend(),给类上扩展静态方法,只有类能使用
2. 工具方法：$.xxx() ->$.ajax()
   • $.fn.extend() -> 给原型上扩充方法 ->只有实例能使用$()