jQuery重要函数用法详解

来源：互联网发布：戎美质量知乎编辑：程序博客网时间：2024/06/14 22:13

jQuery 遍历 - each() 方法

jQuery 遍历参考手册

实例

输出每个 li 元素的文本：

$("button").click(function(){  $("li").each(function(){    alert($(this).text())  });});

亲自试一试

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("li").each(function(){      alert($(this).text())    });  });});</script></head><body><button>输出每个列表项的值</button><ul><li>Coffee</li><li>Milk</li><li>Soda</li></ul></body></html>

定义和用法

each() 方法规定为每个匹配元素规定运行的函数。

提示：返回 false 可用于及早停止循环。

语法

$(selector).each(function(index,element))

参数描述function(index,element)

必需。为每个匹配元素规定运行的函数。

index - 选择器的 index 位置
element - 当前的元素（也可使用 "this" 选择器）

jQuery 遍历 - find() 方法

jQuery 遍历参考手册

实例

搜索所有段落中的后代 span 元素，并将其颜色设置为红色：

$("p").find("span").css('color','red');

亲自试一试

<!DOCTYPE html><html><head>  <script type="text/javascript" src="/jquery/jquery.js"></script></head><body>  <p><span>Hello</span>, how are you?</p>  <p>Me? I'm <span>good</span>.</p><script>  $("p").find("span").css('color','red');</script></body></html>

定义和用法

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

语法

.find(selector)

参数描述selector字符串值，包含供匹配当前元素集合的选择器表达式。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。

.find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。

请思考下面这个简单的嵌套列表：

<ul class="level-1">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul>

我们将从列表 II 开始来查找其中的列表项：

$('li.item-ii').find('li').css('background-color', 'red');

亲自试一试

这次调研的结果是，项目 A、B、1、2、3 以及 C 均被设置了红色背景。即使项目 II 匹配选择器表达式，它也不会被包含在结果中；只会对后代进行匹配。

与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。

选择器 context 是由 .find() 方法实现的；因此，$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。

对于 jQuery 1.6，我们还可以使用给定的 jQuery 集合或元素来进行筛选。还是上面的嵌套列表，我们首先这样写：

var $allListElements = $('li');

然后将这个 jQuery 对象传递给 find 方法：

$('li.item-ii').find( $allListElements );

亲自试一试

<!DOCTYPE html><html><head>  <script type="text/javascript" src="/jquery/jquery.js"></script></head><body><ul class="level-1">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul><script>var $allListElements = $('li');$('li.item-ii').find( $allListElements ).css('background-color', 'red');</script></body></html>

上面的代码会返回一个 jQuery 集合，其中包含属于列表 II 后代的列表元素。

类似地，也可以传递一个元素：

var item1 = $('li.item-1')[0];$('li.item-ii').find( item1 ).css('background-color', 'red');

亲自试一试

<body><ul class="level-1">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul><script>var item1 = $('li.item-1')[0];$('li.item-ii').find( item1 ).css('background-color', 'red');</script></body></html>

这次调用的结果是项目 1 被设置为红色背景。

jQuery 遍历 - next() 方法

jQuery 遍历参考手册

实例

查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落：

$("p").next(".selected").css("background", "yellow");

亲自试一试

定义和用法

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

语法

.next(selector)

参数描述selector字符串值，包含用于匹配元素的选择器表达式。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素，并用匹配元素构造新的 jQuery 对象。

该方法接受可选的选择器表达式，类型与我传递到 $() 函数中的相同。如果紧跟的同胞元素匹配该选择器，则会留在新构造的 jQuery 对象中；否则会将之排除。

请思考下面这个带有简单列表的页面：

<ul>   <li>list item 1</li>   <li>list item 2</li>   <li class="third-item">list item 3</li>   <li>list item 4</li>   <li>list item 5</li></ul>

如果我们从项目三开始，则能够找到其后出现的元素：

$('li.third-item').next().css('background-color', 'red');

亲自试一试

<!DOCTYPE html><html><head>  <script type="text/javascript" src="/jquery/jquery.js"></script></head><body><ul>   <li>list item 1</li>   <li>list item 2</li>   <li class="third-item">list item 3</li>   <li>list item 4</li>   <li>list item 5</li></ul><script>$('li.third-item').next().css('background-color', 'red');</script></body></html>

这次调用的结果是，项目 4 被设置为红色背景。由于我们没有应用选择器表达式，紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器，在包含它之前会检测是否匹配。

jQuery 遍历 - parent() 方法

jQuery 遍历参考手册

实例

查找每个段落的带有 "selected" 类的父元素：

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

亲自试一试

定义和用法

parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

.parent(selector)

参数描述selector字符串值，包含用于匹配元素的选择器表达式。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素，并用匹配元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

请思考这个带有基本的嵌套列表的页面：

<ul class="level-1">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul>

如果我们从项目 A 开始，则可找到其父元素：

$('li.item-a').parent().css('background-color', 'red');

亲自试一试

<!DOCTYPE html><html><head>  <script type="text/javascript" src="/jquery/jquery.js"></script></head><body><ul class="level-1">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul><script>$('li.item-a').parent().css('background-color', 'red');</script></body></html>

此次调用的结果是，为 level-2 列表设置红色背景。由于我们未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。

jQuery 遍历 - last() 方法

jQuery 遍历参考手册

实例

高亮显示段落中的最后一个 span ：

$("p span").last().addClass('highlight');

亲自试一试

定义和用法

last() 将匹配元素集合缩减为集合中的最后一个元素。

语法

.last()

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.last() 方法会用最后一个匹配元素构造一个新的 jQuery 对象。

请思考下面这个带有简单列表的页面：

<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>

我们可以对这个列表项集合应用该方法：

$('li').last().css('background-color', 'red');

亲自试一试

<!DOCTYPE html><html><head>  <script type="text/javascript" src="/jquery/jquery.js"></script></head><body><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><script>  $('li').last().css('background-color', 'red');</script></body></html>

这次调用的结果是，最后一个项目被设置为红色背景。

#更改HTML里面的内容

 //$("[name = 'fg_n'] li a").each(function(){    //        //console.info(this);    //        var CurStringLen = $(this).html().length;     //             //        if(CurStringLen > 19){    //                var NewString = $(this).html().substr(0, 19);    //                $(this).html(NewString + '...');    //        }    //});

以上部分内容来自互联网，在此感谢！@