【前端学习笔记】JQuery的基本思想、常用方法

JQ思想————————————————————————

1.模仿CSS获取元素

2.方法函数化，JQ以各种方法传参代替了JS的属性赋值操作

3.方法链式操作

4.和原生共存，写法不能混用

5.取值赋值合用一个方法，区别于加不加参数，当一组元素取值时，
取的是第一个元素的值，取出所有元素需要循环。而赋值时，
直接赋值给这组的每个元素

$()下的常用方法————————————————————–

has()
    包含: 有包含的被选择，针对元素里面的东西

filter()
    过滤: 满足条件的被选择，没满足的过滤掉，针对元素本身的属性

not()
    filter()的反义词

next()
    下一个兄弟节点

prev()
    上一个兄弟节点

find()
    寻找元素内部的节点

eq()
    寻找一组元素的第几个

index()
    索引: 在所有兄弟节点中的位置

attr()
    取值: oDiv.attr(‘title‘);
    设值: oDiv.attr(‘title‘,‘div1‘);

addClass()
    添加class

removeClass()
    删除class

width() 
    元素width

innerWidth()   
    元素width+padding

outerWidth()
    元素width+padding+border，outerWidth(true)再加个margin

insertBefore()  
    A.insertBefore(B) 把A放在B的前面，剪切

before()
    A.before(B) 调换两者的位置。B在A前面

A.insertBefore(B)和B.before(A)作用一样，但是后续操作对应的对象不一样，下同

insertAfter() 
    A.insertAfter(B) 把A放在B的后面，剪切  

after()

appendTo()   
    A.appendTo(B) 把A放在B的内部最后，剪切

append()
    A.append(B) B在A的内部最后

prependTo() 
    A.prependTo(B) 把A放在B的内部最开始的位置，剪切  

prepend()
    A.prepend(B) B在A的内部最前

remove()
    A.remove(); 删除元素

on() 
    事件绑定

$(‘div‘).on(‘click mouseover‘,function(){
            alert(123);
        }); 

$(‘div‘).on({
        ‘click‘ : function(){alert(123)},
        ‘mouseover‘ : function(){alert(456)}
    });

off()
    取消事件绑定
    $(‘div‘).off() 取消全部事件
    $(‘div‘).off(‘click‘) 取消某个事件


scrollTop()
    可视窗口距顶部距离

创建元素
    $(‘<div>‘)

获取窗口
    $(‘window‘)

parent()
    获取父级

offsetParent()
    获取有定位的父级，如果父级没有定位，就获取body

val()
    获取/设置一个元素的value值，取值/赋值

size()
    获取组长

each()
    for循环的加强

    $(‘li‘).each(function(i,elem){
        //i是下标，$(elem)是元素对象
    });

hover()

    $(‘div‘).hover(function(){//移入},function(){//移开})；

show()

    $(‘div‘).show(1000)//显示，可加参数以动画形式显示

hide()

        $(‘div‘).hide(1000)//隐藏，可加参数以动画形式隐藏

fadeIn()

        $(‘div‘).fadeIn(1000)//淡入

fadeOut()

        $(‘div‘).fadeOut(1000)//淡出

fadeTo()

        $(‘div‘).fadeTo(1000,0.5)//调节透明度

slideDown() 

        $(‘div‘).slideDown(1000)//向下展开 

slideUp()

        $(‘div‘).fadeIn(1000)//向上卷曲