The interaction between JavaScript and HTML is achieved through events. JavaScript uses an asynchronous event-driven programming model. When something specific happens to the document, browser, element, or object related to it, the browser will generate an event. If JavaScript cares about a specific type of event, it can register a handler to be called when that type of event occurs.
Event flow
The event flow describes the order in which events are received from the page. For example, if there are two nested divs and the inner div is clicked, will the inner div trigger the click event first or the outer div? There are currently three main models
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
Test Page<br></head><br><body><br> /html><br><br><br>
<br>
</div>
<p><img border="0" alt="Untitled" src="http://files.jb51.net/file_images/article/201304/201304120922134.png">Event handler </p>
<p>
<strong>We also call it an event listener. An event is a certain action performed by the user or the browser itself. For example, click, load, moseover, etc. are all event types (commonly known as event names), and the method to respond to an event is called an event handler or event listener or event handler. The event handler name is: on event type. </strong>
</p>Understanding this, let’s see how to add event handlers to elements <p>
</p>Each event supported by the HTML event handler element can be specified using an HTML attribute with the same name as the corresponding event handler. The value of this attribute should be executable JavaScript code. We can add a click event handler for a button <p>
</p>
<p></p>
<p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="45117" class="copybut" id="copybut45117" onclick="doCopy('code45117')"><u> The code is as follows:</u></a></span><input type="button" value="Click Here" onclick="alert('Clicked!');" /></div>
<div class="codebody" id="code45117">
<br>The HTML event handler can contain specific actions to be performed, or it can call scripts defined elsewhere on the page , the example just now can be written like this <br>
</div>
<br><p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="23091" class="copybut" id="copybut23091" onclick="doCopy('code23091')"><u> The code is as follows:</u></a></span><input type="button" value="Click Here" onclick="showMessage();" /></div> <script type="text/javascript"><div class="codebody" id="code23091"> function showMessage() {<br> alert('Clicked!');<br> }<br><br><br>It is convenient to write event handlers in HTML, but it has two disadvantages. <br>
</div>First of all, there is a loading order problem. If the event handler is loaded after the html code, the user may click a trigger event such as a button before the event handler is loaded. There is a time difference problem. <br>
Secondly, writing HTML code and JavaScript code in this way are tightly coupled, making maintenance inconvenient. <p>
</p>JavaScript designated event handler Specifying an event handler through JavaScript is to assign a method to the event handler attribute of an element. Each element has its own event handler attribute. These attribute names are usually in lowercase, such as onclick, etc. By setting the value of these attributes to a method, you can specify the event handler, as follows <p>
</p>
<p></p>
<p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="62612" class="copybut" id="copybut62612" onclick="doCopy('code62612')"><u> The code is as follows:</u><div class="codebody" id="code62612">
<br><input id="btnClick" type="button" value="Click Here" />
<p> <script type="text/javascript"><br> var btnClick = document.getElementById('btnClick');<br> btnClick.onclick = function showMessage() {<br> alert(this.id );<br> }; The current element, so the result of clicking the button is: btnClick<br>
<br>Another advantage of this is that we can delete the event handler and just set the onclick attribute of the element to null</p>
</div>
<br>DOM2 event handler DOM2-level events define two methods for handling the operations of specifying and removing event handlers: addEventListener and removeEventListener. All DOM nodes contain these two methods, and they all accept three parameters: event type, event handling method, and a Boolean value. If the final Boolean parameter is true, it means that the event handler is called in the capture phase. If it is false, it is processed in the event bubbling phase.
<p>We can write the example just like this</p>
<p></p>
<p></p>
<p>Copy code</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="44049" class="copybut" id="copybut44049" onclick="doCopy('code44049')"> The code is as follows:<u></u></a><input id="btnClick" type="button " value="Click Here" /></span>
</div> <script type="text/javascript"><div class="codebody" id="code44049"> var btnClick = document.getElementById('btnClick');<br> btnClick.addEventListener('click', function() { alert( this.id);<p> }, false);<br> </script><br><br><br>The above code adds a handler for the click event to the button, which is triggered during the bubbling phase. The same method, this program also runs under the scope of the element, but there is a benefit, we can add multiple handlers for the click event <br><br></p>
</div>
<br><br>Copy code<div class="codetitle">
<span><a style="CURSOR: pointer" data="26296" class="copybut" id="copybut26296" onclick="doCopy('code26296')"> The code is as follows:<u></u></a><input id="btnClick" type="button" value="Click Here" /></span>
</div> <script type="text/javascript"><div class="codebody" id="code26296"> var btnClick = document.getElementById('btnClick');<br> btnClick.addEventListener('click', function() { alert( this.id);<p> }, false);<br> btnClick.addEventListener('click', function() {<br> alert('Hello!');<br> }, false);<br> </script><br><br><br>In this way, the two event handlers will be executed in the order they were added after the user clicks the button. <br>
<br>Event handlers added through addEventListener can only be removed through removeEventListener. The parameters when removed are the same as when added. This means that the anonymous function we just added cannot be removed, because although the anonymous function has the same method body, The handles are different, so when we remove the event handler, we can write like this </p>
</div>
<br><p></p>
<p>Copy code</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="52999" class="copybut" id="copybut52999" onclick="doCopy('code52999')"> The code is as follows:<u></u></a><input id="btnClick" type="button " value="Click Here" /></span>
</div> <script type="text/javascript"><div class="codebody" id="code52999"> var btnClick = document.getElementById('btnClick');<br> var handler=function() { alert(this.id); <p> }<br> btnClick.addEventListener('click', handler, false);<br> btnClick.removeEventListener('click', handler, false);<br> </script><br><br><br>The following is the commonplace IE compatibility issue. . . </p>
<p>IE does not support the addEventListener and removeEventListener methods. Instead, it implements two similar methods, attachEvent and detachEvent. Both methods receive the same two parameters, event handler name and event handler method. Since IE refers to Supports event bubbling, so added programs will be added to the bubbling stage. </p>
<p>Using attachEvent to add an event handler can be as follows</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="72889" class="copybut" id="copybut72889" onclick="doCopy('code72889')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code72889">
<br><input id="btnClick" type="button " value="Click Here" />
<p> <script type="text/javascript"><br> var btnClick = document.getElementById('btnClick');<br> var handler=function() {<br> alert(this.id); <br> }<br> btnClick.attachEvent('onclick', handler);<br> </script><br></p>
</div>
<br>The result is undefined, which is very strange. We will introduce it later
<p>Event handlers added using attachEvent can be removed through detachEvent. The conditions are also the same parameters. Anonymous functions cannot be removed. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="39777" class="copybut" id="copybut39777" onclick="doCopy('code39777')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code39777">
<br><input id="btnClick" type="button " value="Click Here" />
<p> <script type="text/javascript"><br> var btnClick = document.getElementById('btnClick');<br> var handler=function() {<br> alert(this.id); <br> }<br> btnClick.attachEvent('onclick', handler);<br> btnClick.detachEvent('onclick', handler);<br> </script><br></p>
</div>
<br><strong>Cross-browser event handlers</strong>
<p>We can see from the previous content that the methods of adding and removing event handlers are different in different browsers. If we want to write a cross-browser event handler, we must first understand the processing in different browsers. Differences in event handlers</p>
<p>There are several main differences between addEventListener and attachEvent when adding event handlers <br>1. The number of parameters is different. This is the most intuitive. addEventListener has three parameters, attachEvent has only two, and the event handler added by attachEvent can only Occurs in the bubbling phase. The third parameter of addEventListener can determine whether the added event handler is processed in the capturing phase or the bubbling phase (we generally set it to the bubbling phase for browser compatibility) </p>
<p>2. The first parameter has different meanings. The first parameter of addEventListener is the event type (such as click, load), while the first parameter of attachEvent specifies the event processing function name (onclick, onload) </p>
<p>3. The scope of event handlers is different. The scope of addEventListener is the element itself, this refers to the triggering element, and the attachEvent event handler will run in the global variable. This is window, so the example just now will Return undefined, not element id</p>
<p>4. When adding multiple event handlers for an event, the execution order is different. addEventListener will be added in the order of addition, while attachEvent will add multiple event handlers in an irregular order (when there are few methods added, most of them will be executed in the order added). The order of addition is executed in reverse order, but if you add too much, it will become irregular), so when adding more than one, it is better not to rely on the order of execution. If it depends on the order of function execution, it is best to handle it yourself, and don't count on the browser. </p>
<p>After understanding these four differences, we can try to write a method of adding event handlers with better browser compatibility</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="39113" class="copybut" id="copybut39113" onclick="doCopy('code39113')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code39113">
<br>function addEvent(node, type, handler) {<br> if (!node) return false;<br> if (node.addEventListener) {<br> node.addEventListener(type, handler, false) ;<br> ; return true;<br> return true; > return false; Solution, if it is IE, we add on to the type. There is currently no solution to the fourth problem, and users need to pay attention to it. Under normal circumstances, everyone will not add many event handlers. It feels good to try this method. But we did not solve the third problem. Since the handler scope is different, if there is an operation such as this in the handler, an error will occur. Under IE, in fact, most functions will have this operation. <br>
<br><br><br><br><br>Copy code<br>
</div>
<br> The code is as follows:<p></p>
<div class="codetitle">function addEvent(node, type, handler) {<span> if (!node) return false;<a style="CURSOR: pointer" data="14546" class="copybut" id="copybut14546" onclick="doCopy('code14546')"> if (node.addEventListener) {<u> node.addEventListener(type, handler, false);</u> return true;</a> }</span> else if (node .attachEvent) {</div> . 🎜> } <div class="codebody" id="code14546">
<br><br>In this way, this problem can be solved, but a new problem has arisen. This is equivalent to adding an anonymous event handler. The event handler cannot be canceled with detachEvent. There are many solutions. For solutions, we can learn from the master’s approach. John Resig, the founder of jQuery, did this <br>
<br><br><br><br><br>Copy code<br><br><br> The code is as follows:<br><div class="codebody" id="code88247">
<br>function addEvent(node, type, handler) {<br> if (!node) return false;<br> if (node.addEventListener) {<br> node.addEventListener(type, handler, false) ;<br> Node[type handler] = function() {<br> node['e' type handler](window.event);<br> Return true;<br> } <br> return false;<br> }<br><br><br>When canceling the event handler<br>
<br><br><br>
</div>
<br>Copy code<p></p>
<div class="codetitle"> The code is as follows:<span><a style="CURSOR: pointer" data="40586" class="copybut" id="copybut40586" onclick="doCopy('code40586')"><u>function removeEvent(node, type, handler) {</u> if (!node) return false;</a> if (node.removeEventListener) {</span> node.removeEventListener(type, handler, false);</div> return true;<div class="codebody" id="code40586"> }<br> else if (node .detachEvent) {<br> node.detachEvent('on' type, node[type handler]); 🎜> }<br><br><br>John Resig uses closures very cleverly and looks very good. <br>
<br><br>Event Object<br><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. <br>
<br>Event object in DOM A DOM-compatible browser will generate an event object and pass it into the event handler. Apply the addEvent method we just wrote</div>
<br><p><strong></strong>Copy code</p>
<p></p> The code is as follows:<p></p>
<p>var btnClick = document.getElementById('btnClick'); </p>
<div class="codetitle"> addEvent(btnClick, 'click', handler);<span><a style="CURSOR: pointer" data="83570" class="copybut" id="copybut83570" onclick="doCopy('code83570')"><br>点击button的时候我们可以看到弹出内容是click的弹窗
<p>event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含</p>
<p>
</p></a><table border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="130">
<p align="center"><strong>属性/方法</strong></p>
</td>
<td valign="top" width="91">
<p align="center"><strong>类型</strong></p>
</td>
<td valign="top" width="79">
<p align="center"><strong>读/写</strong></p>
</td>
<td valign="top">
<p align="center"><strong>说明</strong></p>
</td>
</tr>
<tr>
<td valign="top" width="130">bubbles</td>
<td valign="top" width="91">Boolean</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件是否冒泡</td>
</tr>
<tr>
<td valign="top" width="130">cancelable</td>
<td valign="top" width="91">Boolean</td>
<td valign="top" width="79">只读</td>
<td valign="top">是否可以取消事件的默认行为</td>
</tr>
<tr>
<td valign="top" width="130">currentTarget</td>
<td valign="top" width="91">Element</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件处理程序当前处理元素</td>
</tr>
<tr>
<td valign="top" width="130">detail</td>
<td valign="top" width="91">Integer</td>
<td valign="top" width="79">只读</td>
<td valign="top">与事件相关细节信息</td>
</tr>
<tr>
<td valign="top" width="130">eventPhase</td>
<td valign="top" width="91">Integer</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段</td>
</tr>
<tr>
<td valign="top" width="130">preventDefault()</td>
<td valign="top" width="91">Function</td>
<td valign="top" width="79">只读</td>
<td valign="top">取消事件默认行为</td>
</tr>
<tr>
<td valign="top" width="130">stopPropagation()</td>
<td valign="top" width="91">Function</td>
<td valign="top" width="79">只读</td>
<td valign="top">取消事件进一步捕获或冒泡</td>
</tr>
<tr>
<td valign="top" width="130">target</td>
<td valign="top" width="91">Element</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件的目标元素</td>
</tr>
<tr>
<td valign="top" width="130">type</td>
<td valign="top" width="91">String</td>
<td valign="top" width="79">只读</td>
<td valign="top">被触发的事件类型</td>
</tr>
<tr>
<td valign="top" width="130">view</td>
<td valign="top" width="91">AbstractView</td>
<td valign="top" width="79">只读</td>
<td valign="top">与事件关联的抽象视图，等同于发生事件的window对象</td>
</tr>
</tbody>
</table>在事件处理程序内部，this始终等同于currentTarget，而target是事件的实际目标。
<p>要阻止事件的默认行为，可以使用preventDefault（）方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="7733" class="copybut" id="copybut7733" onclick="doCopy('code7733')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code7733">
<br>document.getElementsByTagName('a').onclick = function (e) {<br> e.preventDefault();<br> }<br>
</div>
<br>stopPaopagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation（）从而避免注册在body上的事件发生
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="35245" class="copybut" id="copybut35245" onclick="doCopy('code35245')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code35245">
<br>var handler = function (e) {<br> alert(e.type);<br> e.stopPropagation();<br> }<br> addEvent(document.body, 'click', function () { alert('Clicked body')});<br> var btnClick = document.getElementById('btnClick');<br> addEvent(btnClick, 'click', handler);<br>
</div>
<br>若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播。
<p>IE中的事件对象访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="99592" class="copybut" id="copybut99592" onclick="doCopy('code99592')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code99592">
<br>var handler = function () {<br> var e = window.event;<br> alert(e.type);<br> }<br> var btnClick = document.getElementById('btnClick');<br> btnClick.onclick = handler;<br>
</div>
<br>我们通过window.event取得了event对象，并检测到了其类型，可是如果事件处理程序是通过attachEvent添加的，那么就会有一个event对象被传入事件处理程序中
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="33109" class="copybut" id="copybut33109" onclick="doCopy('code33109')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code33109">
<br>var handler = function (e) {<br> alert(e.type);<br> }<br> var btnClick = document.getElementById('btnClick');<br> attachEvent(btnClick, handler);<br>
</div>
<br><br>当然这时候也可以通过window对象访问event，方便起见，我们一般会传入event对象，IE中所有的事件都包含以下属性方法
<p>
</p>
<table border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="100">
<p align="center"><strong>属性/方法</strong></p>
</td>
<td valign="top" width="100">
<p align="center"><strong>类型</strong></p>
</td>
<td valign="top" width="100">
<p align="center"><strong>读/写</strong></p>
</td>
<td valign="top">
<p align="center"><strong>说明</strong></p>
</td>
</tr>
<tr>
<td valign="top" width="100">cancelBulle</td>
<td valign="top" width="100">Boolean</td>
<td valign="top" width="100">读/写</td>
<td valign="top">默认为false，设置为true后可以取消事件冒泡</td>
</tr>
<tr>
<td valign="top" width="100">returnValue</td>
<td valign="top" width="100">Boolean</td>
<td valign="top" width="100">读/写</td>
<td valign="top">默认为true，设为false可以取消事件默认行为</td>
</tr>
<tr>
<td valign="top" width="100">srcElement</td>
<td valign="top" width="100">Element</td>
<td valign="top" width="100">只读</td>
<td valign="top">事件的目标元素</td>
</tr>
<tr>
<td valign="top" width="100">type</td>
<td valign="top" width="100">String</td>
<td valign="top" width="100">只读</td>
<td valign="top">被触发的事件类型</td>
</tr>
</tbody>
</table>Cross-browser event objects Although the event objects of DOM and IE are different, based on their similarities, we can still write a cross-browser event object solution
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="6001" class="copybut" id="copybut6001" onclick="doCopy('code6001')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code6001">
<br>function getEvent(e) {<br> return e | | window.event;<br> }
<p> function getTarget(e) {<br> return e.target || e.scrElement;<br> }</p>
<p> function preventDefault(e) {<br> if (e.preventDefault)<br> e.preventDefault();<br> else<br> e.return Value = false;<br> }</p>
<p> function stopPropagation(e) {<br> if (e.stopPropagation)<br> e.stopPropagation();<br> else<br> e.can celBubble = true;<br> }<br></p>
</div> <br><strong>Common HTML events</strong>
<p>There are some HTML events that we often use. These events are not necessarily related to user operations. They are just briefly mentioned here. For detailed usage, you have to search Baidu and Google </p>
<p>1.load: Triggered on the window when the page is completely loaded, triggered on the img element when the image is loaded, or triggered on the object element when the embedded content is loaded <br>2.unload: The page is completely loaded Triggered on the window after uninstalling, or triggered on the object element after the embedded content is uninstalled<br>3.select: Triggered when the user selects a character in the text box<br>4.change: Triggered when the value of the text box changes after the focus changes<br>5.submit: Triggered when the user submits the form<br>6.resize: Triggered on the window when the window or frame size changes<br>7.scool: When the user scrolls an element with a scroll bar, on the element Trigger<br>8.focus: Triggered on the window and corresponding elements when the page or element gains focus<br>9.blur: Triggered on the window and corresponding elements when the page or element loses focus<br>10.beforeunload: Unload the page Previously triggered on window <br> 11.mousewheel: Not counting HTML, triggered when the user interacts with the page through the mouse wheel and scrolls the page in the vertical direction </p></span>
</div>
</div>
</div></a></span>
</div> </div>
</div>
<div style="height: 25px;">
<div class="wzconBq" style="display: inline-flex;">
<span>Related labels：</span>
<div class="wzcbqd">
<a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/search?word=javascript" target="_blank">javascript</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/search?word=event" target="_blank">event</a> </div>
</div>
<div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div>
</div>
<div class="wzconOtherwz">
<a href="http://www.php.cn/faq/17500.html" title="关于query Javascript CSS Selector engine_jquery">
<span>Previous article：关于query Javascript CSS Selector engine_jquery</span>
</a>
<a href="http://www.php.cn/faq/17502.html" title="Usage of when setTimeout() and setInterval() are called and executed in JS_Basic knowledge">
<span>Next article：Usage of when setTimeout() and setInterval() are called and executed in JS_Basic knowledge</span>
</a>
</div>
<div class="wzconShengming">
<div class="bzsmdiv">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 class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">Latest Articles by Author</div>
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796639331.html">What is a NullPointerException, and how do I fix it?</a>
</div>
<div>2024-10-22 09:46:29</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796629482.html">From Novice to Coder: Your Journey Begins with C Fundamentals</a>
</div>
<div>2024-10-13 13:53:41</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796628545.html">Unlocking Web Development with PHP: A Beginner's Guide</a>
</div>
<div>2024-10-12 12:15:51</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796627928.html">Demystifying C: A Clear and Simple Path for New Programmers</a>
</div>
<div>2024-10-11 22:47:31</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796627806.html">Unlock Your Coding Potential: C Programming for Absolute Beginners</a>
</div>
<div>2024-10-11 19:36:51</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796627670.html">Unleash Your Inner Programmer: C for Absolute Beginners</a>
</div>
<div>2024-10-11 15:50:41</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796627643.html">Automate Your Life with C: Scripts and Tools for Beginners</a>
</div>
<div>2024-10-11 15:07:41</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796627620.html">PHP Made Easy: Your First Steps in Web Development</a>
</div>
<div>2024-10-11 14:21:21</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796627574.html">Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity</a>
</div>
<div>2024-10-11 12:59:11</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/faq/1796627539.html">The Key to Coding: Unlocking the Power of Python for Beginners</a>
</div>
<div>2024-10-11 12:17:31</div>
</li>
</ul>
</div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">Latest Issues</div>
<div class="wdsyContent">
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/wenda/176376.html" target="_blank" title="CSS only method to dynamically modify image src on click without using JavaScript" class="wdcdcTitle">CSS only method to dynamically modify image src on click without using JavaScript</a>
<a href="http://www.php.cn/wenda/176376.html" class="wdcdcCons">I need to change the src of an image on mouse click using only css like img:active{}</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 19:25:49</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>505</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/wenda/176368.html" target="_blank" title="Scatterplot points do not maintain values when zooming in d3.js" class="wdcdcTitle">Scatterplot points do not maintain values when zooming in d3.js</a>
<a href="http://www.php.cn/wenda/176368.html" class="wdcdcCons">This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 18:16:26</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>403</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/wenda/176347.html" target="_blank" title="JavaScript hover events on vendor-specific pseudo-elements" class="wdcdcTitle">JavaScript hover events on vendor-specific pseudo-elements</a>
<a href="http://www.php.cn/wenda/176347.html" class="wdcdcCons">I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 15:35:24</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>274</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/wenda/176343.html" target="_blank" title="Submit form without button using Javascript/Jquery" class="wdcdcTitle">Submit form without button using Javascript/Jquery</a>
<a href="http://www.php.cn/wenda/176343.html" class="wdcdcCons">I'm trying to submit a form without a button by calling a JavaScript function and executin...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 14:54:03</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>421</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/wenda/176324.html" target="_blank" title="Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class" class="wdcdcTitle">Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class</a>
<a href="http://www.php.cn/wenda/176324.html" class="wdcdcCons">I want to style the card title of a panel with class collapseshow. In this example, it's t...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 12:53:11</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>376</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
</div>
</div>
<div class="wzconZt" >
<div class="wzczt-title">
<div>Related Topics</div>
<a href="http://www.php.cn/faq/zt" target="_blank">More>
</a>
</div>
<div class="wzcttlist">
<ul>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/jsszcd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214415543594.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js method to get array length" /> </a>
<a target="_blank" href="http://www.php.cn/faq/jsszcd" class="title-a-spanl" title="js method to get array length"><span>js method to get array length</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/jssxym"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363232433.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js refresh current page" /> </a>
<a target="_blank" href="http://www.php.cn/faq/jssxym" class="title-a-spanl" title="js refresh current page"><span>js refresh current page</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/jssswr"><img src="https://img.php.cn/upload/subject/202407/22/2024072214362363697.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js rounding" /> </a>
<a target="_blank" href="http://www.php.cn/faq/jssswr" class="title-a-spanl" title="js rounding"><span>js rounding</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/jsscjddff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214115932190.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js method to delete node" /> </a>
<a target="_blank" href="http://www.php.cn/faq/jsscjddff" class="title-a-spanl" title="js method to delete node"><span>js method to delete node</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/javascriptzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214114396768.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JavaScript escape characters" /> </a>
<a target="_blank" href="http://www.php.cn/faq/javascriptzy" class="title-a-spanl" title="JavaScript escape characters"><span>JavaScript escape characters</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/jsscsjsdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214113439427.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to generate random numbers in js" /> </a>
<a target="_blank" href="http://www.php.cn/faq/jsscsjsdff" class="title-a-spanl" title="How to generate random numbers in js"><span>How to generate random numbers in js</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/rhqyjavascrip"><img src="https://img.php.cn/upload/subject/202407/22/2024072214085281458.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to enable JavaScript" /> </a>
<a target="_blank" href="http://www.php.cn/faq/rhqyjavascrip" class="title-a-spanl" title="How to enable JavaScript"><span>How to enable JavaScript</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/faq/jssymbol"><img src="https://img.php.cn/upload/subject/202407/22/2024072214060282401.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Detailed explanation of Symbol class in JS" /> </a>
<a target="_blank" href="http://www.php.cn/faq/jssymbol" class="title-a-spanl" title="Detailed explanation of Symbol class in JS"><span>Detailed explanation of Symbol class in JS</span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="phpwzright">
<div class="wzrOne">
<div class="wzroTitle">Popular Recommendations</div>
<div class="wzroList">
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="what does js mean" href="http://www.php.cn/faq/482163.html">what does js mean</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to convert string to array in js?" href="http://www.php.cn/faq/461802.html">How to convert string to array in js?</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to refresh the page using javascript" href="http://www.php.cn/faq/473330.html">How to refresh the page using javascript</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to use sqrt function" href="http://www.php.cn/faq/415276.html">How to use sqrt function</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to delete an item in js array" href="http://www.php.cn/faq/475790.html">How to delete an item in js array</a>
</div>
</li>
</ul>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="wzrThree">
<div class="wzrthree-title">
<div>Popular Tutorials</div>
<a target="_blank" href="http://www.php.cn/course.html">More>
</a>
</div>
<div class="wzrthreelist swiper2">
<div class="wzrthreeTab swiper-wrapper">
<div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div>
<div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div>
<div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div>
</div>
<ul class="one">
<li>
<a target="_blank" href="http://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
<div class="wzrthreerb">
<div>1418474 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="http://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a>
<div class="wzrthreerb">
<div>4260106 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="74">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a>
<div class="wzrthreerb">
<div>2494698 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
<div class="wzrthreerb">
<div>504711 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="PHP zero-based introductory tutorial" href="http://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a>
<div class="wzrthreerb">
<div>859557 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="2">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
<ul class="two" style="display: none;">
<li>
<a target="_blank" href="http://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
<div class="wzrthreerb">
<div >1418474 times of learning</div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a>
<div class="wzrthreerb">
<div >2494698 times of learning</div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
<div class="wzrthreerb">
<div >504711 times of learning</div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Quick introduction to web front-end development" href="http://www.php.cn/course/901.html">Quick introduction to web front-end development</a>
<div class="wzrthreerb">
<div >215432 times of learning</div>
<div class="courseICollection" data-id="901">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Master PS video tutorials from scratch" href="http://www.php.cn/course/234.html">Master PS video tutorials from scratch</a>
<div class="wzrthreerb">
<div >881664 times of learning</div>
<div class="courseICollection" data-id="234">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
<ul class="three" style="display: none;">
<li>
<a target="_blank" href="http://www.php.cn/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="[Web front-end] Node.js quick start" href="http://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a>
<div class="wzrthreerb">
<div >6720 times of learning</div>
<div class="courseICollection" data-id="1648">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Complete collection of foreign web development full-stack courses" href="http://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a>
<div class="wzrthreerb">
<div >5235 times of learning</div>
<div class="courseICollection" data-id="1647">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Go language practical GraphQL" href="http://www.php.cn/course/1646.html">Go language practical GraphQL</a>
<div class="wzrthreerb">
<div >4374 times of learning</div>
<div class="courseICollection" data-id="1646">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="http://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a>
<div class="wzrthreerb">
<div >645 times of learning</div>
<div class="courseICollection" data-id="1645">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="http://www.php.cn/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a>
<div class="wzrthreerb">
<div >22248 times of learning</div>
<div class="courseICollection" data-id="1644">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper2', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.wzrthreeTab>div').click(function(e){
$('.wzrthreeTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrthreelist>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
</script>
</div>
<div class="wzrFour">
<div class="wzrfour-title">
<div>Latest Downloads</div>
<a href="http://www.php.cn/xiazai">More>
</a>
</div>
<script>
$(document).ready(function(){
var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
speed:1000,
autoplay:{
delay:3500,
disableOnInteraction: false,
},
pagination:{
el:'.sjyx_banSwiperwz .swiper-pagination',
clickable :false,
},
loop:true
})
})
</script>
<div class="wzrfourList swiper3">
<div class="wzrfourlTab swiper-wrapper">
<div class="check swiper-slide" data-id="onef">Web Effects <div></div></div>
<div class="swiper-slide" data-id="twof">Website Source Code<div></div></div>
<div class="swiper-slide" data-id="threef">Website Materials<div></div></div>
<div class="swiper-slide" data-id="fourf">Front End Template<div></div></div>
</div>
<ul class="onef">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="jQuery enterprise message form contact code" href="http://www.php.cn/toolset/js-special-effects/8071">[form button] jQuery enterprise message form contact code</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="HTML5 MP3 music box playback effects" href="http://www.php.cn/toolset/js-special-effects/8070">[Player special effects] HTML5 MP3 music box playback effects</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="HTML5 cool particle animation navigation menu special effects" href="http://www.php.cn/toolset/js-special-effects/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="jQuery visual form drag and drop editing code" href="http://www.php.cn/toolset/js-special-effects/8068">[form button] jQuery visual form drag and drop editing code</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="VUE.JS imitation Kugou music player code" href="http://www.php.cn/toolset/js-special-effects/8067">[Player special effects] VUE.JS imitation Kugou music player code</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Classic html5 pushing box game" href="http://www.php.cn/toolset/js-special-effects/8066">[html5 special effects] Classic html5 pushing box game</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="jQuery scrolling to add or reduce image effects" href="http://www.php.cn/toolset/js-special-effects/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="CSS3 personal album cover hover zoom effect" href="http://www.php.cn/toolset/js-special-effects/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a>
</div>
</li>
</ul>
<ul class="twof" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a>
</div>
</li>
</ul>
<ul class="threef" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3078" target="_blank" title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3077" target="_blank" title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3076" target="_blank" title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3075" target="_blank" title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3074" target="_blank" title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3073" target="_blank" title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3072" target="_blank" title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-materials/3071" target="_blank" title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a>
</div>
</li>
</ul>
<ul class="fourf" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8328" target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8327" target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8326" target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8325" target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8324" target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8323" target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8322" target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/toolset/website-source-code/8321" target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper3', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.wzrfourlTab>div').click(function(e){
$('.wzrfourlTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrfourList>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
</script>
</div>
</div>
</div>
<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="http://www.php.cn/about/us.html">About us</a>
<a href="http://www.php.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://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?1731950431"></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>
</body>
</html> 
