Web Front-end
JS Tutorial
Detailed explanation of node operation methods such as each(), find() and filter() in jQuery (recommended)
Detailed explanation of node operation methods such as each(), find() and filter() in jQuery (recommended)
1.each(callback)
Official explanation:
Return value: jQuery
Overview
Execute a function with each matching element as the context.
means that each time the function passed in is executed, the this keyword in the function points to a different DOM element (a different matching element each time). Moreover, every time the function is executed, a numeric value representing the position of the element as the execution environment in the matching element set is passed to the function as a parameter (an integer based on zero). Returning 'false' will stop the loop (just like using 'break' in a normal loop). Returns 'true' to jump to the next loop (just like using 'continue' in a normal loop).
Parameters
callback
Function to be executed for each matching element
Example
Description:
Iterate over two images and set their src attribute. Note: here this refers to the DOM object rather than the jQuery object.
HTML code:
jQuery code:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
Result:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
2.find(expr|obj|ele)
Official explanation:
Return value: jQuery
Overview
Search for all elements that match the specified expression. This function is a great way to find out the descendant elements of the element being processed.
All searches rely on jQuery expressions. This expression can be written using CSS1-3 selector syntax.
Parameters
expr String
Expression used to find
jQuery object object
A jQuery object used to match elements
element DOMElement
A DOM element
Example
Description:
Start from all paragraphs and further search for span elements below . Same as $("p span").
HTML code:
Hello, how are you?
jQuery code:
$("p").find("span")
Result:
[ Hello ]
3.filter(expr|obj|ele|fn)
Official explanation:
Overview
Filter out matches that match the specified expression collection of elements.
This method is used to narrow the matching scope. Separate multiple expressions with commas
Parameters
expr String
String value, containing selector expressions for matching the current set of elements.
jQuery object object
Existing jQuery object to match the current element.
element Expression
A DOM element used to match elements.
function(index) Function
A function is used as a collection of test elements. It accepts a parameter index, which is the index of the element in the jQuery collection. In functions, this refers to the current DOM element.
Example
Parameter selector description:
Retain elements with select class
HTML code :
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
##jQuery Code:
$("p").filter(".selected")
And Again
]The above is the each(), find() and filter() in jQuery introduced by the editor. I am waiting for the detailed explanation (recommendation) of the node operation method. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
How do I create and publish my own JavaScript libraries?
Mar 18, 2025 pm 03:12 PM
Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
How do I optimize JavaScript code for performance in the browser?
Mar 18, 2025 pm 03:14 PM
The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
How do I debug JavaScript code effectively using browser developer tools?
Mar 18, 2025 pm 03:16 PM
The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.
How do I use Java's collections framework effectively?
Mar 13, 2025 pm 12:28 PM
This article explores effective use of Java's Collections Framework. It emphasizes choosing appropriate collections (List, Set, Map, Queue) based on data structure, performance needs, and thread safety. Optimizing collection usage through efficient
How do I use source maps to debug minified JavaScript code?
Mar 18, 2025 pm 03:17 PM
The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.
TypeScript for Beginners, Part 2: Basic Data Types
Mar 19, 2025 am 09:10 AM
Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript
Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts
Mar 15, 2025 am 09:19 AM
This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion
