Let’s start with the simplest one. If the page has a div with an id of test, we need to hide the div by clicking elsewhere on the page:
There are generally two ways of thinking about this problem. Both of them will use the principle of event bubbling. If you want to learn more about the Javascript event mechanism, you can take a look at
JavaScript and HTML Interaction - Events, which It is not the focus of this article, so here is just a brief introduction to event bubbling,
Event bubbling
IE's event bubbling: the event is initially received by the most specific element, and then propagates upwards to less specific elements
Netscape's event capture: less specific nodes receive events earlier, while the most specific elements receive events last, contrary to event bubbling
DOM event flow: DOM level 2 events stipulate that the event flow includes three stages, the event capture stage, which is in the target stage, and the event bubbling stage. The first thing that happens is the event capture, which provides an opportunity to intercept the event, and then the actual target receives the event. , and finally the bubble sentence stage.
Opera, Firefox, Chrome, and Safari all support DOM event streaming. IE does not support event streaming and only supports event bubbling
If there is the following html, click on the div area, and the click event triggering sequence of different model event elements is as follows:
< html>
Test Page< /title><br></head><br><body><br> <div><br> Click Here</div><br></body><br></html> <br><br><br><br>
</div>
<br><br>When an event on the DOM is triggered, an event object event is generated. This object contains all information related to the event, including The element that generated the event, event type and other related information. All browsers support event objects, but in different ways. The event object has a method (W3C: stopPropagation)/property (IE: cancelBulle=true) that can prevent the event from continuing to bubble or capture. If we want to prevent bubbling when an event bubbles up to an element, we can write a browser-compatible method like this: <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201304/201304120922134.png" class="lazy" alt="jQuery's delegate_jquery thought of hiding divs by clicking elsewhere on the page" >
<br><br><p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="84280" class="copybut" id="copybut84280" onclick="doCopy('code84280')"><u> The code is as follows:</u></a></span>function stopPropagation(e) {//Pass the event object Enter</div> if (e.stopPropagation) //Support W3C standard<div class="codebody" id="code84280"> e.stopPropagation();<br> else //IE8 and below browsers<br> e.cancelBubble = true;<br> }<br><br><br>
<br>Because all browsers support event bubbling, and considering browser compatibility, we generally use event bubbling instead of event capturing when binding events. After understanding this, we can look at the following two ideas. </div>
Idea 1<p>The first idea is divided into two steps</p>
<p>Step one: Bind an event handler to the document's click event to hide the div<br>
</p>Step 2: Bind an event handler to the click event of the div to prevent the event from bubbling to the document, and calling the onclick method of the document hides the div. <p>
</p>
<p></p>
<p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="23801" class="copybut" id="copybut23801" onclick="doCopy('code23801')"><u> The code is as follows:</u><div class="codebody" id="code23801">
<br><script type="text/javascript"><br> function stopPropagation(e) {<br> if (e.stopPropagation) <br> e.stopPropagation();<br> else <br> e.cancelBubble = true;
<br> $(document) ;
<p>
<br>In this way, when a non-div area of the page is clicked, the onclick method of the document will be called directly or layer by layer to hide the div. When a div or its sub-elements are clicked, the event will always bubble up to the div itself. This At this time, the event will be prevented from continuing to bubble up, and the onclick method of the document will not be called, causing the div to be hidden, thus fulfilling our needs. <br>
</p>
<p>Idea 2<br><br>
<br>We mentioned before that when an event on the DOM is triggered, an event object event will be generated. This object contains all information related to the event, including the element that generated the event, the event type and other related information. The first idea The parameter passed in by the click event handler of the div is this event object. There are several different ways to access the event object in IE, depending on how you specify the event handler. When adding event handlers directly to DOM elements, the event object exists as a property of the window object. <br>
</p>
</div>The event object contains an important attribute: target(W3C)/srcElement(IE). This attribute identifies the original element that triggered the event. The second idea is to use this attribute. We can directly bind an event handler to the click event of the document, and determine in the event handler whether the event source is the div element with id==test or its sub-element. If so, the method return does not perform any operation. If not, the event is hidden. div.
<p></p>
<p><strong></strong>Copy code</p>
<p></p> The code is as follows:<p></p>
<p><script type="text/javascript"> </p>
<div class="codetitle"> .srcElement;<span> . <a style="CURSOR: pointer" data="5239" class="copybut" id="copybut5239" onclick="doCopy('code5239')">
<u> 🎜>
</u><p>In this way, when you click anywhere on the page, the click event will bubble up to the document. The event handler will determine whether the event source is the div or its sub-element with id==test. If it is a method return, otherwise it will be hidden. div can also achieve our needs. </p>
<p><strong>Points to note and advantages and disadvantages</strong></p>
<p>Both of these ideas rely on event bubbling, so we must pay attention to this when handling click events of other related elements to avoid the impact of the click event handlers of other related elements containing code that prevents event bubbling. This function is enabled. </p>
<p>Both methods are easy to understand. It seems that the first idea is better. It seems that its processing is simpler. There is no need to judge the event source layer by layer, and the click event is directly bound to the div. This is indeed the case in this example, but it is not the case for some complex pages. If we have a page with dozens of divs on it, we need to click elsewhere on the page to hide this type of problem </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="87485" class="copybut" id="copybut87485" onclick="doCopy('code87485')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code87485">
<br><div class="dialogs"><br> </div><br> ;/div><br> </div> "2">2</div><br>
<br>The code we write using idea 1 may look like this: <br>
<br><br><br><br><br>Copy code<br><br><br> The code is as follows:<br>
</div><script type="text/javascript"> <p> function stopPropagation(e) {</p> if (e.stopPropagation) <p> e.stopPropagation();</p>
<div class="codetitle"> else <span> e.cancelBubble = true;<a style="CURSOR: pointer" data="14188" class="copybut" id="copybut14188" onclick="doCopy('code14188')"> }<u>
</u> $(document) .bind('click',function(){</a>
</span> $ ('. Dialog'). Bind ('click', function (e) {</div> StopPropagation (e); <div class="codebody" id="code14188">}); <br> <br> & lt;/script & gt; <br>> <br>
<p>It looks simple and the same, but if we think about it carefully, we will find the problem. We have bound similar methods to each dialog. Maintaining so many click event handlers is definitely expensive in terms of memory. , causing our page to run slowly. And if we can dynamically use ajax to create a new dialog, the problem comes again. The newly created dialog cannot implement hidden functions! Because the binding function has been executed, the click event handler will no longer be bound to the new dialog. We can only do this ourselves. In other words, idea one cannot attach handlers to DOM elements that may not yet exist in the DOM. Because it binds handlers directly to individual elements, it cannot bind handlers to elements that do not yet exist on the page. </p>
<p>This is the time for idea 2 to show off its skills. Let’s take a look at how the code of idea 2 is written at this time </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="34078" class="copybut" id="copybut34078" onclick="doCopy('code34078')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code34078">
<br><script type="text/javascript"> <br> While (eLEM) {<br> if (elem.classname && elem.classname.indexof ('dialog') & gt; > }<br>
<br>
<br>The changes are also quite small. Let’s see if we can solve the two problems above. First, no matter how many dialogs we have, we only bind a click event handler, which has little impact on performance. Add a new one Does the code of dialog idea 2 work well? It still works. In this way, we can find that idea 2 is actually a better solution in the case of complex pages. <br>
<br>Now that we understand this, we can talk about the delegate method of jQuery, the second protagonist of this article. <br>
<br>delegateFirst, let’s take a look at jQuery’s official syntax and description of delegate<p>
<br>.delegate( selector, eventType, handler(eventObject) )<br>
<br>Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.</p>
</div>
The delegate() method adds one or more event handlers to the specified element (a child element of the selected element) and specifies the function to run when these events occur. <p>
</p>Event handlers using the delegate() method apply to the current or future elements (such as new elements created by scripts). <p>
</p>
<p><br></p>
<p>Copy code</p>
<p></p> The code is as follows:<p></p>
<p>$( "table" ).delegate( "td" , "click", function() {</p> $( this ).toggleClass( "chosen" );<p> });</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="966" class="copybut" id="copybut966" onclick="doCopy('code966')">
<u> Through the above statement, we can bind click event handlers to the td of all tables. </u>
</a>The delegate method is designed to attach handlers to a single element or a small group of elements and listen for events on descendant elements rather than looping through and attaching the same function to multiple elements in the DOM one by one. . Attaching handlers to one (or a small group of) ancestor elements rather than directly attaching handlers to all elements in the page can provide performance optimizations. </span>
</div>
<div class="codebody" id="code966">jQuery version hides dialog<br><br>
<br>Through the above knowledge, we can find that jQuery’s delegate method can easily realize our need to hide divs<br>
</div>
<p></p>
<p>Copy code</p>
<p><strong> The code is as follows:</strong><script type="text/javascript"> ).css('display','none');</p>
<div class="codebody" id="code302"> ; A slight improvement, because we no longer need to bubble to the document for processing. We only need to complete the processing on the parent element of the dialog. We do not need to bind many similar functions to the document. One thing to note is that jQuery has been considerate. Help us handle this as an event source, and it will be easier to handle. <br>
<br>Delegate and bind<br>Through what we have said above, we can have a certain basis for weighing whether to use bind or delegate. If you want to bind the event handler of an element separately, using bind is still very appropriate, but if When handling event handlers for many similar elements, you may want to consider delegate to see if it will help improve performance. <br>
</div>
</div></a></span>
</div></a></span>
</div>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Statement of this Website</div>
<div>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</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796787760.html" title="InZoi: How To Apply To School And University" class="phpgenera_Details_mainR4_bottom_title">InZoi: How To Apply To School And University</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot AI Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796787760.html" title="InZoi: How To Apply To School And University" class="phpgenera_Details_mainR4_bottom_title">InZoi: How To Apply To School And University</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Topics</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7797</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1644</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1402</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1299</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1234</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/faq/zt">Show More</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/691702.html" title="Detailed explanation of jQuery reference methods: Quick start guide" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170903071539936.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Detailed explanation of jQuery reference methods: Quick start guide" />
</a>
<a href="https://www.php.cn/faq/691702.html" title="Detailed explanation of jQuery reference methods: Quick start guide" class="phphistorical_Version2_mids_title">Detailed explanation of jQuery reference methods: Quick start guide</a>
<span class="Articlelist_txts_time">Feb 27, 2024 pm 06:45 PM</span>
<p class="Articlelist_txts_p">Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/692694.html" title="How to use PUT request method in jQuery?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170910433346845.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to use PUT request method in jQuery?" />
</a>
<a href="https://www.php.cn/faq/692694.html" title="How to use PUT request method in jQuery?" class="phphistorical_Version2_mids_title">How to use PUT request method in jQuery?</a>
<span class="Articlelist_txts_time">Feb 28, 2024 pm 03:12 PM</span>
<p class="Articlelist_txts_p">How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/691569.html" title="In-depth analysis: jQuery's advantages and disadvantages" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170902549498790.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="In-depth analysis: jQuery's advantages and disadvantages" />
</a>
<a href="https://www.php.cn/faq/691569.html" title="In-depth analysis: jQuery's advantages and disadvantages" class="phphistorical_Version2_mids_title">In-depth analysis: jQuery's advantages and disadvantages</a>
<span class="Articlelist_txts_time">Feb 27, 2024 pm 05:18 PM</span>
<p class="Articlelist_txts_p">jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/693182.html" title="jQuery Tips: Quickly modify the text of all a tags on the page" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170912557218266.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery Tips: Quickly modify the text of all a tags on the page" />
</a>
<a href="https://www.php.cn/faq/693182.html" title="jQuery Tips: Quickly modify the text of all a tags on the page" class="phphistorical_Version2_mids_title">jQuery Tips: Quickly modify the text of all a tags on the page</a>
<span class="Articlelist_txts_time">Feb 28, 2024 pm 09:06 PM</span>
<p class="Articlelist_txts_p">Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/692099.html" title="How to remove the height attribute of an element with jQuery?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170908075260378.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to remove the height attribute of an element with jQuery?" />
</a>
<a href="https://www.php.cn/faq/692099.html" title="How to remove the height attribute of an element with jQuery?" class="phphistorical_Version2_mids_title">How to remove the height attribute of an element with jQuery?</a>
<span class="Articlelist_txts_time">Feb 28, 2024 am 08:39 AM</span>
<p class="Articlelist_txts_p">How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/692928.html" title="Use jQuery to modify the text content of all a tags" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170911333171493.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Use jQuery to modify the text content of all a tags" />
</a>
<a href="https://www.php.cn/faq/692928.html" title="Use jQuery to modify the text content of all a tags" class="phphistorical_Version2_mids_title">Use jQuery to modify the text content of all a tags</a>
<span class="Articlelist_txts_time">Feb 28, 2024 pm 05:42 PM</span>
<p class="Articlelist_txts_p">Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/692515.html" title="Understand the role and application scenarios of eq in jQuery" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170909731284988.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Understand the role and application scenarios of eq in jQuery" />
</a>
<a href="https://www.php.cn/faq/692515.html" title="Understand the role and application scenarios of eq in jQuery" class="phphistorical_Version2_mids_title">Understand the role and application scenarios of eq in jQuery</a>
<span class="Articlelist_txts_time">Feb 28, 2024 pm 01:15 PM</span>
<p class="Articlelist_txts_p">jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/693462.html" title="How to tell if a jQuery element has a specific attribute?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170916859138598.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to tell if a jQuery element has a specific attribute?" />
</a>
<a href="https://www.php.cn/faq/693462.html" title="How to tell if a jQuery element has a specific attribute?" class="phphistorical_Version2_mids_title">How to tell if a jQuery element has a specific attribute?</a>
<span class="Articlelist_txts_time">Feb 29, 2024 am 09:03 AM</span>
<p class="Articlelist_txts_p">How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute</p>
</div>
</div>
<a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/about/us.html">About us</a>
<a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a>
<a href="https://www.php.cn/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1745855294"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainNav = document.querySelector('.Article_Details_main1Lmain');
const header = document.querySelector('header');
if (mainNav) {
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
if (scrollPosition > 84) {
mainNav.classList.add('fixed');
} else {
mainNav.classList.remove('fixed');
}
});
}
});
</script>
</body>
</html> 
Web Front-end
