.jQuery文档分析3-jQuery元素筛选-阿里云开发者社区

开发者社区> usher.yue> 正文

.jQuery文档分析3-jQuery元素筛选

简介: 筛选时从包含一个或者多个dom对象的jQuery对象中找出某个dom对象所对应的jQuery对象我们从而可以进行操作 1、 $("p").eq(-2)  从搜索到的p标签中选择出倒数第二个p元素对应的jQuery对象注意不是dom对象,这里要和get方法区分开 。
+关注继续查看
筛选时从包含一个或者多个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元素的筛选就到这里了....
  
 
 
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery EasyUI API 中文文档 - 组合表格(ComboGrid)
ComboGrid 组合表格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults,用 $.fn.combogrid.defaults 重写了 defaults 。
936 0
jQuery EasyUI API 中文文档 - 数字框(NumberBox)
NumberBox 数字框 扩展自 $.fn.validatebox.defaults,用 $.fn.numberbox.defaults 重写了 defaults 。 依赖 validatebox 用法 1. 1. $('#nn').numberbox({   2.     min:0,   3.     precision:2   4. });  特性 其特性扩展自 validatebox,下列是为 numberbox 增加的特性。
867 0
jQuery EasyUI API 中文文档 - 树表格(TreeGrid)
TreeGrid 树形表格 扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 1.
988 0
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1069 0
Jquery 获取和设置元素属性值
Jquery 获取和设置元素属性值 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1044 0
jQuery EasyUI API 中文文档 - 对话框(Dialog)
Dialog 对话框 扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults。 依赖 window linkbutton 用法 1. 2.     Dialog Content.   3. 1. $('#dd').dialog({   2.     modal:true 3. });  特性 其特性扩展自 window,下列是为 dialog 重写的特性。
733 0
jQuery EasyUI API 中文文档 - 窗口(Window)
Window 窗口    扩展自 $.fn.panel.defaults,用 $.fn.window.defaults 重写了 defaults。 依赖 draggable resizable panel 用法 1.
617 0
jQuery EasyUI API 中文文档 - 时间微调器(TimeSpinner)
TimeSpinner 时间微调器 扩展自 $.fn.spinner.defaults,用 $.fn.timespinner.defaults 重写了 defaults。 依赖 spinner 用法 1. 1. $('#ss').timespinner({   2.     showSeconds:true 3. });  特性 其特性扩展自 spinner,下列是为 timespinner 增加的特性。
719 0
《jQuery Cookbook中文版》——1.11 删除DOM元素
在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除。这意味着,从理论上说,可以继续操作它们,甚至可以在必要的时候将它们重新添加到DOM中。
1204 0
+关注
usher.yue
算法相关技术专家
431
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载