jquery基础锋利的jquery

jq对象 -> DOM对象： [index] / get(index)
DOM对象 -> jq对象： $() 封装 DOM

选择器

使用jq获取HTML中不存在的元素都是，不会报错，所以不能以此作为判定条件

基本选择器
$(#id. class element)
层次选择器
$(“a b”) a元素的所有b后代元素
$(“a > b”) a元素中的所有子元素b
$(“prev +next”) 紧接着当前元素的下一个弟元素 == $(“prev”).next()
$(“prev ~ sibilings”) 当前元素之后的所有兄弟元素 = = $(“prev”).nextAll()
$(“prev”).sibilings() 当前元素的所有兄弟元素，无论前后
过滤选择器
基本选择器
：frist :last :not() :even() :odd() :eq(index) // 从0开始
:gt(index) 索引值大于且不包括该index的元素
:li(index) 索引值小于但不包括该index的元素
:animated 正在执行动画的元素
内容过滤器
：contain（text） //含有内容为text的元素
：empty // 选取不含文本。子元素的空元素
：has（selector） $(“div:has§”) //含有p的div元素
：parent // 含有子元素或文本的元素
可见性过滤器
：hidden // 选择所有不可见的元素【display：none，visibility：none，】
：visible // 所有课件元素
属性过滤器
[sttribute = value] // 属性值为value的元素
!= // 不是
^= // 开头是
$= // 结尾是
*= // 含有
子元素过滤器（集合元素，同时对多个符合条件的父元素进行操作）
:nth-child(index/ even/ odd/ equation) // 选取每个符合条件的父元素下的第index（从1开始算）或者奇数，偶数元素，不论其子元素的类型
:first-child // 每个父元素下的第一个子元素
:only-child // 父元素中唯一的子元素
表单对象属性过滤器
：checked // 所有被选中的 (单复选框）
：selected // 所有被选中的选项（下拉菜单）

节点操作

复制节点： .clone() 可以传递一个参数true，表示复制的元素同时也复制元素所绑定的事件。
替换节点：.replaceWith()：将匹配到的元素日换成指定的html/dom
.repalceAll()：与.replaceWith()倒置关系
包裹节点： A.wrap(B): 用B将A包裹
创建节点：$(html标签)
添加节点：A.append(B) B.appendTo(A) 将b添加到父元素a的末尾 => push(）
A.prepend(B) B.prependTo(A) 将b添加到父元素a的头部 => aushift()
A.after(B) B.insertAfter(A)：在a元素后面添加兄弟b元素
A.before(B) B.insertBefore(A)：在a元素前面添加兄弟元素b
可以用以上方法对元素进行移动
删除节点：remove() 节点以及节点内的后代节点均被删除，但可以继续使用。
empty() 清空节点内所有内容，但不删除该节点

属性操作

获得属性：attr(‘属性名称’)
设置属性：attr('属性名称’，值）
删除属性：removeAttr(‘属性名称’）

样式操作

获得、设置样式 /替换：attr('样式类名’, '新类名’）
追加样式：addClass()
删除样式：removeClass()
切换样式：toggleClass(A,B) 有则删掉，无则加之
判断有没有某个样式：hasClass() 返回 true/false

html设置

获得、设置元素html代码：.html()
获得、设置元素的文本： text()
获得、设置元素的值: value()

节点遍历

children()/next()/prev()/siblings()
$.each(数组/对象, function(数组索引，变量/内容）{})

css操作

获得、设置样式属性：css(）
设置多个属性： css({})

偏移量

offset() 元素在当前视窗的偏移量
position（）：元素相对于最记得一个position设置了父元素的偏移量
scrollTop()/scrollLeft() 元素的滚动条距离顶部、左部的距离

window.onload(): 网页中的所有元素即相关文件完全加载到浏览器后，此时才能访问页面的任何元素
在一个

事件绑定

bind(type1,type2…, function(){})
合成事件：hover(fn1, fn2)/toggle(fn1, fn2)
toggle(): 本身也是一个方法，切换元素的显示隐藏
事件对象：$('div).bind(‘click’, function(event){}) 点击div元素时，创建event实践对象。只有事件处理函数才能访问事件对象，该函数执行完毕，对象被销毁。
停止冒泡：event.stopPropagation()
阻止默认事件：event.preventDefault()
触发事件元素：event.target()
event.pageX()/ event.pageY()：返回光标相对于页面的x。y坐标
event.relatedTarget()：返回当前事件涉及的其他dom元素
删除事件： unbind(type)
一次事件：one（）
模拟click事件：trigger(‘clcik’) 会执行浏览器默认行为
trigger(type, callback)
triggerHandler() 触发后不会执行浏览器默认行为
end()：将对象指针指向原始对象

动画

hide()/show() ：参数时间毫秒数
fadeIn()/fadeOut()
slideUp()/slideDown()
自定义动画：如 animate({left:‘100px", top:‘200px’}, 毫秒数，动画执行后的回调函数)
累加动画：{}left:’+=100px"}
按顺序执行动画：链式写法 $().animate().animate()
停止动画：stop() 参数为两个boolean值
stop():停止正在进行的动画，进行下一阶段的动画
stop(true,false)：停止正在执行的动画，并将当前元素之后未执行的动画序列清空
stop(false, true): 让正在执行的动画直接到达结束时的状态。
判断是否处于动画状态：is(’:animated’)

ajax

$.get、post(url, 参数， callback, type) （type （可选）：设置期待服务器返回的格式）
$.ajax({
type:‘GET’/‘POST’,
url:’…’,
dataType:‘json’, //返回格式
success: function(data){
… //请求成功的回调函数
}
ajaxStart()/ajaxStop():在ajax请求开始/结束时触发

表单数据请求序列化

serialise():将表单中的选中的值序列化为字符串
serializeArray()：将dom元素序列化为json格式
$.param():将一个数组或对象序列化为key-value格式