jQuery元素筛选
2012-07-14 09:57:41 来源:WEB开发网 筛选时从包含一个或者多个dom对象的jQuery对象中找出某个dom对象所对应的jQuery对象我们从而可以进行操作
1、
$("p").eq(-2) 从搜索到的p标签中选择出倒数第二个p元素对应的jQuery对象注意不是dom对象,这里要和get方法区分开 。
get方法是获取dom对象然后 根据html dom进行操作
如果从正向开始筛选那么,索引时基于0的
2、
$("li").first() 选择出搜索到的li序列对应的jQuery中的第一个li对应的jQuery对象 。。
3、
$('li').last() 原理同上 找出最后一个dom元素对应的 jQuery对象,我们从而可以对他进行操作
4、
$(this).hasClass("protected") 判断当前的元素是否有指定的class 属性,有返回true 没有false
代码如下:
$(function(){
$("li").first().click(function(){
if($(this).hasClass("menu")){
$(this).hide(1000);
}
}) ;
}) ;
<ul>
<li class="menu">item1</li>
</ul>
效果单击item1 将隐藏 ...并且缓慢进行、、
5、
fileter 过滤器..可以通过我们传递的参数过滤掉不符合要求的元素
$("li").filter(".menu") 筛选出li中class属性是menu的元素
$("li").filter(",menu,:first") 帅选出来class=menu和第一个li元素...参数都是选择器字符串,,,多个选择器子串需要逗号分隔
$("li").filter(function(i){ //选择出li中不包括span 子元素的li元素
return $("span",this).length==0 ;
})
6、
$("input[type='checkbox']").parent().is("form") 检测checkbox的父亲元素是不是form
7、
$('li').has('ul') 只保留li中的有ul 的元素
8、
$("p").not("#id") 删除指定元素
9 、
$("li").not($("#menu")[0]) 从 li中删除所有id不是menu的元素
10、
$("li").slice(-1) li的左后一个元素
$("li").slice(0,4) 选取li集合中索引0-4的元素
11、
$("ul").children() 查找ul中的所有子集
$("ul").children(".classname") 选择ul中class属性为classname的元素...
$("ul").children("li") 选出ul中所有li集合
12、
$("p").find("span") 从所有的p标签开始 搜索span元素... 参数遵循css选择器
13 、
$("p").next(".selected") 取出p元素后面所有同级带有class=selected属性的集合 、
14 、
$("div:first").nextAll().addClass("after","one");
为div集合中第一个div后面的所有元素 添加after=one属性
15、
$("p").parent() 返回段落的父元素
$("span").parents() 搜索span的祖先元素
16、
$("p").prev() 取p的前面的同辈元素
17、
$("div:last").prevAll().addClass("before"); 取到div最后一个元素 前面的所有div元素..并且增加class =before
18、
$("p").add(document.getElementById("a")) 在p中添加id为a的元素//
19、
$("div").find("p").andSelf().addClass("border"); 选取所有的div和 div内部的p 并且增加class =border
20、
$("iframe").contents().find("body") .append("I'm in an iframe!");
查找iframe标签中的所有元素 ,并且向内部增加内容 ...contents返回所有的节点 、
21 、
$("p").find("span").end() 查找p对应的jQuery对象,然后查找p中的span ...最后通过end破坏之前的操作...
结果返回的还是p的集合对应的jQuery对象。。
- ››jquery .ajax方法 异步表单,接收服务器返回的数据...
- ››jquery 添加\删除 cookie
- ››jquery 正则表达式判断是否为正确邮箱格式
- ››jQuery EasyUI 数字框(NumberBox)用法
- ››JQuery中对option的添加、删除、取值
- ››JQuery实现下拉,单选,复选三大控件方法,
- ››jquery实现判断输入文字个数的代码
- ››jQuery bxCarousel实现图片滚动切换效果
- ››jQuery弹性滑动导航菜单
- ››jquery实现全选反选功能
- ››jQuery 屏蔽单个元素使用户无法点击
- ››jquery做复选框的全选、全部选、反选更加简单
更多精彩
赞助商链接