Interpretation of the ten new features of jQuery 1.4 and sample code (1)

BKJIA reported the news released by jQuery January this year in 1.4. In this version, jQuery has a lot of improvements and feature updates. It not only contains many new features, we have also improved many functions and made great efforts in performance optimization. This article will discuss these new features and enhancements, hoping to help you.

JQuery 1.4: Http://code.jquery.com/jquery-1.4.js

The following describes the ten new features that you should know and use in jQurey 1.4 through explanations and sample code.

1. Pass attributes to jQuery

In earlier versions, jQuery used the "attr" method to add attributes to the element set. The "attr" method can not only pass attribute names and values, you can also pass an object set that contains multiple attributes. In jQurey 1.4, apart from creating new objects, it can now pass attribute objects as parameters to jQuery functions or objects themselves. For example, you can create a link element that contains multiple attributes.

 
 

  
  
JQuery ('<a> </a> ',{
  
  
Id: 'gid ',
  
  
Href: 'http: // www.google.com ',
  
  
Title: 'non-harmonious google version ',
  
  
Rel: 'external ',
  
  
Text: 'enter <SPAN class = t_tag onclick = tagshow (event) href = "tag. php? Name = Google"
Mce_href = "tag. php? Name = Google "> Google </SPAN>! '
  
  
});
 
 

You may notice the "text" attribute and guess what it is, because tag a does not have the "text" attribute. When you pass certain attributes, jquery 1.4 will also check and use its own method. Therefore, the "text" attribute above allows jQuery to call its ". text ()" method and enter "Google! "As its unique parameter.

Here is a better example:

 
 

  
  
JQuery ('<div/> ',{
  
  
Id: 'foo ',
  
  
Css :{
  
  
FontWeight: 700,
  
  
Color: 'green'
  
  
},
  
  
Click: function (){
  
  
Alert ('foo has been clicked! ');
  
  
}
  
  
});
 
 

The "id" attribute is added as a common attribute. However, the "css" and "click" attributes correspond to specific jQuery methods. The above code is written as follows before 1.4:

 
 

  
  
JQuery ('<div/> ')
  
  
. Attr ('id', 'foo ')
  
  
. Css ({
  
  
FontWeight: 700,
  
  
Color: 'green'
  
  
})
  
  
. Click (function (){
  
  
Alert ('foo has been clicked! ');
  
  
});
 
 

2. Everything can be ""

JQuery 1.4 adds three methods for DOM operations: "nextUntil", "prevUntil", and "parentsUntil ". These methods traverse DOM objects in a certain order until the specified filtering conditions are met. Suppose we have a fruit list:

 
 

  
  
<Ul>
  
  
<Li> Apple </li>
  
  
<Li> bananas </li>
  
  
<Li> grape </li>
  
  
<Li> strawberry </li>
  
  
<Li> example </li>
  
  
<Li> peach </li>
  
  
</Ul>
 
 

If you want to select all elements between "Apple" and "Strawberry. The code can be written as follows:

 
 

  
  
JQuery ('ul li: contains (Apple) '). nextUntil (': contains (PEAR) '); // you can get bananas, grapes, and strawberries.
  
  
 
 
 

3. bind multiple events

Compared with binding multiple methods through the jquery chain, you can now bind all these events with one call, such:

 
 

  
  
JQuery ('# foo). bind ({
  
  
Click: function (){
  
  
// Code
  
  
},
  
  
Mouseover: function (){
  
  
// Code
  
  
},
  
  
Mouseout: function (){
  
  
// Code
  
  
}
  
  
})
 
 

You can also use the ". one ()" method.

4. Check whether the element has an object.

Using the ". has ()" method, jQuery 1.4 makes it quite easy to check whether an element (or set) has an object. From a program perspective, it is the same as jQuery's selector filter ": has. This method returns all elements in the current set that contain at least one element array that meets the conditions.

 
 

  
  
jQuery('div').has('ul');      
 
 

The preceding method returns an array of DIV elements containing ul elements. In this case, you may prefer to simply use the selector filter (": has ()"), but when you need to filter an array through code, this method is still useful.

JQuery 1.4 also adds a new "contains" function in the jQuery namespace. This is a low-level function that accepts two DOM nodes as parameters. It returns a Boolean value indicating whether the next element exists in the previous element. For example:

 
 

  
  
JQuery.contains(document.doc umentElement, document. body );
  
  
// Return true-<body> exists in  
 

5. Remove element Packaging

". Warp ()" has been in jQuery for some time, and now the ". unwrap ()" method corresponding to it is added to 1.4. This method is the opposite of the warp () method. Assume the following DOM structure is available:

 
 

  
  
<div>        
  
  
    <p>Foo</p>        
  
  
</div>   
 
 

We can use the following function to remove the outer layers of paragraph elements:

 
 

  
  
jQuery('p').unwrap();     
 
 

The final DOM structure is as follows:

 
 

  
  
<p>Foo</p>   
 
 

Note: This method is easy to handle and removes the parent node of any element.