Home > Article > Web Front-end > Explanation on jquery DOM&events
Jquery DOM& events are often encountered in learning. This article will explain the jquery DOM& events in detail.
What is the difference between a library and a framework?
The library provides many methods, which are equivalent to various small tools in the warehouse. You can use them directly when you need any tools.
The framework is a shelf that has been set up. The main body has been determined and all that is needed is to fill it with various tools.
What can jquery do? What is the difference between jquery objects and DOM native objects? How to convert?
jquery can traverse HTML text, DOM node operations, event processing, animation and ajax functions, allowing you to use it on more platforms without considering compatibility.
Features are: lightweight (32kb), compatible with CSS3, cross-browser,
The difference between jquery objects and DOM native objects is that the jqery object is a packaged object of the native object. What it has is Some methods exclusive to jquery objects are very convenient to use.
The query method that directly uses the array ([index number subscript]) will be converted into a native DOM object. If the eq method is used, the result will also be a query object. To convert a native object into a jquery object, you only need to wrap it with $().
For example:
jquery object to native> $(#head)[0]
Native object to jquery> $(native object)
jquery How to bind events? What are the functions of bind, unbind, delegate, live, on, and off? Which one is recommended? How to use on to bind events and use event proxy?
In jquery, you can bind events in the following way:
$("button").click(function() {
alert(1);
} );
$("button").bind('click', function(e){ console.log(e);
alert(2);
});
$("button").on('click', function(){ console.log(e); console.log(this); console.log($(this));
});bind Add a binding event to the element (after version 1.7, it is recommended to use on instead of bind)
unbind Unbind An element binding event (method used before version 1.7)
delegate is equivalent to an event proxy (element can be specified) to add one or more binding events to the element (it is recommended to use on instead after version 1.7)
live is equivalent to using an event proxy (for the root node), adding one or more binding events to the element (abolished after version 1.7, replaced by on)
on on the selected element and add one or more event handlers on child elements (the most recommended method)
off is used to remove the event handler added by the .on() method
on() The method unifies the above methods, so it is now recommended to use the .on() method, which is written as:
$( "#members" ).on( "click","li a",function ( e ) {} );
Note here that the position of the child element is after click, which means that an event proxy is used
How does jquery show/hide elements? How to use jquery animation?
Show elements: $(selector).show(speed,callback);
Hide elements: $(selector).hide(speed,callback);
Show and Hide toggle: $(selector).toggle(speed,callback);
Fade in and out:
$(selector).fadeIn(speed,callback); //淡入 $(selector).fadeOut(speed,callback); // 淡出$(selector).fadeToggle(speed,callback); // 淡入淡出切换$(selector).fadeTo(speed,opacity,callback); //渐变到透明度
Slide in and out:
$(selector).slideDown(speed ,callback); //Slide in$(selector).slideUp(speed,callback); //Slide out$(selector).slideToggle(speed,callback); //Switch
optional The speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after hiding or displaying is completed.
jquery animation $(selector).animate({parmas},speed,callback);
params are required parameters and are the css properties of animation. Speed is an optional parameter that specifies the duration of the animation effect, taking values of slow, fast, or milliseconds. classback is the function executed after the animation is completed.
How to set and get the HTML content inside an element? How to set and get the inner text of an element?
Set or get HTML content: $(selector).html()
Set or get text content: $(selector).text()
Parameters represent settings , no parameters represent acquisition.
How to set and obtain the content input or selected by the form user? How to set and get element properties?
Set or get the form user input content $('#input').val()
Set or get the form selection content $('input:checked') or $(':checked ')
Set or get element attributes $("div").attr(e,d) e represents acquisition, d represents the attribute that needs to be set, and when it is empty, it represents acquisition
Get the band Elements with a certain attribute $('[data-img]') or $('[data-img="xxx"]')
This article explains jquery DOM& events. For more related knowledge, please Follow php Chinese website.
Related recommendations:
What is the difference between innerText and innerHTML of dom objects?
The above is the detailed content of Explanation on jquery DOM&events. For more information, please follow other related articles on the PHP Chinese website!