Shulou(Shulou.com)06/03 Report--

This article introduces you how to understand jQuery in JavaScript, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Element operation

Create an element

Var div = $('')

Insert elements internally

/ / insert a p element into the div element at the end of $('div') .append ($(')

)) / / insert the p element into the div and put it at the end of $('

Hello

') .appendTo ($(' div')) / / insert a p element into the div element, first $('div') .prepend ($(')

)) / / insert the p element into the div and put it at the top of the $('

Hello

'). PrependTo ($(' div'))

Externally inserted element

/ / insert an element p$ ('div') .after ($(') after div

)) / / insert an element p$ ('div') .before ($(') before the div

)) / / insert the p element after the div element $('div') .insertAfter ($(')

)) / / insert the p element in front of the div element $('div') .insertBefore ($(')

'))

Replace element

/ / replace the div element with the p element $('div') .replaceWith ($('

)) / / replace div element $(') with p element

'). ReplaceAll ($(' div'))

Delete element

/ / remove all child nodes under the element $('div') .empty () / / remove yourself from the page $(' div') .remove ()

Clone element

/ / Clone a li element / / accept two parameters / / Parameter 1: whether to copy the events on your own. The default is false// parameter 2. The default is true$ ('li') .clone () for all child nodes.

Element size

Width and height of the operation element

/ / get the height of the content location of the div element, excluding padding and border$ ('div') .height () / / set the height of the div content location to 200px$ (' div'). Height (200) / / get the width of the content location of the div element, excluding padding and border$ ('div'). Width () / / set the width of the div content location to 200px$ (' div'). Width (200)

Gets the built-in width and height of the element

/ / get the height of the content location of the div element, including padding does not contain border$ ('div') .innerHeight () / / get the width of the content location of the div element, including padding does not contain border$ (' div') .innerWidth ()

Gets the external width and height of the element

/ / get the high location of div element content, including padding and border$ ('div') .outerHeight () / / get the height of div element content location, including padding and border and margin$ (' div') .outerHeight (true) / / get the width of div element content location, including padding and border$ ('div') .outerWidth () / / get div element content location, including padding and border and margin$ (' div') .outerWidth (true)

Element position

The position of the element relative to the page

/ / get the position of the div relative to the page $('div'). Offset () / get the position relative to the page as an object {left: value, top: value} / / set the relative position of the page to div $(' div'). Offset ({left: 100, top: 100}) / / get a location from 100100 in the upper left corner of the page

The offset of the element relative to the parent element

/ / get the offset of div relative to the parent element (positioning value) $('div') .position ()

Get the height and width of the scrolled page

_ window.onscroll = function () {

/ / get the height console.log ($(window) .scrollTop ())} _ window.onscroll = function () {

/ / get the width console.log ($(window) .scrollLeft ())} scrolled by the browser

Element event

The method of binding the event

/ / bind a click event $('button') .on (' click', function () {) to the button button

Console.log ('I was clicked')}) / / bind a click event to the button button with the parameter $('button'). On (' click', {name: 'Jack'}, function (e) {

Console.log (e) / / all the contents are in the event object console.log (e.data) / / {name: 'Jack'}}) / / bind the click event $(' div'). On ('click',' button', function () {) to button by way of event delegate

Console.log (this) / / button button}) / / event delegate binds the click event to button with the parameter $('div'). On (' click', 'button', {name:' Jack'}, function (e) {

Console.log (this) / / button button console.log (e.data)})

Remove event

/ / bind a click event to the button button and execute the handler function $('button'). On (' click', handler) / / remove events using off$ ('button'). Off (' click', handler)

Events that can only be executed once

/ / this event binding is on the button button / / when executed once, the $('button') .one (' click', handler) will not be executed again.

Direct trigger event

/ / when the code is executed here, the click event $('button'). Trigger (' click') of button is automatically triggered.

Common events that can be used directly

Events that can be used directly are event methods that can be used directly without using on to bind.

Click

/ / bind a click event $('div') .click (function () {) directly to div

Console.log ('I was clicked')}) / / bind a click event to div and pass the parameter $('div'). Click ({name:' Jack'}, function (e) {

Console.log (e.data)})

Dblclick

/ / bind a double-click event $('div') .dblclick (function () {) directly to div

Console.log ('I was clicked')}) / / bind a double-click event to div and pass the parameter $('div'). Dblclick ({name:' Jack'}, function (e) {

Console.log (e.data)})

Scroll

/ / bind a scrolling event $('div') .scroll (function () {) directly to div

Console.log ('I was clicked')}) / / bind a scrolling event to div and pass the parameter $('div'). Scroll ({name:' Jack'}, function (e) {

Console.log (e.data)})

Hover

/ / this event should contain two event handlers / / one is when moving in, and the other is triggering $('div') .hover (function () {) when moving out.

Console.log ('I will trigger when I move in again')}, function () {

Console.log ('I will trigger when I move out')})

Animation

Show

/ bind to div a display animation $('div'). Show () / / if the element itself is display none, it can be displayed / / bind a display animation to div / / accept three parameters / / (' div'). Show ('millisecond', 'speed', 'callback function') $('div'). Show (1000,' linear', function () {

Console.log ('I finished displaying')})

Hide

/ / bind a hidden animation $('div'). Hide () / / if the element itself is a display block state, you can hide / / bind a displayed animation to div / / accept three parameters / / (' div'). Show ('millisecond', 'speed', 'callback function') $('div'). Hide (1000,' linear', function () {

Console.log ('I'm done hiding')})

Toggle

/ bind to div a switched animation $('div'). Hide () / / element itself is shown, then hidden, then bind a displayed animation to div / / accept three parameters / / (' div'). Show ('millisecond', 'speed', 'callback function') $('div'). Toggle (1000,' linear', function () {

Console.log ('animation completed')})

Animate

/ / define a custom animation $('.show') .click (function () {

('div') .animate ({

Width: 500

Height: 300

}, 1000, 'linear', function () {

Console.log ('Animation complete')

})})

Stop

/ / customize the animation $('div') immediately. Stop () / / stop the current state

Finish

/ / end the animation immediately $('div') .finish () / / stop in the end state of the animation

On how to understand the jQuery in JavaScript to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.