jQuery
jQuery能实现的效果,js都能实现;js能实现的效果,jQuery未必能实现
jQuery大体分为
事件
- 常用的基本事件
- 鼠标事件
- click
- dblclick
- mouseover
- mouseenter
- mouseout
- mouseleave
- mousewheel
- 安装滚动插件:bootCDN查找,jQuery-mousewheel
- 判断滚轮方向:e.origiEvent.wheelDelta
- 键盘事件
- keyup
- keydown
- keypress
- 表单事件
- focus
- blur
- change
- 系统事件
- unload
- load
- resize
- scroll
- 事件绑定
- 绑定
- on / one
- 解除绑定
- off
- 事件的主动触发
- trigger
- 已经给某个元素绑定了某个行为
- 通过 trigger 来满足天剑主动触发某个行为
- 事件的详细信息
- 事件对象:e
- 事件类型:e.type
- 事件源:e.target
- 鼠标坐标
- 针对当前可视区:e.clientX / e.clientY
- 针对整个页面:e.pageX / e.pageY
- 阻止默认事件:e.prependDefault()
- 阻止冒泡:e.stopPropagation()
- 关联元素,原生中的,jQuery木有
dom操作
- 节点关系
- 父节点
- parent();
- parents();
- 子节点
- children():只能找到儿子级别的
- find():可以找到子子孙孙
- 上一个哥哥元素
- prev()
- 下一个弟弟元素
- next()
- 所有的哥哥元素
- prevAll()
- 所有的弟弟元素
- nextAll()
- 所有的兄弟元素
- siblings()
- 索引
- $(this).index()
- 第一个子元素
- $(xxx).first()
- 最后一个子元素
- $(xxx).last()
- dom的动态操作
- 创建元素
- $('<div></div>')
- 克隆元素
- clone() 如果参数为true,就是让当前克隆出来的对象具有被克隆对象的功能
- 插入到容器的末尾
- append()
- appendTo()
- 插入到容器的开头
- prepend()
- prependTo()
- 插入到指定元素的后面
- insertAfter()
- 插入到指定元素的前面
- insertBefore()
- 删除指定的元素
- remove()
- dom的属性操作
- 获取
- attr(一个参数)
- 设置
- attr(attr,value)
- 移除属性
- removeAttr(attr)
数据交互
- url: 请求地址
- type: 请求方式
- get
- post
- jsonp
- 可以实现跨域请求数据
- 浏览器同源策略
- 协议
- http / https
- 域名
- 端口号
- http -> 80
- https -> 443
- 协议
- data: 请求参数
- async: 是否异步
- cache: 是否缓存
- jsonp: 如果请求的json地址中,全局函数名字不是callBack,通过设置jsonp重新设置
- dataType: 返回的数据类型
- json
- jsonp
- success: function(data){}: 请求成功
- error : 请求失败
选择器
- 基本选择器
- id
- tagName
- element
- 筛选
- 层级选择器
- :first -> .first()
- :last -> .last()
- :eq() -> .ep()
- :lt -> :gt
- :odd :even
- :parent
- 属性选择器
- $('div[class^="box"])
- 表单选择器
- $(:text').val()
运动
- show() / hide() -> toggle()
- fadeIn() / fadeOut() -> fadeToggle()
- slideDown() / slideUp() -> slideToggle
- animate()
扩展插件
- 实例方法:$().xxx()
- $('.wrap').trigger('click')
- $.extend(),给类上扩展静态方法,只有类能使用
- $('.wrap').trigger('click')
- 工具方法:$.xxx() ->$.ajax()
- $.fn.extend() -> 给原型上扩充方法 ->只有实例能使用$()