Home PC Games Linux Windows Database Network Programming Server Mobile  
  Home \ Programming \ jQuery update the content and method of use 3.0     - Help you make Git Bisect (Linux)

- How to upgrade Docker 1.6 on Fedora / CentOS (Server)

- How to make Linux a non-root user uses less than 1024 ports (Linux)

- Forwarding module with Apache reverse proxy server (Server)

- Ubuntu 14.10 / 14.04 / 12.04 How to install Kodi 14.0 RC3 (Linux)

- Linux Thread Synchronization (Programming)

- Install apr support for Tomcat on Linux (Server)

- Ubuntu rights management common commands (Linux)

- State and Linux nf_conntrack TCP disconnect time (Programming)

- Using LLVM Clang and Blocks under Linux (Programming)

- Analysis of MySQL High Availability (Database)

- Percona MySQL 5.6 semi-synchronous replication (Database)

- GAMIT10.5 install and update failed Solution (Linux)

- SUSE Firewall Configuration (Linux)

- Inject script commands manually annotated summary (Linux)

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

- Puppet Detailed centralized configuration management system (Server)

- Debian SSD ext4 4K aligned (Linux)

- UNIX file permissions in the "set user ID bit" (Linux)

- Delete specific files using bash directory under Linux (Linux)

  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:


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


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!


    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  

- MySQL Installation Troubleshooting (Database)
- How to configure MongoDB replica set (Database)
- Oracle bug Ora-04043 (Database)
- Ubuntu 14.10 install KDE Plasma 5.2 (Linux)
- Linux environment variables inside (Linux)
- Apache Spark1.1.0 deployment and development environment to build (Server)
- blecat: Bluetooth Gadgets (Linux)
- Android gets the global process information and the memory used by the process (Programming)
- Bash common several configuration files (Linux)
- MySQL Data Types (Database)
- Autojump: an advanced cd command in the Linux file system fast navigation (Linux)
- To install Scribus 1.4.4 under ubuntu (Linux)
- Python MySQL database connection (Database)
- MyEclipse configuration necessary (Linux)
- Install Ruby on Rails in Ubuntu 15.04 in (Linux)
- ORA-00020: No more process state objects available (Database)
- TCP protocol flaw incomplete records (Linux)
- Linux operating system, the internal and external security overview (Linux)
- MySQL binary packages install for RedHat Linux Enterprise 6.4 (Database)
- Use Linux built-in firewall to improve network access control (Linux)
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.