Home PC Games Linux Windows Database Network Programming Server Mobile  
           
  Home \ Programming \ jQuery update the content and method of use 3.0     - C ++ based socket communication TCP and UDP (Programming)

- Install and manage Java under mac (Linux)

- Hive handle count distinct inclination to produce data processing (Database)

- MySQL my.cnf sql_mode schema modifications (Database)

- Compiled version of Android Opus audio codec library method (Programming)

- jobs command example (Linux)

- Ubuntu 14.04 / 13.10 users how to install Ubuntu Touch core applications (Linux)

- Linux Operating System Security Study (Linux)

- Oracle 11g 10g induced into error (Database)

- Spark parquet merge metadata problem (Server)

- The basic method RHEL6 (CentOS6) used in the source package compiled RPM: Upgrade OpenSSH articles (Linux)

- Linux, Apache Web site security settings (Linux)

- Linux operating system, the internal and external security overview (Linux)

- Docker study notes (Server)

- Java reflection Introduction (Programming)

- Node.js development environment deployment (Server)

- Ubuntu install Scala 2.10.x version (Linux)

- 25 Git Advanced Skills (Linux)

- Linux cd command Detailed (Linux)

- How to set cache valid time in Apache (Server)

 
         
  jQuery update the content and method of use 3.0
     
  Add Date : 2018-11-21      
         
         
         
 

This article is part of Microsoft's Web development from a series of articles. Thank you for your support to make this possible SitePoint partners.

jQuery, is by far the world's most popular JavaScript library, it has been our Web developers these artifacts. Since it released the original version in 2006 until now, there have been a lot of Web developers introduced this excellent library in the project to make development easier.

Show and hide

The main change is how the function works. And there is good reason to do so. On realized earlier, hide () function to set the css property to display: none , show () function is to remove this property. But doing some confusion. Let's look at a few examples:

.

1 if and when show () function attempts to set up a node for display: block and in another style sheet to achieve a display: inline property, which will begin to break the code.

.

2 medium when we deal with responsive web design (RWD), we may use the display or visibility change the node visibility. This may affect the show () and hide () function.

In addition to these, there are many other questions JQuery team had to repair. This has led to complex implementation and performance issues, so they moved to a simple model.

In the future, if you set the display: none and use the show () , slideDown () , fadeIn () or similar methods to display node, it does not effective. A better approach is to use addClass () and removeClass () control display. Or may be ready () &ldquo call when the call on the element; hide () .

prompt For example:

< html >
    < head >
    < style >
       . invisible {
            display: none;
       }
        .visible {
            background-color: deepskyblue;
            display: block;
       }
    < / style >
    < script src = "jquery-3.0.0-alpha1.js" > < / script >
    < script >
        $ (document) .ready (function () {
            $ ( "# div1") addClass ( "invisible");.
           . $ ( "# toggle") click (function () {
                $ ( "# div1") removeClass ( "visible");.
                $ ( "# div1") addClass ( "invisible");.
           });
       });
    < / script >
    < title > Control Visibility < / title >
    < / head >
    < body >
        < p > Hello
        < div id = "div1" > Can you see this
        < button id = "toggle" > Click me < / button >
    < / body >   < / html >

data ()  . Key naming

jQuery team changed the .data () function to achieve more consistent with HTML5 data set specification. If data- * attribute contains the key number that will no longer participate in the conversion. Consider the following example:

Use jQuery 2.1.4:

console window does not display the object.

Use jQuery 3.0.0:

Now that is converted to digital will not participate in camel spelling, key has been translated into foo-42-name. So we got the console output. The fiddle is the URL   http: //jsfiddle.net/nWCKt/25/. You can change the   jQuery version to observe the changes.

Similarly, if we want without any parameters using data () to display all of the data, if the data- * attribute key name in the hyphen (-) followed by a number, then the number of parameters will also be jQuery change in both versions, like the example above.

width () and height ()   function returns a decimal value

Some browsers will return the width and height of the sub-pixel values. Now regardless of whether the browser supports, jQuery's   .width () ,. height () ,. css ( "width") may return a decimal value. In order to use the sub-pixel accuracy to design web users, this might be a good news.

. Load () ,. unload (), and .error () function is removed

These methods have been deprecated earlier, and now it has been removed from jQuery 3.0.0 alpha version. The recommended method is to use .on () function to handle these events. Short example:

HTML:

< img src = "space-needle.png" alt = "Space Needle" id = "spacen" >

JavaScript:

Earlier implementations (now unavailable)

$ ( "#spacen") .load (function () {
  // Handler implementation
});

Recommended implementation:

$ ( "#spacen") .on ( "load", function () {
  // Handler implementation
});

jQuery objects can now be traversed

You can now traverse the jQuery object, use the ES2015 for-of. So, you can use something like this:

for (node of $ ( "< div id = spacen >")) {
    console.log (node.id); // Returns ‘ spacen ’
}

(source in this)

jQuery animations are now in the backend using   requestAnimationFrame API

