JQuery选择器

作者:计算机知识

选择器

引言:在实操中,要清楚要对哪部分举办操作,那就不能够不旗帜显著有哪些选取器。那章我们来介绍jquery选择器

JQuery选择器

实例

图片 1

大旨选拔器

解释

Love Your Life

  • #id  根据id匹配
  • .class 依照class类名相配
  • element 依据给定成分名相称
  • * 相配索引
  • selector1, selector2…,selectorN 将各种选取器相配到的要素合并再次来到

宗旨采取器

JQuery选择器:

        JQuery接纳器允许你对HTML成分进行操作。

        JQuery选取器基于成分的id、类、类型、属性、属性值等“查找”(或选拔)HTML成分。它遵照已经存在的CSS 选择器(参照新手教程),除却,它还也许有一部分自定义的选择器。

        JQuery中装有选择器都是法郎符号初叶:$()。


等级次序选用器

*

分布选拔器:

  • $(“ancestor descendant”) 选取ancestor里所有descendant元素
  • $(“parent > child”) 选取parent下的child成分,直接一级子成分
  • $(“prev next”) 选择prev后的next元素,相当于nextOne
  • $(“pre ~ siblings”) 采取pre后的具有siblings成分,也便是nextAll

$(*)

    1、成分接纳器

        jQuery 成分采纳器基于成分名选用成分。

        语法:$("标签")

        实例:用户点击开关后,全数<p>成分都躲藏:

图片 2

页面主体内容

图片 3

要素采用器


过滤选取器

采纳全数因素

    二、#id 选择器

        jQuery #id 接纳器通过 HTML 成分的 id 属性选拔钦定的成分。

        页面相月素的 id 应该是当世无双的,所以您要在页面中接纳唯壹的因素必要通过 #id 选择器。

        语法:$("#id名")

        实例JQuery选择器。:用户点击按键后,全体id="test"都被隐形:

图片 4

页面主体内容

图片 5

id选择器


  • :first  选拔第贰个要素
  • :last  选用最后3个因素
  • :not(selector) 选用不餍足selector的成分
  • :even 选拔索引为偶数的成分
  • :odd 采纳索引为奇数的要素
  • :eq(index) 选拔索引等于index的因素
  • :gt(index) 采取索引大于index的因素
  • :lt(index) 选取索引小于index的成分
  • :header 选用全部标题成分
  • :animated 选拔当前正推行动画的享有因素
  • :focus 接纳当前到手关节的因素

#id

    三、.class 选择器

        jQuery 类采取器能够经过点名的 class 查找成分。

        语法:$(".类名")

        实例:用户点击按钮后,全体class="test"都被埋伏:

图片 6

class选择器

图片 7

class选择器


内容选拔器

$(“#a”)

    其他项目选取器:

图片 8

其余项目选用器

        那章只是介绍了大规模的抉择器类型,下章我们用另壹种分类方法对接纳器再越来越深等级次序开始展览私分。

        谢谢每多个苦口婆心看完的人。

  • :contains(text)  选取含有文本为text的要素
  • :empty 选拔不分包子成分或文本的空成分
  • :has(selector)  选择包蕴selector选拔器所匹配的要素的要素
  • :parent 选用含有子元素或文本元素的要素

选取id=a的元素

可知性选拔器

.class

  • :hidden  选择全部不可知成分
  • :visible 选用全数可知成分

$(“.b”)

属性选用器

选取class=b的元素

  • [attr]  选择含有此属性的因素
  • [attr=value] 选择属性值等于value的成分
  • [attr!=value]  选拔属性值不等于value的成分
  • [attr^=value]  采用属性值以value初叶的要素
  • [attr$=value]  选用属性值以value结尾的因素
  • [attr*=value]  选拔属性值含有value的成分
  • [attr|=value] 选择属性值等于value或以value为前缀的成分
  • [attr~=value]  选择属性以空格分割的值中隐含value的成分
  • [attr1][attr2]…[attrN]  四个选用器的组合,重返结果并集

element

子成分过滤器

$(“p”)

  • :nth-child(index/even/odd/equation) 采用各类父成分下的第index个子元素或奇偶元素
  • :first-child  采取各样父成分下的第三个子成分
  • :last-child  采取种种父成分下的结尾八个子成分
  • :only-child 选拔各类父成分中的唯1子成分

所有<p>元素

表单对象属性过滤采用器

.class.class

  • :enabled 选用全部可用成分
  • :disabled 采用全数不可用元素
  • :checked 选择全数被选中的要素(单选框,复选框)
  • :selected 选用全部被入选的选项因素(下拉框)

$(“.a.b”)

表单选取器

选拔全数class=a且class=b的成分

  • :input 选择全数的<input> <button> <textarea> <select>成分
  • :text 采纳全数的文本输入框,单行
  • :password 选拔全数的密码输入框
  • :radio 采取全数的单选框
  • :checkbox 选择全体的复选框
  • :submit 选用全部的提交按键
  • :image 选用全数的图像按键
  • :reset 选取全体的复位开关
  • :button 选拔全数的开关
  • :file 采取全体的上传域
  • :hidden  选用全部不可知成分

骨干过滤选用器

:first

$(“p:first”)

挑选第一个p成分

:last

$(“p:last”)

选择最终多个p元素

:odd

$(“p:odd”)

慎选全体奇数位上的p元素

:even

$(“p:even”)

挑选全数偶数位上的p成分

:ep(n)

$(“p:eq(n)”)

选取第n位p元素(index从0开始)

:gt(n)

$(“li:gt(n)”)

选拔第n位在此以前的有着li成分(不带有第n位)

:lt(n)

$(“li:lt(n)”)

选料第n位之后的具备li元素(不带有第n位)

:root

$(“p:root”)

分选p的根成分(不写标签时表示选择全局的根元素)

:header()

$(“p:header)

挑选P标签里的持有题目(不写标签时表示接纳全局的标题)

:lang

$(“p:lang(language)”)

给P标签选拔钦点的言语(不写标签时表示选取全局的题目)

:not

$(“li:not(.active)”)

本文由bwin必赢发布,转载请注明来源

关键词: Bwin必赢亚洲 JQ学习