jQuery学习小结

1.size( )和length的区别

（1）针对标签对象元素，比如数html页面有多少个段落元素<p></p> ，那么此时的$("p").size() == $("p").length ；

（2）计算一个字符串的长度或者计算一个数组元素的个数 那么此时只能用length而不能用size()；

 

2.closet()、parent()、parents()的区别

.closet()--开始于当前元素， 在 DOM 树中向上遍历，直到找到了与提供的选择器相匹配的元素， 返回包含零个或一个元素的jQuery对象。

.parent()-- 只进行一个单级的DOM树查找，也就是只查找一层，找到直接的父元素，而不是更加上级的祖先元素。此外，$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

.parents()--开始于父元素， 向上遍历DOM树到文档的根元素，每个祖先元素加入到临时集合，如果提供一个选择器，则会使用该选择器在集合中进行过滤， 返回包含零个、一个或多个元素的jQuery对象。

 

3.this和$(this)

如果使用html元素本身的属性或方法就需要使用this， this是html元素对象，能调用元素属性；

如果使用jQuery包装后的方法或属性就要$(this)， $(this)是jquery对象，能调用jquery的方法；

一般则有如下的关系:  $(this)[0] == this;

 

4.阻止事件冒泡和阻止默认行为

（1）event.stopPropagation();  事件处理过程中，阻止了事件冒泡，但不会阻击默认行为；

（2）return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为；

（3）event.preventDefault(); 事件处理过程中，不阻止事件冒泡，但阻止了默认行为；

 

5.property和attribute以及prop() 和 attr()

      property是DOM中的属性，是JavaScript里的对象。每一个DOM对象都会有它默认的基本属性，而在创建的时候，它只会创建这些基本属性，在标签中自定义的属性是不会直接放到DOM中的。 DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候在DOM对象上创建。如果在标签里对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。

      attribute是HTML标签上的特性，它的值只能够是字符串。attributes是属于property的一个子集，它保存了HTML标签上定义的属性。如果再进一步探索attitudes中的每一个属性，会发现它们并不是简单的对象，它是一个Attr类型的对象，拥有NodeType、NodeName等属性。

       结论：property是DOM对象自身就拥有的属性，而attribute是我们通过设置HTML标签而给之赋予的特性，attribute和property的同名属性/特性之间会产生一些特殊的数据联系，而这些联系会针对不同的属性/特性有不同的区别。

从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

.prop()方法-- 若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，使用.prop()方法。

.attr()方法 -- 其他所有的attributes(在html中你看到的那些alt、title、src)可以使用.attr()方法来进行操作。

6.$.extend()

     jQuery.extend(object):用于将一个或多个对象的内容合并到目标对象。该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。且该函数属于全局jQuery对象。

用法一：jQuery 1.0 新增该用法。  

jQuery.extend(target [, object1 ] [, objectN... ] )

用法二：jQuery 1.1.4 新增该用法。 

jQuery.extend([ deep ], target , object1 [, objectN... ] )

注意事项：

1、该函数复制的对象属性包括方法在内。此外，还会复制对象继承自原型中的属性(JS内置的对象除外)。

2、参数deep的默认值为false，可以明确指定该参数为true值，但不能明确指定为false值。 jQuery中深度复制，是将除null、undefined、window对象、dom对象以及通过继承创建的对象外的其它对象克隆后保存到target中，之所以排除部分对象，一是考虑性能，二是考虑复杂度（如dom、window对象，如果克隆复制，消耗过大，而通过继承实现的对象，复杂程度不可预知，因此也不进行深度复制）。深度与非深度复制区别是，深度复制的对象中如果有复杂属性值（如数组、函数、json对象等），那将会递归属性值的复制，合并后的对象修改属性值不影响原对象

3、如果参数为null或undefined，则该参数将被忽略。

4、如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。

5、如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

6、改函数的返回值为参数target代表的对象。  

（1） extend(result,item1,item2…..)

     这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这样就会破坏result的结构。

（2）extend({},item1,item2,……)

     这个方法可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。

     示例：

     Var item={name:”olive”,age:23};

     Var item1={name:”Momo”,sex:”gril”};

     Var result=$.extend({},item,item1);

     结果：Result={name:”Momo”,age:23,sex:”gril”};

     以上的结果表明extend方法将所有的项都合并到了{}中，但是，细心一点就会发现，其中item1中的name：“Momo” 将item中的name：“olive”给覆盖了，这是怎么回事？请接着往下看。

（3）extend(bool,{},item1,item2….)

     Extend方法还有带bool型参数的重载。bool型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：

     示例：

     var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};

     var item1={sex:”girl”,address{city:”北京”}};

     var result=$.extend(true,item,item1);

     var result1=$.extend(false,item,item1);

     结果：

     Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

     Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

     以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。

 

