小杜同学关于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行代码的理解。