Shulou(Shulou.com)06/02 Report--

What are the skills commonly used in jQuery, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

1. Executes the JavaScript code when the document document is ready.

Why do we use the jQuery library? One of the reasons is that we can make jQuery code run on a variety of browsers and browsers where bug exists.

/ / Different ways to achieve the Document Ready event / / With jQuery $(document) .ready (function () {/ *... * /}); / / Short jQuery $(function () {/ *... * /}) / / Without jQuery (doesn't work in older IE versions) document.addEventListener ('DOMContentLoaded',function () {/ / Your code goes here}); / / The Trickshot (works everywhere): r (function () {alert (' DOM readers')) }) function r (f) {/ in/.test (document.readyState)? setTimeout ('r ('+ fags')', 9): F ()}

two。 Use route.

Var route = {_ routes: {}, / / The routes will be stored here add: function (url, action) {this._ routes [url] = action }, run: function () {jQuery.each (this._routes, function (pattern) {if (location.href.match (pattern)) {/ / "this" points to the function to be executed this () }});}} / / Will execute only on this page: route.add ('002.htmlfloor, function () {alert (' Hello there')}) Route.add ('products.html', function () {alert ("this won't be executed: (")}); / / You can even use regex-es: route.add ('. * .html', function () {alert ('This is using a regexuals')}) Route.run ()

3. Use the AND technique in JavaScript.

The characteristic of using the & & operator is that if the expression to the left of the operator is false, it will no longer judge the expression to the right of the operator. So:

/ / Instead of writing this: if ($('# elem') .length) {/ / do something} / / You can write this: $('# elem'). Length & & log ("doing something")

4. The is () method is more powerful than you think.

To give a few examples, let's first write a div whose id is elem. The js code is as follows:

/ / First, cache the element into a variable: var elem = $('# elem'); / / Is this a div? Elem.is ('div') & & log ("it's a div"); / / Does it have the bigbox class? Elem.is ('.bigbox') & & log ("it has the bigbox class!"); / / Is it visible? (we are hiding it in this example) elem.is (': not (: visible)') & & log ("it is hidden!"); / / Animating elem.animate ({'width':200}, 1); / / is it animated? Elem.is (': animated') & & log ("it is animated!")

I think it's very good to judge whether it is animation or not.

5. Determine how many elements there are in your web page.

You can determine the number of elements in a web page by using the $("*") .length (); method.

/ / How many elements does your page have? Log ('This page has' + $('*'). Length + 'elementsgiving')

6. Using the length () attribute is cumbersome, so let's use the exist () method.

/ Old way log ($('# elem'). Length = = 1? "exists!": "doesn't exist!"); / / Trickshot: jQuery.fn.exists = function () {return this.length > 0;} log ($('# elem') .exists ()? "exists!": "doesn't exist!")

The 7.jQuery method $() actually has two arguments. Do you know what the second parameter does?

/ / Select an element. The second argument is context to limit the search / / You can use a selector, jQuery object or dom element $('li','#firstList') .each (function () {log ($(this). Html ();}); log (' -'); / / Create an element. The second argument is an / / object with jQuery methods to be called var div = $('', {"class": "bigBlue", "css": {"background-color": "purple"}, "width": 20, "height": 20, "animate": {/ / You can use any jQuery method as a property! "width": 200, "height": 50}}); div.appendTo ('# result')

8. Using jQuery, we can determine whether a link is external, add an icon to a non-external link, and determine how to open it.

The hostname attribute is used here.

The previous tip The next tip Google / / Loop through all the links $('# links a') .each (function () {if (this.hostname! = location.hostname) {/ / The link is external $(this) .append (')

') .attr (' target','_blank');}})

The end () method in 9.jQuery can make your jQuery chain more efficient.

No No No / / Here is how it is used: var breakfast = $('# meals .breakfast') Breakfast.find ('.girls'). Text ('Yes') .end () / / back to breakfast.find (' .toast'). Text ('Yes') .end (). Find ('. Girls'). ToggleClass ('juice coffee'). Text (' Yes') Breakfast.find ('li') .each (function () {log (this.className +':'+ this.textContent)})

10. Maybe you want your web app to feel more native, so you can block contextmenu default events.

/ / Prevent right clicking on this page $(function () {$document) .on ("contextmenu", function (e) {e.preventDefault ();});})

11. Some sites may make your page under a bar, that is, the page we see below is in the iframe tag, and we can solve it this way.

/ / Here is how it is used: if (window! = window.top) {window.top.location = _ window.location;} else {alert ('This page is not displayed in a frame. Open 011.html to see it in action.');}

twelve。 Your inline stylesheet is not set to immutable, as follows:

/ / Make the stylesheet visible and editable $('# regular-style-block') .css ({'display':'block',' white-space':'pre'}) .attr ('contentEditable',true)

This changes the inline style.

13. Sometimes we don't want a part of the page to be selected, such as copy and paste, we can do this:

In certain situations you might want to prevent text on the page from being selectable. Try selecting this text and hit view source to see how it is done.

/ / Prevent text from being selected $(function () {$('p.descr'). Attr (' unselectable', 'on') .css (' user-select', 'none') .on (' selectstart', false);})

In this way, the content cannot be selected.

14. Introducing jQuery from CDN can improve the performance of our website, and it's a good idea to introduce a version of * *.

Four different approaches are described below.

15. Ensure minimal DOM operations.

We know that js manipulating DOM is a waste of resources, so let's take a look at the following example.

CODE / / Bad / / var elem = $('# elem'); / / for (var I = 0; I < 100; iTunes +) {/ / elem.append ('element' + iTunes') {/ / elem.append ('element' + iTunes'); / /} / / Good var elem = $('# elem'), arr = []; for (var I = 0; I < 100; iTunes +) {arr.push ('element' + iTunes');} elem.append (arr.join ('))

16. More convenient decomposition of URL.

Maybe you will use regular expressions to parse URL, but this is definitely not a good way, we can borrow the a tag to implement it.

/ / You want to parse this address into parts: var url = 'http://tutorialzine.com/books/jquery-trickshots?trick=12#comments'; / / The trickshot: var a = $('', {href: url}); log ('Host name:' + a.prop ('hostname')); log (' Path:'+ a.prop ('pathname')); log (' Query:'+ a.prop ('search')); log (' Protocol:'+ a.prop ('protocol')) Log ('Hash:' + a.prop ('hash'))

17. Don't be afraid to use vanilla.js.

/ / Print the IDs of all LI items $('# colors li') .each (function () {/ / Access the ID directly, instead / / of using jQuery's $(this) .attr ('id') log (this.id);})

18. Change your selector

/ / Let's try some benchmarks! Var iterations = 10000, I; timer ('Fancy'); for (iTun0; I < iterations; iTunes +) {/ / This falls back to a SLOW JavaScript dom traversal $(' # peanutButter div:first');} timer_result ('Fancy'); timer (' Parent-child'); for (iTun0; I < iterations; iTunes +) {/ / Better, but still slow $('# peanutButter div');} timer_result ('Parent-child') Timer ('Parent-child by class'); for (iTun0; I < iterations; item+) {/ / Some browsers are a bit faster on this one $(' # peanutButter .jellyTime')

19. Cache your selector.

/ / Bad: / / $('# pancakes li'). Eq (0). Remove (); / / $('# pancakes li'). Eq (1). Remove (); / / $('# pancakes li'). Eq (2). Remove (); / / Good: var pancakes = $('# pancakes li'); pancakes.eq (0). Remove (); pancakes.eq (1). Remove (); pancakes.eq (2). Remove () / / Alternatively: / / pancakes.eq (0) .remove () .end () / / .eq (1) .remove () .end () / / .eq (2) .remove () .end ()

20. Only once is defined for duplicate functions

If you pursue higher performance of your code, you must be careful when setting up event listeners. It is a good idea to define a function only once and pass its name as an event handler.

$(document) .ready (function () {function showMenu () {alert ('Showing menutes'); / / Doing something complex here} $('# menuButton') .click (showMenu); $('# menuLink') .click (showMenu);})

21. Treat jQuery objects like arrays

Because the jQuery object has an index value and length, this means that we can treat the object as a normal array. This will also have better performance.

Var arr = $('li'), iterations = 1000000; timer (' Native Loop'); for (var zodiac x 1000) {/ / The button has been held pressed / / for more than a second. Turn off / / the temp events $('button'). Off (' .temp'); alert ('The .temp events were clearances');})

thirty-one。 Block default event behavior faster.

We know that the preventDefault () method can be used in js to block the default behavior, but jQuery provides an easier way to do this. As follows:

Go ToGoogle $('# goToGoogle') .click (false)

thirty-two。 Use event.result to link multiple event handlers.

It is not common to bind multiple event handlers to an element, and it is more possible to associate multiple event handlers with event.result. Look at the following example.

Click var press = $('# press'); press.on ('click',function () {return' Hip';}); / / The second event listener has access / / to what was returned from the first press.on ('click',function (e) {console.log (e.result +' hopper');})

This way, the console will output Hip Hop!

thirty-three。 Create events that you are used to.

You can use the on () method to create the name of your favorite event and then trigger it through trigger. Examples are as follows:

Jump Punch Click Clear var button1 = $('# button1'), button2 = $('# button2'), button3 = $('# button3'), clear = $('# clear'), div = $('# eventDiv'); div.on ({jump: function () {alert ('jumpedaling');}, punch: function (eCommerce data) {alert ('Punched' + datakeeper data) }, click: function () {alert ('Simulated clickers');}}); button1.click (function () {div.trigger ('jump');}); button2.click (function () {/ / Pass data along with the event div.trigger (' punch', ['hard']);}); button3.click (function () {div.trigger (' click');}) Clear.click (function () {/ / some clear code})

thirty-four。 Displays the file size next to the download file.

Do you know how to get the size of a file by sending an ajax request header without downloading a file? It's easy to use jQuery.

First Trickshot This Trickshot Ball.png / / Loop all .fetchSize links $('a.fetchSize') .each (function () {/ / Issue an AJAX HEAD request for each one var link = this $.ajax ({type: 'HEAD', url: link.href, complete: function (xhr) {/ / Append the filesize to each $(link) .append (' ('+ humanize (xhr.getResponseHeader ('Content-Length')) +');});}) Function humanize (size) {var units = ['bytes','KB','MB','GB','TB','PB']; var ord = Math.floor (Math.log (size) / Math.log (1024)); ord = Math.min (Math.max (0jord), units.length-1); var s = Math.round ((size / Math.pow (1024jord)) * 100) / 100; return s +' + units [ord] }

Note: this example of how to directly use the browser is not available, you must use the local web server to open and run.

thirty-five。 Use delay to simplify your Ajax request

Deferreds is a powerful tool. JQuery returns a deferred object for each Ajax request. The deferred.done () method accepts one or more parameters, all of which can be a single function or an array of functions. DoneCallbacks is called when the Deferred (delay) is resolved. Callbacks are executed in the order in which they are added. Once deferred.done () returns a Deferred object, Deferred can link to other deferred objects, including adding an additional .done () method. This will make your code easier to read:

/ / This is equivalent to passing a callback as the / / second argument (executed on success): $.get ('assets/misc/1.json') .done (function (r) {log (r.message);}); / / Requesting a file that does not exist. This will trigger / / the failure response. To handle it, you would normally have to / / use the full $.ajax method and pass it as a failure callback, / / but with deferreds you can can simply use the fail method: $.get ('assets/misc/non-existing.json') .fail (function (r) {log (' Oops! The second ajax request was "'+ r.statusText +'" (error'+ r.status +')!');})

thirty-six。 Run multiple Ajax requests in parallel.

When we need to send multiple Ajax requests, instead of waiting for one to be sent before sending the next, we can send them in parallel to speed up the sending of Ajax requests.

/ / The trick is in the $.when () function: $.when ($.get ('assets/misc/1.json'), $.get (' assets/misc/2.json')). Then (function (R1, R2) {log (R1 [0] .message + "+ R2 [0] .message);})

thirty-seven。 Obtain ip through jQuery

We can not only ping to the ip of a website on the computer, but also get it through jQuery.

$.get ('http://jsonip.com/', function (r) {log (r.ip);}); / / For older browsers, which don't support CORS / / $.getJSON (' http://jsonip.com/?callback=?', function (r) {log (r.ip);})

thirty-eight。 Use the simplest ajax request

JQuery (using ajax) provides a shorthand way to quickly download content and add it to an element.

Var contentDivs = $('.content'); / / Fetch the contents of a text file: contentDivs.eq (0). Load ('1.txt'); / / Fetch the contents of a HTML file, and display a specific element: contentDivs.eq (1) .load (' 1.html # header')

thirty-nine。 Serialize object

JQuery provides a way to serialize form values and general objects into URL-encoded text strings. In this way, we can pass the serialized value to ajax () as a parameter to url, and we can easily submit the form using ajax ().

First name: Last name: / / Turn all form fields into a URL friendly key/value string. / / This can be passed as argument of AJAX requests, or URLs. $(document) .ready (function () {console.log ($("form"). Serialize ()); / / FirstName=Bill&LastName=Gates}); / / You can also encode your own objects with the $.param method: log ($.param ({'pet':'cat',' name':'snowbell'})); will it help you to finish reading the above? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.