手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery中nextUntil()方法用法实例
jQuery中nextUntil()方法用法实例
摘要:本文实例讲述了jQuery中nextUntil()方法用法。分享给大家供大家参考。具体分析如下:此函数查找指定元素之后所有的同辈元素,直到遇...

本文实例讲述了jQuery中nextUntil()方法用法。分享给大家供大家参考。具体分析如下:

此函数查找指定元素之后所有的同辈元素,直到遇到匹配的那个元素为止,但不包括此匹配的元素。

语法结构一:

复制代码 代码如下:$(selector).closest(expr, filter)

参数列表:

参数 描述
expr 用于筛选匹配元素的表达式。
filter 可选。用于筛选nextUntil()函数通过expr表达式取得的jquery元素集合。

实例代码:

实例一:

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="http://www.jb51.net/" />

<title>查字典教程网</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("li").eq(0).nextUntil(".jq").css("color","blue")

})

</script>

</head>

<body>

<div>

<ul>

<li>HTML专区</li>

<li>Javascript专区</li>

<li>Div+Css专区</li>

<li>Jquery专区</li>

<li>ASP专区</li>

<li>JSP专区</li>

</ul>

</div>

</body>

</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="http://www.jb51.net/" />

<title>查字典教程网</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("li").eq(0).nextUntil(".jq",".js").css("color","blue")

})

</script>

</head>

<body>

<div>

<ul>

<li>HTML专区</li>

<li>Javascript专区</li>

<li>Div+Css专区</li>

<li>Jquery专区</li>

<li>ASP专区</li>

<li>JSP专区</li>

</ul>

</div>

</body>

</html>

语法结构二:

复制代码 代码如下:

$(selector).closest(element, filter)

参数列表:

参数 描述
element 用于筛选匹配元素的DOM对象。
filter 可选。用于筛选nextUntil()函数通过DOM对象取得的jquery元素集合。

实例代码:

实例一:

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="http://www.jb51.net/" />

<title>查字典教程网</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("li").eq(0).nextUntil(document.getElementById("jq")).css("color","blue")

})

</script>

</head>

<body>

<div>

<ul>

<li>HTML专区</li>

<li>Javascript专区</li>

<li>Div+Css专区</li>

<li id="jq">Jquery专区</li>

<li>ASP专区</li>

<li>JSP专区</li>

</ul>

</div>

</body>

</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="http://www.jb51.net/" />

<title>查字典教程网</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("li").eq(0).nextUntil(document.getElementById("jq"),".js").css("color","blue")

})

</script>

</head>

<body>

<div>

<ul>

<li>HTML专区</li>

<li>Javascript专区</li>

<li>Div+Css专区</li>

<li id="jq">Jquery专区</li>

<li>ASP专区</li>

<li>JSP专区</li>

</ul>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

【jQuery中nextUntil()方法用法实例】相关文章:

JQuery中clone方法复制节点

jQuery插件制作之参数用法实例分析

JQuery中attr方法和removeAttr方法用法实例

JavaScript中的anchor()方法使用详解

javascript中FOREACH数组方法使用示例

JavaScript中的small()方法使用详解

JavaScript中的substr()方法使用详解

JavaScript中的replace()方法使用详解

javascript中innerText和innerHTML属性用法实例分析

JQuery中层次选择器用法实例详解

精品推荐
分类导航