Giter VIP home page Giter VIP logo

jquery's Introduction

jQuery — New Wave JavaScript

Meetings are currently held on the matrix.org platform.

Meeting minutes can be found at meetings.jquery.org.

Contribution Guides

In the spirit of open source software development, jQuery always encourages community code contribution. To help you get started and before you jump into writing code, be sure to read these important contribution guidelines thoroughly:

  1. Getting Involved
  2. Core Style Guide
  3. Writing Code for jQuery Projects

References to issues/PRs

GitHub issues/PRs are usually referenced via gh-NUMBER, where NUMBER is the numerical ID of the issue/PR. You can find such an issue/PR under https://github.com/jquery/jquery/issues/NUMBER.

jQuery has used a different bug tracker - based on Trac - in the past, available under bugs.jquery.com. It is being kept in read only mode so that referring to past discussions is possible. When jQuery source references one of those issues, it uses the pattern trac-NUMBER, where NUMBER is the numerical ID of the issue. You can find such an issue under https://bugs.jquery.com/ticket/NUMBER.

Environments in which to use jQuery

  • Browser support
  • jQuery also supports Node, browser extensions, and other non-browser environments.

What you need to build your own jQuery

To build jQuery, you need to have the latest Node.js/npm and git 1.7 or later. Earlier versions might work, but are not supported.

For Windows, you have to download and install git and Node.js.

macOS users should install Homebrew. Once Homebrew is installed, run brew install git to install git, and brew install node to install Node.js.

Linux/BSD users should use their appropriate package managers to install git and Node.js, or build from source if you swing that way. Easy-peasy.

How to build your own jQuery

First, clone the jQuery git repo.

Then, enter the jquery directory, install dependencies, and run the build script:

cd jquery
npm install
npm run build

The built version of jQuery will be placed in the dist/ directory, along with a minified copy and associated map file.

Build all jQuery release files

To build all variants of jQuery, run the following command:

npm run build:all

This will create all of the variants that jQuery includes in a release, including jquery.js, jquery.slim.js, jquery.module.js, and jquery.slim.module.js along their associated minified files and sourcemaps.

jquery.module.js and jquery.slim.module.js are ECMAScript modules that export jQuery and $ as named exports are placed in the dist-module/ directory rather than the dist/ directory.

Building a Custom jQuery

The build script can be used to create a custom version of jQuery that includes only the modules you need.

Any module may be excluded except for core. When excluding selector, it is not removed but replaced with a small wrapper around native querySelectorAll (see below for more information).

Build Script Help

To see the full list of available options for the build script, run the following:

npm run build -- --help

Modules

To exclude a module, pass its path relative to the src folder (without the .js extension) to the --exclude option. When using the --include option, the default includes are dropped and a build is created with only those modules.

Some example modules that can be excluded or included are:

  • ajax: All AJAX functionality: $.ajax(), $.get(), $.post(), $.ajaxSetup(), .load(), transports, and ajax event shorthands such as .ajaxStart().

  • ajax/xhr: The XMLHTTPRequest AJAX transport only.

  • ajax/script: The <script> AJAX transport only; used to retrieve scripts.

  • ajax/jsonp: The JSONP AJAX transport only; depends on the ajax/script transport.

  • css: The .css() method. Also removes all modules depending on css (including effects, dimensions, and offset).

  • css/showHide: Non-animated .show(), .hide() and .toggle(); can be excluded if you use classes or explicit .css() calls to set the display property. Also removes the effects module.

  • deprecated: Methods documented as deprecated but not yet removed.

  • dimensions: The .width() and .height() methods, including inner- and outer- variations.

  • effects: The .animate() method and its shorthands such as .slideUp() or .hide("slow").

  • event: The .on() and .off() methods and all event functionality.

  • event/trigger: The .trigger() and .triggerHandler() methods.

  • offset: The .offset(), .position(), .offsetParent(), .scrollLeft(), and .scrollTop() methods.

  • wrap: The .wrap(), .wrapAll(), .wrapInner(), and .unwrap() methods.

  • core/ready: Exclude the ready module if you place your scripts at the end of the body. Any ready callbacks bound with jQuery() will simply be called immediately. However, jQuery(document).ready() will not be a function and .on("ready", ...) or similar will not be triggered.

  • deferred: Exclude jQuery.Deferred. This also excludes all modules that rely on Deferred, including ajax, effects, and queue, but replaces core/ready with core/ready-no-deferred.

  • exports/global: Exclude the attachment of global jQuery variables ($ and jQuery) to the window.

  • exports/amd: Exclude the AMD definition.

  • selector: The full jQuery selector engine. When this module is excluded, it is replaced with a rudimentary selector engine based on the browser's querySelectorAll method that does not support jQuery selector extensions or enhanced semantics. See the selector-native.js file for details.

