Home PC Games Linux Windows Database Network Programming Server Mobile  
           
  Home \ Programming \ jQuery update the content and method of use 3.0     - Ubuntu 14.04, 13.10 install OpenCV 2.4.9 (Linux)

- Apache Kafka: the next generation of distributed messaging system (Server)

- Redis-2.8.17 installation and configuration process some errors (Linux)

- The strings in Python reside (Programming)

- SQL Beginner Guide (Database)

- Django Web dynamic three linkage (Programming)

- IBM Data Studio to use ---- window displays all rows (Database)

- The file name is garbled or deleted files with special characters under Linux (Linux)

- Linux protobuf-c (Linux)

- Ubuntu and derivative system users how to install Pinta 1.5 (Linux)

- Shell for loop (Programming)

- A well-known but rarely used skills: object pool (Programming)

- DELL D630 Wireless LAN Driver Installation CentOS6 (Linux)

- After installation of Debian 6.0 do a few things first (Linux)

- Linux AS4 VPN server in conjunction with a firewall perfect (Linux)

- Debian 8 Jessie install LAMP server tutorial (Server)

- Digital jQuery scrolling effect (Programming)

- Ubuntu will be written in a command file, executable file, source command (Linux)

- Write perfect printf (Programming)

- Examples of Exploration Class File (Programming)

 
         
  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:      
 
- Build a super simple "hardware" firewall router (Linux)
- LAN in Ubuntu shared folders to Windows (Linux)
- ASM Disk Space Check (Database)
- 10 easy to use Linux utilities Recommended (Linux)
- RHEL6 install Python and other packages from source (Linux)
- General Linux interface server parameter tuning (Server)
- Swift 2.0 brief (Linux)
- Briefly explain the invasion of the four-level denial of service attack DoS Linux server (Linux)
- Android Qemu GPS module (Programming)
- Android using SVG vector graphics to create cool animation effects (Programming)
- Linux use chattr and lsattr commands to manage file and directory attributes (Linux)
- Linux find command detailing (Linux)
- Linux variable learning experience (Linux)
- Setting Squid successful anti-hotlinking (Linux)
- Turning off the interface eth0: error: Disconnect the device 'eth0' (Linux)
- Shell programming entry (Programming)
- Use the DBMS_SCHEDULER package to manage scheduled tasks (Database)
- IBM Data Studio to use ---- window displays all rows (Database)
- Two classic macro definition under Linux (Linux)
- sed command (Linux)
     
           
     
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.