A brief introduction to API, events and multi-library coexistence in jQuery

This article brings you a brief introduction to the coexistence of APIs, events, and multiple libraries in jQuery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

API

prop() and attr()

prop() methods are used Changes affect the dynamic state of DOM elements rather than changing HTML attributes. For example: disabled, checked.

val()

Set or return the value of the form element (input, select, textarea).

width() and height()

Set or get the width and height values ​​​​of matching elements. The returned value is number (without unit), while $(selector ).css('width') returns a string (with unit).

offset()

Get: The return value {left: Number, top: Number} is the position relative to the document.
Settings: If the element is not positioned (i.e. position: static), it will be modified to relative.

position()

Get the position of the matching element relative to its nearest parent element with positioning (i.e. position is not static) {left: Number, top: Number}, cannot be set.

scrollLeft() and scrollTop().

Get or set the horizontal and vertical position of the element, numerical type.

The vertical scroll bar position is the height of the hidden area above the visible area of ​​the scrollable area.

If the scroll bar does not scroll at the top or the current element does not have a scroll bar, then this distance is 0.

Event

Event binding bind(), delegate() and on()

bind() was replaced by on() after 1.7, binding multiple events: $(selector).on('dblclick contextment', function(){}); on() is also compatible with zepto. But the disadvantage of both methods is that the element to be bound must exist in the document.

Syntax: $(selector).on('events'[, 'selector'][, data], handler); The first parameter can be a standard event name or a custom event ( Triggered by trigger), the second and third parameters can be omitted, the second parameter is the descendant element of the matching element, and the third parameter is the data passed to the processing function, which is received through event.data in the function.

delegate() supports dynamically created elements.

Syntax: $('p').delegate('p', 'mousemove', function(){}); Bind the mousemove event to p below the div (including those generated in the future).

Event unbinding unbind(), undelegate() and off()

Unbind all events of the matching element without passing parameters, otherwise unbind the specified parameters event.
$(selector).off('click', '**'); Unbinds the click events of all agents, but the events of the element itself will not be unbound.

Event triggering trigger() and triggerHandler()

Simple triggering: $(selector).click();
trigger() triggers events and triggers browser behavior. $(selector).trigger("click");
triggerHandler() triggers the event response method and does not trigger browser behavior. $(selector).triggerHandler("focus");

Event object event

event.data Additional data passed to the event handler

event.currentTarget is equivalent to this, which refers to the current DOM object

event.target triggers the event source, not necessarily the same as this (usually appears in the event delegate)

event.type event type

event.which mouse button type: left 1, middle 2, right 3 or keyboard code

event.keyCode keyboard code

event.pageX The mouse is relative to The position of the left edge of the document

Chain programming

Principle: return this;
Usually only setting operations can be chained operations, and the corresponding returns are returned during acquisition operations The value of this cannot be returned.
end() Ends the latest filtering operation of the current chain and returns the state before the matching element.

Multiple libraries coexist

jQuery占用了$ 和jQuery这两个变量，如果同一个页面引用了jQuery库，还引用了其他库或者其他版本的jQuery也用的了$或jQuery这个变量，为了保证每个库都能正常使用，就需要让jQuery交出变量的控制权。
$.noConflict(); 交出$
$.noConflict(true); 交出$ 和 jQuery

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    console.log($.fn.jquery); // 3.2.1
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict();
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict(true);
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 2.2.4
</script>

The above is the detailed content of A brief introduction to API, events and multi-library coexistence in jQuery. For more information, please follow other related articles on the PHP Chinese website!