zoukankan      html  css  js  c++  java
  • 【5】jQuery学习——入门jQuery选择器之过滤选择器基本过滤选择器

    今天说的是过滤选择器,主要是通过特定的过滤规则来筛选出所需的DOM元素,方便以后添加我们所需的效果,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。

    按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器

    ============================================================================================

    今天就像我们标题写的一样,先了解下基本的过滤,以后在说说其他的。

    基本过滤器有10个,下面我们一个一个的来了解下

    选择器 描述 返回 示例
    $("Element:first") 获得在HTML页面中某种元素的第一个 单个元素 $("div:first")表示获得第一个div
    $("Element:last") 获得在HTML页面中某种元素的最后一个 单个元素 $("div:last")表示获得最后一个div
    $("Element:not(selector)") 去除所有与给定选择器匹配的元素 集合元素 $(“input:not:(.myclass)”)选取class不是myclass的input元素
    $("Element:even") 选取索引是偶数的所有元素,注意:索引是从0开始的 集合元素 $(“input:even”)选取索引是偶数的input元素。
    $("Element:odd") 选取索引是奇数的所有元素,注意:索引是从0开始的 集合元素 $(“input:odd”)选取索引是奇数的input元素。
    $("Element:eq(index)") 选取索引等于index的元素,注意:索引是从0开始的 集合元素 $(“input:eq(1)”)选取索引等于1的input元素。实际上选择的是第二个input元素
    $("Element:gt(index)") 选取索引大于index的元素,注意:索引是从0开始的 集合元素 $(“input:gt(1)”)选取索引大于1的input元素。实际上选择的是第二个input元素开始,之【后】所有的input元素
    $("Element:lt(index)") 选取索引小于index的元素,注意:索引是从0开始的 集合元素

    $(“input:lt(1)”)选取索引小于于1的input元素。这个就等同于$(“input:eq(0)”)。

    $(“input:gt(3)”)选取索引大于3的input元素。实际上选择的是第三个input元素开始,之【前】所有的input元素

    $(":header") 选取所有的标题元素,例如h1,h2,h3….. 集合元素 $(“:header”)选取网页中所有的h1,h2,h3…
    $("Element:animated") 选取当前正在执行动画的所有元素 集合元素 $(“div:animated”)选取正在执行动画的div元素

    =====================================================================================================

    这里有几点要注意的:

    【1】有一点我觉得有必要提醒大家的是”:first”和”:last”选择器,虽然获取到的是一个元素,但是返回的jQuery对象仍然是一个jQuery包装集,还是一个集合,还是要这样$(“div:first”)[0]转换为DOM对象。具体是以后在说。

    【2】odd和even获取的是索引值,是从0开始算起,所以正常表现情况是 even是获取奇数行,odd是获取偶数行 。

    【3】如果上面两个方法(gt(index)lt(index))的大于号小于号记不清,就想想HTML标记中的[& gt ;]和[& lt ;](中括号中内容去掉空格)就行了哈。

    =====================================================================================================

    ps.文章参考梦三秋和w3cfuns网站

    =====================================================================================================

    完成了w3cfuns网站的作业

    基本过滤选择器
      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5 <title>实例</title>
      6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      7 <script type="text/javascript">
      8 $(function(){
      9     $("#but1").click(function(){
     10         $(".a li:first").text("我是第一行");      
     11     });
     12     $("#but2").click(function(){
     13         $(".a li:last").text("我是最后一行");        
     14     });
     15     $("#but3").click(function(){
     16         $(".b li:odd").text("我是偶数行");      
     17     });
     18     $("#but4").click(function(){
     19         $(".b li:even").text("我是奇数行");        
     20     });
     21     $("#but5").click(function(){
     22         $(".c li:eq(1)").text("我是第二行");        
     23     });
     24     $("#but6").click(function(){
     25         $(".d li:lt(4)").text("我在第五行之前");
     26     });
     27     $("#but7").click(function(){
     28         $(".d li:gt(4)").text(" 我在第五行之后");
     29     });
     30     $("#but8").click(function(){
     31         $(".e :header").text("我是h标题标签");        
     32     });
     33 });
     34 
     35 
     36 </script>
     37 </head>
     38 
     39 <body>
     40 
     41 <input type="button" id="but1" value="我是第一行" />
     42 <input type="button" id="but2" value="我是最后一行" />
     43 <input type="button" id="but3" value="我是偶数行【:odd】" />
     44 <input type="button" id="but4" value="我是奇数行【:even】" />
     45 <input type="button" id="but5" value="我是第二行" />
     46 <input type="button" id="but6" value="我在第五行之前【:lt()】" />
     47 <input type="button" id="but7" value="我在第五行之后【:gt()】" />
     48 <input type="button" id="but8" value="我是h标题标签" />
     49 
     50 <p>===============================我是淫荡的分割线【:first和:last应用】===============================</p>
     51 <ul class="a">
     52     <li>1</li>
     53     <li>2</li>
     54     <li>3</li>
     55     <li>4</li>
     56     <li>5</li>
     57 </ul>
     58 <p>===============================我是淫荡的分割线【:odd和:even应用】===============================</p>
     59 <ul class="b">
     60     <li>1</li>
     61     <li>2</li>
     62     <li>3</li>
     63     <li>4</li>
     64     <li>5</li>
     65     <li>6</li>
     66     <li>7</li>
     67     <li>8</li>
     68     <li>9</li>
     69     <li>10</li>
     70 </ul>
     71 <p>===============================我是淫荡的分割线【:eq()应用】===============================</p>
     72 <ul class="c">
     73     <li>1</li>
     74     <li>2</li>
     75     <li>3</li>
     76 </ul>
     77 <p>===============================我是淫荡的分割线【:lt()和:gt()应用】===============================</p>
     78 <ul class="d">
     79     <li>1</li>
     80     <li>2</li>
     81     <li>3</li>
     82     <li>4</li>
     83     <li>5</li>
     84     <li>6</li>
     85     <li>7</li>
     86     <li>8</li>
     87     <li>9</li>
     88     <li>10</li>
     89 </ul>
     90 <p>===============================我是淫荡的分割线【:header应用】===============================</p>
     91 <div class="e">
     92     <h1>h1</h1>
     93     <h2>h2</h2>
     94     <h3>h3</h3>
     95     <h4>h4</h4>
     96     <h5>h5</h5>
     97     <h6>h6</h6>
     98 </div>
     99 
    100 
    101 </body>
    102 </html>
  • 相关阅读:
    mysql常用基本命令
    mysql8.0.13下载与安装图文教程
    k8s ingress 增加跨域配置
    Jenkins 备份恢复插件 thinBackup 使用
    k8s HA master 节点宕机修复
    nginx 跨域问题解决
    mongodb 3.4.24 主从复制
    k8s 线上安装 jenkins并结合 jenkinsfile 实现 helm 自动化部署
    k8s helm 运用与自建helm仓库chartmuseum
    centos6 源码安装 unzip
  • 原文地址:https://www.cnblogs.com/huige728/p/2623673.html
Copyright © 2011-2022 走看看