Id vs class vs tag vs pseudo vs. attribute selectors. Your jQuery: Now With 67% Less Suck. Fun fact: more websites are now using jQuery than Flash. jQuery is an amazing tool that’s made JavaScript accessible to developers and designers of all levels of experience. However, as Spiderman taught us, “with great power comes great responsibility.”
The unfortunate downside to jQuery is that while it makes it easy to write JavaScript, it makes it easy to write really really f*&#ing bad JavaScript. Scripts that slow down page load, unresponsive user interfaces, and spaghetti code knotted so deep that it should come with a bottle of whiskey for the next sucker developer that has to work on it. This becomes more important for those of us who have yet to move into the magical fairy wonderland where none of our clients or users view our pages in Internet Explorer. The IE JavaScript engine moves at the speed of an advancing glacier compared to more modern browsers, so optimizing our code for performance takes on an even higher level of urgency.
Selector optimization $("#id p"); Chaining. jQuery Selector Performance Testing | Sparkbox. I recall reading somewhere recently that writing jQuery selectors was more efficient when written $('.class-name').find('.sub-class-name').find('.some-other-class-name') as opposed to $('.class-name .sub-class-name .some-other-class-name'). Not knowing exactly how these selectors are implemented in jQuery, I couldn't say for myself whether this was actually true or not. It seems counterintuitive to me, so I figured I would test it out before I changed all of my code to chain multiple find and children methods instead of chaining the selector of one find. So, I threw together a quick little experiment to see for myself which way is faster. I created a simple HTML file with a couple of wrapper divs with two large (1000 <li>) lists to modify.
<! I then wrote a simple script to select various combinations of elements and do some timing. The JavaScript simply goes over each list individually and does some selecting and modifying, and then over both lists together. The results: The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog. 01 February 2011 The difference between .bind(), .live(), and .delegate() is not always apparent. Having a clear understanding of all the differences, though, will help us write more concise code and prevent bugs from popping up in our interactive applications. The jQuery team have announced in v1.7 a new method for binding events called on. This method combines the functionality of live, bind, and delegate described below, allowing you to specify the binding method based the arguments passed rather than by using different function names.
The basics The DOM tree First, it helps to visualize the DOM tree of an HTML document. Event bubbling (aka event propagation) When we click a link, it fires the click event on the link element, which triggers any functions we bound to that element's click event. $('a').bind('click', function() { alert("That tickles! ") So a click will trigger the alert. In the context of manipulating the DOM, document is the root node. .bind() .live() .delegate() Speed.
Selectors. Code Playground. Widgets. Validation. jQuery API. jQAPI - Alternative jQuery Documentation. jQuery: The Write Less, Do More, JavaScript Library. Home. Playground - MobilyBlocks. Playground - MobilyMap. Displaying and Filtering Data with jQuery Templates. Practical ASP.NET Displaying and Filtering Data with jQuery Templates Building on the new jQuery extensions for displaying multiple rows, Peter builds a page that retrieves data from a Web Service based on the user's input -- and filters the data in the client as well. Get Code Download In my last column ( Setting Up for jQuery Templates ), I set up a simple AJAX-enabled page that uses client-side code to retrieve the Order objects for a customer from a WCF Web when the user selected a customer from a dropdownlist on the page.
In this column, I'm going to display those objects in a table using the new template plug-in for jQuery (and support filtering those orders by date). The first step in this process is to create a template, which defines how each Order object will be displayed. A template is put into the page, inside a script block with a type of text/x-jquery-tmpl (putting the template inside the script block prevents the browser from rendering it before I'm ready). JavaScript. Supporting Updates with jQuery Data Linking. Practical ASP.NET Supporting Updates with jQuery Data Linking Get Code Download In my last column ( Displaying and Filtering Data with jQuery Templates ) I created a page that retrieved data from a Web service using a combination of jQuery (with its new templating feature), standard ASP.NET technology and JavaScript.
This column leverages jQuery's new data linking technology to support updates. Data linking allows you to link a property on an object to a field on a form. The databinding is two way: If you update the field then the property is updated; if you update the property (using the data plugin) the change appears in the form.
I first need to add the data link library to my project. I then extend the template I created in my last column that displays the Order object's RequiredDate in a textbox. As shown in my last column, the Order Data Transfer Objects that I retrieved from my Web service are kept in an array called ords. Return TrueEnd Function About the Author. jQuery Based Library for ASP.NET. Using jQuery with ASP .NET. A brief introduction to jQuery and ways in which we can integrate it into ASP .NET Introduction In September 2008 Scott Guthrie, the head of the ASP.NET team, announced in a blog post that Visual Studio would be shipping with the jQuery library.
He writes: “jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web. A big part of the appeal of jQuery is that it allows you to elegantly (and efficiently) find and manipulate HTML elements with minimum lines of code … There is a huge ecosystem and community built up around JQuery.
The jQuery library also works well on the same page with ASP.NET AJAX and the ASP.NET AJAX Control Toolkit.” With that, JQuery is officially embraced by ASP.NET. A brief introduction of JQuery jQuery is the star among the growing list of JavaScript libraries. Listing 1: jQuery code for making a zebra-style table 1. 2. 3. 5. 1. jQuery Selectors Document.Ready() 1. 2. Tutorials:How jQuery Works.
This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating the following HTML page: The src attribute in the <script> element must point to a copy of jQuery. Download a copy of jQuery from the Downloading jQuery page and store the jquery.js file in the same directory as your HTML file. Note: When you download jQuery, the file name may contain a version number, e.g., jquery-x.y.z.js.
Make sure to either rename this file to jquery.js or update the src attribute of the <script> element to match the file name. To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function: Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. For example, inside the ready event, you can add a click handler to the link: Copy the above jQuery code into your HTML file where it says // Your code goes here. Setting Up for jQuery Templates. Practical ASP.NET Setting Up for jQuery Templates Peter Vogel prepares to try out the new jQuery templating/databinding functionality to create a simple AJAX-enabled page that allows the user to select a customer and retrieve from a Web service all the orders associated with that customer. Get Code Download Starting with my next column, I'm going to focus on the new databinding and templating features that Microsoft has contributed to the jQuery project .
In this column I'm going to build the base project that I'll be integrating the new jQuery features into. I have three goals in this project: Offload as much processing as possible to the clientHave the client talk to the server exclusively through JavaScript calling WCF Web servicesLeverage as much ASP.NET technology as possible The page I'm going to create is very simple: The user will get a list of customers from which to select (that list will be loaded on the server). And now, it's time to add some JavaScript. $(InitializePae); .find. Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree. The first signature for the .find()method accepts a selector expression of the same type that we can pass to the $() function. The elements will be filtered by testing whether they match this selector. Consider a page with a basic nested list on it: If we begin at item II, we can find list items within it: The result of this call is a red background on items A, B, 1, 2, 3, and C. Unlike most of the tree traversal methods, the selector expression is required in a call to .find().
And then pass this jQuery object to find: 50 Best jQuery Plugins of the Year 2013. jQuery is a widely used javascript library with almost all developers being well-acquainted with its features and functionality. It can solve most of your issues and fits with the requirement of your website to render it innovative and creative. This post features the 50 best jQuery plugins of the year 2013. The plugins below can save a lot of time and deliver the much needed solution to most of the development and design issues which you may face. You can always find newer jQuery plugins, however, the plugins below stand out from the rest with respect to what they are able to offer from an angle of functionality. 1. Scrolld.js Being an open source plugin which is a unique one, Scrolld.js can give you a technique of absolutely accurate scrolling for navigation and pixel-perfect layouts with real-time revised data values. 2. jQuery Scroll Path jQuery Scroll Path is a plugin that defines custom scroll paths and uses syntax that is canvas flavored. 3. jResonsive 4. 5. 6. freetile.js 8. 11. 13.
Jquery: Excellent tips to improve your Jquery programming-Part 1. Great Ways to Learn jQuery. These jQuery resources will set you on the path towards mastering jQuery. Written Articles Getting Started with jQuery – this is the official jQuery getting started guide.jQuery for JavaScript Programmers – Simon Willison (creator of django) gives you an introduction to jQuery for people who already understand JavaScript.jQuery Crash Course – Nathan Smith gives a quick introduction to jQuery on Digital Web Magazine.Introduction to jQuery – Rick Strahl, well-known for his work developing with Microsoft technologies, gives his introduction to jQuery with part two covering using jQuery with ASP.NET. E-Books jQuery Fundamentals – open-source e-book written by Rebecca Murphey in collaboration with other well-known members of the jQuery community.jQuery Enlightenment – Cody Lindley’s e-book covers advanced topics on jQuery with links to working code examples in jsbin. jQuery Books Slideshows Learning Screencasts Attend a training course Hire a Corporate jQuery Trainer Conferences jQuery Meetups Podcasts.