开发者社区> usher.yue> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

.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中排除指定元素,同时选择剩下的所有元素
场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,jQuery真的很方便,贴在这里备份: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
930 0
jQuery中排除指定元素,同时选择剩下的所有元素
场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,jQuery真的很方便,贴在这里备份: 菩提树下的杨过 $().
729 0
让网站动起来!12款优秀的 jQuery 动画插件推荐
  如今,大多数设计师和开发人员被要客户要求开发动态的网站。创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力。在网络上有大量的工具和插件可用于创建网站动画。许多开发人员正在使用 HTML5 和 jQuery 提供的最新功能来创建创建和实现震撼的视觉效果。
1148 0
网站开发中很实用的 HTML5 & jQuery 插件
  这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的。这些优秀的 jQuery 插件能为你的网站提供各种各样强大的功能和效果。
1231 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
+关注
usher.yue
算法相关技术专家
431
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载