初识jQuery之jQuery方法（二）

1.jQuery方法之filter，not，has

filter : 过滤

not : filter的反义词

$('div').filter('.box').css('background','red');
//筛选出css为.box的div
$('div').filter('.box').css('background','red');
//筛选出css不是.box的div

has : 包含

看元素里面的元素，即内部

div1span
div2

2.jQuery方法之next，prev，find，eq，index，attr

next：下一个节点

prev：上一个节点

div
span
p

prev同理

find：找节点

eq：类似原生中的下标

    
h3
    
h2
    
h3
    
h3
    
h2
    
h2

h2

index：索引就是当前元素在所有兄弟节点中的位置

    
h3
    
h2
    
h3
    
h3
    
h2
    
h2

h2

attr：设置属性，可获取（已在上一篇讲过，详情请看上一篇）

3.jQuery方法之属性操作

addClass()：添加class

removeClass()：删除class

div

width():width

innerWidth():width + padding

outerWidth():width + padding + border

outerWidth(true) :width + padding + border + margin

div

4.jQuery方法之Dom操作

insertBefore( )：剪切功能

insertAfter( );

appendTo( )：类似原生里的appendChild

prependTo( )：最开始的位置

div
span

注意：后续操作变了，只针对于最前面的元素

$('span').insertBefore( $('div') ).css('background','red');
//span变红
$('div').before( $('span') ).css('background','red');
//div变红

5.jQuery方法之事件操作和scrolliop

remove：删除节点

on：加载事件

off：取消事件

div
span

//加载事件
$('div').click(function(){
        alert(123);
    });
    
$('div').on('click',function(){
        alert(123);
    });
    
$('div').on('click mouseover',function(){
        alert(123);
    });

$('div').on('click mouseover',function(){
        alert(123);
        $('div').off('mouseover');
    });
//取消鼠标移入事件

scrollTop：纵向滚动条，获取滚动距离

$(function(){

    $(document).click(function(){
        
        alert( $(window).scrollTop() );  //滚动距离
        
    });
    
});

6.jQuery方法之事件细节

ev : event对象

ev.pageX(相对于文档) :

clientX(相对于可视区)： 表示鼠标坐标

ev.which : keyCode，找键盘的键值

ev.preventDefault()：阻止默认事件

ev.stopPropagation()：阻止冒泡的操作

return false：阻止默认事件 + 阻止冒泡的操作

one()：事件只执行一次

7.jQuery方法之位置操作

parent() : 获取父级

offsetParent() : 获取有定位的父级

val()：获取元素的val值

size()：获取一组元素的长度

alert( $('input').val() );  //获取
$('input').val(456);  //赋值
alert( $('li').size() );  //=4 像length

$('li').each(function(i,elem){   //一参：下标 二参 : 每个元素，类似for循环
        
        $(elem).html(i);
        
    });

8.jQuery方法之hover和简单动画

hover：参一移入，参二移出

hide：隐藏 （有运动效果）

show：显示

fade in：淡入 （可指定时间，默认为400ms）

fade out：淡出

slideup：向上卷起

slidedown：向下展开

fadeTo：参数一：时间；参数二：透明度的值