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

      JQuery的行为规则都必须在获取元素后才能生效。JQuery选择器完全继承了CSS的风格。CSS选择器是找到元素后添加样式,而JQuery选择器是找到元素后添加行为。JQuery中设计操作CSS样式的部分比单纯的CSS功能更加强大,并且拥有跨浏览器的兼容性。

      $("#ID"):用ID来获取元素。

      $("tagName"):通过标签名获取HTML元素。

      JQuery选择器支持CSS1、CSS2的全部和部分CSS3的部分选择器,也有少量独有的选择器。从1.1.3.1版以后,JQuery废弃了不常使用的XPath选择器,但在引用相关插件后,依然可以支持XPath选择器。

      即使用JQuery获取网页中不存在的元素也不会报错。$("#tt")获取的是对象,即使网页上面没有此元素,也要用JQuery检查某个元素在网页上是否存在,根据获取到元素的长度来判断或者转化成DOM对象来判断。

    ---------------------------------------------------------------------------------------------------

    JQuery选择器分为:

    基本选择器

    $("#test"):选取id为test的元素

    $(".test"):选取所有class为test的元素

    $("p."):选取所有的<p>元素

    $("*"):选取所有的元素

    $("div,span,p.myClass"):选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素。

    层次选择器

    可以通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等。

    $("div span"):选取<div>里面的所有<span>元素

    $("div>span"):选取<div>元素下名是<span>的子元素

    $(".one+div"):选取class为one的下一个<div>同辈元素,也可以用$(".one").next("div")来代替。

    $("#two~div"):选取id为two的元素后面的所有<div>同辈元素,也可以用$("#prev").nextAll("div")来代替。

    siblings()方法与前后位置无关,只要是同辈节点就能匹配了。

    $("#prex").siblings("div").css("background","#bbffaa");//选取#prex所有的同辈div元素,无论前后位置。

    过滤选择器

    过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

    1 基本过滤:

    $("div:first"):选取所有<div>元素中第1个<div>元素

    $("div:last"):选取所有<div>元素中最后一个<div>元素

    $("input:not(.myClass)"):选取class不是myClass的<input>元素

    $("input:event"):选取索引是偶数的<input>元素

    $("input:odd"):选取索引是奇数的<input>元素

    $("input:eq(1)"):选取索引等于1的<input>元素

    $("input:gt(1)"):选取索引大于1的<input>元素(注:大于1,而不包括1)

    $("input:lt(1)"):选取索引小于1的<input>元素(注:小于1,而不包括1)

    $(":header"):选取网页中所有的<h1>,<h2>,<h3>......

    $("div:animated"):选取正在执行动画的<div>元素

    $(':focus'):选取当前获取焦点的元素

    2 内容过滤选择器

    $("div:contains('我')"):选取含有文本“我”的<div>元素

    $("div:empty"):选取不包含子元素(包括文本元素)的<div>元素

    $("div:has(p)"):选取含有<p>元素的<div>元素

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

    3 可见性过滤选择器

    $(":hidden"):选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div-style="visibility:hidden;">等元素。如果指向选取<input>元素,可以使用$("input:hidden")

    $("div:visible"):选取所有可见的<div>元素

    在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为"none"的元素,也包括文本隐藏域(<input type="hidden"/>)和visibility:hidden之类的元素。

    4 属性过滤选择器

    属性过滤器的过滤规则是通过元素的属性来获取相应的元素。

    $("div[id]"):选取拥有属性id的元素

    $("div[title=test]"):选取属性title为"test"的<div>元素

    $("div[title!=test]"):选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)

    $("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>元素

    5 子元素过滤选择器

    :nth-child(event):选取每个父元素下的索引值是偶数的元素。

    :nth-child(odd):选取每个父元素下的索引值是奇数的元素。

    :nth-child(2):选取每个父元素下的索引值等于2的元素。

    :nth-child(3n):选取每个父元素下的索引值是3的倍数的元素,(n从1开始)

    :nth-child(3n+1):选取每个父元素下的索引值是(3n+1)的元素,(n从1开始)

    :first-child 选取每个父元素的第1个子元素

    :last-child 选取每个父元素的最后一个子元素

    :only-child 如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配。

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

    :enabled 选取所有可用元素。$("#form1:enabled"),

    :disabled 选取所有不可用元素。

    :checked  选取所有被选中的元素(单选框,复选框)。

    :selected 选取所有被选中的选项元素(下拉列表)。

    (4)表单选择器

    :input  选取所有的<input>、<textarea>、<select>和<button>元素

    :text  选取所有的单行文本框

    :password  选取所有的密码框

    :radio  选取所有的单选框

    :checkbox  选取所有的多选框

    :submit  选取所有的提交按钮

    :image  选取所有的图像按钮

    :reset  选取所有的重置按钮

    :button  选取所有的按钮

    :file  选取所有的上传域

    :hidden  选取所有不可见元素

  • 相关阅读:
    UE4 Hello World 创建第一个UE4工程
    集团企业数据信息系统建设方案
    Ubuntu_ROS中应用kinect v2笔记
    电力企业计量生产运行系统总体解决方案
    电力企业信息化建设解决方案之计量生产分析系统
    BQ24296充电管理芯片使用过程中的注意事项
    微信测试号开发之四 获取access_token和jsapi_ticket
    微信测试号开发之五 自定义菜单
    微信测试号开发之六 图灵自动回复文本消息
    微信测试号开发之七 获取用户地理位置
  • 原文地址:https://www.cnblogs.com/nana135/p/6341696.html
Copyright © 2011-2022 走看看