（4）$.extend(item)

     该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个静态方法（对应这里的静态方法，当然还有实例方法，在后边有介绍）。

      示例：

      $.extend({SayHello:function(value){alert(“hello “+value);}});

      这样写过之后，就可以直接调用SayHello方法：

      $.SayHello(“Olive”);

      说明：该方法相当于为Jquery类添加了新的方法。

 

（5）$.fn.extend(item)

     jQuery.fn.extend(object): 函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

     jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。该函数属于jQuery的原型对象(jQuery.fn)。

    上边提到的$.extend(item)是为Jquery类添加了静态方法，那么这里的$.fn.extend(item)就是为每一个实例添加一个实例方法了。

     示例：

     $.fn.extend({hello:function(value){alert(“hello “+value);}});

      这样写过之后，在获取每一个示例之后，都可以调用该方法：

     $(“#id”).hello(“Olive”);

 

7.jQuery CSS 操作函数

jQuery CSS 操作 - css( ) 方法--返回或设置匹配的元素的一个或多个样式属性。

     $(selector).css(name)

     当用于返回属性：返回第一个匹配元素的 CSS 属性值。 当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）

     当用于设置属性：该方法为所有匹配元素设置指定 CSS 属性。

 

jQuery CSS 操作 - height( ) 方法--返回或设置匹配元素的高度。

     $(selector).height()

     当用于返回高度时， 则返回第一个匹配元素的高度。

     当用于设置高度时，则设置所有匹配元素的高度。

     如下面的图像所示，该方法不包含 padding、border 或 margin。 

          

 

jQuery CSS 操作 - width() 方法--返回或设置匹配元素的宽度。

     $(selector).width()

     当该方法用于返回宽度时， 则返回第一个匹配元素的宽度。

     当该方法用于设置宽度时，则设置所有匹配元素的宽度。

     如下面的图像所示，该方法不包含 padding、border 或 margin。

          

 

jQuery CSS 操作 - offset( ) 方法--返回或设置匹配元素相对于文档的偏移位置。

     返回偏移坐标： $(selector).offset( )

     设置偏移坐标：$(selector).offset({top:value,left:value})

     使用函数设置偏移坐标： $(selector).offset(function(index,currentoffset))

     当用于返回偏移时： 该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。

     当用于设置偏移时： 该方法设置所有匹配元素的偏移坐标。

 

jQuery CSS 操作 - offsetParent( ) 方法--返回最近的祖先定位元素。定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

     $(selector).offsetParent( )

 

jQuery CSS 操作 - position( ) 方法--返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

     $(selector).position( )

 

jQuery CSS 操作 - scrollLeft( ) 方法--返回或设置匹配元素的滚动条的水平位置。滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。

     $(selector).scrollLeft( )

     当用于返回位置时：该方法返回第一个匹配元素的滚动条的水平位置。

     当用于设置位置时：该方法设置所有匹配元素的滚动条的水平位置。

 

jQuery CSS 操作 - scrollTop() 方法--用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。 当滚动条位于最顶部时，位置是 0。

     $(selector).scrollTop( )

     当用于返回位置时： 该方法返回第一个匹配元素的滚动条的垂直位置。

     当用于设置位置时： 该方法设置所有匹配元素的滚动条的垂直位置。

 

jQuery 的几个css相关方法

innerWidth() - 返回第一个匹配元素的宽度（包含 padding）

innerHeight() - 返回第一个匹配元素的高度（包含 padding）

outerWidth() - 返回第一个匹配元素的宽度（包含 padding 和 border）

outerHeight() - 返回第一个匹配元素的高度（包含 padding 和 border）

 

8.jQuery的DOM操作

1、筛选元素

.filter(selector)        与selector匹配的元素

.filter(callbaxk)        callback中返回true的元素

.eq(index)               从0开始计数的第index个选中元素

.first()                      选中元素中的第一个元素

.last()                      选中元素的最后一个元素

.slice(start[,end])    从0开始计数的给定范围内的选中元素

.not(selector)          与selector不匹配的元素

.has(selector)         与selector匹配的的后代元素

2、后代元素

.find(selector)            与selector匹配的后代元素

.contents()                 获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

.children([selector])   子节点，可传入selector进行筛选

3、同辈元素

.next([selector])                     每个选中元素紧邻的下一个元素，可传入selector进行筛选

.nextAll([selector])                 每个选中元素后的所有同辈元素，可传入selector进行筛选

.nextUntil([selector],[filter])    每个选中元素之后、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选

.prev([selector])                     每个选中元素紧邻的上一个元素，可传入selector进行筛选

.prevAll([selector])                 每个选中元素前的所有同辈元素，可传入selector进行筛选

.prevUntil([selector],[filter])    每个选中元素之前、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选

.siblings([selector])                所有同辈元素，可传入selector进行筛选

4、祖先元素

.parent([selector])                        每个选中元素的父元素，可传入selector进行筛选

.parents([selector])                      每个选中元素的所有祖先元素，可传入selector进行筛选

.parentsUntil([selector],[filter])     每个选中元素的所有祖先元素、直至但不包含第一个和selector匹配的元素可传入filter进行筛选

.closest(selector)                        从元素自身开始沿DOM数向上搜索祖先元素 与selector匹配的第一个元素

.offsetParent()                             选中元素的第一个被定位的父元素(relative或absolute)

5、集合操作

.add([selector])           将与selector匹配的元素添加原对象集合中

.addBack()                 选中的元素加上JQuery内部栈中之前选中的元素

.end()                         内部JQuery栈中之前选中的元素

.map(callback)           对每个选中调用回调函数callback之后的结果

.pushStack()              指定的元素

6.操作选中的元素

.is(selector)              确定匹配的元素中是否有传入的与selector匹配的元素

.index()                    取得匹配元素相对其同辈元素的索引

.index(element)       取得匹配元素中与指定元素对象的DOM节点的索引

.contains(a,b)          确定DOM节点a是否包含DOM节点b

.each(callback)        迭代匹配元素，对每个元素执行callback

.size()                      返回被 jQuery 选择器匹配的元素的数量。

.length                     取得匹配元素的数量

.get()                       取得与匹配元素对应的DOM节点列表

.get(index)              取得匹配元素中与指定索引对应的DOM节点

.toArray()                取得与匹配元素对应的DOM节点列表

7.特性和属性

.attr(key)                     取得特性key的值

.attr(key，value)        设置特性key的值为value

.attr(key，fn)              将fn的返回值作为key的值

.attr(obj)                     根据传入的键值对象参数设置特性的值

.removeAttr(key)        删除特性key的值

.prop(key)                  取得属性key的值

.prop(key，value)      设置属性key的值为value

.prop(key，fn)           将fn的返回值作为key的值

.prop(obj)                  根据传入的键值对象参数设置属性的值

.removeProp(key)     删除属性key的值

.addClass(class)       为匹配元素添加传入的类

.removeClass(class) 为匹配元素删除传入的类

.toggleClass(class)   对于匹配元素，如果存在类则删除，不存在则添加

.hasClass(class)       匹配元素中至少一个包含传入的类则返回true

.val()                         获取第一个匹配元素的value属性值

.val(value)                设置每个匹配元素的value属性

8.内容操作

.html()               获取第一个匹配元素的HTML内容

.html(value)      将每个匹配元素的HTML内容设置为value

.text()                获取所有匹配元素的文本，以字符串返回

.text(value)       将每个匹配元素的文本设置为value

9.DOM插入

.append(content)              在每个匹配元素内部的末尾插入content

.appendTo(selector)         将匹配元素插入到与selector匹配的元素的内部的末尾

.prepend(content)             在每个匹配元素内部的开头插入content

.prependTo(selector)        将匹配元素插入到与selector匹配的元素的内部的开头

.after(content)                   在每个匹配元素外部的后面插入content

.insertAfter(selector)         将匹配元素插入到与selector匹配的元素的外部的后面

.before(content)                在每个匹配元素外部的前面插入content

.insertBefore(selector)      将匹配元素插入到与selector匹配的元素的外部的前面

.wrap(content)                  匹配的每个元素包含在content中

.wrapAll(content)              匹配的每个元素作为一个整体包含在content中

.wrapInner(content)          匹配的每个元素的内部内容包含在content中

.unwrap()                          删除元素的父元素（反操作）

10.替换、删除和复制

.replaceWith(content)                                        将匹配的元素替换为content

.replaceAll(selector)                                          将与selector匹配的元素替换为匹配的元素

.empty()                                                             删除每个元素的子节点

.remove([selector])                                            从DOM中删除节点，selector可以用于筛选

.detach([selector])                                             从DOM中删除节点，selector可以用于筛选，并保留JQuery给元素添加的数据

.clone([withHandlers],[deepWithHandlers])      返回匹配元素的副本，也可以复制事件处理程序

11.数据

.data(key)                                 获取第一个匹配元素的key键对应的数据

.data(key,value)                       设置每个元素关联的key对应的数据值为value

.removeData(key)                    删除每个元素与key键关联的数据

 

9.移动端软键盘检测

keyup事件——移动端可以通过绑定keyup事件，来检测当前键的键值。

$("#phone").on('keyup', function(e) {

              alert (e.keyCode) ;

            })

删除键的键值为keyCode=8；