教程
jQuery中hide()方法用法实例 jQuery中slideUp()方法用法分析 jQuery中fadeOut()方法用法实例 jQuery中animate()方法用法实例 jQuery中width()方法用法实例 jQuery中height()方法用法实例 jQuery中val()方法用法实例 jQuery中html()方法用法实例 jQuery中append()方法用法实例 jQuery中prepend()方法用法实例 jQuery中after()方法用法实例 jQuery中before()方法用法实例 jQuery中replaceWith()方法用法实例 jQuery中remove()方法用法实例 jQuery中detach()方法用法实例 jQuery中click事件用法实例 jQuery中focus事件用法实例 jQuery中mouseover事件用法实例 jQuery中change事件用法实例 jQuery中ajax的load()方法用法实例 jQuery中ajax的get()方法用法实例 jQuery中ajax的post()方法用法实例 jQuery中的jQuery()方法用法分析 jQuery.holdReady()方法用法实例 jQuery中each()方法用法实例 jQuery中size()方法用法实例 jQuery对象的length属性用法实例 jQuery对象的selector属性用法实例 jQuery的context属性用法实例 jQuery中get()方法用法实例 jQuery中index()方法用法实例 jQuery中data()方法用法实例 jQuery中removeData()方法用法实例 jQuery中queue()方法用法实例 jQuery中dequeue()方法用法实例 jQuery中clearQueue()方法用法实例 jQuery中element选择器用法实例 jQuery中:eq()选择器用法实例 jQuery中:gt选择器用法实例 jQuery中:lt选择器用法实例 jQuery中:header选择器用法实例 jQuery中:animated选择器用法实例 jQuery中:first选择器用法实例 jQuery中:last选择器用法实例 jQuery中:not选择器用法实例 jQuery中:focus选择器用法实例 jQuery中:contains选择器用法实例 jQuery中:empty选择器用法实例 jQuery中:has选择器用法实例 jQuery中:hidden选择器用法实例 jQuery中:visible选择器用法实例 jQuery中[attribute]选择器用法实例 jQuery中[attribute!=value]选择器用法实例 jQuery中[attribute=value]选择器用法实例 jQuery中[attribute^=value]选择器用法实例 jQuery中[attribute*=value]选择器用法实例 jQuery中:first-child选择器用法实例 jQuery中:nth-child选择器用法实例 jQuery中:last-child选择器用法实例 jQuery中:only-child选择器用法实例 jQuery中:input选择器用法实例 jQuery中:text选择器用法实例 jQuery中:password选择器用法实例 jQuery中:radio选择器用法实例 jQuery中:checkbox选择器用法实例 jQuery中:submit选择器用法实例 jQuery中:image选择器用法实例 jQuery中:reset选择器用法实例 jQuery中:button选择器用法实例 jQuery中:file选择器用法实例 jQuery中:enabled选择器用法实例 jQuery中:disabled选择器用法实例 jQuery中:checked选择器用法实例 jQuery中:selected选择器用法实例 jQuery中attr()方法用法实例 jQuery中removeAttr()方法用法实例 jQuery中prop()方法用法实例 jQuery中removeProp()方法用法实例 jQuery中addClass()方法用法实例 jQuery中removeClass()方法用法实例 jQuery中toggleClass()方法用法实例 jQuery中eq()方法用法实例 jQuery中first()方法用法实例 jQuery中last()方法用法实例 jQuery中hasClass()方法用法实例 jQuery中filter()方法用法实例 jQuery中is()方法用法实例 jQuery中map()方法用法实例 jQuery中has()方法用法实例 jQuery中not()方法用法实例 jQuery中slice()方法用法实例 jQuery中children()方法用法实例 jQuery中closest()函数用法实例 jQuery中find()方法用法实例 jQuery中next()方法用法实例 jQuery中nextAll()方法用法实例 jQuery中nextUntil()方法用法实例 jQuery中parent()方法用法实例 jQuery中parents()方法用法实例 jQuery中parentsUntil()方法用法实例 jQuery中prev()方法用法实例 jQuery中prevAll()方法用法实例 jQuery中prevUntil()方法用法实例 jQuery中siblings()方法用法实例 jQuery中add()方法用法实例 jQuery中andSelf()方法用法实例 jQuery中contents()方法用法实例 jQuery中end()方法用法实例 jQuery中append()方法用法实例 jQuery中appendTo()方法用法实例 jQuery中prependTo()方法用法实例 jQuery中insertAfter()方法用法实例 jQuery中insertBefore()方法用法实例 jquery中one()方法的用法实例 jquery事件preventDefault()方法用法实例 jQuery中unwrap()方法用法实例 jQuery中wrapAll()方法用法实例 jQuery中wrapInner()方法用法实例 jQuery中replaceAll()方法用法实例 jQuery中empty()方法用法实例 jQuery中clone()方法用法实例 jQuery中offset()方法用法实例 jQuery中position()方法用法实例 jQuery中scrollTop()方法用法实例 jQuery中scrollLeft()方法用法实例 jQuery中innerHeight()方法用法实例 jQuery中innerWidth()方法用法实例 jQuery中outerHeight()方法用法实例 jQuery中outerWidth()方法用法实例 jQuery中offsetParent()方法用法实例 jQuery中ready事件用法实例 jQuery中on()方法用法实例 jQuery中bind()方法用法实例 jQuery的one()方法用法实例 jQuery中trigger()方法用法实例 jQuery中triggerHandler()方法用法实例 jQuery中unbind()方法用法实例 jQuery中live()方法用法实例 jQuery中die()方法用法实例 jQuery中delegate()方法用法实例 Jquery中find与each方法用法实例 jquery中change()用法实例分析 jquery中filter方法用法实例分析 JQuery中serialize()用法实例分析 jQuery中noConflict()用法实例分析 JQuery中extend的用法实例分析 jQuery中$.extend()用法实例

