一.基础
- 入口函数(文档树加载完成就开始执行)：
$(document).ready(function() {})和$(function() {}) - $就是一个函数:
$();$ === jQuery参数不一样，功能不一样 - jQuery对象与DOM对象之间的转换，jQuery对象其实就是DOM对象的包装集
- jquery对象转DOM对象：
var $li = $("li");通过$li[0]或$li.get(0)获取 - DOM对象转jquery对象：
var $obj = $(domObj);$(document).ready(function(){});就是DOM对象转jQuery对象
- jquery对象转DOM对象：
二.选择器
- 基本：
- 层级：
$("ul>li")子代$("ul li")包括孙子的后代元素
- 过滤(带冒号)：
$("li:eq(2)")索引号2的li$("li:odd")索引号为奇的li$("li:even")索引号为偶的li
- 筛选(类似过滤,用法不一样,是方法)：
$("ul").children("li")相当于子代选择器$("ul").find("li")相当于后代选择器$("#first").siblings("li")找兄弟不包括自己$("#first").parent()找父亲$("li").eq(2)相当于$("li:eq(2)")$("li").next()找下一兄弟$("li").prev()找上一兄弟
三.操作样式
- css操作
- 设置单个样式
$("#one").css("background","gray") - 设置多个
$("#one").css({"width":"400px","height":"200px"}) - 获取样式
$("div").css("background-color")
- 设置单个样式
- class操作
- 添加样式
$("div").addClass("one") - 移除样式
$("div").removeClass("one") - 判断有无类
$("div").hasClass("one") - 切换样式
$("div").toggleClass("one")
- 添加样式
四.操作属性
- attr
- 设置单个属性
$("#one").attr("background","gray") - 移除属性
$("div").removeAttr("one")
- 设置单个属性
- prop
- 对于布尔类型的属性，disabled，selected，checked，只能用prop
五.操作节点
- 创建节点
$("<span></span>") - 添加节点append appendTo prepend prependTo after before
- 清空内容empty
- 删除节点remove
- 克隆节点clone
六.动画
三组基本动画
- 基本效果show/hide
- 滑动slideDown/slideUp/slideToggle
- 淡入淡出fadeIn/fadeOut/fadeToggle
自定义动画
$(selector).animate({params},speed,callback);
停止动画stop
七.特殊属性操作
$("#name").val()：设置和获取表单元素的值input、textarea$("div").html()和$("div").text()：html方法相当于innerHTML text方法相当于innerText$(window).width()和$("img").height(200)：设置或者获取高度$(window).scrollTop()和$(window).scrollLeft()：设置或者获取垂直滚动条的位置$(selector).offset()和$(selector).position()：offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
八.事件机制
- 简单事件绑定(不能同时注册多个)：click(handler)
- bind事件绑定(不支持动态事件绑定)：
$("p").bind("click mouseenter", function(){//事件响应方法}) - delegate事件绑定：
$(".parentBox").delegate("p", "click", function(){//为.parentBox下面的所有的p标签绑定事件}); - on事件绑定(推荐)：
- 注册简单事件(由自己触发不支持动态绑定)：
$(selector).on( "click", function() {}) - 注册委托事件：
$(selector).on( "click","span", function() {})给$(selector)绑定代理事件，它内部元素span才能触发这个事件，支持动态绑定
- 注册简单事件(由自己触发不支持动态绑定)：
- 事件解绑：
$(selector).unbind("click")$( selector).undelegate( "click" )$(selector).off("click")(推荐)
- 事件触发：
$(selector).click()、$(selector).trigger("click") - 事件对象
- screenX和screenY距离屏幕最左上角的值
- clientX和clientY距离页面左上角的值(忽略滚动条)
- pageX和pageY距离页面左上角的值(会计算滚动条的距离)
- event.keyCode按下的键盘代码
- event.data存储绑定事件时传递的附加数据
- event.stopPropagation()阻止事件冒泡
- event.preventDefault()阻止浏览器默认行为
- return false既能阻止事件冒泡，又能阻止浏览器默认行为
九.补充
- 链式编程：end()//改变jQ对象的DOM对象，回复到上一次状态，并返回匹配元素之前的状态
- each()方法：遍历对象，操作匹配元素
- 多库共存：
var c = $.noConflict();//释放的控制权,并且把$的能力给了c
十.插件
- 常用插件：jquery.color.js支持颜色的渐变、jquery.lazyload.js懒加载插件、jquery.ui.js官方维护的UI方向的插件……
- 制作插件(给jquery对象增加一个新的方法，让jquery对象拥有某一个功能)：
$.fn.pluginName = function() {}//给$.fn添加方法就能扩展jquery对象