JQ选择器

选择器的分类

  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 表单选择器

基本选择器

#id:通过元素的 id 属性中给定的值

$("#myDiv");
element :指向 DOM 节点的标签名$("div");
.class 一个元素可以有多个类,只要有一个符合就能被匹配$(".myClass");
* 匹配所有元素,多用于结合上下文来搜索$("*")

层次选择器

1,后代选择器

$('#login li')找到id为login的后代元素li

2,子代选择器 

$( '#login>li')找到ID为登录的子代元素里,不包括孙子

3,兄弟选择器

$( '#login+li')找到紧接ID为登录的li元素

$( '#login〜li')找到ID为登录后面的li元素


过滤选择器

1、简单过滤选择器

:first获取第一个元素 $('li:first');

:last() 获取最后个元素 
$('li:last')

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

:even 匹配所有索引值为偶数的元素,从 0 开始计数 
$("tr:even")

:odd 匹配所有索引值为奇数的元素,从 0 开始计数 
$("tr:odd")

:eq(index) 匹配一个给定索引值的元素 
$("tr:eq(1)")

:gt(index) 匹配所有大于给定索引值的元素 
$("tr:gt(0)")

:lt(index) 匹配所有小于给定索引值的元素 
$("tr:lt(2)")

:header匹配如 h1, h2, h3之类的标题元素 $(":header").css("background", "#EEE");

3、内容过滤选择器

:contains(text)匹配包含给定文本的元素 $("div:contains('John')")

:empty 匹配所有不包含子元素或者文本的空元素 $("td:empty")

:has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has(p)").addClass("test");

:parent匹配含有子元素或者文本的元素 
$("td:parent")

4、 可见性过滤选择器

:hidden匹配所有不可见元素,或者type为hidden的元素 $("tr:hidden")

:visible 匹配所有的可见元素 $("tr:visible")

5、属性过滤选择器

[attribute]匹配包含给定属性的元素。$("div[id]")

[attribute=value] 匹配给定的属性是某个特定值的元素 
$("input[name='newsletter']").attr("checked", true);

[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。$("input[name!='newsletter']").attr("checked",true);

[attribute^=value] 匹配给定的属性是以某些值开始的元素 $("input[name^='news']")

[attribute$=value] 匹配给定的属性是以某些值结尾的元素 
$("input[name$='letter']")

[attribute*=value] 匹配给定的属性是以包含某些值的元素 
$("input[name*='man']")

6、子元素过滤选择器 

:nth-child 匹配其父元素下的第N个子或奇偶元素 $("ul li:nth-child(2)")

:first-child 匹配第一个子元素 
$("ul li:first-child")

:last-child 匹配最后一个子元素 
$("ul li:last-child")

:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配$("ul li:only-child") 

7、表单对象属性过滤选择器  

:enabled匹配所有可用元素$("input:enabled")

:disabled匹配所有不可用元素$("input:disabled")

:checked匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
$("input:checked")

:selected匹配所有选中的option元素 $("select option:selected")

表单选择器

  • :input匹配所有 input, textarea, select 和 button 元素$(":input")
  • :text匹配所有的单行文本框 $(":text")
  • :password匹配所有密码框 $(":password")
  • :radio匹配所有单选按钮$(":radio")
  • :checkbox匹配所有复选框$(":checkbox")
  • :submit匹配所有提交按钮$(":submit")
  • :image匹配所有图像域$(":image")
  • :reset匹配所有重置按钮$(":reset")
  • :button匹配所有按钮$(":button")
  • :file匹配所有文件域$(":file")
  • :hidden匹配所有不可见元素,或者type为hidden的元素$(“tr:hidden”)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值