zoukankan      html  css  js  c++  java
  • JQuery之选择器

    选择器允许您对元素组或单个元素进行操作。


    JQuery是一种十分优秀的JS框架,能极大地方便开发者操纵页面各种元素的行为,提高开发javascript效率。而相比于JS,JQuery中提供了十分强大的选择器,使用起来类似于CSS中的选择器,简单而又便利。

    jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。

    选择器允许对 HTML 元素组或单个元素进行操作。

    在 HTML DOM 术语中:

    选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

    下面我们介绍在JQuery中常用的几种选择器。


    引用:

    要想使用JQuery要先引入JQuery库

     1 <html>
     2     <head>
     3         <meta charset="UTF-8">
     4         <title></title>
     5         <script src="JS/jquery-3.1.1.min.js"><br />
     6             //导入的JQuery库,不写内容!!
     7         </script>
     8         <script type="text/javascript">
     9             
    10         </script>
    11     </head>
    12     
    13     <body>
    14         
    15     </body>
    16 </html>

     


     

    选择器的使用语法:$(选择器)

    在JQuery中使用“$”来代表JQuery中的一个回传函数。“()”中的内容就是使用的选择器。

    1.元素选择器

    通过id属性,class属性,或元素名来选择DOM对象,并封装成jQuery对象数组。

    这几种选择器语法简单,选择方便。

    例如id选择器:

    JQuery代码:

    $("#div1");

    HTML代码:

    1 <body>
    2     <div id="div1"></div>
    3     <div></div>
    4     <div></div>
    5     <div></div>
    6 </body>

    会返回#div1中的内容,这种使用方法适用于选取DOM中的所有元素

    2.层次选择器

    选择子元素、兄弟元素等,有如下四种:

    ①ancestor descendant:

    在给定的祖先元素下匹配所有的后代元素

    ancestor:祖先元素  descendant:后代元素

    ② parent > child:

    在给定的父元素下匹配所有的子元素

    parent:父元素  child:子元素

    ③prev + next:

    匹配所有紧接在 prev 元素后的 next 元素,例如:

    JQuery代码:

    $("label + input")

    HTML代码:

     1 <body>
     2     <form>
     3         <label>Name:</label>
     4         <input name="name" />
     5         <fieldset>
     6             <label>Newsletter:</label>
     7             <input name="newsletter" />
     8         </fieldset>
     9     </form>
    10     <input name="none" />
    11 </body>

    返回结果:

    [ <input name="name" />, <input name="newsletter" /> ]

    ④prev ~ siblings

    匹配 prev 元素之后的所有 siblings 元素,例如:

    JQuery代码:

    $("form ~ input")

    HTML代码:

    1 <form>
    2   <label>Name:</label>
    3   <input name="name" />
    4   <fieldset>
    5       <label>Newsletter:</label>
    6       <input name="newsletter" />
    7  </fieldset>
    8 </form>
    9 <input name="none" />

    返回结果:

    [ <input name="none" /> ]

    3.过滤选择器

    按照一定的规则来进行过滤的选择,均使用“:”来添加过滤条件。

    在使用过滤选择器时,语法格式为$("元素:选择器")

    ①:eq(index):

    匹配一个给定索引值的元素,这个是我们最常使用的选择器,传入的index是元素的序号。

    例如:

    JQuery代码:

    $("tr:eq(1)")

    HTML代码:

    <table>
      <tr><td>Header 1</td></tr>
      <tr><td>Value 1</td></tr>
      <tr><td>Value 2</td></tr>
    </table>

    返回结果:

    [ <tr><td>Value 1</td></tr> ]

     

  • 相关阅读:
    Generator函数执行器-co函数库源码解析
    前端解读Webview
    javascript设计模式详解之策略模式
    javascript设计模式详解之命令模式
    【VBA】标准Sub/Function定义,带ScreenUpdating、On Error GoTo
    【VBA】全局数组定义
    【VBA】全局常量定义
    调试Java代码(Eclipse)汇总
    为Eclipse添加反编译插件,更好的调试
    Eclipse图标含义
  • 原文地址:https://www.cnblogs.com/ymyBlogs/p/8998898.html
Copyright © 2011-2022 走看看