发布于 2016-10-28 23:46:04 | 130 次阅读 | 评论: 0 | 来源: 网友投递

这篇文章主要介绍了jQuery中closest()函数用法,实例分析了closest()函数的功能、定义及匹配元素的各种技巧,需要的朋友可以参考下

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

此函数从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
closest()函数会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

语法结构一:

$(selector).closest(expr, context)

参数列表:

参数 描述
expr 用以过滤元素的表达式
context 可选。作为待查找的 DOM 元素集或者文档。

实例代码:

实例一:



<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.phperz.com/" />

<title>closest()函数-phperz</title>

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

<script type="text/javascript">

$(document).ready(function(){

  $(".father p").closest("div").css("color","green");

})

</script>

</head>

<body>

<div class="father">

  <div class="children"> 我是div

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

实例二:



<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.phperz.com/" />

<title>closest()函数-phperz</title>

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

<script type="text/javascript">

$(document).ready(function(){

  $("#children p").closest("#father",document.getElementById("children")).

  css("border","1px solid red");

})

</script>

</head>

<body>

<div id="father">

  <div id="children">

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

由于id为father的div并没有在id为children的div之内,所以并不能将其边框设置为红色。

语法结构二:

$(selector).closest(element)

参数列表:

参数 描述
element 用于匹配元素的DOM元素或者jQuery元素。

实例代码:

实例一:



<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.phperz.com/" />

<title>closest()函数-phperz</title>

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

<script type="text/javascript">

$(document).ready(function(){

  $("#children p").closest(document.getElementById("children")).

  css("border","1px solid red");

})

</script>

</head>

<body>

<div id="father">

  <div id="children">

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

实例二:



<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.phperz.com/" />

<title>closest()函数-phperz</title>

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

<script type="text/javascript">

$(document).ready(function(){

  $("#children p").closest($("#children")).css("border","1px solid red");

})

</script>

</head>

<body>

<div id="father">

  <div id="children">

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

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

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务