All modern browsers already support requestAnimationFrame (see: http: //caniuse.com/#search=requestAnimationFrame) a. Since it is generally supported, jQuery will use this API to perform the animation. Its advantages include smoother animation and less CPU usage (and therefore, you can save power on your phone).

Enhanced .unwrap ()   function

  .unwrap () function allows you to delete the specified elements in the DOM parent element, not previously received parameters. If someone wants to unwrap a set condition, which could be a problem.

In jQuery 3.0.0 alpha in, .unwrap () can receive   jQuery selector as an argument to deal with this problem.

jQuery.Deferred upgraded Promises / A + compatible

Promiseis is the end result of an asynchronous operation - - it is an object that promises to deliver results in the future.   main interface and promise way then method, which registered a callback function. Now, to complete the work asynchronously in JavaScript using Promise becoming increasingly popular. Promises / A + is a compatible open standard JavaScript promises of. (For more information, you can check the link: https://promisesaplus.com/)

From the jQuery reference document, Deferred object is a link practical objects created by jQuery.Deferred () method. It can register multiple callback functions into the callback queue, the queue scheduling, synchronous or asynchronous method to update any success and failure status. In jquery 3.0.0, the upgrade to be compatible with the object jQuery.Deferred Promises / A + and ES2015 Promises. This is the main change .then () method.

better handle error conditions

This version of jQuery to better handle errors - - request error has been neglected in the past, now version will throw an error.

For example: taking into account the offset, you want to get the coordinates of the first element of the current, relative to the document, it is necessary to match the elements of the collection. If you are trying in earlier versions of jQuery find the offset window (window), you'll get {top:   0,   left:   0} such a result, instead of throwing an error, because the offset window (window) is meaningless. In the 3.0 alpha version, it will throw an error.

Another example: $ ( "#")   will now throw an error instead of returning a collection of size zero.

custom selectors (such as : visible ) has been accelerated

When: visible like the selectors used multiple times within a document, the performance has been greatly improved. Its interior is achieved by caching - - first used this selector, the result is the same return later. But then every call to return results very quickly, because the cache worked. From jQuery's Timmy Willison pointed out in a report after using the cache: visible selector 17 times performance improvement.

These are some of the major updates. The entire list on their official blog: http:. //blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

where to download the latest version

There are two versions:

      jQuery 3.0, which supports modern browsers: https: //code.jquery.com/jquery-3.0.0-alpha1.js   jQuery Compat 3.0, which includes support for IE8's: https: //code.jquery.com/jquery-compat-3.0.0-alpha1.js

    You can also obtain from the npm:

    npm install jquery@3.0.0-alpha1
    npm install jquery-compat@3.0.0-alpha1

    Although this alpha version to try it, and then can go to https://github.com/jquery/jquery  feedback problems. It's worth a try!

    Practice

    more Web development

    This article is Microsoft evangelists and engineers in the actual learning JavaScript in a series of articles, best practices, and open source projects including Microsoft's interoperability Edge browser and the new Edge HTML rendering engine.

    We encourage you to test across browsers and devices, including Microsoft's Edge - - the default browser Win10 system - - on dev.microsoftedge.com free testing tools:

    Scan outdated library, layout issues, and accessibility of your Web site. Free download Mac, Linux and Windows virtual machine operating systems. Cross-platform browser to check the network status, including Microsoft's Edge. On your own equipment Edge remote testing.

    to get a better understanding of where our engineers and welfare of the list below:

    Interoperability Best Practices   (series):

    How to Avoid browser detection

    CSS prefix Best Practice

    frame holding JS & Library Latest

    Construction of free extension page experience

    Coding laboratory

    on: cross-browser testing, and best practices

    Oh wow, I can just Mac and Linux above test Edge  ! (From Rey Bango)

    without breaking pages advanced JavaScript   (from Christian Heilmann)

    Use WebGL 3D rendering   (from David Catuhe)

    web application and web platform innovations   (from Kiril Seksenov)

    Our community open source projects:

    vorlon.JS   (cross-device remote JavaScript test) manifoldJS   (deploy cross-platform web applications hosted) babylonJS   (3D graphics more adept)

    More free tools and web development background gadgets:

    Visual Studio Code   (lightweight code editor, can be used with Mac, Linux and Windows) Visual Studio Dev Essentials   (for free, the benefits of exercise based on a subscription model and cloud) Use licensed use of the Azure Cloud node.JS code  

     
         
         
         
  More:      
 
- Ubuntu 32 compile Android 4.0.4 Problems (Linux)
- Parameters of the extra port MySQL 5.6 (Database)
- Tecplot Installation under Linux (Linux)
- Upload the project to GitHub, synchronous remote repository Github (Linux)
- ORA-4031 error Solution (Database)
- Linux security settings Notes (Linux)
- GAMIT10.5 under CentOS installation (Linux)
- ctop: monitor container performance Linux command line artifact (Linux)
- Java threads and thread pools (Programming)
- To explore the caching mechanism for Android ListView (Programming)
- C ++ inheritance and derived (induction principle) (Programming)
- The Zabbix2.4.5 source compiler installation under Ubuntu 14.04 (Server)
- Install the latest Pinta graphics editing software on Ubuntu 14.04 (Linux)
- Linux System Getting Started Tutorial: How to update outdated version of Ubuntu (Linux)
- Java code JIT compiler-friendly Mody (Programming)
- CentOS6 installation configuration rsh (Server)
- Automatic and Manual Proxy Settings Switch GNOME Shell Extension Proxy Switcher Recommend (Linux)
- PostgreSQL query lock and kill the process (Database)
- Bash added to the Vi mode indicator (Linux)
- Tomcat installation under Linux (Server)
     
           
     
  CopyRight 2002-2020 newfreesoft.com, All Rights Reserved.