您的位置:首页 > Web前端 > JQuery

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

2015-08-09 16:49 931 查看
JQ思想————————————————————————

[code]1.模仿CSS获取元素

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

3.方法链式操作

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

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


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

[code]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() 
    事件绑定


[code]$('div').on('click mouseover',function(){
            alert(123);
        }); 

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


[code]off()
    取消事件绑定
    $('div').off() 取消全部事件
    $('div').off('click') 取消某个事件

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

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

获取窗口
    $('window')

parent()
    获取父级

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

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

size()
    获取组长

each()
    for循环的加强


[code]    $('li').each(function(i,elem){
        //i是下标,$(elem)是元素对象
    });


[code]hover()


[code]    $('div').hover(function(){//移入},function(){//移开});


[code]show()


[code]    $('div').show(1000)//显示,可加参数以动画形式显示


[code]hide()


[code]        $('div').hide(1000)//隐藏,可加参数以动画形式隐藏


[code]fadeIn()


[code]        $('div').fadeIn(1000)//淡入


[code]fadeOut()


[code]        $('div').fadeOut(1000)//淡出


[code]fadeTo()


[code]        $('div').fadeTo(1000,0.5)//调节透明度


[code]slideDown()


[code]        $('div').slideDown(1000)//向下展开


[code]slideUp()


[code]        $('div').slideUp(1000)//向上卷曲


[code]offset().left[right] 
    获取到屏幕的总距离

position().left[right]
     获取元素变成定位元素后,到定位父级的left/top
(没有定位父级的话就是到屏幕)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: