Home > Article > Web Front-end > Examples of usage of find() method in jQuery

Examples of usage of find() method in jQuery

巴扎黑Original: 2017-06-30 14:06:171896browse

This article mainly introduces the usage of the find() method in jQuery. The function and definition of the find() method are analyzed with examples, as well as the usage skills of obtaining descendant elements of matching elements. Friends in need can refer to it

The example in this article describes the usage of find() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method obtains the child elements of all elements in the matching element collection and deletes them through the selector, jQuery object or element.
The find() method is a good way to get descendant elements of the matching element.

Note: children() only obtains one-level child elements, while find() will find all child elements.

Grammar structure one:

The code is as follows:

$(selector).find(expr)

Parameter list:

Example code:

The code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.jb51.net/" /> 
<title>children()函数-脚本之家</title> 
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(
document
).ready(function(){ 
  $(".father").find("p").css("color","red"); 
}) 
</script>  
</head> 
<body> 
<p class="father"> 
<p class="children"> 
   <p>我是孙子p</p> 
</p> 
<p>我是儿子p</p> 
</p> 
<p>我是兄弟p</p> 
</body> 
</html>

The above code can set the font color of all p elements under the father element to red.

Grammar structure two:

The code is as follows:

$(selector).find(element)

Yes Finds the specified element below the matching element.

Parameter list:

##Parameter	Description
expr	##String value, define filter Expression .

##Parameter	Description
element	##DOM object or jQuery object used to match the element.

Example code:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>find()函数-脚本之家</title>
<style type="text/css">
.father{
  height:200px;
  width:200px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".father").find(document.getElementById("myp")).css("border","1px solid red");
})
</script>
</head>
<body>
<p class="father">
  <p class="children">
    <p id="myp">我是孙子p</p>
  </p>
  <p>我是儿子p</p>
</p>
<p>我是兄弟p</p>
</body>
</html>

The above code can download the father element The border of the element with id

attribute

value myp is set to one pixel red.

The above is the detailed content of Examples of usage of find() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery prev function exampleNext article：jquery prev function example

See more

Examples of usage of find() method in jQuery

Related articles