jQuery 选择器

一 :jquery优点 

代码简练 实现的功能多

免费 开源

兼容各种浏览器

能和css html ajax 实现动态效果 。动画 事件等

文档详细

jQuery有错误提示 

使用jQuery就不用在js当中插入大量的js代码

二: jquery的开发步骤: 
(1)导入js库      放在一个js文件夹下。 
(2)在当前的页面上通过<script src="" > 将js文件引入当前的页面。 
(3)使用jquery当中的内容。 

三: jquery的选择器

基本选择器

#id 查找ID为“myDiv”的元素  $("#myDiv");

element 查找一个DIV元素  $("div");

.class   查找所有类是“myClass”的元素  $(".class");

*     查找每一个元素   $("*");

selector1,selector2,selector3  找到匹配任意一个类的元素  $("div,span,p");

层级选择器

ancestor descendant  在给定的祖先元素下匹配所有的后代元素   找到表单所有的input元素   $("form input");

parent>child 在给定的父元素下匹配所有的子元素  匹配表单中所有的子级input元素   $("form>input");

prev+next 匹配所有紧接在prev元素的next元素  匹配所有跟在label后面的input元素  $("label+input");

prev~siblings 匹配prev元素之后的所有siblings元素  找到所有与表单同辈的input元素  $("form~input");

基本选择器

first() 获取匹配的第一个元素  $("li").first()

last() 获取匹配的最后一个元素  $("li").last()

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

:even 匹配所有索引值为偶数的元素 从0开始计数  查找表格的1 3 5...行(即索引值0 2  4) $("tr:even")

:odd  匹配所有索引值为奇数的元素 从0开始计数  查找表格的2 4 6...行 (即索引值1 3 5 )$("tr:odd:")

:eq  匹配一个给定索引值的元素 查找第二行 $("tr:eq(1)");

:gt  匹配所有大于给定索引值的元素 查找第二行第三行 即索引值是1和2 也就是比0大 $(tr:gt(0))

:lt  匹配所有小于给定索引值的元素 查找第一行第二行 即索引值是0和1 也就是比2小 $(tr:lt(2))

:header 匹配如 h1,h2,h3 之类的标题元素 给页面所有标题加上背景色 $(":header").css("background","#eee");

:animated 匹配所有正在执行动画效果的元素 

内容选择器

:contains  匹配包含给定文本的元素  查找所有包含“john”的div元素  $("div:contains('john')")

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

:has  匹配含有选择器所匹配的元素的元素 给所有包含p元素的div元素加一个text类 $("div:has(p)").addClass("text")

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

可见性选择器

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

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

属性选择器

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

[attribute=value] 匹配给定的属性是某个特定值的元素  查找所有name属性是new的input元素 $("input[name='new']")

[attribute!=value] 匹配所有不含有指定的属性 查找所有name属性不是new的input元素 $("input[name!='new']")

[attribute^=value] 匹配给定的属性是以某些值开始的元素 查找所有name以‘n’开始的input元素 $("input[name^='n']")

[attribute$=value] 匹配给定的属性是以某些值结尾的元素 查找所有name以‘let’结尾的input元素 $("input[name$='let']")

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

[selector1] [selector1] [selectorN] 复合属性选择器 需要同时满足多个条件使用 

查找所有含有id属性 并且它的name属性是以man结尾的 $("input[id][name$='man']")

子元素选择器

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

:first-child 匹配第一个子元素 在每个ul中查找第一个li  $("ul li:first-child()")

:last-child 匹配最后一个子元素 在每个ul中查找最后一个li  $(ul li:last-child)

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

表单选择器

: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 $("tr:hidden") 匹配type为hidden的元素 $("input:hidden")

表单对象属性

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

:disabled 匹配所有不可用元素 查找所有不可用的input元素 $(”input:disabled“)

:checked 匹配所有选中的被选择中元素(复选框,单选框等)查找所有选中的复选框元素 $("input:checked")

:selected 匹配所有选择中的option元素 查找所有选中的选项元素 $(select option:selected)

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值