10 Tips for Using jQuery under Visual Studio

[51CTO classic Lesson widely popular jQuery is an open source, cross-browser compatible CSS 3 JavaScript library, you can use it to simplify your JavaScript coding tasks and operations (add, edit and delete) DOM elements in the HTML content This paper describes 10 using jQuery in Visual Studio 10 a useful skill, I hope for your help.

What you need to prepare

In order to successfully use jQuery in Visual Studio, you need to install the following software:

Visual Studio 2008

Visual Studio 2008 SP1

jQuery library

Visual Studio 2008 jQuery plugin

Or directly using Visual Studio 2010, because it has built-in support jQuery, and if you happen to be using Visual Studio 2010, then congratulations, you have already installed by default the jQuery library.

In-depth understanding of DOM elements using jQuery operate a Web page before, we take a look at jQuery presentation and its benefits.

Some useful tips jQuery

jQuery most notable features include support for:

Browser-independent: jQuery supports most browsers;

Simplified event handling model: jQuery support excellent, paradigm of event handling model is easy to use, greatly reducing the amount of code, jQuery event handling model is consistent in all browsers, the event object is a cross-browser standardized objects, event objects are always passed as a parameter to the event handler;

Seamless extension: jQuery provides extended support through easy-to-use plug-in API, you can seamlessly extend jQuery core library.

Here are some tips to start using jQuery

1, the preloaded image with jQuery

Preload image is considered a best practice, because it increases the speed of rendering a web page, the following code snippet shows the preloaded image jQuery:

1. jQuery.preloadImages = function()  
2. {  
3.   for(var x = 0; x").attr("src", arguments[x]);  
4. }}; 

2, disable the context menu using jQuery

The following code illustrates how to use the context menu to disable jQuery:

1. $(document).ready(function(){  
2.     $(document).bind("contextmenu",function(e){  
3.         return false;  
4.     });  
5. }); 

3, add and remove CSS classes in jQuery

Add and remove CSS classes in jQuery is very simple:

1. //To add a css class, you can use the following piece of code  
2. if($(id).hasClass('testClass'))  
3. {  
4.  $('#div1').addClass('testclass');    
5. }  
6.  
7. //To remove a css class, you can use the following piece of code  
8. if($(id).hasClass('testClass'))  
9. {  
10.  $('#div1').removeClass('testclass');    
11. } 

4, check whether an element is available

You can use jQuery to check a Web page element exists, the following is an example:

1. if ($('img').length)   
2. {    
3.     alert('Image elements available');    
4. }   
5. else   
6. {    
7.     alert('Image elements not available');    
8. } 

5, using jQuery to check the type of browser

Methods Different browsers execute the script a little bit different, but you can use jQuery to easily identify the type of browser, and then perform the appropriate custom code, the following is check your browser jQuery code snippet:

1. if (jQuery.browser.mozilla)   
2. {  
3.     // Code to execute if browser is Mozilla  
4. }  
5. if (jQuery.browser.msie)   
6. {  
7.     // Code to execute if browser is IE  
8. }  
9.    
10. if (jQuery.browser.safari)   
11. {  
12.     // Code to execute if browser is Safari  
13. }  
14. if (jQuery.browser.opera)   
15. {  
16.     // Code to execute if browser is Opera  
17. } 

6, found hidden element using jQuery

You can use the size () checks hide DOM elements, the following is an example:

1. if( $("div.hidden").size)  
2. {  
3.   alert('One or more divs are hidden');  
4. } 

You can also use the length () function to achieve the same result, in fact, size () function is also called length () function, so the length () function faster.

1. if( $("div.hidden").length )  
2. {  
3.   alert('One or more divs are hidden');  
4. } 

7, the data stored in the DOM

You can use the Data () function saves the data element in the DOM, the following code fragment shows how to use a DOM element jQuery assignment:

1. $('#div1').data ('Key', 'Value'); 

If you want to retrieve data stored in the DOM elements, you can use the following code:

1. $('#div1').data ('Key'); 

8, retrieving an element of the parent element

Using jQuery to check an element of the parent element is very simple, you need to do is call like this closest () function:

1. var id = $("btnHello").closest("div").attr("id"); 

9, the proper use of jQuery in the list

List (Chaining) jQuery is a great feature in that it led the list of behaviors are executed one after another, you can use the list method to use it, the following code is an example:

1. $('div1').removeClass('color').addClass('no-color'); 

10, the operation selection list with jQuery

jQuery makes it easier to use the selection list, you can easily delete a list item from the selection list, as follows:

1. $("#employeeList option[value='9']").remove(); 

The following code illustrates how to retrieve a selection from the selection list in text:

1. $('#employeeList :selected').text(); 

summary

jQuery is a powerful JavaScript library that simplifies cross-browser, client-side scripting, event handling, animating, DOM traversal and Ajax development, this paper presented the 10 jQuery-related tips to help you make good use of it. You are welcome jQuery share some useful tips.

Original title: 10 jQuery Tips and Tricks for Visual Studio