## jQuery Miscellaneous: .size() Method
The `.size()` method is a built-in jQuery method used to return the number of DOM elements matched by a jQuery selector.
> ⚠️ **Deprecation Notice:** The `.size()` method was **deprecated in jQuery version 1.8** and **removed in jQuery 3.0**. For modern web development, you should use the [`.length`](#alternative-the-length-property) property instead, as it achieves the exact same result without the overhead of a function call.
---
## Syntax
```javascript
$(selector).size()
```
### Return Value
* **Type:** Integer
* **Description:** Returns the total number of elements currently matched by the jQuery selector object.
---
## Code Examples
### Example 1: Basic Usage
The following example alerts the total number of `
` elements on the page when a button is clicked.
```html
jQuery .size() Example - YouTip
My Shopping List
Apples
Bananas
Oranges
```
---
## Alternative: The `.length` Property
Because `.size()` is deprecated and removed in modern versions of jQuery, you should always use the `.length` property.
The `.length` property is preferred because it is a direct property of the jQuery object, meaning it does not require a function call overhead, making it slightly faster than `.size()`.
### Syntax for `.length`
```javascript
$(selector).length
```
### Example 2: Modern Implementation using `.length`
```javascript
$(document).ready(function(){
$("button").click(function(){
// Recommended modern approach
var count = $("li").length;
console.log("Number of list items: " + count);
});
});
```
---
## Comparison: `.size()` vs `.length`
| Feature | `.size()` | `.length` |
| :--- | :--- | :--- |
| **Type** | Method (Function) | Property |
| **Performance** | Slightly slower (wraps `.length` internally) | Faster (direct property access) |
| **jQuery 1.8+** | Deprecated | Recommended |
| **jQuery 3.0+** | Removed | Supported |
YouTip