.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元素的筛选就到这里了....
  
 
 
 
目录
相关文章
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
1月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
1月前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
14 0
|
1月前
|
前端开发 JavaScript
jQuery改变元素
jQuery改变元素
|
2月前
|
移动开发 JavaScript 前端开发
jQuery 根据 DOM 元素 attribute 进行过滤的语法
jQuery 根据 DOM 元素 attribute 进行过滤的语法
|
2月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
|
2月前
|
JavaScript
jQuery创建、删除、添加元素
jQuery创建、删除、添加元素
|
2月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
|
2月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
|
JavaScript 前端开发
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
171 0
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性