zoukankan      html  css  js  c++  java
  • 小杜同学关于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行代码的理解。

  • 相关阅读:
    20199320 2019-2020-2 《网络攻防实践》第2周作业
    20199320 2019-2020-2 《网络攻防实践》第1周作业
    20199320 《网络攻防实践》假期作业
    第二周测试补交-myod
    20199320《Linux内核原理与分析》第十二周作业
    第六周测试补交-sumN
    20199320《Linux内核原理与分析》第十一周作业
    2019-2020-1 20199320《Linux内核原理与分析》第九周作业
    20199309 《网络攻防实践》 综合实践
    20199309 2019-2020-2 《网络攻防实践》第十一周作业
  • 原文地址:https://www.cnblogs.com/anmutu/p/jQuery.html
Copyright © 2011-2022 走看看