jQuery知识点汇总

jQuery核心

一.使用jQuery核心函数

a.作为函数使用

1.参数为函数：当DOM加载完成后，执行此回掉函数。
    例：$()等同于jQuer();即$(function(){})=>jQuery(function(){});
2.参数是选择器字符串
    查找所有匹配的标签，将他们封装成jQuery对象。（函数产生对象）
    例：var username = $('#username')；
3.参数是DOM对象，将DOM转换成jQuery对象。
    例：var btn  = $(this)
4.参数是HTML标签字符串，将标签对象封装成jQuery对象。
在内存中创建想要的标签，当使用appendTo就会在页面展示出来。

b.可以作为对象使用

1.作为对象，调用jQuery的each函数
例：$.each(lists,function(index,list));

二.使用jQuery核心对象

理解：核心对象是伪数组，内部是DOM元素。
伪数组：只有长度及下标，没有数组的特殊方法.如：push（）；

1.核心

1.size()/length
2.循环：each（）
3.索引：index（）
4.获取相应位置：get（i）；
5.返回传给jQuery()的原始选择器:selector

三.选择器

1.基本选择器

1.ID选择器
例：#id
2.class 选择器
例：.class 
3.根据给定的元素名匹配所有元素
例：$('div')
4.将每一个选择器匹配到的元素合并后一起返回
例：$('div','span')

2.层次选择器

1.在给定的祖先元素下匹配所有的后代元素
例：$("form input")

2.在给定的父元素下匹配所有的子元素

3.匹配所有紧接在 prev 元素后的 next 元素
例：$("label + input")

3.过滤选择器

1.：first()

2.：not(selector)
注：不是某选择器的

3.：last
注：选择最后一个

4.：lt/:gt(index)  小于、大于

4.表单选择器

5查找

1.children();
取得一个包含匹配的元素集合中每一个元素的所有(子元素)的元素集合
2.find();
这个函数是找出正在处理的元素的(后代)元素的好方法。
3.parent();
取得一个包含着所有匹配元素的唯一父元素的元素集合。
4.prevAll();
查找当前元素之前所有的同辈元素
5.siblings();
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

四 文档处理

1.append();
向每个匹配的元素内部追加内容
$(A).append(B)：把B追加到A中。

2.appendTo();
把所有匹配的元素追加到另一个指定的元素元素集合中
$(A).appendTo(B)：把A追加到B中。
$("p").appendTo("div");在dvi中添加p标签

3.prepend（）；
这是向所有匹配元素内部的（开始）处插入内容的最佳方式
$(A).prepend(B)：把A前置到B中

---------------外部操作--------------
4.before 
在每个匹配的元素之前插入内容
$(A).before(B);在A之前插入B

5.after
在每个匹配的元素之后插入内容
$(A).after(B):在A之后插入B

6.replaceAll
将所有匹配的元素替换成指定的HTML或DOM元素

五 事件

1.click 
点击事件
例：$('button').click();

2.on（events,[selector],[data],fn）
例：$('button').on("click", function(){}

3.hover([over,]out)
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数
例：$("td").hover(
function(){/*第一个函数*/},
function(){(){/*第二个函数*/}
);

4.off(events,[selector],[fn])
移除一个或多个事件的事件处理函数。
$('button').off('click');移除button上的点击事件

5.mouseover([[data],fn])/mouseout([[data],fn])
鼠标的移入移出事件。不论鼠标指针移入/离开被选(元素还是任何子元素)，都会触发事件
6. mouseenter / mouseleave 
鼠标的移入移出事件;只有在鼠标指针穿过被选元素时，才会触发事件

注：5和6的区别：子元素可以触发，子元素不能触发

7.委派事件

1.delegate(selector,[type],[data],fn)/undelegate([selector,[type],fn])
事件委派/移除事件委派
selector:选择器字符串，用于过滤器触发事件的元素
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
fn:当事件发生时运行的函数
例：$("div").delegate("button","click",function(){
/*$(this)取到的button对象，而不是div对象*/
}
给div中的button按钮添加委派。

委派：将多个子元素的事件监听委托给父辈处理
好处：事件添加在了父元素上，但是事件响应在子元素上（事件冒泡），动态添加的新的子元素会自动有事件响应，减少事件监听的个数

5.总结

1.jQuery特点：链式调用，读写合一，隐式遍历

例：2.var username= $("#username").val();//读取value值
    $("#username").val("liuhx");//赋值

3.$('button').click(function(){});
如果选择器选择到多个，会为每一个按钮都添加点击事件。

2.attr()和prop（）区别

attr操作属性值为非布尔值的属性，prop操作布尔值类型的属性。

3.scrollTop 兼容问题

在IE中取到纵坐标值
var top = $("html").scrollTop() 而不是
var top = $("body").scrollTop()
设值：
$('html','body').scrollTop(300);
案例：滚动条滚回顶部
var $page = $('html,body');
        var distance = $('html').scrollTop();
        var time =500;
        var intervalTime = 50;
        //定时器每次移动的距离
        var itemDistance = distance/(time/intervalTime);
        //定时器
        var intervalId = setInterval(function(){
            distance -= itemDistance;
            //滚动条到顶端时，停止定时器
            if(distance<=0){distance=0;clearInterval(intervalId)}
            //调整滚动条位置
            $page.scrollTop(distance);
        },intervalTime)