JQuery基础

jQuery选择器

1、基本选择器

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

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

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

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

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

2、层级选择器

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

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

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

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

notice:  siblings    同胞,兄弟。

3、过滤选择器

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

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

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

                       

          ○ 选择索引为偶数的集合                                                         $(".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。


原文地址:https://www.cnblogs.com/lk-kk/p/4658181.html