jq的方法总结

jq的选择器：

//层级

$('body>p')// body里面子元素p

$('div>p')//给定的父元素下的p标签

$('body p')//body所有p标签

$('div+p')//与div相邻的下一个p标签

$('div~p')//在div后面同级的p标签

 $('div').text('这是div')

 $('div').text('<p>11</p>')//<p>11</p>

 $('.box').html('ddd')

 $('#test').html('aaa')

$('div').html('<p>xiaop</p>')// xiaop

 

//基本选择器

$('p:first-child')//作为子元素的第一个p

$('p:first')//第一个p标签

$('div p:first-child')//所有div下面的第一个p

$('p:even').html('基本选择器第一个p')//匹配所有p标签中下表为偶数的

$('p:eq(2)').html('基本选择器p')//匹配指定索引为2的p

$('p:not(.box)').html('全都没选中')//匹配指定以外的p

$('p:gt(0)').html('都大于o')

$(':header').css({ "width": 100, "height": 100, "background": "red" })

$("div:contains(d)");//匹配含有d的元素

$("div:empty");//匹配所有不包含子元素或者文本的div

$("div:has(.test)");//div内部是否有选择器匹配到的对象

$("div:parent");//身为父元素的div

$("div[class]");//属性含有class的

$("div[class^=a]");//属性以a开头的

查找

// console.log($('div').children('p'))//匹配所有带有子元素p的div

// console.log($('div').find('p'))//查找div中带有p标签的

// console.log($('div').next())//=3所有div相邻的标签集合

// console.log($('div').nextAll())//=5;第一个div后面所有的标签集合

// console.log($('div').parent())//唯一父元素body

// console.log($('li:first'))//第一个li 选择器

// console.log($("div").filter(".test"));//.test从当前集合真中选取

// $("div").has(".test")//匹配后代含有的元素

 

过滤

eq(index)//查找下标为index的元素

// $('li').first()//第一个li的查找方法

has('li')//含有的元素

hasClass()//含有类名的元素

find()//查找指定的元素

not()//排除指定元素

$("div").filter(".test")//.test从当前集合真中选取

事件：on(),one(),bind(),click(),hover(),off()

On(),bind():绑定事件可以绑定多个事件.on()可以事件实现委托

One():执行一次的事件,  hover():含有两个函数，第一个是鼠标移入事件函数，第二个是移出时的事件函数。

Off():删除一个绑定的事件。

Ajax(),不存在跨域问题情况：$.ajax({url:’’,async:true,type:’get’,success:function(data){

Console.log(data)}})

另一种写法：$.get('data.json',function(data){

             console.log(data)

跨域：url中返回函数设置为？让jq自己判断 dataType:jsonp

$.getJSON('url:返回函数设置为？',

        function(data){

            console.log(data)

        })

  $('header').load('toubu.html');引入外部html文件

工具

Each（）通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

 

Map（）将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

index() 同辈之中元素的索引

addClass()为每个匹配的元素添加指定的类名。

removeClass()移出指定元素的类名。

toggleClass()如果存在（不存在）就删除（添加）一个类。

位置

获取匹配元素在当前视口的相对偏移。

offset({ top: 10, left: 30 });

scrollTop()相对滚动条顶部的偏移

scrollLeftp()相对滚动条左侧的偏移

height()匹配元素的高

width()匹配元素的宽

innerHeight()加padding

outHeight()加padding 加边框

attr()给匹配元素添加属性

attr(name)返回第一个匹配元素的name属性

removeAttr()删除匹配元素的属性

event.target最初触发事件的DOM元素。

eve.currentTarget在事件冒泡阶段中的当前DOM元素

eve.stopPropagaion防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

eve.stopImmediatePropagation阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

eve.isPropagationStoped根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。

eve.ImmediatePropagationStoped根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

jq动画

show([speed, [easing], [callback]])：显示隐藏的匹配元素。

hide([speed, [easing], [callback]])：隐藏显示的元素。

toggle([speed, [easing], [callback]])：如果元素是可见的，切换为隐藏的，如果元素是隐藏的，切换为可见的。

speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。

easing：指定切换效果，默认是swing，可用linear。

callback：在动画完成时执行的函数，每个元素执行一次。

运动过程中：改变width、height、margin、padding、opacity属性值。

 

slideDown([speed, [easing], [callback]])：通过高度变化（向下增大）来动态的显示所有匹配的元素，显示完成后可选的触发一个回调函数。

slideUp([speed, [easing], [callback]])：通过高度变化（向上减小）来动态的隐藏所有匹配的元素，隐藏完成后可选的触发一个回调函数。

slideToggle([speed, [easing], [callback]])：通过高度变化来切换所有匹配元素的可见性，切换完成后可选的触发一个回调函数。

speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。

easing：指定切换效果，默认是swing，可用linear。

callback：在动画完成时执行的函数，每个元素执行一次。

运动过程中：改变height、margin-top、margin-bottom、padding-top、padding-bottom属性值。

 

fadeIn([speed, [easing], [callback]])：通过不透明度的变化来实现所有匹配元素的淡入效果，动画完成后可选的触发一个回调函数。

fadeOut([speed, [easing], [callback]])：通过不透明度的变化来实现所有匹配元素的淡出效果，动画完成后可选的触发一个回调函数。

fadeTo([speed, opacity, [easing], [callback]])：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，动画完成后可选的触发一个回调函数。opacity：一个0到1之间表示透明度的数字。

fadeToggle([speed, [easing], [callback]])：通过不透明度的变化来开关所有匹配元素的淡入淡出效果，动画完成后可选的触发一个回调函数。

speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。

easing：指定切换效果，默认是swing，可用linear。

callback：在动画完成时执行的函数，每个元素执行一次。

注：fadeIn、fadeout、fadeToggle，运动过程中修改opacity属性值，最终只修改display属性值。而fadeTo只修改opacity属性值。

 

animate(params, [speed], [easing], [fn])：用于创建自定义动画的函数。

params：一组包含作为动画属性和终值的样式属性和及其值的集合。

speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。

easing：指定切换效果，默认是swing，可用linear。

fn：在动画完成时执行的函数，每个元素执行一次。

 

stop(clearQueue, [jumpToEnd])：停止所有在指定元素上正在运行的动画。

如果clearQueue没有设置为true，并且队列中有等待执行的动画，他们将马上执行。

clearQueue：如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。调用stop()的时候，队列中的下一个动画开始。如果clearQueue参数为true，那么在队列中的动画其余被删除并永远不会被执行。

jumpToEnd：当前动画将停止，但该元素上的CSS属性会被立刻修改成动画的目标值。

 

delay(duration)：设置一个延时来推迟执行队列中之后的项目。

duration：延迟时间，单位：毫秒

 

Jq的dom操作

Append是在目标元素后面添加

Prepend是在目标前面添加

$(A).append(b)把b插进a中

$(A)appendTo(b)把a插进b中

prepend方法同理。

After(),before()是在目标元素外边后面，前面添加

replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll()用匹配的元素替换掉所有 selector匹配到的元素。

empty()删除匹配的元素集合中所有的子节点。

remove()从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

detach()从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。