- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 10711 Articles for Web Development
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
612 Views
It’s quite easy to use JavaScript variables in jQuery selectors.ExampleLet’s seen an example to use JavaScript variables in jQuery to hide an element:Live Demo $(document).ready(function(){ $("input").click(function(){ var name = this.name; $("input[name=" + name + "]").hide(); } ); }); Heading 1 To hide the buttons, click on it.
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
185 Views
If you want to select an element with a specific index, then use the jQuery selector eq(). Here, set the index number to select the element.ExampleYou can try to run the following code to learn how to use jQuery selector eq():Live Demo $(document).ready(function(){ $("p:eq(1)").css("background-color","red"); }); Heading 1 This is demo text. This is another text. This is demo content
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
292 Views
The $ variable is for jQuery. If you’re using more than one JavaScript library or multiple versions of jQuery, then you should use jQuery(selector) instead of $(selector) to avoid name conflicts.ExampleTo understand the noConflict() concept, let us see an example of using the jQuery (selector):Live Demo $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("h3").text("jQuery works perfectly"); }); }); Testing jQuery Click below: Click me The $ sign is used for jQuery, but what if other frameworks also use the same $ sign; this may create issues and ... Read More
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
69 Views
The children( [selector] ) method gets a set of elements containing all of the unique immediate children of each of the matched set of elements.ExampleYou can try to run the following code to learn how to get a set of elements containing all of the unique immediate children of each of the matched set of elements:Live Demo jQuery Example $(document).ready(function(){ $("div").children(".selected").addClass("blue"); }); ... Read More
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
72 Views
The find( selector ) method can be used to locate all the descendant elements of a particular type of elements. The selector can be written using any selector syntax.ExampleYou can try to run the following code to learn how to locate all the descendant elements of a particular type of elements:Live Demo jQuery Example $(document).ready(function() { $("p").find("span").addClass("selected"); }); .selected { color:blue; } This is first paragraph and THIS IS BLUE This is second paragraph and THIS IS ALSO BLUE
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
678 Views
To exclude first and second element from jQuery, use the slice() method.ExampleYou can try to run the following code to exclude first and element from jQuery:Live Demo $(document).ready(function(){ $('p').slice(2).css('font-size', '24px'); }); Java C++ Ruby Groovy
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
150 Views
The .not() is used to select all elements except an element, which can be specified.ExampleYou can try to run the following code to learn how to use .not() with jQuery selector.Live Demo $(document).ready(function(){ $("p:not(.myclass)").css("background-color", "red"); }); Heading This is demo text. This is another text.
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
401 Views
The empty( ) method remove all child nodes from the set of matched elements whereas the method remove( expr ) method removes all matched elements from the DOM.ExampleYou can try to run the following code to learn how to remove DOM elements in jQuery:Live Demo jQuery Example $(document).ready(function() { $("div").click(function () { $(this).remove( ); }); }); .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Click on any square below:
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
1K+ Views
To enhance the performance of jQuery selector, you need to perform optimization. Here are some of the techniques:Cache SelectorCaching enhances the performance of the application. Cache your jQuery selectors for better performance. This can be done using the ID as your selector. For example, this caches the selector and stores it in variable.var $elm = $("#elm");Instead of using the jQuery ID selector, use the $elm variable:var $elm = $("#elm"); $elm.addClass(‘example’);Use ID selectorjQuery is a JavaScript library. In JavaScript, document.getElementById() is used to select the HTML element, which is the fastest way. Since jQuery is written on top of JavaScript, it ... Read More
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
759 Views
To get a DOM Element from a jQuery Selector, use the $('#element').get(0). This returns the DOM element.ExampleYou can try to run the following code to learn how to get a DOM Element from a jQuery Selector. For our checkbox example, get a DOM element like the following code:Live Demo $(document).ready(function(){ $(":checkbox").click(function() { if ($(this).is(":checked")) { alert("Checkbox checked!"); } }); });