Home PC Games Linux Windows Database Network Programming Server Mobile  
  Home \ Programming \ jQuery update the content and method of use 3.0     - Openfire Hazelcast cluster Detailed (Server)

- Linux protobuf-c (Linux)

- Briefly explain the invasion of the four-level denial of service attack DoS Linux server (Linux)

- A deep understanding of Java enum (Programming)

- 10 important Linux ps command combat (Linux)

- Log4j configuration file Explanation (Linux)

- Construction LVM-based raw device Oracle10g Database on Oracle Linux 5.11 (Database)

- PULL operation mechanism parsing XML Comments (Programming)

- Ubuntu arm-none-eabi-gcc compiler treated with STM32F10x (Linux)

- Two strokes to improve development productivity Struts2 (Programming)

- Method under Linux GCC Compiler shared library function export control (Programming)

- Java 8 perspective annotation types (Programming)

- 2016, the new Node project Precautions (Programming)

- How to handle special characters in JSON (Programming)

- How to track performance issues when using the Unity Game Development Android (Programming)

- Experts teach you how to identify the actual functional differences between the firewall (Linux)

- Camera-based face recognition OpenCV crawl and storage format (Python) (Linux)

- Analysis examples: Intrusion Response Linux platform Case (Linux)

- Commentary Apache + Tomcat + JK implement Tomcat clustering and load (Server)

- Use the dd command to the hard disk I / O performance test (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  

- Nonstandard IMP-00010 error processing one case (Database)
- Character Encoding notes: ASCII, Unicode and UTF-8 (Linux)
- Linux system security check notes on performance (Linux)
- How to use Android Studio to play more package names APK (Programming)
- To install Oracle Database Details and FAQ Summary under CentOS (Database)
- error no.2013 lost connection Tom with SQLServer during query (Database)
- Node.js installed on Ubuntu Upstream version (Linux)
- ORA-12547: TNS: lost contact error Solution (Database)
- To install the Ubuntu Touch emulator on Ubuntu (Linux)
- Ubuntu uses under KVM + Qemu virtual machine build (Linux)
- When Linux Detailed time zone and common function of time (Linux)
- CentOS 7 Add yum source (Linux)
- How to run Docker client in Windows operating system (Linux)
- How to protect your eyes automatically adjust the screen brightness on Linux (Linux)
- Laravel 4 Expansion Pack (Server)
- Using C ++ Container Templates in Shared Memory (Programming)
- How to configure Ceph stored on CentOS 7.0 (Server)
- Eclipse 3.7.2 can not start solving under Ubuntu 14.04 (Linux)
- Linux tool curl and wget advanced use (Linux)
- Spring + Log4j + ActiveMQ remote logging - Analysis of combat (Server)
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.