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行代码的理解。

  • 相关阅读:
    ArrayList用法
    MessageBox
    将文本文件导入Sql数据库
    在桌面和菜单中添加快捷方式
    泡沫排序
    Making use of localized variables in javascript.
    Remove double empty lines in Visual Studio 2012
    Using Operations Manager Connectors
    Clear SharePoint Designer cache
    Programmatically set navigation settings in SharePoint 2013
  • 原文地址:https://www.cnblogs.com/anmutu/p/jQuery.html
Copyright © 2011-2022 走看看