标签：jquery的一点点认识

概述

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery，顾名思议，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

筛选

eq(index|-index)

获取第N个元素

获取匹配的第二个元素

HTML 代码：

<p> This is just a test.</p> <p> So is this</p>

jQuery 代码：

$("p").eq(1)

结果：

[ <p> So is this</p> ]

获取匹配的第二个元素

HTML 代码：

<p> This is just a test.</p> <p> So is this</p>

jQuery 代码：

$("p").eq(-2)

结果：

[ <p> This is just a test.</p> ]

first()

获取匹配的第一个元素

HTML 代码：

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码：

$('li').first()

结果：

[ <li>list item 1</li> ]

last()

获取匹配的最后个元素

HTML 代码：

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码：

$('li').last()

结果：

[ <li>list item 5</li> ]

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。

这其实就是 is("." + class)。

给包含有某个类的元素进行一个动画。

HTML 代码：

<div class="protected"></div><div></div>

jQuery 代码：

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

保留带有select类的元素

HTML 代码：

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码：

$("p").filter(".selected")

结果：

[ <p class="selected">And Again</p> ]

保留第一个以及带有select类的元素

HTML 代码：

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码：

$("p").filter(".selected, :first")

结果：

[ <p>Hello</p>, <p class="selected">And Again</p> ]

保留子元素中不含有ol的元素。

HTML 代码：

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码：

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

结果：

[ <p>How are you?</p> ]

not(expr|ele|fn)

删除与指定表达式匹配的元素

从p元素中删除带有 select 的ID的元素

HTML 代码：

<p>Hello</p><p id="selected">Hello Again</p>

jQuery 代码：

$("p").not( $("#selected")[0] )

结果：

[ <p>Hello</p> ]

children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

查找DIV中的每个子元素。

HTML 代码：

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码：

$("div").children()

结果：

[ <span>Hello Again</span> ]

在每个div中查找 .selected 的类。

HTML 代码：

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码：

$("div").children(".selected")

结果：

[ <p class="selected">Hello Again</p> ]

find(expr|obj|ele)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。

HTML 代码：

<p><span>Hello</span>, how are you?</p>

jQuery 代码：

$("p").find("span")

结果：

[ <span>Hello</span> ]

next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

找到每个段落的后面紧邻的同辈元素。

HTML 代码：

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码：

$("p").next()

结果：

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码：

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码：

$("p").next(".selected")

结果：

[ <p class="selected">Hello Again</p> ]

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

查找每个段落的父元素

HTML 代码：

<div><p>Hello</p><p>Hello</p></div>

jQuery 代码：

$("p").parent()

结果：

[ <div><p>Hello</p><p>Hello</p></div>]

查找段落的父元素中每个类名为selected的父元素。

HTML 代码：

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

jQuery 代码：

$("p").parent(".selected")

结果：

[ <div class="selected"><p>Hello Again</p></div> ]

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

找到每个段落紧邻的前一个同辈元素。

HTML 代码：

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码：

$("p").prev()

结果：

[ <div><span>Hello Again</span></div> ]

找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML 代码：

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码：

$("p").prev(".selected")

结果：

[ <p class="selected">Hello Again</p> ]

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

找到每个div的所有同辈元素。

HTML 代码：

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码：

$("div").siblings()

结果：

[ <p>Hello</p>, <p>And Again</p> ]

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码：

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码：

$("div").siblings(".selected")

结果：

[ <p class="selected">Hello Again</p> ]

总结

这篇主要讲解了，对jQuery筛选的一点点了解

jquery的一点点认识

标签：jquery的一点点认识

原文地址：http://blog.csdn.net/hr1187362408/article/details/46788875