• jQuery—选择器


    摘抄自《锋利的jQuery》

    一、基本选择器

    $("#one").css("background","#bbffaa");

    选取id为one的元素, 返回单个元素

    $(".mini").css("background","#bbffaa");

     选取所有class为test的元素

    $("div").css("background","#bbffaa");

    选取所有<div>元素

    $("*").css("background","#bbffaa");

    选取所有的元素

    $("span, #two").css("background","#bbffaa");

    选取所有<span>元素和id为two的元素, 以逗号相隔

    二、层次选择器

    $("body div").css("background","#bbffaa");
    

    选取<body>里所有的<div>元素

    $("body > div").css("background","#bbffaa");
    

    选取<body>下元素名是<div>的子元素

    $(".one + div").css("background","#bbffaa");
    

    选取class为one的下一个<div>同辈元素

    $("#two ~ div").css("background","#bbffaa");
    

    选取id为two的元素后面的所有<div>同辈元素

    三、过滤选择器

    1、基本过滤选择器

    $("div:first").css("background","#bbffaa");
    

    选取所有<div>元素中第1个<div>元素, 返回单个元素

    $("div:last").css("background","#bbffaa");
    

    选取所有<div>元素中最后一个<div>元素, 返回单个元素

    $("div:not(.one)").css("background","#bbffaa");
    

    选取class不是one的<div>元素

    $("div:even").css("background","#bbffaa");
    

    选取索引是偶数的<div>元素

    $("div:odd").css("background","#bbffaa");
    

    选取索引是奇数的<div>元素

    $("div:eq(3)").css("background","#bbffaa");
    

    选取索引等于3的<div>元素

    $("div:gt(3)").css("background","#bbffaa");
    

    选取索引大于3的<div>元素

    $("div:lt(3)").css("background","#bbffaa");
    

    选取索引小于3的<div>元素

    $(":header").css("background","#bbffaa");
    

    选取网页中所有的<h1>,<h2>,<h3>……

    $(":animated").css("background","#bbffaa");
    

    选取正在执行动画的<div>元素

    $(":focus").css("background","#bbffaa");
    

    选取当前获取焦点的元素

    2、内容过滤选择器

    $("div:contains(di)").css("background","#bbffaa");
    

    选取含有文本"di"的<div>元素

    $("div:empty").css("background","#bbffaa");
    

    选取不包含子元素(包括文本元素)的<div>空元素

    $("div:has('.mini')").css("background","#bbffaa");
    

    选取含有class为mini元素的<div>元素

    $("div:parent").css("background","#bbffaa");
    

    选取拥有子元素(包括文本元素)的<div>元素

    3、可见性过滤选择器

    $("div:hidden").css("background","#bbffaa");
    

    选取所有不可见的<div>元素(所有的)

    $("div:visible").css("background","#bbffaa");
    

    选取所有可见的<div>元素

    4、属性过滤选择器

    $("div[title]").css("background","#bbffaa");
    

    选取含有属性title的<div>元素

    $("div[title=test]").css("background","#bbffaa");
    

    选取属性title值等于"test"的<div>元素

    $("div[title!=test]").css("background","#bbffaa");
    

    选取属性title值不等于"test"的<div>元素

    $("div[title^=te]").css("background","#bbffaa");
    

    选取属性title值以"te"开始的<div>元素 

    $("div[title$=est]").css("background","#bbffaa");
    

    选取属性title值以"est"结束的<div>元素

    $("div[title*=es]").css("background","#bbffaa");
    

    选取属性title值含有"es"的<div>元素

    5、子元素过滤选择器

    $("div .one :nth-child(2)").css("background","#bbffaa");
    

    选取每个class为one的<div>父元素下的第2个子元素

    $("div .one :first-child").css("background","#bbffaa");
    

    选取每个class为one的<div>父元素下的第1个子元素

    $("div .one :last-child").css("background","#bbffaa");
    

    选取每个class为one的<div>父元素下的最后一个子元素

    $("div .one :only-child").css("background","#bbffaa");
    

    如果class为one的<div>父元素下只有一个子元素, 就选取

    6、表单对象属性过滤选择器

    $("#form1 input:enabled").val("这里变化了!");
    

    选取表单内可用<input>元素

    $("#form2 input:disabled").val("这里变化了!");
    

    选取表单内不可用的<input>元素

    $("input:checked").length
    

    多选框选中的个数

    $("select :selected").text();
    

    下拉框选中的内容

    四、表单选择器

    $(":input")
    

    选取所有<input>、<textarea>、<select>和<button>

    $(":text")
    

    选取所有的单行文本框

    $(":password")
    

    选取所有的密码框

    $(":radio")
    

    选取所有的单选框

    $(":checkbox")
    

    选取所有的多选框

    $("submit")
    

    选取所有的提交按钮

    $("image")
    

    选取所有的图像按钮

    $("reset")
    

    选取所有的重置按钮

    $("button")
    

    选取所有的按钮

    $("file")
    

    选取所有的上传域

    $(":hidden")
    

    选取所有不可见元素

  • 相关阅读:
    Android签名详解(debug和release)
    Java反射机制的学习
    Android应用开发中如何使用隐藏API(转)
    asp.net购物车,订单以及模拟支付宝支付(二)---订单表
    asp.net购物车,订单以及模拟支付宝支付(一)---购物车表及添加购物车流程
    asp.net权限控制的方式
    .Net使用程序发送邮件时的问题
    Word2016“此功能看似已中断 并需要修复”问题解决办法
    C#字符串来袭——因为爱,所以爱
    C#时间的味道——任时光匆匆我只在乎你
  • 原文地址:https://www.cnblogs.com/ctxsdhy/p/5679527.html
Copyright © 2020-2023  润新知