小杜同学关于Query的一点知识

小杜同学关于jQuery的一点知识

1.关于jQuery

jQuery就是一个JavaScript的函数库。既然是JS的的函数库，它自然是做JS做的东西了。毕竟jQuery只是用JavaScript编写的函数库而已。它的特点就是写的少却能做得更多。WRITE LESS,DO MORE.

jQuery中最常用的对象是$对象，要想使用jQuery的方法必须通过$对象。只有将普通的Dom对象封装成jQuery对象，然后才能调用jQuery中的各种方法。

 

2.关于jQuery在的map()函数。

   $.map(array,callback(element,index));

  它的用法就是对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原来的数组不改变。 

如下图，是将一个数组中的索引大于3的元素的值翻倍，其余值不变，且返回新数组。用的就是map()方法。

注意一下那个JS文件。要是调用的。

 

3.关于jQuery对象和Dom对象

Dom对象如果想调用jQuery的方法必须先转换为jQuery对象。

如何将Dom对象转换为jQuery对象？

$(spObj).text();=>$(Dom对象),就将Dom对象转换为了jQuery对象。稍微需要注意的是不能通过jQuery对象调用Dom中的方法。

如何通过jQuery转换为Dom对象？

有两种方法：$(spObj).get(0).innerHTML和$(spObj)[0].innerHTML。如下图。

 

4.关于获得jQuery中获得兄弟元素的几个方法:

next();表示的是当前元素之后紧邻的第一个兄弟元素，注意是下一个。

nextAll();表示的是当前元素之后的所有兄弟元素。注意一下是所有。

prev();表示的是当前元素之前紧邻的第一个兄弟元素。注意是上一个。

prevAll();表示的是当前元素之前所有的兄弟元素。注意一下是所有的。

siblings();表示当前元素的所有兄弟元素。也就是其之前和其之后的兄弟元素。

如页面上有一个无序列表，里面是一些小杜同学近期喜欢的歌曲，要求当鼠标进入的时候其背景变成红色，当点击此歌曲的时候其背景并不变色，也就是继续红色，而其上面的歌曲变成黄色背景的，而其后面的歌曲则变成蓝色背景的。其效果如下图：

 

5.关于jQuery中的一些基本过滤器。

:first。表示的是选取第一个元素。例如：$("div:first")表示的是选取第一个div。

：last。表示的是选取最后的元素。例如:$("div:last")表示的是选取最后一个div。

:not。表示选取不满足“选择器”条件的元素。

：even。表示选取索引是偶数的元素。

：odd。表示选取索引是奇数的元素。例如：$("input:even")表示选取索引是奇数的<input>。

$(":header")选取所有h1到h6的元素。

$(‘div:gt(2):lt(2)’).css(‘backgroundColor’, ‘yellow’);大于索引2的又小于后面索引2的,每次筛选都是上次筛选

如下图，页面中有一个列表，完成当点击其中元素的时候，奇数行变红，偶数行变黄的效果。

另一个依旧是此表，需求是将此表的第一行的字体改为30px的。然后将其下面排名前三我字体改为28px,将偶数行的背景变为红色的。最后一个平均分统计要求字

是红色的。个人认为略需要注意的就是关于对第11行代码的理解。