欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery基础之JQuery选择器

程序员文章站 2022-04-18 21:29:58
> qq_42308454的博客... > jquery基础—2、query选择器 -->  jquery基础—2、qu...

    jquery基础—2、query选择器

    2.1jquery选择器
    jquery中,需要选定元素,然后对元素进行操作,我们通过各种选择器,对元素进行选定。

    jquery选择器的语法和css选择器的语法基本相同。

    2.2强大的jquery选择器(详解)【转】

    基础选择器 basics
    名称 说明 举例
    #id 根据元素id选择 $(“pid”) 选择id为pid的元素
    element 根据元素的名称选择, $(“a”) 选择所有元素
    .class 根据元素的css类选择 $(".bgred") 选择所用css类为bgred的元素 选择所有元素 $("*")选择页面所有元素
    selector1,
    selector2,
    selectorn 可以将几个选择器用",“分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $(”#pid, a, .bgred")

    2.层次选择器 hierarchy

    名称 说明 举例
    #id 根据元素id选择 $("pid") 选择id为pid的元素
    element 根据元素的名称选择, $("a") 选择所有元素
    .class 根据元素的css类选择 $(".bgred") 选择所用css类为bgred的元素
    * 选择所有元素 $("*")选择页面所有元素

    selector1,

    selector2,

    selectorn

    可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#pid, a, .bgred")

    3.基本过滤器 basic filters

    名称 说明 举例
    ancestor descendant 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. $(".bgred p") 选择css类为bgred的元素中的所有元素.
    parent > child 选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素. $(".mylist>li") 选择css类为mylist元素中的直接子节点对象.
    prev + next prev和next是两个同级别的元素. 选中在prev元素后面的next元素. $("#hibiscus+img")选在id为hibiscus元素后面的img对象.
    prev ~ siblings

    选择prev后面的根据siblings过滤的元素

    注:siblings是过滤器

    $("#somediv~[title]")选择id为somediv的对象后面所有带有title属性的元素
    4. 内容过滤器 content filters
    名称 说明 举例
    :contains(text) 匹配包含给定文本的元素 查找所有包含 "john" 的 p 元素:$("p:contains('john')")
    :empty 匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素:$("td:empty")
    :has(selector) 匹配含有选择器所匹配的元素的元素 给所有包含 p 元素的 p 元素添加一个 text 类: $("p:has(p)").addclass("test");
    :parent 匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的 td 元素:$("td:parent")
    5.可见性过滤器 visibility filters
    名称 说明 举例
    :hidden 匹配所有的不可见元素注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用css visibility属性让其不显示但是占位,则不输入hidden. 查找所有不可见的 tr 元素:$("tr:hidden")
    :visible 匹配所有的可见元素 查找所有可见的 tr 元素:$("tr:visible")
    6.属性过滤器 attribute filters
    名称 说明 举例
    [attribute] 匹配包含给定属性的元素 查找所有含有 id 属性的 p 元素: $("p[id]")
    [attribute=value] 匹配给定的属性是某个特定值的元素 查找所有 name 属性是 newsletter 的 input 元素:$("input[name='newsletter']").attr("checked", true);
    [attribute!=value] 匹配给定的属性是不包含某个特定值的元素 查找所有 name 属性不是 newsletter 的 input 元素: $("input[name!='newsletter']").attr("checked", true);
    [attribute^=value] 匹配给定的属性是以某些值开始的元素 $("input[name^='news']")
    [attribute$=value] 匹配给定的属性是以某些值结尾的元素 查找所有 name 以 'letter' 结尾的 input 元素: $("input[name$='letter']")
    [attribute*=value] 匹配给定的属性是以包含某些值的元素 查找所有 name 包含 'man' 的 input 元素: $("input[name*='man']")
    [attributefilter1][attributefilter2][attributefiltern] 复合属性选择器,需要同时满足多个条件时使用。 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的: $("input[id][name$='man']")
    7.子元素过滤器 child filters ![在这里插入图片描述](https://img-blog.csdn.net/20180925151458290watermark/2/text/ahr0chm6ly9ibg9nlmnzzg4ubmv0l3fxxzqymza4ndu0/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70) 8.表单选择器 forms
    名称 说明 解释
    :input 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素:$(":input")
    :text 匹配所有的文本框 查找所有文本框: $(":text")
    :password 匹配所有密码框 查找所有密码框: $(":password")
    :radio 匹配所有单选按钮 查找所有单选按钮
    :checkbox 匹配所有复选框 查找所有复选框: $(":checkbox")
    :submit 匹配所有提交按钮 查找所有提交按钮: $(":submit")
    :image 匹配所有图像域 匹配所有图像域: $(":image")
    :reset 匹配所有重置按钮 查找所有重置按钮: $(":reset")
    :button 匹配所有按钮 查找所有按钮: $(":button")
    :file 匹配所有文件域 查找所有文件域: $(":file")
    9.表单过滤器 form filters
    名称 说明 解释
    :enabled 匹配所有可用元素 查找所有可用的input元素: $("input:enabled")
    :disabled 匹配所有不可用元素 查找所有不可用的input元素: $("input:disabled")
    :checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) 查找所有选中的复选框元素: $("input:checked")
    :selected 匹配所有选中的option元素 查找所有选中的选项元素: $("select option:selected")