进击的JQuery

进击的 JQuery

乱七八糟的关系呀

子集们:     children([expr]) 
父集:  parent([expr])
父集们: parents([expr])
下一个兄弟: next([expr])
下面所有的兄弟: nextAll([expr])
上一个兄弟: prev([expr])
上面所有的兄弟: prevAll([expr])
兄弟们: siblings([expr])

索引匹配

:eq(index)   匹配一个给定索引值的元素
:gt(index)   匹配所有大于给定索引值的元素
:lt(index)   匹配所有小于给定索引值的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数（即索引值0、2、4...）
:odd  匹配所有索引值为奇数的元素，从 0 开始计数（即索引值1、3、5...）

获取文本

html() 返回标签
text() 返回文本
val()  返回value

属性操作

attr(name|pro|key,val|fn) 
    添加属性 $('a').attr({
                'href':'https://www.baidu.com'
            });
    查询属性 $('a').attr('href')
removeAttr(name)
prop(n|p|k,v|f)
removeProp(name)

小技巧 && 解决加载过程中页面样式变化导致闪烁的问题

<body hidden>//加上hidden属性jq会自动帮你隐藏

  //页面加载完毕移除属性
$(function () {
    $('body').removeAttr('hidden');
})

类的操作

addClass()	添加类名
removeClass()	删除类名
toggleClass()	判断是否有类名

on 绑定事件

on(事件名,{key:value}形式参数,回调函数)
$('.box').on('click', {num: 10}, function(ev) {
    //ev为jq事件 , 兼容js事件
    console.log(ev.data.num);
    //通过ev.data.num访问参数
    console.log(ev.clientX,ev.clientY);
})
// 数据由ev.data存储
//可以绑定多个事件

非 on 绑定事件

.事件名({key:value}形式参数,回调函数)
$('.box').click({num: 10}, function(ev) {
    console.log(ev.data.num)
})
// 数据由ev.data存储

off 解绑事件

$('.box').off()

冒泡与默认事件

阻止冒泡:
    ev.stopPropagation();
阻止默认事件:
    return false  |  ev.preventDefault()

clone 复制

clone([Even[,deepEven]])

文档操作

内部插入

append(content|fn)   $('body').append($div);
appendTo(content)    $div.append($('body'));
prepend(content|fn)
prependTo(content)

外部插入

after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)

动画

显示隐藏

show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])

滑动

slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])

淡入淡出

fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])