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

    最近又看了下《锋利的jQuery》,想系统的再整理下jQuery的有关知识

    选择器是jQuery的根基,事件处理,遍历DOM和Ajax操作都依赖于选择器,这次我们先从

    选择器说起。

    首先,现在的jQuery是支持CSS1到CSS3选择器  

    这里一共包含四大类:基本选择器、层次选择器、过滤选择器、表单选择器

    一,基本选择器

    (1)#id 

    (2).class

    (3)element

    (4)*

    (5)selector1,selector2,......,selectorN(将每一个选择器匹配到的元素合并后返回)

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

    二,层次选择器

    (1)$("ancestor descendant")

        exp:$("div span") 选取<div>中的<span>

    (2)$("parent>child")

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

    (3)$("prev+next")

       exp:$(".myClass+div")选取class名为"myClass"的下一个<div>同辈元素

    (4)$("prev~sibilings")

      exp:$("#mine~div")选取id为“mine”元素后面所有的<div>同辈元素

    三,过滤选择器(分为五种)

    【1】基本过滤选择器

    (1):first 

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

    (2):last

    (3):not(selector) 去除所有与给定选择器匹配的元素

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

    (4):even 选取索引是偶数的所有元素 索引从0开始

    (5): odd   选取索引是奇数的所有元素

    (6): eq(index)索引等于index的元素

    (7): gt(index)索引大于index的元素

    (8):lt(index)索引小于index的元素

    (9):header 选取所有的标题元素

      exp:$(“:header”)选取网页中所有的<h1>,<h2>,<h3>

     (10):animated 选取正在执行动画的元素

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

    【2】内容过滤选择器

    (1) :contains(text)  选取含有文本内容为“text”的元素

    exp:$("div:contains('me')")  选取含有文本"me"的<div>元素

    (2):empty   选取不包含子元素或者文本的空元素

    (3):has(selector)  选取含有选择器所有匹配元素的元素

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

    (4):parent  选取含有子元素或者文本的元素

    【3】可见性过滤选择器

    (1):hidden 选取所有不可见的元素

    (2):visible 选取所有可见的元素

    【4】属性过滤选择器

    (1)[attr] 选取拥有此属性的元素

    exp:$("div[id]")选取拥有id的div

     (2)[attr=val] 选取属性值等于val的元素

    (3)[attr!=val]  没有该属性的元素也会不选择

    (4)[attr^=val]选取属性值以val开始的元素

    exp:$("div[title]^=test") 选取属性title以”test“开始的div元素

    (5)[attr$=val]选取属性以val结尾的元素

    (6)[attr*=val]选取属性值含有val的元素

    (7)[attr|=val]选取属性等于给定字符串或以该字符串为前缀(该字符串后跟连字符”-“)的元素

    exp:$(‘div[title|=”en“]’)选取属性title等于"en"或以”en“为前缀的元素

    (8)[attr~=val]选取属性用空格分隔的值中包含一个给定的元素

    exp:$(‘div[title~=”uk“]’)选取title用空格分隔的值中包含”uk“元素

    (9)[attr1][attr2][attrN] 复合属性选择,每选择一次,缩小一次

    【5】子元素过滤选择器

    (1)nth-child(index/even/odd/equation)  索引从1开始

    • :nth-child(3n+1)选取每个父元素下所有是(3n+1)的元素

    (2):first-child

    (3):last-child

    (4):only-child

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

    (1):enabled 选取所有可用元素

    (2):disable 选取所有不可用的元素

    (3):checked

    (4):  selected

    四,表单选择器

    (1) :input  选择所有<input> <textarea> <select> <button>元素

    (2):text

    (3):password

    (4):radio

    (5):chechbox

    (6):submit

    (7):image

    (8):reset

    (9):button

    (10):file 

    (11):hidden

    注:

    (1)属性值中包含”.“ ”、“ ”#“需要用”\“进行转移,否则会报错

    (2)如果使用了1.3.1一下的版本,属性选择器前需要加@

    (3)选择器中的空格需要特别注意,

    exp:$('.test :hidden') 选取class为”test“的元素里面隐藏的元素

            $('.test:hidden') 选取隐藏class为”test“的元素

  • 相关阅读:
    vue-cli创建项目 一直downloading解决办法
    Win7点击文件夹右键可打开cmd控制台,并获取当前目录

    js apply/call/caller/callee/bind使用方法与区别分析
    click() bind() live() delegate()区别
    域名与IP对应,解决只能IP访问不能域名访问的问题
    element.style{}
    git
    new
    js 数组函数
  • 原文地址:https://www.cnblogs.com/fnncat/p/4878196.html
Copyright © 2011-2022 走看看