JQuery相关基础

发表于 | 分类于
字数统计: 1,584 字 | 阅读时长 ≈ 7

  本文是笔者初学Jq时留下的一些基础。

1. 操作属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
attr:    $('xxx').attr('属性')        //一个参数是获取属性
    $('xxx').attr('属性','xxx')    //两个参数是设置属性
filter:    $('XXX').filter('xx')        //筛选，过滤
    $('XXX').filter('[title=XX]')
not:    $('XXX').not('xx')    //filter反义词，不包含XX属性的元素
has:    $('XXX').has('xx')    //XXX里面的元素内部是否包含XX元素,如果包含，则该元素包含在结果中。如果不包含，那么就排除。
    <div id='xxx'><span id='xx'></span></div>
find:    //find()方法是获得在当前结果集中每个元素的后代。满足过滤条件的则保留，保留的是后代.
    //与has（）不同，而has()方法中，参数只做为条件，符合条件的，它的前元素加入新的结果集，而不是后代加入新的结果集。
next:    //下一个兄弟节点
prev:    //上一个兄弟节点
index:    $('XXX').index()    //在当前元素所在所有兄弟节点中的位置；
addClass:  $('XXX').addClass('XX xx');    //添加class XX,xx;
removeClass: $('XXX').removeClass('XX'); //移除class;
width/height:    $('XXX').width()        //width
innerWidth/innerHeight:    $('XXX').innerWidth()    //width+padding
outerWidth/outerHeight:    $('XXX').outerWidth()    //width+padding+border
outerWidth/outerHeight:    $('XXX').outerWidth(true)//width+padding+border+margin

2. DOM操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
insertBefore:   $('b').insetBefor($('a'));    //将b剪切到a前面
inserAfter:    $('b').insetBefor($('a'));    //将b剪切到a后面
appendTo:     $('Fuji').appendTo($('Ziji'));    //在Fuji中 末尾 插入Ziji;
prependTo:     $('Fuji').prependTo($('Ziji'));    //在Fuji中 开始 插入Ziji;
before,after,append,prepend:    $('b').befor($('a'));    //b的前面是a = 将a剪切到b前面；其他同理；
remove：    $('a').remove();    //移除a；
scrollTop/scrollLeft:    纵向/横向滚动条距离    
offset():   offset().left;    //元素距屏幕左边的距离，无视父级；Top同理；
position:   position().left;    //到有定位的父级的left值，把当前元素转化为类似定位的形式；
offsetParent():          //获取有定位的父级
parent:              //获取父级
parents: $('a').parents('XXX')    //获取祖先节点，传入参数可筛选
closest:    //获取最近的指定的祖先节点（包括当前元素自身）必须传入参数，只能找到一个元素
siblings:    //获取兄弟节点,添加参数可筛选；
nextAll/preAll:    //下面/上面所有兄弟节点，添加参数可筛选；
parentsUntil/nextUntil/preUntil:    //截至到(参数)的筛选；
clone:  $('a').clone().appendTo....    //克隆，如果clone中传入true，则会克隆其方法；
wrap:    $('a').wrap('<div>')    //在a外面包装一个div;
wrapAll:$('a').wrapAll('<div>')    //在所有的a外面都包装一个div；会改变DOM节点方式，注意
wrapInner: $('a').wrapInner('<div>')    //在所有a内部都包装一个div；
unwrap:    $('a').unwrap()        //方法删除被选元素的父元素
add:    var a=$('a').add('b');    //a同时包含了a,b;
slice:    //分割
serialize/serializeArray

3. event

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ev.pageX: 鼠标坐标    //相对于文档    clientX:相对于可视区
ev.which：键值        //包括鼠标键值
ev,preventDefault:    //阻止默认事件
ev.stopPropagation:    //阻止冒泡操作
return false:    //既阻止默认事件，又阻止冒泡操作
delegate:    $('ul').delegate('li','click',function(){ })
        //利用冒泡原理对Li添加事件；名称：事件委托
        //优点：省去循环操作，对于后添加进来的元素同样成立，性能优；
undelegate:    //阻止事件委托；
trigger:  $('a').on('XXX',fn1);      $('a').trigger('XXX')    //主动触发XXX事件；
on:     $('a').on('event',fn);    $('a').on({'event':fn1,'event2':fn2});
    $('a').on('event',{"XX":xx},fn(ev){    
        ev.date.XX    //data为json格式；
        ev.target    //事件源，操作的是谁
        ev.type        //事件类型
    });
off: 取消事件
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
$("a").bind("click",function(){alert("ok");});
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别：
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

4. 其他

1
2
3
4
5
6
7
8
9
10
11
one:$('a').one('event',fn);    //只触发一次事件
val:  $('a').val;    $('a').val(xxx);  //获取value值,更改value值
size:        //获取长度；
each:    $('a').each(function(i,elem){})    //for in; 参数1：下表；参数2：每个元素
hover:    //鼠标移入移出
hide/show:      $('a').hide(time);    //隐藏/显示；加了时间(time)会有动画；
fadeIn/fadeOut: $('a').fadeIn(time)    //淡入淡出；默认400毫秒；   参数2：透明度
slideDown/slideUp:     $('a').slideDown(time)    //向上卷曲/向下展开

5. 基础扩充

1
2
3
4
5
6
7
8
get:    $('a').get(0).innerHTML;    //使jq和js可以混合使用，get需要指定集合第几个使用；
    for(var i=0;i<$('a').get().length;i++){    }
    for(var i=0;i<$('a').length;i++){    }    //源码中也有Length属性
outerWidth:    //可以获取到隐藏元素的宽高，原生offsetWidth无法获取隐藏元素宽高
text:    //只获取文本内容，不会获取到标签
detach:        //跟remove方法一样，不过会保留删除这个元素被删除前的操作行为

6. 动画

1
2
3
4
5
6
7
8
9
10
11
12
animate:    //参数1：运动的值和属性
        //参数2：运动的时间
        //参数3：运动形式：swing(慢快慢)，linear(匀速)
        //参数4：回调函数
stop:        //阻止当前运动，
        //参数1：true，阻止所有运动；
        //参数2：true,立即让当前动画直接走完；
finish:        //立即停止到所有指定的目标点；
delay:        //延迟；

7. 工具方法

1
2
3
4
5
6
7
8
9
10
$.type:      js:typeof;    //相比于typeof ，功能更强大，能判断更多的类型；
$.trim:   js:无trim
$.inArray:  var a=['a','b','c','d']; $.inArray('b',a);    //类似于indexOf
$.proxy:   $.proxy(fn1,xxxx)    //改变this指向；将fn1中this的指向xxxx;
       $.proxy(fn1,xxxx)(a,b)    //传参a,b;会立即执行；
       $.proxy(fn1,xxxx,a,b)    //传参a.b;调用才执行；
$.noConflict:   var xxx=$.noConflict();    //xxx可以当作$使用；例如：xxx('a').css....;
$.parseJSON;    //转为json;
$.makeArray:    //类数组转为真正数组；

8. ajax

1
2
3
4
5
6
7
$.ajax({
    url:xxxx,
    data:xxxxxx,
    type:'POST/GET',
    success:function(){    },
    error:function(){    },.........
})

9. 扩展

1
2
3
4
5
6
7
$.extend: 扩展工具方法下的插件形式    $.xxx() $.yyy();
    $.extend({
        leftTrim:function(str){
            return str.replace(/^\s+/,'');
        }
    });
$.fn.extend:    扩展JQ对象下的插件形式    $().xxx()  $().yyy();