上次和大家讨论了Jquery的基础和简介,列出了一些基础的选择器,基本选择器和层次选择器,现在和大家接着讨论下Jquery中的其它常用的选择器,通过学习Jquery的多种选择器,大家可能会发现Jquery是一个非常强大的html的Dom查询库,在Jquery中提供了非常多对于DOM查询的方法,是我们对于Dom的操作变的异常的简单,不用再去烦恼如果找到指定目标,现在让我们走进Jquery选择器
过滤选择器:
:first $("div:first")选择所有DIV元素中的第一个元素
:last $("div:last")选择所有div元素的最后的一个元素
:not(selector) $("input:not(.myClass)") 获取class不叫myClass的Input的元素
:even $("input:even") 获取索引是偶数的Input的元素
:odd $("input:odd") 获取索引时奇数的Input的元素
:eq $("input:eq(2)") 获取所有input元素中下标索引为2的元素
:gt $(“input:gt(1)”) 获取input元素中下标索引大于1的元素
:lt $("input:lt(1)") 获取input元素中下标索引小于1的元素
:header $("header") 获取所有的<h1>到<h6>的元素
内容过滤选择器
:contains(text) $("div:contains(我)") 选取文本包含”我“我的div元素
:empty $("div:empty") 选取没有子元素,但包括文本元素的div元素
:has $("div:has(p)") 选取含有p元素的div元素
:parent $("div:parent") 选取拥有子元素的div元素
属性过滤选择器
[attribute] $("div[id]") 返回div拥有id属性的元素
[attribute=value] $(div[title='sharme']) 获取属性为title值为sharme的元素
[attribute!=value] $(div[title!='sharme']) 获取属性title值不为sharme的元素
[attribute^='value'] $("div[title^='sha']") 获取属性title值为sha开头的元素
[attribute$='value'] $("div[title$='me']") 获取属性为title值为me结尾的div的元素
[attribute*='value'] $("div[title*='sss']") 获取属性为title所有值为sss的div元素
综合实践: $("div[title='sharme'][name^='sha'][class$='me']") 先后顺序获取title为sharme,name为sha开头,class值以me结尾的div的元素
接下来和大家讨论下对于DOM的操作,jquery中的函数
append() 先每一个元素内部追加内容
appendTo() 将内容附加到元素上 $("<div>sharme</div>").appendTo("p")
prepend() $("p").preprend("dddddddd") 将ddddd附加到p元素之前
prependTo() $("ddddddd").preprendTo("p")
after()
insertAfter() $("<div>sharme<div/>").insertAfter("p") 将元素插入到p元素之后
对于Jquery的选择器就列到这里了,下次我将和家大讨论一下Jquery中的事件处理机制,分享一下我的经验,如果有兴趣希望大家多多关注一下我的博客,刚刚开始写博客,以后将会不停的更新我的博客,将技术在这里分享