Note: Excluding the full selector module will also exclude all jQuery selector extensions (such as effects/animatedSelector and css/hiddenVisibleSelectors).

AMD name

You can set the module name for jQuery's AMD definition. By default, it is set to "jquery", which plays nicely with plugins and third-party libraries, but there may be cases where you'd like to change this. Pass it to the --amd parameter:

npm run build -- --amd="custom-name"

Or, to define anonymously, leave the name blank.

npm run build -- --amd
File name and directory

The default name for the built jQuery file is jquery.js; it is placed under the dist/ directory. It's possible to change the file name using --filename and the directory using --dir. --dir is relative to the project root.

npm run build -- --slim --filename="jquery.slim.js" --dir="/tmp"

This would create a slim version of jQuery and place it under tmp/jquery.slim.js.

ECMAScript Module (ESM) mode

By default, jQuery generates a regular script JavaScript file. You can also generate an ECMAScript module exporting jQuery as the default export using the --esm parameter:

npm run build -- --filename=jquery.module.js --esm
Factory mode

By default, jQuery depends on a global window. For environments that don't have one, you can generate a factory build that exposes a function accepting window as a parameter that you can provide externally (see README of the published package for usage instructions). You can generate such a factory using the --factory parameter:

npm run build -- --filename=jquery.factory.js --factory

This option can be mixed with others like --esm or --slim:

npm run build -- --filename=jquery.factory.slim.module.js --factory --esm --slim --dir="/dist-module"

Custom Build Examples

Create a custom build using npm run build, listing the modules to be excluded. Excluding a top-level module also excludes its corresponding directory of modules.

Exclude all ajax functionality:

npm run build -- --exclude=ajax

Excluding css removes modules depending on CSS: effects, offset, dimensions.

npm run build -- --exclude=css

Exclude a bunch of modules (-e is an alias for --exclude):

npm run build -- -e ajax/jsonp -e css -e deprecated -e dimensions -e effects -e offset -e wrap

There is a special alias to generate a build with the same configuration as the official jQuery Slim build:

npm run build -- --filename=jquery.slim.js --slim

Or, to create the slim build as an esm module:

npm run build -- --filename=jquery.slim.module.js --slim --esm

Non-official custom builds are not regularly tested. Use them at your own risk.

Running the Unit Tests

Make sure you have the necessary dependencies:

npm install

Start npm start to auto-build jQuery as you work:

npm start

Run the unit tests with a local server that supports PHP. Ensure that you run the site from the root directory, not the "test" directory. No database is required. Pre-configured php local servers are available for Windows and Mac. Here are some options:

Essential Git

As the source code is handled by the Git version control system, it's useful to know some features used.

Cleaning

