zoukankan      html  css  js  c++  java
  • jQuery 选择器:元素选择器、#id 选择器、.class 选择器

    jQuery 选择器


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


    jQuery 选择器

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

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头:$()。


    元素选择器

    jQuery 元素选择器基于元素名选取元素。

    在页面中选取所有 <p> 元素:

    $("p")

    实例

    用户点击按钮后,所有 <p> 元素都隐藏:

    实例

    $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

    #id 选择器

    jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

    页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

    通过 id 选取元素语法如下:

    $("#test")

    实例

    当用户点击按钮后,有 id="test" 属性的元素将被隐藏:

    实例

    $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

    .class 选择器

    jQuery 类选择器可以通过指定的 class 查找元素。

    语法如下:

    $(".test")

    实例

    用户点击按钮后所有带有 class="test" 属性的元素都隐藏:

    实例

    $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

    更多实例

    语法描述 
    $("*") 选取所有元素  
    $(this) 选取当前 HTML 元素  
    $("p.intro") 选取 class 为 intro 的 <p> 元素  
    $("p:first") 选取第一个 <p> 元素  
    $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素  
    $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素  
    $("[href]") 选取带有 href 属性的元素  
    $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素  
    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素  
    $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素  
    $("tr:even") 选取偶数位置的 <tr> 元素  
    $("tr:odd") 选取奇数位置的 <tr> 元素  

    独立文件中使用 jQuery 函数

    如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。

    当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):

    实例

    <head><scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="my_jquery_functions.js"></script></head>

  • 相关阅读:
    BestCoder6 1002 Goffi and Squary Partition(hdu 4982) 解题报告
    codeforces 31C Schedule 解题报告
    codeforces 462C Appleman and Toastman 解题报告
    codeforces 460C. Present 解题报告
    BestCoder3 1002 BestCoder Sequence(hdu 4908) 解题报告
    BestCoder3 1001 Task schedule(hdu 4907) 解题报告
    poj 1195 Mobile phones 解题报告
    二维树状数组 探索进行中
    codeforces 460B Little Dima and Equation 解题报告
    通过Sql语句控制SQLite数据库增删改查
  • 原文地址:https://www.cnblogs.com/peijz/p/12529561.html
Copyright © 2011-2022 走看看