Examples of usage of find() method in jQuery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Examples of usage of find() method in jQuery

Jun 30, 2017 pm 02:06 PM

find jquery Example

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:

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

Copy after login

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:

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

Copy after login

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 of this Website

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