If you want to purge your working directory back to the status of upstream, the following commands can be used (remember everything you've worked on is gone after these):

git reset --hard upstream/main
git clean -fdx

Rebasing

For feature/topic branches, you should always use the --rebase flag to git pull, or if you are usually handling many temporary "to be in a github pull request" branches, run the following to automate this:

git config branch.autosetuprebase local

(see man git-config for more information)

Handling merge conflicts

If you're getting merge conflicts when merging, instead of editing the conflicted files manually, you can use the feature git mergetool. Even though the default tool xxdiff looks awful/old, it's rather useful.

The following are some commands that can be used there:

  • Ctrl + Alt + M - automerge as much as possible
  • b - jump to next merge conflict
  • s - change the order of the conflicted lines
  • u - undo a merge
  • left mouse button - mark a block to be the winner
  • middle mouse button - mark a line to be the winner
  • Ctrl + S - save
  • Ctrl + Q - quit

QUnit Reference

Test methods

expect( numAssertions );
stop();
start();

Note: QUnit's eventual addition of an argument to stop/start is ignored in this test suite so that start and stop can be passed as callbacks without worrying about their parameters.

Test assertions

ok( value, [message] );
equal( actual, expected, [message] );
notEqual( actual, expected, [message] );
deepEqual( actual, expected, [message] );
notDeepEqual( actual, expected, [message] );
strictEqual( actual, expected, [message] );
notStrictEqual( actual, expected, [message] );
throws( block, [expected], [message] );

Test Suite Convenience Methods Reference (See test/data/testinit.js)

Returns an array of elements with the given IDs

q( ... );

Example:

q("main", "foo", "bar");

=> [ div#main, span#foo, input#bar ]

Asserts that a selection matches the given IDs

t( testName, selector, [ "array", "of", "ids" ] );

Example:

t("Check for something", "//[a]", ["foo", "bar"]);

Fires a native DOM event without going through jQuery

fireNative( node, eventType )

Example:

fireNative( jQuery("#elem")[0], "click" );

Add random number to url to stop caching

url( "some/url" );

Example:

url("index.html");

=> "data/index.html?10538358428943"


url("mock.php?foo=bar");

=> "data/mock.php?foo=bar&10538358345554"

Run tests in an iframe

Some tests may require a document other than the standard test fixture, and these can be run in a separate iframe. The actual test code and assertions remain in jQuery's main test files; only the minimal test fixture markup and setup code should be placed in the iframe file.

testIframe( testName, fileName,
  function testCallback(
      assert, jQuery, window, document,
	  [ additional args ] ) {
	...
  } );

This loads a page, constructing a url with fileName "./data/" + fileName. The iframed page determines when the callback occurs in the test by including the "/test/data/iframeTest.js" script and calling startIframeTest( [ additional args ] ) when appropriate. Often this will be after either document ready or window.onload fires.

The testCallback receives the QUnit assert object created by testIframe for this test, followed by the global jQuery, window, and document from the iframe. If the iframe code passes any arguments to startIframeTest, they follow the document argument.

Questions?

If you have any questions, please feel free to ask on the Developing jQuery Core forum or in #jquery on libera.

jquery's People

Contributors

azatoth avatar brandonaaron avatar cowboy avatar csnover avatar danheberden avatar davids549 avatar dependabot[bot] avatar dmethvin avatar elijahmanor avatar flesler avatar gibson042 avatar gnarf avatar jbedard avatar jboesch avatar jeresig avatar jitter avatar jzaefferer avatar krinkle avatar kswedberg avatar louisremi avatar malsup avatar markelog avatar mathiasbynens avatar mgol avatar mikesherov avatar rkatic avatar rwaldron avatar scottgonzalez avatar timmywil avatar wycats avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery's Issues

Inconsistent behavior when passing bools to html method

In all versions of jquery after 1.8.3 calling the html method with trueor false produces two different behaviors. If you look at the this test case you will see that there are two <p> elements having their html set with html(true) and html(false). That test case uses the latest 2.x version of jQuery. We see the same behavior in this test case using the latest 1.x version of jQuery. Following the version backwards we can see the following:

Version 1.8.3 test case -- neither of the html calls write anything to the elements.
Version 1.9.1(and all future versions) test case -- calling html with true writes true to the element while calling with false writes nothing.

While this is not a serious issue, it would be preferable for the html method to act the same for both boolean values. While the 1.8.3 behavior wrote nothing, it was at least consistent for both true and false. It seems to me that html should either go back to writing nothing in both cases or writing "true" for true(as it does now) and "false" for false.

This behavior was tested on Chome 37.0.2062.124, Safari 7.0.6 (9537.78.2), and Firefox 32.0.3 and identical behavior was seen in all three browsers.

IE9 ajax abort on unload requires Event module

http://bugs.jquery.com/ticket/5280

The fix was to put the following

jQuery( window ).on( "unload", function() {
    for ( var key in xhrCallbacks ) {
        xhrCallbacks[ key ]();
    }
});

in xhr.js
However, this makes 'xhr' dependent on 'events' and if you were to create your own custom build with '-events', it will give error on IE9 "... doesn't support property or method 'on'"

IE9 supports window.onbeforeunload. May be we should use that instead.

each error

$.each('rrrrrrr',function(){});

The method should be verified for the parameters;
eg:

if(/\[object Object\]|\[object Array\]/.test(Object.prototype.toString.call(params))){
//todosomething
}

Create $.xhr

Originally reported by @jzaefferer: http://bugs.jquery.com/ticket/14509

From the Amsterdam team meeting:

Create $.xhr which is based on $.ajax but without any of the legacy options (async:false) or things specific for non-xhr (jsonp/script)

Options to keep:

  • beforeSend (expose the native xhr so we can cover the removed xhrFields option)*
  • cache (possibly rename to something like noCache)*
  • data (if not a string: will use default $.param and append to url for GET requests, otherwise * send as * * request body, as today)
  • headers
  • method (aka ‘type’)
  • username
  • password
  • url
  • timeout

Options to remove:

  • accept (use headers)
  • async (use a different method for sync requests)
  • contents (do custom parsing yourself)
  • contentType (use headers)
  • context (use $.proxy)
  • converters (global hash of convertors or do it yourself)
  • crossDomain (non-xhr)
  • dataFilter (do it yourself)
  • dataType (jq will use response’s content-type)
  • global (everything should be consistent)
  • ifModified (make it a plugin)
  • isLocal (expose localProtocols as a global config array instead)
  • jsonp (non-xhr)
  • jsonpCallback (non-xhr)
  • processData (who knows? no one is sending XML documents anymore, right?)
  • scriptCharset (non-xhr)
  • statusCode (handle the responses yourself)
  • mimeType (don’t override stuff)
  • scriptCharset (non-xhr)
  • success/error/complete (legacy)
  • traditional (convert the data option to a string with $.param(.., true) yourself)
  • xhr
  • xhrFields (use beforeSend instead)

As the first step, this would delegate to $.ajax. Eventually it should be possible to build jQuery with just this interface, without any of the other methods like $.get, $.getJSON or even $.ajax.

Chrome 38: jQuery.ajax() fails without calling error/complete handlers when requesting http-url from https-page

When making an ajax-request to a http-url from a page loaded over https, the request is blocked in Chrome 38, but neither the error handler nor the complete handler functions are called.

In Safari 7, the request succeeds (with a warning) and the success and complete handlers are called.
In Firefox 32, the request fails and the error and complete handlers are called.

Example: https://openascent.org/static/ajax-chrome.html

.position on table rows inside a relative div container gives different results based on scroll position

Originally reported by ripdog: http://bugs.jquery.com/ticket/15239

The docs for .position() clearly state that they return the "current position of an element relative to the offset parent." - explicitly not the position based on the viewport. However, .position does report different results based on where it is moved on the page due to scrolling.

Here's a fiddle: http://jsfiddle.net/6g5upsvq/ Click the button, then scroll and click it again. The .offsetTop direct from the DOM stays constant, but .position changes.

Improve API interoperability with standard Promise

Originally reported by @jzaefferer at: http://bugs.jquery.com/ticket/14510

Discussed this at the jQuery team meeting in Amsterdam: The spec is still changing a lot (within whatwg and draft pages on github), so we'll wait for it to ship, unprefixed, not behind a flag, in stable browsers first.

Once that happened, we should change/fix our implementation to match the spec (and shipped implementation).

Can use .pipe() to continue using any jQuery-specific functionality.

width() rounds widths

I'm not 100% sure this is a issue because I can reproduce it starting from jQuery 1.6 and I don't think it could hide itself for so much time. However I noted that width() returns a rounded width of an element, not the "computed width" as asserted by the documentation.

I've created a dummy demo but basically if you set the width of an element to say 10.5px, width() returns 11.

Misleading documentation for toggleClass() method.

The third variation of toggleClass method in documentation is as follows:
.toggleClass( [switch ] )
switch
Type: Boolean
A boolean value to determine whether the class should be added or removed.

It says "the" class, while no particular class is specified, and it toggles all the class names present in the matched elements.

it would be great if the documentation reads the same.

As a side note:

Also, at later point, the docs says:

if no arguments are passed to .toggleClass(), all class names on the element the first time .toggleClass() is called will be toggled.

It would be nice if it is added as the first variant of the method, along with a better description other than "all class names on the element the first time .toggleClass() is called will be toggled"? " Something like "all class names that were present on the element when .toggleClass() is called for the first time will be toggled" will be better IMHO.

Allow objects as event handlers

Originally reported by petka_antonov@… at: http://bugs.jquery.com/ticket/12031

Doing OOP with jQuery events requires a lot of $.proxy boilerplate. the .addEventListener interface allows passing an object as a handler like so:

function SomeWidget( elem ) {
    this.elem = elem;
}

SomeWidget.prototype = {
    constructor: SomeWidget,

```
renderTo: function( target ) {
    $(target).append(this.elem);
    this.elem.addEventListener( "click", this );
    this.elem.addEventListener( "mousemove", this );
},

mousemove: function( e ) {

},

click: function( e ) {

},

handleEvent: function( e ) {
    return this[e.type].apply( this, arguments );
}
```

};

With jQuery you have to do this:

function SomeWidget( elem ) {
    this.elem = elem;
    //Each method needs to be bound to the instance. This also has overhead of creating many functions.
    this.mousemove = $.proxy( this.mousemove, this );
    this.click = $.proxy( this.click, this );
}

SomeWidget.prototype = {
constructor: SomeWidget,

renderTo: function( target ) {
    $(target).append(this.elem);
    $(this.elem).on( {
        click: this.click,
        mousemove: this.mousemove
    });
},

mousemove: function( e ) {

},

click: function( e ) {

}

};


With jQuery supporting objects as event handlers, it would work like:

function SomeWidget( elem ) {
    this.elem = elem;
}

SomeWidget.prototype = {
constructor: SomeWidget,

renderTo: function( target ) {
    $(target).append(this.elem);
    $(this.elem).on( "click mousemove", this );
},

mousemove: function( e ) {

},

click: function( e ) {

},

handleEvent: function( e ) {
    return this[e.type].apply( this, arguments );
}

};


And that's it. No $.proxy hacks, no redundant creation of functions just to retain binding.

Issue reported for jQuery 1.7.2

Fix get alpha opacity in IE8

When setting opacity to an element in IE8+, according to http://www.quirksmode.org/css/opacity.html I can use

.opacity {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}

note that the opacity in IE8 filter is in upper case

but jQuery 1.* currently only support getting the result setted in lower case opacity, like filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

see demo http://jsfiddle.net/c9d5ctfa/ in IE8

Also in MSDN, both upper case and lower case are used in the examples.

My PR: #1704

Move element cache to the element[expando] to avoid cleanup and reduce code.

Originally reported by john.david.dalton@… at: http://bugs.jquery.com/ticket/11570

Soo way back in 2005 Dean Edwards proposed an event system that slapped the listeners on the actual element. This allowed cache to be destroyed once the element was GC'ed.  http://dean.edwards.name/weblog/2005/10/add-event2/

Over the weekend Peter Michaux proposed a similar solution:  https://twitter.com/#!/petermichaux/status/189012245483757568  https://github.com/petermichaux/evento/blob/bd065a9b254a8d14b956ec438dc06c29622c3ef6/src/eventTarget.js#L165

I noticed that jQuery supports events on vanilla objects too so this change would align elements and objects.

The gist is that since jQuery is already adding an expando for a UID they can just use that property as the actual storage for the element.

Then all the code to recursively clean .removed'ed elements event/custom data could be removed as when the element is GC'ed that data is destroyed.

Issue reported for jQuery git

Installation issue with bower

Hello,

When I try to install jquery with bower, nothing is extracted in bower_components excepted 2 files: .bower.json and index.

Here is the output I get:
C:\npm>bower install http://github.com/jquery/jquery -V
bower jquery#* cached http://github.com/jquery/jquery#e-tag:2f8d55f95
bower jquery#* validate e-tag:2f8d55f95 against http://github.com/jquery/jquery#*
bower jquery#* new version for http://github.com/jquery/jquery#*
bower jquery#* resolve http://github.com/jquery/jquery#*
bower jquery#* download http://github.com/jquery/jquery
bower jquery#* resolved http://github.com/jquery/jquery#e-tag:ebe029cc9
bower jquery#* install jquery#e-tag:ebe029cc9

jquery#e-tag:ebe029cc9 bower_components\jquery

My system info:
Bower version: 1.3.2
Node version: 0.10.29
OS: Windows_NT 6.1.7600 x64

Is there something wrong I did?

"upload" property of the XMLHttpRequest

Originally reported by superbulldeng@… at: http://bugs.jquery.com/ticket/10190

There is a "upload" property in the xhr object returned by new XMLHttpRequest() in supported browser. But the object returned by $.ajax() seems didn't contain this property. This property is important to get the state of file upload progress.

Issue reported for jQuery 1.6.3

Method to retrieve the request headers about to be sent

The native XMLHttpRequest API doesn't have methods to get request headers. It would be useful to add one to the jqXHR object, to facilitate debugging and test automation. While $.ajaxSetup() or direct $.ajax() calls pass headers directly, a full-proof way to get request headers just before they're sent would need to take into consideration that headers can be added via beforeSend:

jqXHR.setRequestHeader('headerKey', headerValue);

User requests dating back from 2011 suggest this would be a useful feature:
http://stackoverflow.com/questions/7564007/get-sent-headers-in-an-xmlhttprequest
http://stackoverflow.com/questions/9102279/is-there-a-way-to-get-all-the-request-headers-in-a-jquery-ajax-call
... and "request headers" showing up in Google's autocomplete when searching for "jqXHR get".

SourceURL support for scripts loaded by domManip using XHRs.

Originally reported by vsevik@… at: http://bugs.jquery.com/ticket/11484

This ticket is inspired by discussion in Chrome Developer Tools mailing group:  https://groups.google.com/group/google-chrome-developer-tools/browse_thread/thread/e22f4cb5b0685dbd

SourceURL is a way to give a name to the script executed by eval() for debugging purposes. See  http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Adding sourceURL to scripts loaded by domManip would make debugging easier. example: $('head').append('<script src="test.js'></script>');

Similar (but different) request http://bugs.jquery.com/ticket/8292 was closed as wontfix earlier, so some comments on the reasons mentioned there:

This is a functionality that:

  • only developers will need while debugging

Yes, but is very valuable for developers and it comes with virtually zero cost for users.

  • is only useful for Chrome users

sourceURL is supported by Firefox and WebKit (Chrome, Safari) which makes together more than 60% of browser market share.

  • is of limited use as the names would need to be randomly generated

In the example mentioned above the url could and should be taken from the src attribute of the script tag. This is the same url the script was loaded from.

Vsevolod Vlasov, webkit reviewer

Issue reported for jQuery 1.7.1

form there is an input element name when nodeName

use jquery 2.1.1;

<form>
    <input type="text"  name="nodeName"> 
</form>

error :

Uncaught TypeError: undefined is not a function jquery-2.1.1.js:1610

1603: filter: {
1604:
1605:       "TAG": function( nodeNameSelector ) {
1606:           var nodeName = nodeNameSelector.replace( runescape, funescape ).toLowerCase();
1607:           return nodeNameSelector === "*" ?
1608:               function() { return true; } :
1609:               function( elem ) {
1610:                   return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
1611:               };
1612:       },

Preserve URL hash when requesting via $.ajax

Originally reported by pferreir at: http://bugs.jquery.com/ticket/10495

While trying to inject the Facebook "like button" JS in a page in execution time, I got some funny behavior:

var fjs = $('script:first');
$('<script/>').attr({'async': true, 'src': '//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxx'}).insertBefore(fjs)

fails (same with the equivalent before() call).

While

var fjs = $('script:first').get(0);
var e = $('<script/>').attr({'async': true, 'src': '//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxx'}).get(0);
fjs.parentNode.insertBefore(e, fjs)

works just ok.

I tried different combinations of native/jQuery elements and they all fail. This happens at least since 1.6.1.

Issue reported for jQuery git

jQuery.data first access performance very bad

Originally reported by daliuskal@… at: http://bugs.jquery.com/ticket/14839

 http://jsfiddle.net/6DLSw/12/ 2s+ first time, ~50ms later on. The first run is extremely slow.

 http://jsfiddle.net/6DLSw/13/ ~50ms when jQuery.data(el) was already called (note that the key doesn't matter).

The bug seems to have started with version 2.0.2 or so, when the jQuery.data was rewritten.

Using 1.11.0 on first case takes ~190ms first time, other times it's ~60ms.

This is affecting jquery ui performance very badly, e.g.  http://jsfiddle.net/6DLSw/6/ - first red rectangle drop takes 2s+.

Issue reported for jQuery 2.1.0

jQuery.fn.offset() returns incorrect values for elements under shadow-root

The .offset() function documentation states:

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

However in reality it returns coordinates relative to the closest parent document-fragment (shadow-root). To demonstrate this I have set up this simple test. My test also contains a simple patch which fixes the problem for the set of browsers that I tested on (Chrome 37+, Firefox 31+, IE 11). I'm not sure how to handle the set-coordinates part of the function's behavior (which I don't really use) so my patch only handles the get path.

There are a bunch of other libraries which depend on offset() which are affected by this - I've setup tests for a couple of them here and here.

Allow users to respond to other ajax event states.

Originally reported by hungerandthirst@… at: http://bugs.jquery.com/ticket/9883

The jQuery docs explicitly state that "No onreadystatechange mechanism is provided, however, since success, error, complete and statusCode cover all conceivable requirements."

Frankly I think that's limiting users unnecessarily. What if I want to respond to something when I get headers back? What if I want to know when I start receiving content back from the server?

An excellent example of this is using jQuery for bandwidth testing. Without a way to detect when I initially receive content back from the server (not just beforeSend), I will also include any delay spent waiting for the server to respond.

I've added support for the RECEIVE_HEADER and LOADING event as per the XMLHttpRequest specs in  this pull request.

I would also like to see support for onreadystatechange as well since those are valuable states that we are only limiting ourselves and losing value by not tracking.

Issue reported for jQuery git

Cannot parse <HTML> element.

Using $('<html>') I can get back a collection of a single HTMLHtmlElement, but doing this with some attributes (e.g.: $('<html class="js">'), returns an empty collection. I think this happens because the first case goes through document.createElement, while the second does not and falls into a innerHTML parser.

.width(value) sets incorrect width value if block has border and value specified in ems and box-sizing:border-box

Originally reported by tde: http://bugs.jquery.com/ticket/14038

API documentation specifies: "Note that .width("value") sets the content width of the box regardless of the value of the CSS box-sizing property."

There are two key factors leading to this bug

"box-sizing:border-box"
"border:1px solid black"
width specified in ems
Code that reproduces this bug

<html>
    <head>
        <style>
            #container {width:100%;}
            #box {border:1px solid black; margin:0 auto; box-sizing:border-box;}
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.1.js"></script>
        <script>
            var $ = jQuery.noConflict();
            $(document).ready(function() {
                $('#box').width('10em'); // width should be 10em, but jquery set it to 12em
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div id="box">
                <p>some text</p>
            </div>
        </div>
    </body>
</html>

Have $(window).outerWidth() include the scrollbar width

Originally reported by antti@… at: http://bugs.jquery.com/ticket/14989

It is sometimes annoying that $(window).width() or $(window).outerWidth() do not include the scrollbar width in their value. Especially when trying to match the window width to the CSS media queries.

Currently e.g. if you have a media query in the CSS such as

@media screen and (max-width: 1600px) {
  body {background: red;}
}

When the red background is actually applied to the document by the browser, jQuery tells the window width is less than 1600px (1600 - scrollbar width).

This is annoying e.g. in cases where there are some mobile-specific stuff that needs to be done in both, CSS and JS. And they would need to be done at the exactly same width of the document/window.

However, plain JavaScript returns 1600 as the window width when asked at the point of the breakpoint as follows:

console.log(window.innerWidth);

Is it possible to get either $(window).width() or $(windor).outerWidth() working consistently with the browser's actual width? $(document).width() and $('body').width() will not return the same as "window.innerWidth" either, they return the same as $(window).width() and $(window).outerWidth().

Fixing this would greatly help making consistent code with the CSS media queries.

Possible workarounds currently are:

  • Using plain javascript, i.e. window.innerWidth
  • Checking $('...').is(':visible') for some element that is visible only in the target width

Here's an example of what I mean:  http://jsfiddle.net/aq5vb/

Issue reported for jQuery 2.1.0

$.expr() or jQuery.exr() doesn't work as expected

$.expr() doesn't work.

It doesn't work when I want to create a user-defined selector by using the$.expr().

My code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery User Guide——user-defined selector</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <style>
        body{font-size:13px}
        div{width: 260px;padding-left: 10px;font-size: 13px;line-height: 23px;background-color: #eee;}
    </style>
</head>
<body>
    <script> 
        ;(function($){
            $.extend($.expr[':'],{
                'between':function(elem,index,match){
                    var arrSingle=match[3].split('-');
                    return arrSingle[0]<=index&&index<=arrSingle[1];
                }
            });
        })(jQuery);

        $(function(){
            for(var i=0;i<10;i++){
                $('<div>'+i+'</div>').appendTo('body');
            }
            $('div:between(3-6)').css({'background':'#555','color':'#fff'});
        });
    </script>
</body>
</html>

I search many pages and look up some books and turtorials to find the reason why the code doesn't work,but I failed.Few people use $.expr().Many people maybe have no need to create a user-defined selector.But I find the reason by comparing with the the older version jQuery finally.


I use thejquery-1.8.3.js and jquery-1.4.2.js to run this code.
It works with jquery-1.4.2.js and doesn't work with jquery-1.8.3.js.


In jquery-1.4.2.js,the $.expr()'s index argument is the true index of the element argument.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery User Guide——user-defined selector</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
        body{font-size:13px}
        div{width: 260px;padding-left: 10px;font-size: 13px;line-height: 23px;background-color: #eee;}
    </style>
</head>
<body>
    <script> 
        ;(function($){
            $.extend($.expr[':'],{
                'between':function(elem,index,match){
                    var arrSingle=match[3].split('-');
                   //index is true index of elem
                   //console.log(index);
                    return arrSingle[0]<=index&&index<=arrSingle[1];
                }
            });
        })(jQuery);

        $(function(){
            for(var i=0;i<10;i++){
                $('<div>'+i+'</div>').appendTo('body');
            }
            $('div:between(3-6)').css({'background':'#555','color':'#fff'});
        });
    </script>
</body>
</html>

In jquery-1.8.3.js the $.expr()'s index argument is 0 all the time,the index is not the true element's index.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery User Guide——user-defined selector</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <style>
        body{font-size:13px}
        div{width: 260px;padding-left: 10px;font-size: 13px;line-height: 23px;background-color: #eee;}
    </style>
</head>
<body>
    <script> 
        ;(function($){
            $.extend($.expr[':'],{
                'between':function(elem,index,match){
                    var arrSingle=match[3].split('-');
                    //the index  is 0 all the time.
                   //console.log(index);
                    return arrSingle[0]<=index&&index<=arrSingle[1];
                }
            });
        })(jQuery);

        $(function(){
            for(var i=0;i<10;i++){
                $('<div>'+i+'</div>').appendTo('body');
            }
            $('div:between(3-6)').css({'background':'#555','color':'#fff'});
        });
    </script>
</body>
</html>

I'm not sure this is a bug or not,but I can't find too much information about this by using google . I commit here and want to get some help.

IE8 Selector Bug

Problem / Issue

There's a known issue with IE8 and HTML5, that when it clones/adds a non-standard element to the page, it adds a blank prefix to the tag (and includes the colon).
Note: "non-standard" is not exactly correct, there are standard, less common elements that this also happens to.

jQuery is not selecting those blank-prefixed elements when there's a multi-stage (combo) selector. It works with find() and using the tagname without the prefix, but not when using a selector pattern like $('<ancestor> <descendant>');. Refer to the example below, for a clearer understanding.

Affected Browsers: I only know this applies to IE8. I'm doubtful that it applies to other versions of IE, but I'm not able to test.


Update

My statement above isn't exactly correct; .find() doesn't necessarily solve the issue. You'll notice inconsistent behavior when you use pseudo-selectors, such as :visible. The demo shows that the IE8 bug (prefixed colon) is not handled using jQuery, and using pseudo-selectors should at least be consistent with selecting by element tagname (whether it includes the prefixed elements, or not). That is $('some-element'); and $('some-element:visible'); should return the same results, if there are no hidden some-element.

The behavior I found in IE8 is that $('some-element:visible') acts like $('some-element:visible,\\:some-element:visible'). What I'm after is something to patch the IE prefix bug so that $('some-element') acts like $('some-element,\\:some-element').


Demo / Test Case

http://jsfiddle.net/vol7ron/9sverLdu/
http://fiddle.jshell.net/vol7ron/9sverLdu/show/ (for IE8 testing)

<some-element>
    <span>foo</span>
</some-element>



<script>
    // Add custom element to DOM for IE8
    document.createElement('some-element');


    jQuery(document).ready(function ($) {
        var $el = $('some-element');
        var $clone = $el.clone();

        // create a copy of the element after the original
        // IE8 should create an element with a blank prefix <:some-element>...</:some-element>
        $el.after($clone);

        // method 1
        outputLength( 
            "$('some-element span').length", 
            $('some-element span') 
        );

        // method 2
        outputLength( 
            "$('some-element').find('span').length", 
            $('some-element').find('span') 
        );

        // method 3
        outputLength( 
            "$('some-element span, \\\\:some-element span').length", 
            $('some-element span, \\:some-element span') 
        );


        // method 4
        outputLength( 
            "$('some-element:visible span').length", 
            $('some-element:visible span') 
        );

    });

    function outputLength(_label, _elems){
        var $label  = jQuery('<label />').html(_label + ' : ');
        var $value  = jQuery('<span  />').html(_elems.length);
        var $output = jQuery('<div />').append($label,$value);
        jQuery('body').append($output);
        console.log($output.html(), _elems);  // incase you prefer console
    }
</script>

sourceMappingURL comment not removed in bower build

Hi,

i've installed v 1.11.1 by Bower. In the minified version there's still the sourceMappingURL comment pointing to the .map file. This conflicts with what stated in the official download page

Any hint on how to circumvent this issue or on how to contribute on this?

Relative percentage values (+= / -=) work in .animate but not in .css

Originally reported by jwagner: http://bugs.jquery.com/ticket/14484

.css({'left':'+=50%'})

...moves the item by 50 pixel instead of 50%, while

.animate({'left':'+=50%'})

...works as expected (adds 50%).

The docs suggest that .css and .animate should behave identically ( http://api.jquery.com/css/):

As of jQuery 1.6, .css() accepts relative values similar to .animate().

If "similar" should really mean "similar" but not identical, it would help to give a hint in the docs that relative percentage values are not supported by .css.

The problem shows up in current Chrome, Firefox and IE10.

Fiddle to reproduce: http://jsfiddle.net/2VGgg/

Create bower.json during release, remove from repo

Since we don't commit the built file on each change, the bower.json file refers to the non-existent dist/jquery.js file. If someone tries to install from the repo as they did in gh-1671, they get confusing results. Now that we use npm for our own internal needs we could just create and commit the bower.json file at release time instead of leaving it in the repo.

IE doesn't fire `change` event on `indeterminate` input elements

Listening to the change event is not consistent across browsers.

Minimal test case:

var input = document.querySelectorAll('input')[0];

input.indeterminate = true;

$(input).on('change', function(){
    alert('change');
});

JsFiddle.

In Chrome and Firefox, the change event fires when the element is clicked. For IE11, the input needs to be clicked twice: once to remove the indeterminate state, then again to fire the change event.

It is possible to work arround this issue by manually firing the change event for indeterminate input elements.

// As other browsers already fire the change event,
// only bind the listener for IE.
if ( window.navigator.userAgent.indexOf('Trident') >= 0 ) {

    $(function(){

        // Pointer events in IE10, IE11 can be handled as mousedown.
        $(document).on('mousedown', 'input', function(){

            // Only fire the change event if the input is indeterminate.
            if ( this.indeterminate ) {
                $(this).trigger('change');
            }
        });
    });
}

I'm checking the user agent here; firing of the event could probably be detected by creating an input element and triggering click on it.

width(), height(), etc. shouldn't round

Originally reported by john at: http://bugs.jquery.com/ticket/9628

Right now we're rounding off the answers from width(), height(), etc. to the nearest pixel - this makes it hard to do good positioning of elements (especially for animations). For example if you have 3 items that are width 33% inside of a 100px element we're returning 33px for each element. Theoretically an animation method might be able to return a more interesting result if they know that there are extra fractional-numbers getting rounded off.

I got a report on this directly from Mozilla but I agree with them that this particular change makes it hard to get to good numbers.

See also: #3239.

Issue reported for jQuery 1.6.1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.