1.基本选择器：参考CSS选择器 - $("")
- id/class/*/标签选择器
- 群组选择器：p,span
- 父子选择器：ul>li
- 后代选择器：ul li
- 兄弟选择器：
- 单个：p+span
- 多个：p~span
- 属性选择器：
-
img[title]选择带有title属性的图片 -
img[title="mao"]属性等于某个值的时候选中 -
img[title~="mao"]mao是词列表（一个属性多个值）也被选中 -
img[title^="mao"]开头等于某个值选中 -
img[title$="mao"]结尾等于某个值选中 -
img[title*="mao"]包含某个值就选中 -
img[title|="mao"]选中title值为mao或mao-的内容
-
2.过滤选择器：伪类选择器 - $("")
- 与CSS3伪类选择器有区别，且有的jq提供方法
$('li:even') // 选择索引为偶数的元素
$('li:odd') // 选择索引为奇数的元素
$('li:hidden') // 选择不可见元素
$('li:visible') // 选择可见元素
$('li:empty') // 选择内容为空的元素
$('li:contains("ok")') // 选择内容为ok的元素
$("div").find("h2") === $("div h2") // 选择div中所有的h2后代
$("div").children("h2") === $("div>h2") // 选择div中所有的h2子元素
$("li").first() === $("li:first") // 选择第一个li
$("li").last() === $("li:last") // 选择最后一个li
$("li").eq(3) === $("li:eq(3)") // 选择索引为3的li
$("ul").has(".aa") === $("ul:has(.aa)") // 选择子元素中有aa类的ul
$("li").not(".aa") === $("li:not(.aa)") // 选择没有aa类的li
$("p").next("span") === $("p+span") // 选择下一个兄弟元素
$("p").nextAll("span") === $("p~span") // 选择后面所有兄弟元素
$("p").prev("span") // 选择上一个兄弟元素
$("p").prevAll("span") // 选择前面所有兄弟元素
$('li').parent() // 选择最近的父级元素
$('li').parents() // 选择所有父级元素
$('li').is('.red') // 返回true/false
$('li').hasClass('red') // 返回true/false
3.jQuery的动画
- hide()：隐藏
- show()：显示
- toggle()：显示/隐藏取反
- slideUp()：上拉
- slideDown()：下拉
- slideToggle()：上拉/下拉取反
- fadeIn()：淡入
- fadeOut()：淡出
- fadeToggle()：淡入/淡出取反
- fadeTo(时间, 透明度)：自定义
- 自定义动画：animate()
- animate({目标}, 时间, cb)
- 连缀动画的三种方式
- 方法连缀：jq的DOM方法执行结束后，返回正在操作的DOM对象，不断.animate()
- 同步连缀：动画与动画之间是同步的，按顺序执行，分开写
- 回调连缀：利用回调函数多次调用动画方法
- 动画与其他方法是异步的
- 动画与动画之间是同步的
- 多个动画会产生动画队列
- 动画队列：按顺序依次执行
- stop()：默认停止之前的动画
- 两个参数，都是布尔值，默认都为false
- 第一个参数：true清除动画队列；false不清除动画队列
- 第二个参数：true立即运动到结束；false立即停止当前动画
- delay(时间).animate()：延时执行
- queue()：添加回调函数
- 默认无返回值
- 传入参数并调用即有返回值
4.jQuery的DOM操作
-
DOM操作
- siblings()：选择所有兄弟元素
- eq(n)：选择当前索引为n的元素
- index()：查找当前元素的索引
-
$("div").eq($("li").index())：选择当前li对应的div - parentsUntil(x)：选择所有父级直到x，但不包括x
- nextUntil(x)：选择后面的兄弟直到x，但不包括x
- prevUntil(x)：选择前面的兄弟直到x，但不包括x
- end()：返回上一步的对象 - A.B.end()：返回A
- html() => innerHTML
- text() => innerText
- val() => value
- addClass()：增加class样式
- removeClass()：移除class样式
- toggleClass()：取反，有则移除，无则添加
- attr()/css()：设置属性/样式
- 一个参数：
- 字符：获取此属性值
- 数组：获取多个属性值
- 对象：设置多个属性值
- 两个参数：字符，设置属性值
- arguments.length：判断参数
- typeof(*)：判断类型
- *.constructor：判断类型
- 一个参数：
- removeAttr()：删除属性
- 清空css样式：设为""或"none"
- $.each(obj,function(key,val){})：遍历对象
-
尺寸类方法：返回数值型
- 以下基于标准盒模型，请注意怪异盒的区别
- width()/height()：可获取可设置，元素的宽/高
- innerWidth()/innerHeight()：包括padding
- outerWidth()/outerHeight()：包括边框和padding
-
位置类方法：offset/position返回对象，其他返回数值
- offset()：可获取可设置；传入对象；偏移位置，包括margin
- position()：只能获取，不能设置；定位
- scrollTop()/scrollLeft()：可获取可设置；滚动的距离
-
节点操作
- $("<div>")：创建元素
- A.append(B)：B插入到A最后一个子节点
- B.appendTo(A)：B插入到A最后一个子节点
- A.prepend(B)：B插入到A第一个子节点
- B.prependTo(A)：B插入到A第一个子节点
- A.after(B)：在A后面插入兄弟元素B
- A.before(B)：在A前面插入兄弟元素B
- remove()：移除节点
- empty()：清空内容
- clone()：克隆节点
- A.clone(true).appendTo(B)：克隆A及A的事件插入到B
- replaceWith()：替换标签
-
绑定事件
- 一般事件绑定：$("#btn").click(fn)
- 绑定事件：$("#btn").on("click.a",fn)
- 清除事件：$("#btn").off("click.a")
- 事件委托：$(".list").on("click","li",fn)
- one()：绑定一次性事件
- hover()：绑定移入移出事件
- $("div").hover(fn1,fn2)
- fn1进入事件 => enter
- fn2离开事件 => leave
- trigger("click") 自动触发事件，且有事件冒泡
- triggerHandler() 自动触发事件，没有事件冒泡
- preventDefault() 阻止默认行为->contextmenu
- stopPropagation() 取消事件冒泡
- return false 阻止默认事件和事件冒泡，双层阻止
-
事件对象
- 同原生，但不用处理兼容
- event.type 获取事件的类型
- event.data 获取事件中传递的数据
- event.target 获取绑定事件的DOM元素
- event.which 获取当前鼠标点击的键
- event.altKey/shiftKey/ctrlKey 返回true/false
- event.pageX/pageY 获取根据页面原点的X,Y值
- event.screenX/screenY 获取根据显示器窗口的X,Y值
- event.offsetX/offsetY 获取根据父元素X,Y值
