50 essential practical jQuery code segments (1)

This article will show you 50 jquery code snippets that can help your javascript project. Some of the code segments are supported since jQuery1.4.2, while others are actually useful functions or methods. They can help you complete things quickly and well. These are code segments with the best performance I can remember. If you find anything better, paste your version in the comments! I hope you can find something helpful in this article.

1. How to Create nested filters:

 
 

  
  
// Allows you to reduce the filter of matching elements in the set,
  
  
// Only the parts that match the given selector are left. In this case,
  
  
// The query deletes any records. No: not): has)
  
  
// Subnode that contains class "selected". selected.
  
  
. Filter (": not (: has (. selected ))")
 
 

2. How to reuse element search

 
 

  
  
Var allItems = $ ("div. item ");
  
  
Var keepList = $ ("div # container1 div. item ");
  
  
// Now you can continue to work with these jQuery objects. For example,
  
  
// Crop the "keep list" based on the check box, and the name of the check box
  
  
// Meet
  
  
<DIV> class names:
  
  
$ (FormToLookAt + "input: checked"). each (function (){
  
  
KeepList = keepList. filter ("." + $ (this). attr ("name "));
  
  
});
  
  
</DIV>
 
 

3. Any use of has () to check whether an element contains a class or element:

 
 

  
  
// JQuery. * contains support for this has method. Find this method
  
  
// Whether an element contains another element class or any other element
  
  
// What you are looking for and want to operate on.
  
  
$ ("Input"). has (". email"). addClass ("email_icon ");
 
 

4. How to Use jQuery to switch between style sheets

 
 

  
  
// Find the media-type you want to switch to, and then set href to a new style sheet.
  
  
$ ('Link [media = 'screen'] '). attr ('href', 'Alternative.css ');
 
 

5. How to restrict the selection scope based on the optimization purpose ):

 
 

  
  
// Use the label name as the class name prefix whenever possible,
  
  
// JQuery does not need to spend more time searching.
  
  
// The elements you want. Remember that,
  
  
// The more specific the operations on the elements on your page,
  
  
// The lower the execution and search time.
  
  
Var in_stock = $ ('# shopping_cart_items input. is_in_stock'); <ul id = "shopping_cart_items">
<Li> <input type = "radio" value = "Item-X" name = "item" class = "is_in_stock"/> Item X </li>
<Li> <input type = "radio" value = "Item-Y" name = "item" class = "3-5_days"/> Item Y </li>
<Li> <input type = "radio" value = "Item-Z" name = "item" class = "unknown"/> Item Z </li>
</Ul>
 
 

6. How to correctly use ToggleClass:

 
 

  
  
// Switch toggle) class allows you
  
  
// Whether the class exists to be added or deleted.
  
  
// In this case, some developers use:
  
  
A. hasClass ('bluebutton ')? A. removeClass ('bluebutton'): a. addClass ('bluebutton ');
  
  
// ToggleClass allows you to use the following statements to easily achieve this
  
  
A. toggleClass ('bluebutton ');
 
 

7. How to set the unique features of IE:

 
 

  
  
If ($. browser. msie ){
  
  
// Internet Explorer is crazy.
  
  
}
 
 

8. How to Use jQuery to replace an element:

 
 

  
  
$('#thatdiv').replaceWith('fnuh'); 
 
 

9. How to verify whether an element is null:

 
 

  
  
If ({('{keks'}.html ()){
  
  
// Nothing is found;
  
  
}
 
 

10. How to Find the index number of an element from an unsorted set

 
 

  
  
$("ul > li").click(function () {  
  
  
    var index = $(this).prevAll().length;  
  
  
});