zoukankan      html  css  js  c++  java
  • jQuery知识点总结(第一天)

            整理笔记前的题外话:

       我认为互联网的高速发展其中最为主要的一点就是——开源。

           开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家。后辈的学习者在混沌的互联网世界里,追寻着前辈们留下的足迹,亦步亦趋的前往更高的层楼。开源精神,大大减少了后辈们在学习技术的难度,使得技术的升级和迭代日新月异。我希望成为一名思维开阔的人,成为对互联网有贡献的开源人。

           我是后端PHP程序员,很少写前端页面。在做项目的过程中,被jQuery的便捷性所吸引。因此购买了《锋利的JQuery》一书,最近一边看书,一边总结书中的知识点,一边练习书中提供的案例。笔记里面的知识点也是总结《锋利的jQuery》里面的。希望我的笔记能让大家有所收获,如果笔记中有不对的地方,或者对我总结的知识点不太理解。可以在本文的评论区评论,我看到会会及时回复。还可以发邮件给我:mr.roverliang@gmail.com(谢绝广告邮件)。


     jQuery选择器

    1、基本选择器

            ID选择器    $("#id");            对应CSS里面id选择器     #id{ with : 100px; height : 200px }

            类选择器    $(".class");                                      对应CSS里面类选择器    .class{ width : 100px;}

            元素选择器          $("div");                                          对应CSS里面的元素选择器    p { color:red }

            匹配所有              $("*");                                             同上对应

                               合集选择器           $("#id , .class , div ");                     同上对应

    最后一个【合集选择器】名字是我杜撰的。意思就是可以把#id  和 .class 以及 div共同组成一个大的集合。

    2、层级选择器

            ○ 后代选择器(不仅选择儿子,孙子也不放过)           $("body div");

                          ○ 子代选择器(只选择儿子)                                                    $("body >div");

                               ○ 下一个兄弟选择器(只选择下一个【同辈】元素)                  $("div + div");

              ○ 后面的所有兄弟选择器(选择自己后面所有的【同辈元素】)  $("prev ~ siblings");

    notice:  siblings    同胞,兄弟。

    3、过滤选择器

            ○ 选取集合元素中的第一个                                                       $(".class:first");

            ○ 选取集合元素最后一个元素                                                    $(".class:last");

            ○ 改变集合中部位某个特征的其余元素                                      $("div:not('.one')");

                                eg:老师:这个班级里面不是处女的同学出来排成一队。

               一女:报告老师,没破的算吗处女吗?

                    假设整个班级集合为  .class

                不是处女的集合为       .no

                那么出来排队的剩余集合应该这样写  :  $(".class:not('.no')");

              ○ 选择索引为偶数的集合                                                         $(".class:even")     even 是偶数的意思。可以音译为伊文,女孩子名字。默认索引是从0开始。

              ○ 选择索引为奇数的集合                                                         $(".class:odd")      odd  是奇数,奇怪的人的意思。奇怪的人都是单身狗,dog odd。索引从0始

              ○ 选择索引值等于 n 的元素                                                     $(".class:eq(5)");    选择.class中索引值等于5的那个元素。索引从0开始。

              ○ 选择索引值大于 n 的元素                                                     $(".class:gt(5)");     选择.class中索引值大于5的元素。索引从0开始。

              ○ 选择索引值小于 n 的元素                                                     $(".class:lt(5)");       选择.class中索引值小于5的元素。索引从0开始。

                                 ○ 选择标题元素如h1----h6                                                     $(":header");

              ○ 选择页面中正在执行动画的元素                                            $("animated")         animated   动画的。

              ○ 选择页面中当前获取焦点的元素                                            $(":focus")               focus  关注。

    notice : 页面中当前获取焦点的元素。什么事焦点。比如登录百度的时候,鼠标不用点击输入框,光标直接定位在输入框里。这就是运用了focus事件。

        还有我们利用【Tab】键 的时候也会触发这个事件。

        有获取焦foucus就有失去焦点blur。


     笔记其实已经写在了本子上。只是一边回忆,一边往电脑上打而已。

     剩余的内容,每天一更。

                                                             

    本人博客所有文章,均为原创。部分文章中或引用相关资料,但均已著明来源出处。可随意转载、分享,但需加本文链接,以及版权说明。
  • 相关阅读:
    leetcode74
    leetcode59
    leetcode1283
    0079. Word Search (M)
    0067. Add Binary (E)
    0203. Remove Linked List Elements (E)
    用async 解放你的大脑
    Python 类属性和方法
    Python 类装饰器
    Python 装饰器
  • 原文地址:https://www.cnblogs.com/roverliang/p/4657800.html
Copyright © 2011-2022 走看看