zoukankan      html  css  js  c++  java
  • jQuery选择器

    CSS应用到页面中有3中方式:
    行间样式表
    内部样式表
    外部样式表

    CSS选择器
    标签选择器 E{ CSS规则 }
    ID选择器 #ID{ CSS规则 }
    类选择器 E.className{ CSS规则 }
    群组选择器 E1,E2,E3{ CSS规则 }
    后代选择器 E F{ CSS规则 }
    通配符选择器 *{ CSS规则 }

    jQuery选择器
    简单选择器
    #id 返回单个 $("#test")
    .class 集合 $(".test")
    * 集合 $("*")
    selector1,sel2...selN 集合 $("div,span,p.myClass")选取所有<div>,<span>,class为myClass的<p>标签的一组元素

    层次选择器
    $("div span") 选取<div>里所有的<span>元素
    $("div > span") 选取<div>元素下元素名是<span>的子元素
    $(".one+div")选取class为one的下一个<div>同辈元素 ==$(".one").next("div")
    $("#tow~div")选取id为tow的元素后面所有<div>的同辈元素 ==$("#tow").nextAll("div")
    siblings()和$("#tow~div")比较
    //选取#prev之后的所有同辈div元素
    $("#prev ~ div").css("background","#bbffaa");
    //同上
    $("#prev").nextAll("div").css("background","#bbffaa");
    //选取#prev所有的同辈div元素,无论前后位置
    $("#prev").siblings("div").css("background","#bbffaa");
    过滤选择器
    :first 选取第一个元素 如:$("div:first")
    :last 选取最后一个元素 如: $("div:last")
    :not(selector) 去除所有给定选择器匹配的元素 如:$("input:not(.myClass)")
    :even 选取索引是偶数的所有元素,0开始 如:$("input:even")
    :odd 选取索引是奇数的所有元素,0开始 如:$("input:odd")
    :eq(index)选取索引等于index的元素 如:$("inout:eq(1)")
    :gt(index)选取索引大于index的元素
    :lt(index)选取索引小于index的元素
    :header 选取所有的标题元素,h1,h2等等 如:$(":header")
    :animated选取当前正在执行动画的所有元素 如:$("div:animated")选取正在执行动画的<div元素>
    :focus 选取当前获取焦点的元素 如:$(":focus")

    内容过滤选择器
    $("div:contains('我')") 选取含有文本"我"的<div>的元素
    $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素
    $("div:has(p)")选取含有<p>元素的<div>元素
    $("div:parent")选取拥有子元素(包括文本元素)的<div>元素

    可见性过滤选择器
    $(":hidden") 选取所有不可见的元素
    $("div:visible") 选取所有可见的元素

    属性过滤选择器
    $("div[id]") 选取所有属性id的元素
    $("div[title=test]")选择属性title为"test"的<div>元素
    $("div[title!=test]")选取属性title不等于"test"的<div>元素(没有属性的title也会选中);
    $("div[title^=test]") 选取属性title以"test"开始的<div>元素
    $("div[title$=test]") 选取属性title以"test"结束的<div>元素
    $("div[title*=test]") 选取属性title含有"test"的<div>元素
    $('div[title|="en"]') 选取属性title等于en或以en为前缀的元素(该字符串后跟一个连字符"-")
    $('div[title-="uk"]') 选取属性title用空格分隔的值中包含字符uk的元素
    $("div[id][title$='test']")选取拥有属性id,并且属性title以“test”结束的<div>元素

    子元素过滤选择器
    :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或奇偶元素(index从1起)
    :first-child 选取每个父元素的第一个子元素
    :lest-child 选取每个父元素的最后一个子元素
    :only-child 如果某个元素是它父元素的唯一的子元素,那么将会被匹配;如果父元素中包含其他元素,则不会被匹配

    表单对象属性过滤选择器
    $("#form1:enabled") 选取id为form1的表单内的所有可用元素
    $("#form2:disabled")选取id为form2的表单内的所有不可用元素
    $("input:checked") 选取所有被选中的<input>元素
    $("select option:selected") 选取所有被选中的选项元素

    表单选择器
    $(":input") 选择所有的<input><textarea><select><button>元素
    $(":text") 选择所有的单行文本框
    $(":password") 选择所有的密码框
    $(":radio") 选择所有的单选框
    $(":checkbox") 选择所有的复选框
    $(":submit") 选择所有的提交按钮
    $(":image") 选择所有的图像按钮
    $(":reset") 选取所有的重置按钮
    $(":button") 选取所有的按钮
    $(":file") 选取所有的上传域
    $(":hidden") 选取所有不可见的元素

    $("#ID")替换 document.getElementById()函数,即通过ID获取ID元素
    $("tagName")替换document.getElementsByTagName()函数,即通过标签名获取HTML元素


    CSS选择器找到元素添加样式,jQuery选择器找到元素是添加行为

    检查网页是否存在某一元素
    if( $("#tt").length > 0 ){
    //do something

    或者转换DOM对象来判断
    if( $("#tt")[0]){
    // do something
    }

  • 相关阅读:
    Chunky Monkey(算法)
    Confirm the Ending(算法)
    Return Largest Numbers in Arrays(算法)
    防止SQL注入总结
    mybatis中的#和$的区别 以及 防止sql注入
    拆分字符串为树形结构
    虚拟机类加载机制
    linux加载字体
    项目上线暴露出的问题
    浅析正则表达式-应用篇
  • 原文地址:https://www.cnblogs.com/luobin991/p/4389913.html
Copyright © 2011-2022 走看看